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.

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

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

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.

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

Screenshot in iOS device :

Detect Device

Screenshot in Android device :

Leave a Reply

Your email address will not be published. Required fields are marked *