How to make React-Native App Responsive without using Dimension property of react-native?

Question

I want to make the React-Native App Responsive without using Dimensions as every time it calculates the Screen Height and Width according to windows size and every time it does calculations at the Abstract level. Is there any other way to do so ??

Answer 1

After gaining experience for 1 year I want to share some tips by answering my question. I found below results for creating a Responsive React-Native Mobile App :

1)We must use Flexbox not excessive but where we want to do partition. It will responsively make partition.[using flex and flexDirection properties ]

2)Try to percentage value in width and height like width as 50% instead of hardcoded value of 10,20 etc.

3)Make use of layout-props such as alignItems, justifyContent, and flexWrap

4)Using SafeAreaView.It will ensure that our content is displayed between the visible part of the screen.

5)Using Platform in order to give style platform specific as some style that work in Android will cause issue in iOS.

Answer 2

Using Flexbox : Flexbox is a versatile layout tool that may be used to build a responsive user interface. It allows you to lay out components on the screen in a variety of ways without having to manually define sizes, locations, and margins.

Responsive Component: Components may be made responsive by altering their size and location in relation to the screen size of a device. This is possible with the aid of React's numerous accessible options. To apply CSS to any component or text, use the Style property. Create nested structures using various components based on your design requirements.

Avoid Hardcoded Values: Using hardcoded values for sizes, margins, and positions can make an app unresponsive. Instead, use platform-specific styling, relative sizing

Answer 3

you can rely on Flexbox for your layout instead of dimensions and percentages to achieve that, if I'm understanding your question correctly