React native responsive units-CodePudding

I have been watching Rect Native tutorials on youtube and everyone uses units like padding:20 or fontSize:18 etc

Is that how you do in a professional app too? What is the ideal practice? Is this automatically responsive?

CodePudding user response：

No, this is not automatically responsive. If we set padding:20, then the padding of that component stays on 20 no matter what phone we use. The same holds for font sizes, even though they are scaled depending on what pixel density we are dealing with.

A responsive design must be implemented by hand which could be done by using Dimensions as follows.

import { Dimensions } from 'react-native'

const width = Dimensions.get('window').width
const height = Dimensions.get('window').height

We can now use a different padding depending on the width of our device.

padding: width > 320 ? 20 : 15

When it comes to general layouting, then flexbox takes care of responsiveness, e.g. imagine that we have three elements on the screen with flexDirection: 'row' and we set flex:1 for all of them, then the available space will be divided equally between them no matter what our screen width is. The same applies for height.

It might be advised to create a separate Fonts file which holds font sizes and similar constants in a common place, so we only need to change them once.

import { Dimensions } from 'react-native'

const width = Dimensions.get('window').width
const height = Dimensions.get('window').height

export Fonts = {

    h1: width > 320 ? 18 : 15,
    h2: width > 320 ? 16 : 14,

   ...
}

The above takes care of responsive font sizes and we can use it in all other screens, e.g.

<Text style={{fontSize: Fonts.h1}}>I am a header</Text>