Platform Specific Code In React Native

You may want to use different code for different platforms, that means you want to display different UI for Android and different for IOS. For this you have to write platform specific code for Android and IOS. Today I will show you that how you can use platform specific code using React Native.

There are two major ways to organize code separately according to platform. They are:

1. Using Platform Module
2. Using Platform-Specific File Extensions

Platform Module

React Native provides the module to detect platform on which you are running your application. This detection logic can be used to write platform specific code. You can use this option, only when you have to write platform specific code in small part of a component.
Platform.OS results ios when you are working with ios and results android when you are working with android.

import {Platform, StyleSheet } from 'react-native';const styles = StyleSheet.create({
 height: Platform.OS === 'ios' ? 50 : 100
});

Platform.select is also available for detecting the platform and applying specific changes to them.
In the example below, flex is for both devices, background color #000000 is for ios and #ffffff is for android.

import {Platform, StyleSheet} from 'react-native';const styles = StyleSheet.create({
 container: {
   flex:1,
   ...Platform.select({
      ios: {
       backgroundColor: '#000000'
    },
     android: {
      backgroundColor: '#ffffff'
    },
  )},
 },
});

You can use platform to return platform specific components. Let’s have an example:

const Component = Platform.select({
ios: () => require('ComponentIOS'),
android: () => require('ComponentAndroid'),
})();<Component />;

Detecting IOS Version

In case of IOS, version can be determined as a result of -[UIDevice systemVersion], which is a string with the current version of the operating system. Example of system version can be “10.3”. So, to find the major version on IOS, observe the following example.

import {Platform} from 'react-native';const majorVersionIOS = parseInt(Platform.Version, 10);
if (majorVersionIOS <=9) {
  console.log('Your IOS Version is less than or equal to 9);
}

Detecting Android Version

You can use Platform module to check which android version your device is running on.

import {Platform} from 'react-native';if (Platform.Version === 25) {
  console.log('Your Android Version is Nougat');
}

Platform-specific extensions

When you are having more complex logic for specific platforms, you can split code into separate files. React native will detect file with .ios. or .android. extension and load relevant platform file when required from other components.
Let’s take an example that you have two files in you project.

LargeButton.ios.js
LargeButton.android.js

Now you can import the component as follows:

import LargeButton from './LargeButton';

React Native automatically picks the correct file according to the platform.

Native-Specific extensions (i.e. sharing code with NodeJS and Web)

You can use .native.js as extension if you want to share a module between NodeJS/Web and React Native, but it has no Andoid/IOS differences. This thing is helpful when you have same codebase for React Native and ReactJS.
For instance, there are two files in the project:

Container.js //picked up by webpack,rollup or any other web bundler
Container.native.js //picked up by react native bundler for Android                         and ios

Now you can import/require without .native as follows:

import Container form './Container';

Thus, this is how you can write the platform specific code, if needed in your application, using React Native.