react-native-flatlist

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 title={item.username} avatar={{ uri: item.photo }} /> ) render() { console.log(this.state.myData); return ( <View style={styles.container}> <FlatList data={this.state.myData} renderItem={this.renderItem} /> </View> ); } Its works and I get the output, but the performance is slow. Rendering takes approximately 10 seconds which is annoying to the user. What should I do to make it faster? Here are some improvements you can

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 array. I have that array defined in this.state. I ran a quick print out in the console to be sure: print out of array Each object in array is defined as: var obj = {key: doc.id, value: doc.data()}; (doc and data being from another part of my app, but I know doc.id is unique) After some googling I then tried to define a Key Extractor like so:

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 able to calculate. The problem I'm facing is that I cannot scroll to the end of the list (it jumps back few rows when I try) and I'm having issues when trying to use scrollToIndex (I'm guessing due to the fact I'm missing getItemLayout ). I wrote a sample project to demonstrate the problem: import React, { Component } from 'react'; import {

Is there a way to render Flatlist rows in a certain order without sorting the data source? Example <FlatList data={[{key: 'a'}, {key: 'c'}, {key: 'b'}]} renderItem={({item}) => <Text>{item.key}</Text>} /> The above code renders a list a c b Is there a way to get it to render the following without sorting the data source? a b c Basically you are saying, I want Pizzar, but do not use sausage, meat, whatever. The answer is therefore No. In order to perform efficient sorting and ordering, you can try linq.js linq.js, in short is LINQ for JavaScript. Some particular useful/pertinent features

Im trying to call a function on onEndReached of a FlatList but it's not working. I'm calling the this.state.pageNo at the end and it's not updating. I want to use this logic later in infinite scroll but not able to get it working now. import React, { Component } from "react"; import { View, Text, StyleSheet, Button, TouchableOpacity, FlatList, Alert } from "react-native"; class InfiniteScrollRedux extends Component { constructor(props) { super(props); this.state = { loading: false, pageNo: 1, data: [ { id: 1, name: "Name01" }, { id: 2, name: "Name02" }, { id: 3, name: "Name03" }, { id: 4, name

I am using react-native FlatList component to list of items Pagination is not happening as expected , as per documentation onEndReached has to get fired when end of page is reached, currently I tried changing the values for onEndReachedThreshold ( tried 0.1, 1.0, 0.5, 0.01 ), am setting refreshing flag as well. Note: I am using ReactNative 0.48.4 So here my code <Container style={{ marginTop: 22 }}> <Content style={{ flex: 1 }} contentContainerStyle={{ flexGrow: 1 }} > <View style={{ flex: 1 }}> <FlatList initialNumToRender={10} refreshing={this.state.refreshing} onEndReachedThreshold={0.5}

FlatList has numColumns support. How to set numColumns with SectionList ? Github issue: SectionList renderItem multi item support #13192 Here is my solution to numColumns for SectionList. If you have better let me know please. class Example extends Component { static propTypes = { numColumns: PropTypes.number }; static defaultProps = { numColumns: 2 }; _renderSection = data => <Section {...data} />; _renderItem = ({ section, index }) => { const { numColumns } = this.props; if (index % numColumns !== 0) return null; const items = []; for (let i = index; i < index + numColumns; i++) { if (i >=

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 saying that the argument of the function is undefined, unless I call the argument item . Here's my code: export default class Profile extends React.Component { onLearnMore = (user) => { this.props.navigation.navigate('UserDetail', user) } render() { return ( <List> <FlatList data={data.users} renderItem={( {item} ) => { console.log(item) return (