React Native Detect Device is Android or iOS

This tutorial explains how to detect device is android or ios in react native application. When building a cross-platform app, you'll want to re-use as much code as possible. 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.

Sometimes we need to use platform specific components in android and ios application, in order to use platform specific components in mobile device first we need to identify whether device is android or ios.

Detect Device Using :

Platform.OS //This will return OS name ios/android

Code Snippet : 

<View style={styles.container}>
   { (Platform.OS === 'ios') ?
    <Text style= {styles.headerText}> Device is iOS Device. </Text> :
    <Text style= {styles.headerText}> Device is Android Device. </Text>
   }
</View>

Lets see the below some platform specific component in react native application.

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 :

Lets see the below simple example to detect device is android or ios application.

Step-1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step-2: Open index.android.js  / index.ios.js  in your favourite code editor and erase all code and follow this tutorial.

Step-3: Through react , react-native  packages import all required components.

 import React, { Component } from "react";
 import { Platform, StyleSheet, View, Text, Button } from "react-native";

Step-4 :  Inside the App class Implement render method and place below layout design inside the render block.

render() {
      return (
        <View style={styles.container}>
          { (Platform.OS === 'ios') ?
          <Text style= {styles.headerText}> Device is iOS Device. </Text> :
          <Text style= {styles.headerText}> Device is Android Device. </Text>
         }
        </View>
      );
}

Step-5 : Apply the below style sheet design.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems : 'center'
  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontWeight: "bold"
  },
});

Complete Source Code for App.js 

Lets see the complete source code that helps to detect device is android or ios application.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

 import React, { Component } from "react";
 import { Platform, StyleSheet, View, Text, Button } from "react-native";


 export default class App extends Component {

    render() {
      return (
        <View style={styles.container}>
          { (Platform.OS === 'ios') ?
          <Text style= {styles.headerText}> Device is iOS Device. </Text> :
          <Text style= {styles.headerText}> Device is Android Device. </Text>
         }
        </View>
      );
    }
 }

 const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems : 'center'
  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontWeight: "bold"
  },
});

Screenshot :

This is all about React Native Detect Device is Android or iOS. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.