Flat lists is a component for rendering basic lists in React Native.
Documentation: here
Questions tagged [react-native-flatlist]
2009 questions
16
votes
5 answers
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 be changing the key prop. Any help is…
Matthew Chung
- 1,152
- 1
- 13
- 29
15
votes
5 answers
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 unique listKey prop to each sibling list.
Every…
Dan
- 4,211
- 4
- 29
- 55
15
votes
2 answers
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 }) =>
(
bucsy
- 153
- 1
- 1
- 8
15
votes
6 answers
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 function, but that didn't seem to do anything.
Expected…
dmr07
- 1,198
- 2
- 14
- 35
14
votes
11 answers
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 below the FlatList
What I've tried: basically…
rubie
- 1,028
- 1
- 14
- 22
14
votes
3 answers
React Native - SectionList numColumns support
FlatList has numColumns support. How to set numColumns with SectionList?
Github issue: SectionList renderItem multi item support #13192
Pir Shukarullah Shah
- 3,635
- 18
- 40
14
votes
4 answers
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 height of each row (nor the previous ones) to be…
Gilad Novik
- 4,286
- 4
- 38
- 57
13
votes
1 answer
How to add load more records with Spinner in FlatList react-native (means -10 - 10 records) manually! not from using server side
Hi I am developing sample application based on FlatList this is my code here. Actually i showed entire records like i have 50 records to my account . But now i am displaying entire 50 records. Bur i need show 10 after adding to 10 records. But i…
Lavaraju
- 2,236
- 4
- 20
- 42
13
votes
2 answers
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={
AhmadReza Saboor
- 649
- 1
- 6
- 13
12
votes
4 answers
Prepending data to a FlatList always shows the first child
this is our FlatList, say hello:
SudoPlz
- 14,037
- 8
- 67
- 100
12
votes
3 answers
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 Emulator. On iOS this problem doesn't occur.
If you…
user2047749
12
votes
3 answers
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 } from 'react';
import { View } from…
m9m9m
- 1,129
- 15
- 25
12
votes
5 answers
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 put any space after it (if I scroll all the way to…
Saad
- 32,434
- 19
- 55
- 98
12
votes
5 answers
React Native FlatList with other Component doesn't scroll to the end
I got a page RN flatlist with textbox/button/others component, but the problem is I am not able to scroll till the end of flatlist, there is some other part was kind of overflow.
user4535674
12
votes
5 answers
React FlatList renderItem
I've seen this sort of syntax in JS before and I am just curious how it works. In the React Native Docs for FlatList, an example calls renderItem. How does this._renderItem know that what individual list item it is working with? It looks like item…
Julian
- 502
- 1
- 3
- 13