Stack Overflow
Stack Overflow

Questions tagged [react-native-flatlist]

Flat lists is a component for rendering basic lists in React Native.

Documentation: here

2009 questions
94
votes
18 answers

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({ item, index }) { return( …
shalonteoh
  • 1,604
  • 1
  • 11
  • 15
84
votes
9 answers

React Native FlatList with columns, Last item width

I'm using a FlatList to show a list of items in two columns item.id } renderItem={(item) =>
Escobar5
  • 3,642
  • 6
  • 35
  • 58
83
votes
7 answers

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 able to hide it some other way. I tried using the…
sushil bansal
  • 1,172
  • 1
  • 8
  • 12
49
votes
5 answers

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 components that follow React performance best practices…
Przemek Piechota
  • 843
  • 1
  • 9
  • 18
43
votes
5 answers

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. this.handleScroll(e)} horizontal={true} …
1110
  • 7,801
  • 45
  • 156
  • 303
41
votes
13 answers

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 last item card is not completely visible maybe this…
Muhammad Talha
  • 453
  • 1
  • 5
  • 7
40
votes
9 answers

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 has a key property defined in each object in the…
jdoej
  • 483
  • 1
  • 4
  • 8
37
votes
5 answers

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, but it may be fired too early as the FlatList is…
Andrew Arthur
  • 1,455
  • 2
  • 11
  • 16
32
votes
3 answers

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 append the next 5 items to the list: data:…
Dereck
  • 493
  • 1
  • 4
  • 10
29
votes
8 answers

How to change height of in react native?

I want to change width and height of . I set the height style to the current but it never worked. I can change the height of in no way. This is my render() function and styles. render() { const…
ppianist
  • 1,659
  • 2
  • 10
  • 25
28
votes
2 answers

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 inside a ScrollView and getting onEndReached to be…
Alex Chin
  • 1,364
  • 11
  • 25
27
votes
7 answers

FlatList onEndReached being called multiple times

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 onEndReached to detect when user has scrolled to the…
Romit Kumar
  • 1,330
  • 4
  • 14
  • 29
26
votes
2 answers

React-Native text get's 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: 'center', justifyContent: 'flex-start', …
bryan
  • 7,656
  • 12
  • 65
  • 136
26
votes
4 answers

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 am sure such a trivial operation should not be…
Krishnan Sriram
  • 3,541
  • 3
  • 15
  • 21
24
votes
5 answers

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 like normal text would. But I absolutely do not…
mrmagoo
  • 343
  • 1
  • 2
  • 5
1
2 3
…
99 100