import React, { useState } from 'react'; import { Button, Text, View, FlatList, } from 'react-native'; const FlatList3 =()=> { // var aray = [ // {name: 'anil', email: 'anil@test.com'}, // {name: 'ahad', email: 'ahad@test.com'}, // {name: 'Bilal', email: 'bilal@test.com'} // ] const [data, setData] = useState([ {name: "Arsal", age: 21, email: "arsalsohail373@gmail.com"}, {name: "Bilal", age: 24, email: "bilal@gmail.com"}, ]) return( <View> <Text style={{fontSize: 40, alignSelf: 'center', top:20}}> Flat List </Text> <FlatList data = {data} renderItem={({item}) => <Text style={{fontSize: 90}}>{item.name}</Text> } /> </View> ) } // class FlatList2 extends React.Component { // constructor() { // super() // this.state = // { // data2: [{ // name: "arsal", // age: 20, // email: "arsalsohail3732gmail.com" // }, // { name: "ahmed", age: 21, email: "ahmed@gmail.com" } // ] // } // } // render() { // return ( // <View> // <Text> // Flat List // </Text> // <FlatList // data={this.state.data2} // renderItem={({ item }) => // <Text>{item.name}</Text>} // /> // </View> // ) // } // } export default FlatList3;
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter