I have some items in a flatList in which I have used itemSeparator component to show the divider between the list but by default flatList render divider in between items, and I need to show the divider to the bottom also, is that any way to do this.
Thanks in advance
I have tried with index but that is not working on the flatList item separator, and I do not want to customise item to show the bottom line of the item. so is it possible with item separator to show the bottom line.
You can wrap your items to CellRendererComponent https://reactnative.dev/docs/virtualizedlist#cellrenderercomponent and apply styling to it
Try just put divider in renderItem function. With this you will have clear YourItem and Divider in any element you have, or you can try use Example #2.
<View style={{flex:1}}>
<FlatList
data={DATA}
renderItem={({item}) => <><YourItem {...item} /><Divider/></>}
contentContainerStyle={{flexGrow:1}}
/>
</View>
Example #2
<View style={{flex:1}}>
<FlatList
data={DATA}
renderItem={renderYourItem}
ListFooterComponent={() => <><ItemSeparatorComponent/><CustomButton /></>}
contentContainerStyle={{flexGrow:1}}
/>
</View>
Related
Basically, I want the FlatList to have a onPress functionality (to explain simply) as well as the default scrolling functionality. Right now, if I have a FlatList inside a Pressable, then I am not able to scroll through the FlatList.
I have also tried to put Pressable inside the FlatList's RenderItem component, but I have a lot of items I'll be displaying, so it's going to inefficient.
Instead of Pressable wrapping the FlatList, I learnt that we can use React Native's Gesture Responder System on a simple View to get the behavior that I require.
<View
onStartShouldSetResponder={() => true}
onResponderRelease={doSomethingFunction}
>
<FlatList
data={someData}
renderItem={renderItemComponent}
/>
</View>
Try touch handling on FlatList item parent container like below so the scrolling issue would never come again and you can easily handle the touch on each item separately
<FlatList
style={{...}}
data={[...]}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item }) => (
<TouchableWithoutFeedback onPress={() => {...}}>
<View>
....
</View>
</TouchableWithoutFeedback>
)}
/>
I am using flatlist to render some items collected from firestore and I have a problem with ListHeaderComponent prop.
The header is placed to the left and I need to place it on the top of the 1st item (see 2nd image below) and when moved it has to be fixed with the first item of the list as the image.
Currently
Horizontal flatlist with ListHeaderComponent on the left
I need to achieve this when scrolling left:
Horizontal flatlist with ListHeaderComponent on the top of 1st item
You can separate header text from FlatList. Use Text apparently to show the header.
EDIT
If you want to scroll text with a list you can use FlatList inside ScrollView. In this case, you may disable scrolling for FlatList. Please check below for detail.
<ScrollView horizontal>
<Text>Header Text</Text>
<FlatList scrollEnabled={false} />
</ScrollView>
Okay, solved! Here's the code:
<ScrollView horizontal={true}
<View>
<Text>Header Text</Text>
<FlatList horizontal={true}
scrollEnabled={false} />
</FlatList>
</View>
</ScrollView>
Thank you #baymax :)
I have a flatList and some views in the scrollView, how to make when the flatList scroll to top, we start to scroll flatList not scrollView.
<ScrollView>
<View>
// some child views
</View>
<FlatList
data={this.props.sourceData}
renderItem={this._renderItem}
/>
<View>
.... // some child views
</View>
the scroll conflict is complex, you can try to move the header views into FlatLIst
ListHeaderComponent, and the footer views into the ListFooterComponent
<FlatList
data={DATA}
ListHeaderComponent={"your header component"}
renderItem={({ item }) => <Item title={item.title} />}
keyExtractor={item => item.id}
ListFooterComponent={"your bottom views"}
/>
you can also read my question, in the description I give some solution. I hope it can help you
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>
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.
I have a Flatlist with horizontal view that will load some items in single row. I am using columnWrapperStyle props to setting my Flatlist container but it give an error as below :
Invariant Violation: columnWrapperStyle not supported for single column lists
This is my code :
<View >
<FlatList
columnWrapperStyle={styles.flatListHomeContentContainerStyle}
horizontal={true}
data={prop1}
keyExtractor={(item, index) => item.id.toString()}
renderItem=...
.....
/>
</View>
How to fix it?
columnWrapperStyle applicable only when there are more than signle column ,must satisfy condition numColumns > 1 .
it does not support for a single column that why it showing error.
Reference: docs
I just found a solution to my own problem. Since columnWrapperStyle can't be used in FlatList horizontal, i need to apply my style to the child items inside FlatList which is using a prop containerStyle and its worked.
<FlatList
horizontal={true}
renderItem={({ item }) => (
<Card
containerStyle={styles.flatListHomeContentContainerStyle}
...
</Card>
</FlatList>
contentContainerStyle
in flatlist horizontal the number of column is 1 so columnWrapperStyle will not be applicable.
use contentContainerStyle
example:
<FlatList
horizontal
data={DATA}
renderItem={renderItem}
keyExtractor={item => item.id}
contentContainerStyle={{marginBottom: 10}}
/>