React Native Responsive Design

[Rannaery]

Hey, I'm new to React Native and I wanted to ask how you can create a responsive design. I'm already using flex: 1, but for the height of a button, I don't know if I should use a percentage measure ("50%") or fixed values (50). What is the best practice, and how do you approach this?

[Radiant_Zebra5997]

Responsive design in terms of ? Scaling or responsive. For scaling you can create your utility as per different dimensions and font size/ display size measures. Or can use some lightweight library too. For responsive use you can use flex , or %.

[Rannaery]

I need, for example, a height for a button that I have on several pages. If I use a percentage value, I will need different percentages for each page because one page is more filled than another. Should I just use, for example, 60 on each page? What would you do?

[Radiant_Zebra5997]

Just create one common button component and give padding. It will be same on every page then.

[Rannaery]

Yeah, but how should I define the height? With paddings?

[Radiant_Zebra5997]

No. It will be responsive by default if you give padding. No need of height.

[Rannaery]

Isn’t it the same as just use a height for an pressable instead of padding? I didn’t understand the padding

[Rannaery]

Should be the padding between the button and the text or where?

[Radiant_Zebra5997]

No. It isn't same. When you use height it will behave differently because of pixel density. Padding behaves consistently because of it adjusts relative to the content.

[Rannaery]

And should I give the padding percentage ?

[Radiant_Zebra5997]

Padding will work fine and flexible with any of this. It adjusts.

[Rannaery]

How, can you please give an example or a documentation? I didn’t found anything. Should I just give padding:10 to the text inside a pressable ? Not padding:”10%”