How to apply multiple device layouts in React Native?

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

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.