CODEWITHSUNDEEP
androidreact-native
junep
junep

Reputation: 2164

How to set dimension of react native elements for showing same size in different device inch size

The question of it is quite similar with Same DPI but different inch size. But it is in case of react native for android.

For example, I made a following element.

<View style={{width: 280, height: 300, backgroundColor: '#00B0F0'}}>
</View>

And I saw it in different device simulator, one is 320x480px, mdpi, 3.2inch and another is 480x854px, mdpi, 5.4inch.

enter image description here

And each device show it like below.

enter image description here

I think, since the used values for width and height are dp, the real size of the element is different for each devices, because of different inch size not dpi.

I am web developer and in some situations I faced to make app with react native. And the issue of setting dimension is very confused.

Do I use flex? like developing responsive web ? or Is there other any other way or tips?

Thank you.

Upvotes: 0

Views: 1156

Answers (1)

Vishu Bhardwaj
Vishu Bhardwaj

Reputation: 321

I have created simple functions that scale the dimensions according to screen sizes.

export const myWidth = Dimensions.get("window").width;
export const myHeight = Dimensions.get("window").height;
const standardWidth = 375.0;
const standardHeight = 667.0;

export function widthScale (dimension) {
    return (dimension / standardWidth) * myWidth;
}

export function heightScale (dimension) {
    return (dimension / standardHeight) * myHeight;
}

Set standardWidth and standardHeight equals to window fame in zeplin or any other design tool. And simply call functions widthScale when setting horizontal dimensions like with, paddingLeft, paddingRight, marginLeft, marginRight, borderRadius.

And use heightScale in vertical dimensions. If you want to draw a square or a circle use widthScale for both dimensions.

Upvotes: 2

Related Questions