ReactNative - Flatlist in ScrollView

Question

I wish to use this package in React Native, a carousel implemented with Flatlist, and enables horizontal swipe to swipe through images.

https://github.com/gusgard/react-native-swiper-flatlist

What happen is I would like to use this in a ScrollView since my screen is pretty long and requires vertical scrolling.

However if I use this package in ScrollView, images and the component doesn't load. If i use View instead of ScrollView, everything works just fine, and images load.

May I know what are the things to note in implementing Flatlist in a ScrollView component?

I tried to create snack but it doesn't seems to load remote images

https://snack.expo.io/@daveteu/scrollflatlist-test

Answer 1

You will need to restructure your component to look like this:

<View>
  <ScrollView removeClippedSubviews={false}>
    <View>
      <SwiperFlatList>
      </SwiperFlatList>
    </View>
    //Your other stuff go here that need scrollview
  </ScrollView>
</View>

Full code example:

  render() {
    return (
      <View>
        <ScrollView removeClippedSubviews={false}>
          <View style={styles.container}>
            <SwiperFlatList
              autoplay
              autoplayDelay={2}
              autoplayLoop
              index={2}
              showPagination
            >
              <View style={[styles.child, { backgroundColor: 'tomato' }]}>
                <Text style={styles.text}>1</Text>
              </View>
              <View style={[styles.child, { backgroundColor: 'thistle' }]}>
                <Text style={styles.text}>2</Text>
              </View>
              <View style={[styles.child, { backgroundColor: 'skyblue' }]}>
                <Text style={styles.text}>3</Text>
              </View>
              <View style={[styles.child, { backgroundColor: 'teal' }]}>
                <Text style={styles.text}>4</Text>
              </View>
            </SwiperFlatList>
          </View>
          ...// Your components that require scrolling go here
        </ScrollView>
      </View>
    );