The screen resolution of the phone is 1920x1080, the screen resolution in the application is 640x360. How to fix it? Or should it be? The application is launched through Expo.
There are lots of devices that have unique resolution. Usually i pick some number of the most popular devices and check my app there.
You should write flexible code that will look great on most part of devices. Use flexbox and adaptive design my friend!
Dimensions in React Native are measured in density-independent pixels (dp) rather than pixels (px). This allows the user to see it at the same size regardless of the device resolution. So, while your phone is 1920x1080 in px, it is 640x360 in dp.
Related
I am very new to programming and I am currently using react native to make android applications. Now I am just testing out my code in my own physical smartphone. I want to know if it is more apt to use '%' unit in dimensions to properly scale apps in different phone sizes.
It depends upon your UI like how your UI is look like, But general approach is use react native default view property like flex, flexbox which have different property as per your UI so it will scale your UI in any point upto 99% of devices. Some of devices may very depend on resolution and screen height so for that you can use % in width and height but remember only specific condition not every where .
General View style you can refer this
https://reactnative.dev/docs/layout-props
https://reactnative.dev/docs/image-style-props
https://reactnative.dev/docs/shadow-props
https://reactnative.dev/docs/text-style-props
https://reactnative.dev/docs/view-style-props
For simple login screen UI you can refer this example so you can get idea how react native UI we can create generalize
https://code.tutsplus.com/tutorials/common-react-native-app-layouts-login-page--cms-27639
I'm having a hard time to responsive my layout from Iphone 7 to Pro Max or even in Android. On iPhone7 my display is fine but on Pro Max there's a big space below. What's the best way to implement responsive height based from Dimensions?
You should use the SafeAreaView to be sure your layout is in the range for every phone
React Native SafeAreaView
This will allow you to work in a View (which can change on every phone) but in a safe Zone to manage different phone screen.
Moreover please have a look on flex layout
React Native Flex Layout to be sure you layout will adapt the screen.
Do not hesitate to share a piece of code if you need assistance.
As explained here the react native packager works well for images with retina suffix (#2x and #3x) and platform specific suffix (.android.png, .ios.png etc.) when used individually but it fails to serve retina images when both are used at once. I tried mixing them both ways both image#2x.android.png and image.android#2x.png but only 1x image is loaded on all devices regardless of device's pixel density. I'm importing image like import image from './images/image.png'. I tried searching for this on Google and in the react-native issues but couldn't find any helpful info.
Is it a bug or I'm doing something wrong? If it's a bug then is there a workaround? If I'm doing something wrong then what's is it? I do not want the ios specific images to be bundled in android and vice-versa.
I need to get the phone native font size (set in accessibility on ios and screen settings on android). is there a way to get that parameter?
I couldn't find anything online.
I need that because whenever a user changes his phone native font size the font in the app also getting bigger(which is just fine! I want to support that) but the elements that contains it doesn't.
So I need that parameter to handle the container elements.
You can use react-native-device-info as it gives you a function getFontScale() for getting device font size in android and ios
If i make my application screen on nexus4 emulator screen and wanted to see it on small screen phones, would it be necessary to use scrollview instead of View in react-native.
In some cases yes, because scaling everything according to the screen size will make the app elements look extremely tiny on some devices and text will be hard to read. I had a similar issue where I scaled every screen according to the device resolution and customers complained about not being able to read on small devices.
What I did was wrap such screens in a ScrollView, then put a View inside it with a minHeight: screenHeight then put elements with flexbox and fixed size inside it. This way it would fit most screens perfectly and on smaller ones it would still look good enough. You should experiment a little to see what works best for your app.