Menu
I've got (what I thought was) a simple FlatList which renders a list of Cards (code below)
Problem: the list renders, but won't scroll to fully display the last element in the list, OR to the content below the FlatList
What I've tried: basically everything in related SO questions:
FlatList in a View or a ScrollView or bothstyle={{flex: 1}} to the FlatList or wrappers (this causes **ALL* content to disappear)Any ideas?
<FlatList
data={props.filteredProducts}
renderItem={({item}) => (
<TouchableOpacity onPress={() => props.addItemToCart(item)}>
<Card
featuredTitle={item.key}
image={require('../assets/icon.png')}
/>
</TouchableOpacity>
)}
keyExtractor={item => item.key}
ListHeaderComponent={
<SearchBar />
}
/>
...
<Other Stuff>
955
To scroll to end of FlatList after displaying the keyboard with React Native, we can set the onLayour prop to a function that calls scrollToEnd on the FlatList's ref. to set onLayout to a function that calls flatListRef. current. scrollToEnd to scroll the FlatList to the end.
Simply do following steps to get FlatList scroll. Take out the flex: 1 in your styles. cardcontainer , that should let you scroll. The FlatList/ScrollView contentContainerStyle prop wraps all the child components—what's "inside" the FlatList if you will—and should never have a defined height or flex value.
Furthermore, it provides scrolling features by default. You don't need to use extra components like ScrollView to make list data scrollable. The FlatList component also comes with the following features automatically: Header section.
When user clicks on the button then it will automatically scroll to bottom of flatlist using animation even though there are hundreds of items on the list. So in this tutorial we would learn about Example of scrollToEnd Bottom in FlatList React Native. 1.
The scrollToEnd function is used to add scroll to bottom functionality on FlatList on button click. We would call the scrollToEnd function from outside using reference of FlatList component. When user clicks on the button then it will automatically scroll to bottom of flatlist using animation even though there are hundreds of items on the list.
May 31 '18 at 11:31 When the keyboard pops up, the screen has to re-render to adjust its size. This means that the FlatList will also get new dimensions (height) and a layout event will trigger. When this occurs, we scroll to the end of the list: onLayout={() => this.flatList.scrollToEnd({animated: true})}
Every time the data source on the flat list changes, say once new data is fetched or prended to the list it resets the scroll position. I’m building some sort of user feed, so I need to be able to update the data source without messing up the users scroll position.
Add style={{flex: 1}} for each View element who is a parent for FlatList.
144
I had the same issue and just found the solution. Add the prop ListFooterComponentby giving it a React element/component. I just passed a view with the preferable height and it worked for me perfectly.
Here is the code snippet:
<FlatList
data={DATA}
renderItem={({ item }) => (<ListItem itemData={item} />) }
keyExtractor={item => item.id}
ListFooterComponent={<View style={{height: 20}}/>}
/>
This works 100%!
41
The ultimate solution is ✔
Any view/subview that holds a flatlist must have a flex of 1 - Regardless of how deep.
So if you apply this and it's not working, check your styling and make sure there's no mistake somewhere.
6
I'm not sure if your scenario is exactly the same as one I encountered on a project a few months ago, but I noticed that I had to add a margin/padding (depends on what you prefer) to lift the bottom of the scrollable container. This was usually because a parent container seemed to interfere with the styling of the scrollable element.
Have you tried adding flexGrow: 1 to your styling in place of flex?
4
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
