All Questions
Tagged with react-native react-native-flatlist
2,696
questions
155
votes
8
answers
195k
views
Hide scrollbar in FlatList (React Native) in Android
I am trying to use FlatList (React-native) in my app. I am using it horizontally and can see the scrollbar. There is an option in ScrollView to hide the scrollbar but not in FlatList. Has anyone been ...
- 1,994
130
votes
12
answers
147k
views
VirtualizedList: You have a large list that is slow to update
I use FlatList with large number of items. I get following alert from Expo XDE.
VirtualizedList: You have a large list that is slow to update - make
sure your renderItem function renders ...
- 1,663
108
votes
23
answers
193k
views
How to re-render flatlist?
Unlike ListView we can update this.state.datasource. Is there any method or example to update FlatList or re-render it?
My goal is to update the text value when user press button ...
renderEntries({ ...
- 2,064
108
votes
15
answers
146k
views
React Native FlatList with columns, Last item width
I'm using a FlatList to show a list of items in two columns
<FlatList style={{margin:5}}
data={this.state.items}
numColumns={2}
keyExtractor={(item, index) => item.id }
renderItem={(...
- 4,052
78
votes
20
answers
93k
views
React Native FlatList last item visibility issue
I am fetching products list and then displaying using a FlatList, my list contains 5 items and as you can see FlatList row height is variable because of varying description text. So the issue is my ...
- 843
66
votes
11
answers
70k
views
TypeScript React Native Flatlist: How to give renderItem the correct type of it's item?
I'm building a React Native app with TypeScript. renderItem complains that the destructured item implicitly has an any type. I googled and found this question and tried to implement what they teach ...
- 14.2k
66
votes
9
answers
83k
views
How to get currently visible index in RN flat list
I have a horizontal flat list where each item is width:300
All I am trying to do is to get index of currently visible item.
<FlatList
onScroll={(e) => this.handleScroll(e)}
...
- 7,247
61
votes
5
answers
79k
views
React-Native scroll to top with Flatlist
I'm having a lot of trouble scrolling to the top of my Flatlist so any help would be greatly appreciated!
Essentially it fetches the first 5 items from firebase, then when onEndReached is called we ...
- 783
54
votes
10
answers
133k
views
React Native - Use a keyExtractor with FlatList
I have been getting the:
"VirtualizedList: missing keys for items, make sure to specify a key property on an item or provide a custom keyExtractor"
pretty confusing..., the array i am passing it ...
- 753
47
votes
6
answers
52k
views
Scroll to end of FlatList after displaying the keyboard
I have a FlatList inside a KeyboardAvoidingView. When the keyboard is displayed I would like to scroll to the end of the FlatList.
I am listening for the 'keyboardDidShow' event which does get fired,...
- 1,593
45
votes
10
answers
65k
views
How to change height of <FlatList/> in react native?
I want to change width and height of <FlatList />.
I set the height style to the current <FlatList /> but it never worked.
I can change the height of <FlatList /> in no way.
This is ...
- 2,007
44
votes
6
answers
43k
views
FlatList onEndReached being called multiple times [duplicate]
I'm making a react native project where user can search images using Flickr API, Everything else is working fine but the problem i'm having while implementing pagination. I have used FlatList's ...
- 2,912
43
votes
11
answers
36k
views
FlatList ScrollView Error on any State Change - Invariant Violation: Changing onViewableItemsChanged on the fly is not supported
onViewableItemsChanged does not seem to work when there is a state change in the app. Is this correct?
Seems like it wouldn't be very useful if this were the case....
Otherwise, users will be forced ...
- 2,143
42
votes
13
answers
52k
views
React Native FlatList not scrolling to end
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 ...
- 2,126
42
votes
16
answers
61k
views
React native flatlist initial scroll to bottom
I am trying to create a chat in React native using a <Flatlist />
Like WhatsApp and other chat apps, the messages start at the bottom.
After fetching the messages from my API, I call
this....
- 2,658
42
votes
2
answers
44k
views
Flatlist getItemLayout usecase
Why we use getItemLayout in flatlist ,how it help to improve performance of a flatlist .check the react-native docs but didn't find a satisfying answer.
getItemLayout={(data, index) => (
{...
- 1,914
37
votes
7
answers
53k
views
React-native: how to wrap FlatList items
I have a list of Terms that are returned by a query. Each is a single word. Currently my FlatList renders each word into a button on the same row (horizontal={true})
I would like the buttons to wrap ...
- 473
35
votes
3
answers
7k
views
Tabs with FlatLists inside ScrollView - like Instagram or Twitter profile pages
I would like to have a set of tabs that each have a FlatList inside a ScrollView. This is similar to the layout of Instagram or Twitter.
I am aware that there are some issues with having a FlatList ...
- 1,642
34
votes
6
answers
34k
views
How to use KeyboardAvoidingView with FlatList?
I have a FlatList component with an Input inside each row. When I select the input I want it to scroll up above the keyboard.
My code:
return (
<KeyboardAvoidingView behavior='padding' style={{ ...
- 6,464
33
votes
2
answers
30k
views
React-Native: Get current page in FlatList when using pagingEnabled
I have a FlastList that looks like this:
<FlatList
pagingEnabled={true}
horizontal={true}
showsHorizontalScrollIndicator={false}
data={[ {key:"A"}, {key:"B"} ]}
renderItem=...
- 967
32
votes
3
answers
24k
views
React-Native text gets vertically cut off for no reason
I have an interesting bug that is happening to my text. For some reason text is randomly getting cut off like so:
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: '...
- 9,249
30
votes
6
answers
56k
views
Click listener in flatlist
How can I add click listener in Flatlist?
My code:
renderItem({item, index}){
return <View style = {{
flex:1,
margin: 5,
minWidth: 170,
maxWidth: 223,
height: 304,
...
- 3,237
30
votes
9
answers
74k
views
React Native FlatList separator between columns
I have a FlatList with multiple columns:
<FlatList
numColumns={4}
ItemSeparatorComponent={this.renderSeparator}
...
</FlatList>
And a line separator:
...
- 5,156
28
votes
7
answers
27k
views
Dynamically changing number of columns in React Native Flat List
I have a FlatList where I want to change the number of columns based on orientation. However, I get the red screen when I do this. As per the red screen error message, I'm not quite sure how I should ...
- 1,332
28
votes
7
answers
43k
views
Spacing before and after a horizontal FlatList (React Native)
I'm trying to create a horizontal FlatList that has some spacing around it. I was able to get the beginning spacing correct with paddingLeft on the list, but paddingRight on the list doesn't seem to ...
- 52.8k
28
votes
4
answers
61k
views
Highlight a selected item in React-Native FlatList
I put together a simple React-native application to gets data from a remote service, loads it in a FlatList. When a user taps on an item, it should be highlighted and selection should be retained. I ...
- 5,351
27
votes
5
answers
50k
views
How to set Refresh Indicator of FlatList in react native?
I'm trying to set the refresh indicator of flat list in react native but don't know how to do it. List View has this prop :
refreshControl={<RefreshControl
colors={["#...
- 1,019
27
votes
3
answers
22k
views
How to pass props in the component to FlatList renderItem
I have a Function as a prop in my component and I have to pass this Function Prop to another Component in the renderItem in FlastList. How to do that? Here is my code.
import React, { Component } ...
- 1,703
27
votes
6
answers
36k
views
Equivalent of FlatList from React Native in React
Is there an equivalent of the FlatList component from React Native in React? Having built a mobile app in React Native, I'm now converting it to React for a web app. (Have considered using react-...
- 1,681
26
votes
7
answers
25k
views
FlashList's rendered size is not usable
I am migrating from FlatList to FlashList, i have upgraded my expo sdk from 45.0.0 to 46.0.0 and on implementing the FlashList as in the shopify/flashlist documentation i get the following warning
...
- 581
25
votes
6
answers
26k
views
ReactNative Flatlist - RenderItem not working
So I'm trying to use React Native's FlatList renderItem property, but something very strange is happening.
The data property is set to an array which has elements which are not undefined, but then, ...
- 655
23
votes
5
answers
17k
views
Background color turns black after OnPress, when displayed on top of FlatList
Very strange behavior, I am using a FlatList, and on top of it there are 2 floating buttons (TouchableOpacity) (absolute position) and when they are pressed, their background color turns black.
This ...
- 8,773
23
votes
1
answer
49k
views
How to apply lazy loading in flatlist in react native
What is the best possible way to apply lazy load in Flatlist in react native.
Currently there is infinite scroll in the flatlist.
I am new to React native so i dont have any idea.
- 349
23
votes
4
answers
24k
views
ReactNative FlatList render all items at once?
I'm using ReactNative's new List component - FlatList.
It seems like FlatList renders all items at once even though the cell isn't actually visible on the screen.
<FlatList data={this.props.items}...
- 1,419
22
votes
4
answers
31k
views
FlatList Dynamic Height Sizing
I have an AutoComplete Box which gives me a list of autocomplete items. I display the items in FlatList, I also have a border around the FlatList. My code is given below: -
render(){
return (
<...
- 1,119
21
votes
6
answers
34k
views
How do I add gap in between items in flatlist?
I want to add some spacing in react native using flatlist, but it seems more difficult than it should be at the moment.
Turns out that react native does not support gap property, which makes this very ...
- 833
21
votes
3
answers
35k
views
React-Native FlatList performance problems with large list
My code gets Json data to an array lists the data using a FlatList. It looks like a phonebook photo and text in a row.
Here is My code:
renderItem = ({ item }) =>
(
<ListItem
...
- 213
21
votes
7
answers
19k
views
Invariant Violation: A VirtualizedList contains a cell which itself contains more than one VirtualizedList
The complete error is:
Invariant Violation: A VirtualizedList contains a cell which itself
contains more than one VirtualizedList of the same orientation as the
parent list. You must pass a ...
- 8,534
20
votes
3
answers
10k
views
How to prevent flatlist header or footer from re-render in reactnative
I put an input field in the footer of flatlist but when i try to type anything it dismiss the keyboard automatically because of the re-render of the flatlist footer..
I tried to nest the flatlist ...
- 395
20
votes
5
answers
24k
views
initialScrollIndex not working for FlatList react native
I am experiencing an issue with the initialScrollIndex of FlatList - the argument of initialScrollIndex is simply ignored and the first item is shown.
https://snack.expo.io/Bk1mkK0zZ
- 205
19
votes
7
answers
28k
views
React-Native: FlatList onRefresh not called on pull up.
Current Behavior:
I'm trying to update a list gotten from a server by pulling up on the view. When I do the onRefresh does not fire.
I've set the GET request in the callback of the setState ...
- 1,478
19
votes
1
answer
11k
views
Render FlatList footer at the bottom of the list even if content is not enough
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.
- 1,635
19
votes
5
answers
11k
views
How to improve FlatList render performance for large list with ReactNative 0.43?
I am trying to render a list of ~250 images in 3 columns using FlatList in RN0.43, and I change the width of the images in the onLayout function of the FlatList to fit the width of screen.
The ...
- 251
19
votes
4
answers
6k
views
Prevent FlatList scrolling when new items are added
I have an inverted vertical FlatList in my chat app, which shows the newest message at the bottom and the oldest message at the top (like all other chat applications)
The problem is when I want to add ...
- 2,653
18
votes
9
answers
18k
views
React Native - SectionList numColumns support
FlatList has numColumns support. How to set numColumns with SectionList?
Github issue: SectionList renderItem multi item support #13192
- 4,192
17
votes
4
answers
7k
views
TextInput inside a FlatList loses focus when off-screen
When a TextInput is focused and the user scrolls until the input leaves the visible frame the input gets blurred and the keyboard disappears. How do i fix this?
I am running the code in an Android ...
user2047749
17
votes
1
answer
9k
views
When textInput focused, first touch on flatList doesn't work, however the second works
When I type something into TextInput, then I touch one of FlatList items first time. It should console.log('item press'), but it not. Only the second touch It consoles. Does someone know the reason?
...
- 183
16
votes
6
answers
33k
views
Fixed footer in react native with FlatList
Following this question on fixed footer with a ScrollView, I'm trying to implement a fixed footer on the screen with a FlatList. I have tried to use the answer provided by putting the flat list inside ...
- 1,681
16
votes
5
answers
9k
views
Scrolling issues with FlatList when rows are variable height
I'm using a FlatList where each row can be of different height (and may contain a mix of both text and zero or more images from a remote server).
I cannot use getItemLayout because I don't know the ...
- 4,586
15
votes
6
answers
35k
views
React Native Flatlist renderItem
Working with React Native, having some issues with the FlatList component.
This is my FlatList
<FlatList
data={this.state._data}
renderItem={() => this.renderItem()}
...
