scrollview and flatlist override loading view

Question

I have got flatlist inside scrollview and its working fine, but both going over the loading view so I got blank view while first loading which contain both of them while first run loading.

I didn't find any questions on it.

<ScrollView style={{ backgroundColor: 'white', padding: scale(5) }} contentContainerStyle={{}}
            // scrollEventThrottle={this.onScroll}
            >
                <FlatList style={{ transform: [{ scaleX: -1 }], borderBottomWidth:1, borderBottomColor: '#eee'}} contentContainerStyle={{ justifyContent: 'center', paddingBottom: !dataFollowing ? scale(40) : scale(20), alignItems: 'flex-start', backgroundColor: 'white', paddingHorizontal: scale(10) }} horizontal data={allData}
                    showsHorizontalScrollIndicator={false}
                    showsVerticalScrollIndicator={false}
                    ListHeaderComponent={
                        <TouchableOpacity onPress={() => {
                            this.props.navigation.navigate('Search');
                        }}>
</FlatList></ScrollView>

so basically I see this scrollview over loading

You need to share your code as a minimal example or otherwise there isn't much we can do to help you with your issue. — David Scholz, Mar 13 '22 at 15:37
Hey thanks for replay so fast, I edit my post with more info. hopes its enough — guyhguy, Mar 13 '22 at 15:54
I'm still unsure what you are trying to achieve, I'm afraid. What exactly is not working in your provided code snippet? (btw. you should not nest a flatlist inside a scrollview) — David Scholz, Mar 13 '22 at 16:13
It is working, the flat list and the Scrollview are working just fine. the problem I have is when the page load, there is a flat view screen that comes from ScrollView and flat list. somehow it is rendered before the first load which runs before both of them. you can see it in the image I added(the image is when the page load) — guyhguy, Mar 13 '22 at 21:11

score 0 · Answer 1 · edited Feb 25 '23 at 13:13

As per I worked with this, I figured out that there is no need to use ScrollView as FlatList is Scrollable. If you are using FlatList inside ScrollView then it throw some warning.

This also happened same with me while using Loader with them so try : Create a state and give boolean value and in the render you would create tenrary condition (?:) .

For example data is coming from API, so if data is not fetched the isLoading state is true and Loader is running and as soon as data is fetched then setState isLoading to false and Flatlist data is rendering. If it doesn't clear or not matched with your question then please try to elaborate more I will help surely.

scrollview and flatlist override loading view

1 Answers1