DEV Community

charismaaji
charismaaji

Posted on

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;
Enter fullscreen mode Exit fullscreen mode

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;
};
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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)