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

i added an example on snack but doesn't seems to be able to load remote images on snack. — Someone Special
– Someone Special, Commented Aug 27, 2018 at 10:45
Try to modify your structure. See my answer below. Let me know if it works, or if that is not what you wanted. — SGhaleb
– SGhaleb, Commented Aug 27, 2018 at 10:49

SGhaleb · Accepted Answer · 2018-08-27 10:47:29Z

2

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>
    );

answered Aug 27, 2018 at 10:47

SGhaleb

1,0031 gold badge14 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Someone Special Over a year ago

It seems to work so far! thank u, i will do more modification and testing and update this thread.

gusgard Over a year ago

You should use the property “renderAll”

Syed Amir Ali Over a year ago

it is not helping me

Soban Arshad · Accepted Answer · 2020-07-06 09:43:44Z

-1

Here you go.

answered Jul 6, 2020 at 9:43

Soban Arshad

1,44121 silver badges17 bronze badges

Collectives™ on Stack Overflow

ReactNative - Flatlist in ScrollView

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related