I want to render FlatList's footer at the bottom of the page even if there is not enough content to fill the whole screen.
In order to do this, you need to take a look at react-native sources.
Here there is a code which shows adding footer internally.
As you can see it wraps into additional View which can be styled using ListFooterComponentStyle prop. It's not described for some reason in docs.
So here is the solution:
<FlatList
data={someData}
keyExtractor={item => item.id}
contentContainerStyle={{flexGrow: 1}}
ListFooterComponentStyle={{flex:1, justifyContent: 'flex-end'}}
ListFooterComponent={<Footer/>}
...
/>
UPD: Update answer using AtlasRider's comment.
Related
I am hoping someone can point what I am misunderstanding. I have placed console.log around the code but feel like I am missing something important. The way it is done is:
1 - Grab a collection of items
2 - Pass items data down to the model that support to open
3 - When open model it should show that specific item click info
PROBLEM: I am seeing the same data for every modal I keep clicking to open. Is there a reason why the data seems to be the same even though I am iterating using a FlatList
<FlatList<any>
numColumns={2}
contentContainerStyle={{
alignItems: "center",
}}
data={items}
keyExtractor={(item) => item.id}
renderItem={renderImages}
/>
return (
<View key={item.id}>
<MiniProfileModal
id={item.id}
url={item.imageURL}
userName={item.title}
showModal={showModal}
setShowModal={setShowModal}
/>
</View>
);
In most cases, Modals are not rendered on the same component tree as other components. This has more benefits as modal can overlay other components and state changes in other components will not affect modal rerender which improves performance.
To solve this problem, you need to force the modal to rerender when new items are selected to keep up with those changes.
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'm new on ReactNative development and I'm developing my first application.
I'm trying to use OnEndReached in a flat list which is in a scrollview tab. I use this scrollview because I have 3 flat lists in my application.
The first two are horizontal. For the last one, I need to handle the pagination with the onEndReached. But, When I put this last flat list in the scroll view, it doesn't work at all without any issues.
When I put it out of the scrollview, it works correctly. So I assume the issue is related to that.
Do you know how I can manage this issue? I'm sorry if this question is a basic one :(
OnEndReached doesn't call if the parent has ScrollView. Why not put those top views in the Header?
<FlatList
data={data}
renderItem={}
keyExtractor={(item, index) => item.personId}
onEndReached={() => {
console.log(" On End Reached");
}}
onEndReachedThreshold={0.01}
ListHeaderComponent={() => (
<View>
<FlatList/>
<FlatList/>
</View>
))
/>
I have a FlatList that renders a bunch of images but they fade in as I'm scrolling instead of being already rendered. I thought that the windowSize prop of FlatList makes it so that some stuff is already rendered outside the view port.
<FlatList
windowSize={8}
numColumns={columns}
maxToRenderPerBatch={4}
data={cardObjects}
renderItem={itemRender}
keyExtractor={keyExtractor}
/>
The Image component looks like:
<Image
source={{
uri: props.uri,
}}
style={{width: '100%', aspectRatio: ASPECT_RATIO}}
/>
I want the images to be already rendered such that when you scroll down it's already there.
Currently it behaves like this: https://www.youtube.com/watch?v=UFFmrAHwAQk
Flatlist renders only items that are on screen.
You can pre-render by using these 2 props
initialNumToRender={20}
maxToRenderPerBatch={20}
One more optimization when it comes to rendering images in list react-native-fast-image as recommended in official docs in react-native
I've got following layout setup:
<ScrollView>
<MyCustomView />
<FlatList />
</ScrollView>
At the moment it is working as I intended it to work i.e. user scrolls past a custom view and then hits flat list with many items in it and can continue scrolling down.
My concern is that such layout is not what FlatList is intended for i.e. will it still only render items as they are needed?
Yep, I don't think it would create much of problem here.
As Flatlist too is an kind of scrollview so it won't cause much issue over here.
Also it would be a better approach if you keep that under flatlist and fix the view you have to hit using stickyIndices which you can get in flatlist and without comprising any rendering issues or performance hitches.
<FlatList
data={ this.state.FlatListItems }
ItemSeparatorComponent={ this.FlatListItemSeparator}
renderItem={ ({item}) => (
<Text
style={styles.FlatList_Item}
onPress={this.GetItem.bind(this, item.key)}> {item.key}
</Text>
)}
ListHeaderComponent={this.Render_FlatList_Sticky_header}
stickyHeaderIndices={[0]}
/>
Flat list inside scroll view create some kind of performance issue so for solving this you need to take care of some things for more info refer to link below
https://medium.com/sanjagh/how-to-optimize-your-react-native-flatlist-946490c8c49b