CODEWITHSUNDEEP
cssreactjsreact-nativeexpostyling
Shreshth Narayan Singh
Shreshth Narayan Singh

Reputation: 55

How to make a React-Native app suitable for all dimensions?

So, I started making this app a while ago, and it is now finished, excluding the question I wanna ask. How do I make an app suitable for all sizes? I used the following 3 tools- VS Studio, Expo, React-Native. I have built an app suitable for my screen size; But when I tested it on IOS (with different dimensions), Android (with different dimensions), everything is messy. That is understandable as I simply put numbers in margins, paddings, widths, heights, etc. How do I make this app auto-adjust to all screen sizes? Please Help. This is my first time making a React-Native app.

Upvotes: 0

Views: 1594

Answers (1)

ZealousWeb
ZealousWeb

Reputation: 1751

You should check each and every screen during the app development with React Native on each platforms (Android and iOS) because it saves your time. Also you should take care of some of the things at the start of new app development. Like responsive layout, internet connection check, portrait and landscape view, etc…

Here is the way to make an app suitable for all screen sizes and dimentions.

You can use “react-native-responsive-screen” package to use fully responsive UI elements. Below is the link of that package. https://www.npmjs.com/package/react-native-responsive-screen

Also here is the link which will help you to understand, how to use it. https://medium.com/react-native-training/build-responsive-react-native-views-for-any-device-and-support-orientation-change-1c8beba5bc23

 You can see the example code in below link using expo. https://snack.expo.io/@ahmedmkamal/react-native-responsive-screen

Thanks.

Upvotes: 1

Related Questions