Get Platform and Device Details in React Native

In React Native, accessing platform and device details helps developers create apps that behave correctly on different devices and operating systems. It allows customization of features and UI based on platform-specific requirements.

• React Native provides the Platform API to detect the operating system, such as Android or iOS.
• Device details help developers implement platform-specific logic and optimize performance.
• It enables creating adaptive and responsive applications based on device characteristics.

Step-by-Step Implementation

Step 1: Create a React Native Project

Now, create a project with the following command.

npx create-expo-app app-name --template

Note: Replace the app-name with your app name for example : react-native-demo-app

Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app, as clean as an empty canvas in JavaScript.

It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.

Now go into your project folder, i.e., react-native-demo

cd app-name

Project Structure

Step 2: Run  Application

Start the server by using the following command.

npx expo start

Then, the application will display a QR code.

1. For the Android users,

• For the Android Emulator, press "a" as mentioned in the image below.
• For the Physical Device, download the "Expo Go" app from the Play Store. Open the app, and you will see a button labeled "Scan QR Code." Click that button and scan the QR code; it will automatically build the Android app on your device.

2. For iOS users, simply scan the QR code using the Camera app.

3. If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.

Step 3: Start Coding

Checking the OS and Version

We can easily check the OS and version of the device the user is using. For this, we are going to use the Platform API of react-native. 

App.js:

// Import necessary components and modules from react-native
import {
  Platform, // Provides information about the platform (OS) the app is running on
  View,     // A container component for layout
  Text      // A component for displaying text
} from "react-native";

// Define the main functional component of the app
const GfGApp = () => {

  return (
    // Create a container view with margin and padding styles
    <View style={{ marginTop: 80, padding: 20 }}>
      {/* Display a title text */}
      <Text style={{ fontSize: 18 }}>
        GeeksforGeeks React Native Platform</Text>
      {/* Display the operating system name */}
      <Text style={{ fontSize: 18 }}>
        OS:- {Platform.OS}</Text>
      {/* Display the operating system version */}
      <Text style={{ fontSize: 18 }}>
        Version:- {Platform.Version}</Text>
    </View>
  );
};

// Export the component as the default export
export default GfGApp;

Output:

Checking the Device Information

We can easily check the information of the device the user is using. For this, we are going to use the Platform API of react-native. 

App.js:

// Import necessary components and modules from react-native
import { 
  Platform, // Provides information about the platform (iOS/Android)
  View,     // A container component for layout
  Text      // A component for displaying text
} from "react-native";

// Define the main functional component of the app
const GfGApp = () => {

    return (
        // Create a container view with some margin and padding
        <View style={{ marginTop: 80 , padding: 20 }}>
            {/* Display a title text */}
            <Text style={{ fontSize: 18 }}>
                GeeksforGeeks React Native Platform
            </Text>
            {/* Display platform constants as a JSON string */}
            <Text style={{ fontSize: 18 }}>
                Constants:- {JSON.stringify(Platform.constants, null, 2)}
            </Text>
        </View>
    );
};

// Export the component as the default export of the module
export default GfGApp;

Output: