React Native RefreshControl in iOS shows a white line when pulling down

Question

in iOS, a white line will appear when pulling up the <ScrollView> with refreshControl, anyone knows the reasons?

<ScrollView
   removeClippedSubviews={true}
   showsVerticalScrollIndicator={false}
   refreshControl={
      <RefreshControl
         refreshing={props.listViewState.pullToRefresh}
         onRefresh={handleOnRefresh} 
      />
   }
   contentContainerStyle={{backgroundColor: 'white'}}
>
   <View> ... </View>
   <View> ... </View>
</ScrollView>

white line appears

Answer 1

I had the same issue with Flatlist. Try something like this.

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.container2}/>
        <FlatList
          data={DATA}
          renderItem={renderItem}
          keyExtractor={item => item.id}
          contentContainerStyle={{ backgroundColor: 'white' }}
          ListHeaderComponent={<View>
          <Text style={{backgroundColor:'#293541'}}>HEADER</Text></View>}
          refreshControl={
            <RefreshControl
              refreshing={refreshing}
              onRefresh={onRefresh}
              tintColor={'red'}
              backgroundColor={'#293541'}
            />
          }        
        />
    </SafeAreaView>
  );

and for styling :

container: {
    flex:1,
    marginTop: StatusBar.currentHeight || 0,
    backgroundColor: 'white',
  },
  container2: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '60%',
    backgroundColor: '#293541',
  },