How to make Grid in React Native
App.js:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
const App = () => {
const users = [
{
id: 1,
name: "Kavita"
},
{
id: 2,
name: "Kavita"
},
{
id: 3,
name: "Kavita"
},
{
id: 4,
name: "Kavita"
},
{
id: 5,
name: "Kavita"
},
{
id: 6,
name: "Kavita"
},
{
id: 7,
name: "Kavita"
},
{
id: 8,
name: "Kavita"
},
{
id: 9,
name: "Kavita"
},
{
id: 10,
name: "Kavita"
},
{
id: 11,
name: "Kavita"
},
{
id: 12,
name: "Kavita"
}
]
return (
<View>
<Text style={{ fontSize: 30, backgroundColor: 'green', color: 'white' }}>How to make Grid in React Native</Text>
<View style={{flex:1, flexDirection:'row', flexWrap:'wrap'}}>
{
users.map((item) => <Text style={styles.item}>{item.name}</Text>)
}
</View>
</View>
);
};
const styles=StyleSheet.create({
item:{
fontSize:25,
backgroundColor:'blue',
color:'white',
margin:2,
padding:5,
width:120,
height:120,
textAlignVertical:'center',
textAlign:'center'
}
})
export default App;
Comments
Post a Comment