React Native Detect Device is Android or iOS Load Different Component

React Native is a cross platform native application programming language comes with platform specific code. There are two types of .JS files in react native application program, first one is index.android.js and second is index.ios.js file. The index.android.js file is used to write code which should run specifically in the Android device and the index.ios.js file’s code should run into iOS devices. So in this tutorial we would going to show detect simple Text that tells us whether our device is Android or iOS. So lets get started .

But Writing code in Both files separately gives us too much headache, So using this tutorial we could actually call separate component and write code into single file, Then copy the code into another file without any change .

Major platform specific components in iOS :

DatePickerIOS
NavigatorIOS
PickerIOS
ProgressViewIOS
SegmentedControlIOS
SnapshotViewIOS
ActionSheetIOS
AdSupportIOS
AlertIOS
ImagePickerIOS
VibrationIOS

Major platform specific components in Android :

DrawerLayoutAndroid
ProgressBarAndroid
ToolbarAndroid
ViewPagerAndroid
BackAndroid
DatePickerAndroid
PermissionsAndroid
TimePickerAndroid
ToastAndroid

How to Detect Device is Android or iOS and Load Different Component ?

React Native gives us a amazing platform recolonization library named as Platform .Using this library react native developer can specifically call component according to device.

1. Add
AppRegistry ,
StyleSheet ,
View ,
Text ,
Platform in import block.

<br />
import React, { Component } from ‘react’;</p>
<p>import { AppRegistry, StyleSheet, View, Text, Platform } from ‘react-native’;

import React, { Component } from ‘react’;

import { AppRegistry, StyleSheet, View, Text, Platform } from ‘react-native’;

2. Add View as parent view in render’s return block.

<br />
render() {</p>
<p>return (</p>
<p><View style={styles.MainContainer}></p>
<p>    );<br />
  }<br />
}

render() {

return (

);

}

3. Create custom css class named as MainContainer and TextStyle just above the AppRegistry.registerComponent line.

<br />
const styles = StyleSheet.create({</p>
<p>  MainContainer :{</p>
<p>    justifyContent: ‘center’,<br />
    flex:1,<br />
    margin: 10<br />
  },</p>
<p>  TextStyle:<br />
  {<br />
    fontSize: 24,<br />
    color: “#000”,<br />
    textAlign: ‘center’</p>
<p>  }<br />
});

const styles = StyleSheet.create({

MainContainer :{

justifyContent: ‘center’,

flex:1,

margin: 10

TextStyle:

{

fontSize: 24,

color: “#000”,

textAlign: ‘center’

}

});

4. Add { } curly brackets in the Parent View component. Now inside the curly brackets Put (Platform.OS === ‘ios’) with ? ( Ternary operator ). This should check using Platform library that the application opening platform is iOS or not. If the Platform is iOS then it will execute the first right side of statement and if the Platform isn’t iOS then it will execute the second statement.

<br />
<View style={styles.MainContainer}></p>
<p>  { (Platform.OS === ‘ios’) ? <Text style= {styles.TextStyle}> This is iOS Device. </Text> : <Text style= {styles.TextStyle}> This is Android Device. </Text> }</p>
<p></View>

{ (Platform.OS === ‘ios’) ? <Text style= {styles.TextStyle}> This is iOS Device. </Text> : <Text style= {styles.TextStyle}> This is Android Device. </Text> }

</View>

5. Complete source code for index.android.js / index.ios.js file.

<br />
import React, { Component } from ‘react’;</p>
<p>import { AppRegistry, StyleSheet, View, Text, Platform } from ‘react-native’;</p>
<p>class MainProject extends Component {</p>
<p>render() {</p>
<p>return (</p>
<p><View style={styles.MainContainer}></p>
<p>  { (Platform.OS === ‘ios’) ? <Text style= {styles.TextStyle}> This is iOS Device. </Text> : <Text style= {styles.TextStyle}> This is Android Device. </Text> }</p>
<p></View></p>
<p>    );<br />
  }<br />
}</p>
<p>const styles = StyleSheet.create({</p>
<p>  MainContainer :{</p>
<p>    justifyContent: ‘center’,<br />
    flex:1,<br />
    margin: 10<br />
  },</p>
<p>  TextStyle:<br />
  {<br />
    fontSize: 24,<br />
    color: “#000”,<br />
    textAlign: ‘center’</p>
<p>  }<br />
});</p>
<p>AppRegistry.registerComponent(‘MainProject’, () => MainProject);