For Website or Mobile Developer sometimes width and height is a problem for different sizes of devices. To fix that problem, we need to create Responsive Size
If you are using React Native, you can use this
Usually for the first step I create folder utils and create index.js on utils folder.
We need to
import {Dimension} from 'react-native'
Then we initiate for default height and width
const heightMobileUI = 896;
const widthMobileUI = 414;
after that we need to create function
export const responsiveWidth = width => {
return (Dimensions.get('window').width * width) / widthMobileUI;
};
export const responsiveHeight = height => {
return (Dimensions.get('window').height * height) / heightMobileUI;
};
Yep, we’re finish for create responsive size! The question is, how can we use that?
Here's step to using that, for example:
import ResponsiveWidth from '../utils'
// import same as location you create
<View style={{
width:responsiveWidth(100),
height: responsiveWidth(100),
backgroundColor:'red'}}>
<Text> Example </Text>
</View>
Yeayy now you already use for responsive size. You may ask why I use responsiveWidth on height? Because we use size base on width device, if device have different size it will different size also.
Top comments (0)