DEV Community

My React Native Stack After 1 Year

Arthur Dao on July 28, 2019

For my first post on Dev.to, I want to share my React Native project structure, configurations and some tips. It contains most of the things I've l...

Read full post

Emmanuel Oreoluwa • Jul 28 '19

How do I make ur react native app stable on different screen size
My react native app on my emulator is okay but when I test it on a smaller screen size the soon doesn't fit the screen

Arthur Dao • Jul 28 '19 • Edited

Hi. You are right, I don't know how I can forgot to talk about responsiveness. I will update that soon on my repository. Here are what I do to handle that:

Avoid as much as I can "absolute" position, hard values (100, 300, 1680,...) especially for big ones.
Instead, I use flex, and % values
I have this normalize function for adapting hard values accordingly to the screen's width or height. I might upload it on the repository later:

import { Dimensions, Platform, PixelRatio } from 'react-native';

export const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get(
  'window',
);

// based on iphone X's scale
const wscale = SCREEN_WIDTH / 375;
const hscale = SCREEN_HEIGHT / 812;

export function normalize(size, based = 'width') {
  const newSize = based === 'height' ? size * hscale : size * wscale;
  if (Platform.OS === 'ios') {
    return Math.round(PixelRatio.roundToNearestPixel(newSize));
  } else {
    return Math.round(PixelRatio.roundToNearestPixel(newSize)) - 2;
  }
}

So now I can use:

// iphone X
normalize(100) // = 100

// iphone 5s
normalize(100) // = maybe 80

// You can choose either "width" (default) or "height" depend on cases:
container = {
  width: normalize(100, "width"), // "width" is optional, it's default
  height: normalize(100, "height")
}

Before pushing, I test my work on 3 differents emulators: iphone5s (small), iphone 8 (medium) and iphone Xs Max (big)

Hope this help :D

Onur Uludağ • Sep 20

Hi Arthur, thanks for the article.

Just wanted to confirm, do we need the Math.round operation in normalize function? Since roundToNearestPixel returns a layout dimension and guarentees that it will be rendered to a non-fractional amount of pixels in the native side, I think we don't need to round once more. Also, what is the reason for 2dip difference in Android?

Thanks a lot.

Daniel Cefram Ramirez • Jul 29 '19

I'd like to also ask as to how do you deal with system font sizes? Or is that something that should be considered while designing the app beforehand?

Arthur Dao • Jul 29 '19

I use the function normalize() that I mentionned in the post so I don't have much problems with the font sizes.

Daniel Cefram Ramirez • Jul 29 '19

Oh, so that's not just for the actual screen size of the phone, but also for font sizes? TIL

Arthur Dao • Jul 29 '19

Well the function adapt a hard value like 13 depending on the screen sizes for exemple on the iPhone X the fontSize will be 13 but on the iPhone5, the fontSize is 11