React Native: проблема с производительностью при использовании 2 плоских списков

У меня есть 2 FlatList внутри ScrollView. ScrollView и второй FlatList отстают, как только FlatList появляется в поле зрения. Я попытался сохранить только один FlatList, и он работает довольно гладко. Я также использую PureComponent для рендеринга каждого отдельного элемента для FlatList.

class HourlyItem extends React.PureComponent {
  render() {
    return (
      <View style={styles.row_2_item}>
        <Text style={styles.row_2_item_time}>11:00</Text>
        <Image source={{uri: 'icon_sun'}} style={styles.row_2_image1}/>
        <Text style={styles.row_2_item_temp}>25°</Text>
        <View style={styles.row_2_item_rain_holder}>
          <Image source={{uri: 'icon_rain_umbrella'}} style={styles.row_2_item_rain_icon}/>
          <Text style={styles.row_2_item_rain_value}>0%</Text>
        </View>
      </View>
    )
  }
}

class DailyItem extends React.PureComponent {
  render() {
    return (
      <View style={styles.row_2_item}>
        <Text style={styles.row_2_item_time}>THU</Text>
        <Image source={{uri: 'icon_cloud_sun'}} style={styles.row_2_image1}/>
        <Text style={[styles.row_2_item_temp, {fontFamily: "avenir_medium"}]}>18°/32°</Text>
        <View style={styles.row_2_item_rain_holder}>
          <Image source={{uri: 'icon_rain_umbrella'}} style={styles.row_2_item_rain_icon}/>
          <Text style={[styles.row_2_item_rain_value, {fontFamily: "avenir_medium"}]}>0%</Text>
        </View>
      </View>
    )
  }
}

export class HomePage extends Component {

_renderHourlyItem = ({item}) => (
    <HourlyItem produto={item.key}/>
  );

  _renderDailyItem = ({item}) => (
    <DailyItem produto={item.key}/>
  );

render() {

        return (
          <View style={styles.container}>
            <StatusBar hidden={true}/>

            <View style={[styles.mainHeader, {top: this.state.mainHeaderTop}]}>
              <Text style={[styles.innerHeaderTemp, {fontSize: 52,lineHeight: 53}]}>28°</Text>
              <Text style={styles.innerHeaderLocation}>Kozhikode</Text>
              <Text style={styles.innerHeaderDate}>Tuesday, Jan 17</Text>
            </View>

            <ParallaxScrollView
              onScroll={this.handleScroll}
              contentBackgroundColor="#fff"
              parallaxHeaderHeight={PARALLAX_HEADER_HEIGHT}
              backgroundSpeed={10}
              fadeOutForeground={false}

              renderBackground={() => (
                <View key="background">
                  <View style={styles.iconHolder}>
                    <Icon style={styles.searchIcon} name="ios-search" size={25} color="rgba(0,0,0,0.75)" />
                  </View>
                  <View style={[styles.iconHolder, styles.locationIconHolder]}>
                    <Icon style={styles.searchIcon} name="ios-pin" size={25} color="rgba(0,0,0,0.75)" />
                  </View>
                  <Image source={{uri: 'sun',
                                  width: width,
                                  height: 480}} style={{resizeMode: 'cover'}}/>
                </View>
              )}

              renderForeground={() => (
                <View key="parallax-header" style={[styles.parallaxHeader, {borderTopWidth: this.state.slantedHeight}]}>

                </View>
              )}>

              <View style={styles.body}>
                <View style={styles.innerHeader}>
                  <Text style={[styles.innerHeaderTemp, {fontSize: this.state.innerHeaderTempFontSize,
                                                         lineHeight: this.state.innerHeaderTempLineHeight}]}>28°</Text>
                  <Text style={styles.innerHeaderLocation}>Kozhikode</Text>
                  <Text style={styles.innerHeaderDate}>Tuesday, Jan 17</Text>
                </View>
                <Text style={styles.summary}>Light rain on Saturday through Tuesday, with temperatures falling to 28°C on Tuesday</Text>

                <View style={[styles.boxHolder, {backgroundColor: '#3a99d8', padding: 10}]}>
                  <FlatList
                    horizontal={true}
                    windowSize={5}
                    showsHorizontalScrollIndicator={false}
                    data={[{key: 'a'}, {key: 'b'}, {key: 'c'}, {key: 'd'}, {key: 'e'}, {key: 'f'}]}
                    renderItem={this._renderHourlyItem}
                  />
                </View>             

                <View style={[styles.boxHolder, {backgroundColor: '#975db4', padding: 10}]}>
                  <FlatList
                    horizontal={true}
                    windowSize={5}
                    showsHorizontalScrollIndicator={false}
                    data={[{key: 'a'}, {key: 'b'}, {key: 'c'}, {key: 'd'}, {key: 'e'}, {key: 'f'}]}
                    renderItem={this._renderDailyItem}
                  />
                </View>

              </View>
            </ParallaxScrollView>
          </View>
        );
    }

Как видите, в моих элементах FlatList много представлений. Если я удалю 2 или 3 представления, производительность станет намного лучше. Но на самом деле это невозможно, так как пользовательскому интерфейсу нужно столько просмотров.