DEV Community

charismaaji
charismaaji

Posted on

4 1

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.

Sentry growth stunted Image

If you are wasting time trying to track down the cause of a crash, it’s time for a better solution. Get your crash rates to zero (or close to zero as possible) with less time and effort.

Try Sentry for more visibility into crashes, better workflow tools, and customizable alerts and reporting.

Switch Tools

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay