Create Responsive width and height in React Native

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.