How do I apply multiple device layouts in React Native?
I am new to React Native so if I am asking a very difficult question. Please let me waste your time.
I need to apply a multi-device layout in a React Native app. Let's say my app screens have completely different look and feel, but the same business processes on mobile and tablet devices.
How can I achieve this in React Native? Where do I start digging?
source to share
I am a newbie too, and from what I understood and learned from here , there are two methods:
File naming (recommended) . The platform files can be named "[filename] .android.js" and "[filename] .ios.js" for Android and iOS, respectively. If we import or require [filename], it picks up the file based on the host platform.
Adding conditional expressions to the source code . For example, if you want the background of the navigator to be different for iOS and Android, we can write the following code:
Code: backgroundColor: (Platform.OS === ‘ios’ ) ? ‘gray’ : ‘blue’
Of course, you should take a look at the official documentation .
source to share
If you are using OS based styling you can use Platform as @anfuca pointed out.If you need device based styling i.e. tabs and phones, there is a convenient react-native-device-detection module
You can do something like this in your style file
import Device from 'react-native-device-detection';
// Mobile Styles
let imageSize = 60;
// Tablet Styles
if(Device.isTablet) {
imageSize = 120;
}
Also you can create a global style file where you could define fonts and everything based on device / pixel ratio.
commonstyle.js
import Device from 'react-native-device-detection';
let h1 = 20;
let h2 = 18;
let h3 = 16;
if(Device.isTablet) {
h1 = 25;
h2 = 22;
h3 = 20;
}
module.exports = {
h1,
h2,
h3
};
source to share
You can use device detection to detect mobile phone or tablet and use separate style for mobile and tablet respectively https://www.npmjs.com/package/react-native-device-detection
source to share