How to check Platform and Device Details in React Native ?

React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows, and UWP by enabling developers to use the React framework along with native platform capabilities.

In this article, we will be learning how to check Platform and Device Details in React Native

Creating React Native App:

Step 1: We’ll be using expo to create the react native app. Install expo-cli using the below command in the terminal.

npm install -g expo-cli

Step 2: Create a react native project using expo.

expo init "gfg"

Step 3: Now go to the created project using the below command.

cd "gfg"

Project Structure: It will look like the following:

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. 

Example: Add the below code in the App.js file.

Javascript

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

const GfGApp = () => {

    return (
        <View style={{ marginTop: 80 }}>
            <Text style={{ fontSize: 18 }}>
                GeeksforGeeks React Native Platform</Text>
            <Text style={{ fontSize: 18 }}>
                OS:- {Platform.OS}</Text>
            <Text style={{ fontSize: 18 }}>
                Version:- {Platform.Version}</Text>
        </View>
    );
};

export default GfGApp;

Run the application: Now run the application using the below command in the terminal.

npm run web

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. 

Example: Add the below code in the App.js file.

Javascript

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

const GfGApp = () => {

    return (
        <View style={{ marginTop: 80 }}>
            <Text style={{ fontSize: 18 }}>
                GeeksforGeeks React Native Platform
            </Text>
            <Text style={{ fontSize: 18 }}>
                Constants:- {JSON.stringify(Platform.constants, null, 2)}
            </Text>
        </View>
    );
};

export default GfGApp;

Run the application: Now run the application using the below command in the terminal.

npm run web

Output: