CODEWITHSUNDEEP
react-nativereact-native-flatlist
Eshant Bist
Eshant Bist

Reputation: 1635

Flatlist covering the a element with absolute position

I was trying to make a view that I wanted to come over a flatlist so that on clicking it user can reach the top.But the flatlist was covering that element.

<View style={{backgroundColor:'#e6e6e6',flex:1,}>
    <View style={{position:'absolute'}}>
        <Text>Scroll To Reload</Text>
    </View>
    <FlatList refreshing={this.state.refresh} onRefresh={()=>this.refreshAllTweets()}
        data={tweets}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({item}) =>
        <TweetItem onPress={()=>this.goToDetail(item.id)} onImagePress={()=>this.toggleModal(item.id)}
            onCommentPress={()=>this.showComments(item.id)} tweet={item}/>}
            />
</View>

Upvotes: 0

Views: 4025

Answers (1)

Andrew
Andrew

Reputation: 28539

Each child in a view is rendered in order, and ultimately stacked on top of each other until all the children are rendered. As the view you want on the top is being rendered first it is going to be at the bottom. Change your code so that the view that you want on the top is rendered last. i.e. move it to the bottom of the view.

<View style={{backgroundColor:'#e6e6e6',flex:1}}>
  <FlatList
    refreshing={this.state.refresh}
    onRefresh={()=>this.refreshAllTweets()}
    data={tweets}
    keyExtractor={(item, index) => index.toString()}
    renderItem={({item}) => <TweetItem  onPress={()=>this.goToDetail(item.id)} onImagePress={()=>this.toggleModal(item.id)} onCommentPress={()=>this.showComments(item.id)} tweet={item}/>}
    />
  <View style={{position:'absolute', top: 0}}>
    <Text>Scroll To Reload</Text>
  </View>
</View>

As the view is now absolutely positioned you may wish to give it an actual position.

Update for comment Flatlist covering the a element with absolute position

FlatLast has a prop called ListFooterComponent it takes a React Component Class, a render function, or a rendered element. So you could update your FlatList by adding the following prop.

<FlatList
  ...
  ListFooterComponent={ 
   <View>
     <Text>Scroll To Reload</Text>
   </View>
  }
/>

This will attach the view as a footer to the FlatList, so it will be visible when the bottom of your FlatList is reached.

Check out the docs for more information about FlatLists.

Upvotes: 3

Related Questions