0

I've done a single page app in react native using native base UI kit. The page consists of a grid view with 3 rows and 3 columns. When I take the build in the emulator the grid view fit within the screen width. But after taking build on Moto-G3 and Redmi Note5-pro. I got the following screens. The problem is the last row takes the scroll. So the grid does not fit in Moto-G3. Following are the screenshots, please have a look.

1. Moto-G3

2. Redmi Note5-pro

I tried to avoid Content and used View and got this in emulator https://i.stack.imgur.com/MPkce.png

Following is my code for a single row please have a look.

<Container>
 <Content style={{padding:20,paddingLeft:8,flex:1,marginBottom:30}}>
 <Grid> 
<Row style={{marginTop:10,flex:1,marginLeft:8}}>
 <Col style={styl.col}> 
<TouchableOpacity onPress ={() => console.log("hii")}>
 <Col style={styl.col2}> 
<Image source={require('../../imgs/inquiry.png')} style={styl.image} />
 </Col>
 </TouchableOpacity> 
<Text style={styl.text}>Inquiry</Text>
 </Col>
 <Col style={styl.col}> 
<TouchableOpacity onPress ={() => console.log("hii")}> 
<Col style={styl.col2}> 
<Image source={require('../../imgs/passport.png')} style={styl.image} />
 </Col> 
</TouchableOpacity>
 <Text style={styl.text}>Visa Status Inquiry</Text> 
</Col> 
<Col style={styl.col}> 
<TouchableOpacity onPress ={() => console.log("hii")}>
 <Col style={styl.col2}> 
<Image source={require('../../imgs/document.png')} style={styl.image} />
 </Col> 
</TouchableOpacity>
 <Text style={styl.text}>Service Procedures</Text> 
</Col>
 </Row>
</Grid>
</Content>

const styl = StyleSheet.create({
  col:{
    flex:1,
     margin:10,
     marginBottom:30
   },
   col2:{
     padding:20,
     backgroundColor:"#000080",
      borderRadius:20,
      flex:1,
      elevation:10
    }, text:{
     fontSize:15,
     marginTop:10,
     textAlign:'center'
   },
   image:{
     width:40,
     height:40,
      alignSelf:'center'
    })}

What should I do to make it responsive? It is responsive for sure, but the problem is with the scroll.

Rutvik Bhatt
  • 3,185
  • 1
  • 16
  • 28
Linu Sherin
  • 1,712
  • 7
  • 38
  • 88

1 Answers1

0

The problem is that you are defining a constant size for all of your images, margins, etc...

You should use some kind of multiplier to modify this number depending on the image size or use percentages (but the percentage way could go horribly wrong, depending on the devices screen, so I use the multiplier way)

You can achieve this using react-native-size-matters package. For example: 

import { scale, verticalScale, moderateScale } from 'react-native-size-matters';

const Component = props =>
    <View style={{
        width: scale(30),
        height: verticalScale(50),
        padding: moderateScale(5)
    }}/>;

Just read the docs that I provided in the link. There is everything.

I think that you will just need to wrap the number 40 in the scale method and tweak the sizes.

Device
  • 574
  • 4
  • 19