FlatList
app.js
import React, {useState} from 'react';
import {
StyleSheet,
View,
Text,
ScrollView,
Platform,
SafeAreaView,
FlatList,
TouchableOpacity,
} from 'react-native';
const App = () => {
const items = [
{id: 1, name: 'imran', age: 32},
{id: 2, name: 'kamran', age: 22},
{id: 3, name: 'jabeel', age: 14},
{id: 4, name: 'code', age: 44},
{id: 5, name: 'with', age: 78},
{id: 6, name: 'harry', age: 32},
{id: 7, name: 'hellos', age: 31},
{id: 8, name: 'majid', age: 29},
{id: 9, name: 'sher', age: 24},
{id: 10, name: 'muhammad', age: 22},
{id: 11, name: 'asnari', age: 32},
{id: 12, name: 'kamran', age: 22},
{id: 13, name: 'jabeel', age: 14},
{id: 14, name: 'code', age: 44},
{id: 15, name: 'with', age: 78},
{id: 16, name: 'harry', age: 32},
{id: 17, name: 'hellos', age: 31},
{id: 18, name: 'majid', age: 29},
{id: 19, name: 'sher', age: 24},
{id: 20, name: 'muhammad', age: 22},
{id: 21, name: 'asnari', age: 32},
];
return (
<FlatList
horizontal={true}
data={items}
keyExtractor={item => item.id}
renderItem={({item}) => (
<View style={styles.listitems}>
<Text>
{item.name}:{item.age}
</Text>
</View>
)}>
<FlatList
data={items}
keyExtractor={item => item.id}
renderItem={({item}) => (
<View style={styles.listitems2}>
<Text>
{item.name}:{item.age}
</Text>
</View>
)}></FlatList>
</FlatList>
);
};
export default App;
const styles = StyleSheet.create({
container: {
...Platform.select({
android: {
marginTop: 10,
},
}),
},
text: {
fontSize: 22,
},
listitems: {
flex: 1,
backgroundColor: '#ccc',
margin: 10,
width: 100,
padding: 20,
justifyContent: 'flex-start',
height: 100,
alignItems: 'flex-start',
flexDirection: 'row',
},
listitems2: {
flex: 1,
},
});
****************************************************************
pkg.json
"dependencies": {
"react": "17.0.1",
"react-native": "0.64.2"
},
Comments
Post a Comment