react native flatlist

import React from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar } from 'react-native';

const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
  },
];

const Item = ({ title }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

const App = () => {
  const renderItem = ({ item }) => (
    <Item title={item.title} />
  );

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});

export default App;

Posted by: Guest on February-04-2021

<FlatList data={listing} keyExtractor={(listing) => listing.id.toString()} renderItem={({ item }) => ( <Card //function using the data in the listing title={item.title} subTitle={"₹" + item.price} image={item.image} /> )} />

const [isFetching, setIsFetching] = useState(false); const fetchData = () => { dispatch(getAllDataAction(userParamData)); setIsFetching(false); }; const onRefresh = () => { setIsFetching(true); fetchData(); }; <FlatList data={topics} keyExtractor={(item) => item.id.toString()} renderItem={renderItem} onRefresh={onRefresh} refreshing={isFetching} progressViewOffset={100} ListEmptyComponent={<Empty message="No data found." />} />;

<FlatList data={this.state.newsFeed} refreshing={this.state.refreshing} horizontal={this.state.isHorizontal} ref={ref => { this.newsFeedListRef = ref; }} renderItem={this.renderNewsFeedRow.bind(this)} keyExtractor={(item, index) => `feed_${index}`} onRefresh={this.__handleNewsFeedOnRefresh.bind(this)} //renderScrollComponent={this.renderScrollComponent.bind(this)} ListHeaderComponent={this.renderListHeaderComponent.bind(this)} getItemLayout={(data, index) => ({ index, length: ITEM_HEIGHT, offset: (ITEM_HEIGHT * index) })} />

There is no specific component like it is in react-native to do this kind of stuff, so I usually just use map() to achieve this kind of things. But if it is reusable you can surely create a List component for yourself so that you don't write map() function each time for the same list. Kind of like this: function Item(props) { return <li>{props.value}</li>; } function MyList(items) { return ( <ul> {items.map((item) => <Item key={item.key} value={item} />)} </ul> ); }

Code answers related to "react native flatlist"

Code answers related to "Javascript"

Javascript Answers by Framework

Browse Popular Code Answers by Language

Answers for "react native flatlist"

Code answers related to "react native flatlist"

Code answers related to "Javascript"

Javascript Answers by Framework

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us