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

Answer 1

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.