Как не надо использовать компоненты List и Content из NativeBase

Когда работаешь с NativeBase складывается ощущение, что все легко, просто и нет никаких подводных камней, но это только на первый взгляд.

В момент, когда я захотел использовать компонент List в который динамически подгружаются данные, я столкнулся с интересным поведением. Вместо того, чтобы загружать только часть данных, при рендере страницы зачем-то загружались все данные, что приводило к заметным притормаживаниям при открытии страницы. Мой код выглядел примерно вот так:

import { Content, List } from 'native-base';  
... 

<Content>  
    <List dataArray={items} renderRow={item => this.renderListRow(item)} />
</Content>

...

Оказалось, что блок <Content> в NativeBase - это "надстройка" над ScrollView, а <List /> - это "надстройка" над ListView. Тем, кто уже работал с React Native уже понятно в чем дело, т.к. компонент ListView уже включает в себя ScrollView и оборачивая одно в другое мы получаем, что вместо частичной подгрузки у нас загружаются все данные.

Выход из ситуации довольно простой - достаточно заменить блок <Content> на <View style={{ flex: 1 }}> и все заработает как надо. Почему разработчики NativeBase не учли столь очевидный момент - остается загадкой.

На момент написания статьи использовались следующие библиотеки:

  • native-base: 2.1.3
  • react: 16.0.0-alpha.6
  • react-native: 0.44.0