Flat lists is a component for rendering basic lists in React Native.
Documentation: here
Questions tagged [react-native-flatlist]
2009 questions
24
votes
2 answers
React-Native: Get current page in FlatList when using pagingEnabled
I have a FlastList that looks like this:
mathew
- 847
- 1
- 9
- 24
22
votes
1 answer
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) => (
{length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index,…
Rajat Gupta
- 1,531
- 1
- 5
- 17
22
votes
7 answers
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 to us onScroll in order to determine position or…
njho
- 1,227
- 2
- 17
- 28
21
votes
4 answers
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 here combined with the types in index.d.ts of the…
J. Hesters
- 8,261
- 15
- 78
- 164
21
votes
4 answers
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 (
theDC
- 5,884
- 8
- 49
- 93
21
votes
3 answers
Click listener in flatlist
How can I add click listener in Flatlist?
My code:
renderItem({item, index}){
return
Amrita Stha
- 2,139
- 2
- 18
- 31
20
votes
5 answers
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 happens only on IOS.
Code:
Render
let content =…
MCMatan
- 7,411
- 4
- 36
- 73
20
votes
6 answers
React Native FlatList separator between columns
I have a FlatList with multiple columns:
And a line separator:
renderSeparator = () => (
Avery235
- 3,198
- 6
- 32
- 72
19
votes
4 answers
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, in the renderItem function, it gives me an error…
Corrado
- 535
- 1
- 4
- 15
19
votes
5 answers
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 initial performance is ok, but after some scrolling…
John Ng
- 241
- 2
- 8
17
votes
1 answer
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.
elle kay
- 189
- 1
- 2
- 9
17
votes
9 answers
React native flatlist initial scroll to bottom
I am trying to create a chat in React native using a
yooouuri
- 1,841
- 6
- 25
- 41
17
votes
4 answers
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 (
aprofromindia
- 971
- 1
- 9
- 22
16
votes
1 answer
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?
This is my code.
Ager
- 173
- 1
- 6
16
votes
3 answers
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.
…
Rom Shiri
- 1,262
- 4
- 16
- 27