React Native - Component in Loop with Flatlist
App.js:
import React from 'react';
import { FlatList, StyleSheet, Text, View } from 'react-native';
const App = () => {
const users = [
{
id: 1,
name: "Krishan",
email: "krishan@gmail.com"
},
{
id: 1,
name: "Ram",
email: "ram@gmail.com"
},
{
id: 1,
name: "Shyam",
email: "shyam@gmail.com"
}
]
return (
<View>
<Text style={{ fontSize: 30, backgroundColor: 'blue', color: 'white' }}>Component in Loop with Flatlist</Text>
<FlatList
data={users}
renderItem={({ item }) => <UserData item={item} />}
/>
</View>
);
};
const UserData = (props) => {
const item = props.item;
return (
<View style={styles.box}>
<Text style={styles.item}>{item.name}</Text>
<Text style={styles.item}>{item.email}</Text>
</View>
)
}
const styles = StyleSheet.create({
item: {
fontSize: 20,
color: 'white',
backgroundColor: 'green',
flex: 1,
margin: 2,
padding: 5,
textAlign: 'center'
},
box: {
flexDirection: 'row',
borderWidth: 2,
borderColor: 'black'
}
})
export default App;
App.js:
import React from 'react';
import { FlatList, Text, View } from 'react-native';
import UserData from './components/UserData';
const App = () => {
const users = [
{
id: 1,
name: "Krishan",
email: "krishan@gmail.com"
},
{
id: 1,
name: "Ram",
email: "ram@gmail.com"
},
{
id: 1,
name: "Shyam",
email: "shyam@gmail.com"
}
]
return (
<View>
<Text style={{ fontSize: 30, backgroundColor: 'blue', color: 'white' }}>Component in Loop with Flatlist</Text>
<FlatList
data={users}
renderItem={({ item }) => <UserData item={item} />}
/>
</View>
);
};
export default App;
------------------------
UserData.js:
import { StyleSheet, Text, View } from 'react-native';
export default UserData = (props) => {
const item = props.item;
return (
<View style={styles.box}>
<Text style={styles.item}>{item.name}</Text>
<Text style={styles.item}>{item.email}</Text>
</View>
)
}
const styles = StyleSheet.create({
item: {
fontSize: 20,
color: 'white',
backgroundColor: 'green',
flex: 1,
margin: 2,
padding: 5,
textAlign: 'center'
},
box: {
flexDirection: 'row',
borderWidth: 2,
borderColor: 'black'
}
})
Comments
Post a Comment