How to apply multiple device layouts in React Native?

Question

I'm a newbie to React Native so if I'm asking a very dumb question. Please forgive me for wasting your time.

I need to apply multiple devices layout in my React Native app. Let's say my application screens have completely different appearances but the same business processes on mobile and tablet devices.

How do I achieve that in React Native? Where do I start digging?

Answer 1

EDIT 2020:

Ok, I was a newbie...! Sorry! Like @Hariks says, you could try to use something like this module and put something like:

import Device from 'react-native-device-detection';

// Mobile Styles
let imageSize = 60;

// Tablet Styles
if(Device.isTablet) {
  imageSize = 120;
}

Old answer: (if you want to detect OS)

I'm newbie too, and, from what I've understood, and extracted from here, there are two methods:

By naming files (recommended) Platform specific files can be named as “[filename].android.js” and “[filename].ios.js” for Android and iOS respectively. If we import or require [filename], it picks up the file depending on the host platform.

By adding conditionals in the source code For example, if you want the background of the navbar in different colors 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.

Answer 2

If you are styling based on the OS, you could use Platform as mentioned by @anfuca. If you need to style based on devices ie tabs and phone, there is a handy module react-native-device-detection

You could 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 could create a global style file where you could define fontsizes and all based on the device/pixel ratios.

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
};

Answer 3

You can use device detection for detecting mobile or tablet and use separate styling for mobile and tablet accordingly https://www.npmjs.com/package/react-native-device-detection