Hello I'm trying to create fixed (responsive) grid view with 3 cols in each row.In each column there will be an image and by clicking on that it will navigate to corresponding page.I'm using native-base ui kit.I found an easy way of creating grid view in their documentation.But the problem is when I tried to give Image within column the full width of image is not loading also when I take the out in different phones the grid view is not responsive.The reason is that I've set height and width property to col component of Grid.But if i don't set a height then nothing will render I will get a blank page.Also I haven't set height to Image because I want to render the full width of Image.How do I achieve that ? I'm expecting exactly like this
But what I'm getting is this
Following is my code
updated
<Col size={33.33}>
<TouchableOpacity onPress ={() => this.props.navigation.navigate("Header")}>
<Image source={require('../../imgs/eco.jpg')} style={styl.image} />
</TouchableOpacity>
</Col>
<Col size={33.33}>
<TouchableOpacity onPress ={() => this.props.navigation.navigate("Footer")}>
<Image source={require('../../imgs/file.jpg')} style={styl.image} />
</TouchableOpacity>
</Col>
<Col size={33.33}>
<TouchableOpacity onPress ={() => this.props.navigation.navigate("NHBadge") }>
<Image source={require('../../imgs/economy.jpg')} style={styl.image} />
</TouchableOpacity>
</Col>
</Row>
</Grid>
style
col:{
flex:1,
margin:5,
width:120,
height:200
},
col2:{
flex:1,
padding:90,
backgroundColor:"#ddd",
alignItems:'center',
margin:5,
height:200,
width:120,
},
image:{
flex:1,
position: 'absolute',
justifyContent: 'center',
alignItems: 'center',
},
textStyle:{
color:'white',
fontSize:15,
fontWeight:'bold',
alignSelf:'center'
},
viewStyle:{
position: 'absolute',
justifyContent: 'center',
alignItems: 'center',
top: 0,
left: 0,
right: 0,
bottom: 0
},
The full width of image is not loading also how do I make the 3 cols fit in screen without adding height and width properties?Please help me to figure out the mistake in my code.Any help would be really appreciable.Thank you
