react-native-device-info - Amazon Vega Docs

The react-native-device-info library allows developers access to device-specific information in React Native for Vega apps, especially TV apps. You can access information such as device name, app version, brightness, and more. This article explains why you might use this library and how to use it.

Why use react-native-device-info?

Knowing more information about a device enables you to:

Fine-tune your app’s functionality
Improve performance
Provide a better user experience

Troubleshooting and logging

Knowing the device model, OS version, and first install time can help you address environment-specific issues, crashes, or bugs when you’re debugging and maintaining apps.

User personalization

Knowing about the first install time, app version, or other device-specific features can be used to personalize the user experience. For example, you can show a welcome message for first-time users or offer different content for specific TV models.

Installation

To use the package, add the JavaScript library dependency in your app’s package.json file.

"dependencies": {
       ...
       "@amazon-devices/react-native-device-info": "~2.0.0"
    }

Import the components for whose methods you want to use. For example:

   import DeviceInfo from '@amazon-devices/react-native-device-info';

   // or ES6+ destructured imports

   import { getBaseOs, getBaseOsSync } from '@amazon-devices/react-native-device-info';

   const baseOsSync = getBaseOsSync();
   const baseOs = await getBaseOs();

How to use react-native-device-info in Vega

There are three types of methods available:

Synchronous: Use it when you need a value immediately without waiting for a promise. For example, running logic before your app renders or initializing a global configuration.
Asynchronous: Use it when you want to avoid blocking the JavaScript thread. The value requires file I/O work or the library only exposes the method as async.
Hooks: Use it when you’re inside a functional component.

Synchronous

For debugging and logging, synchronous methods get information on model, base OS, device type, app name, and application for your project. Here are some examples of how to retrieve user personalization components, synchronously.

import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet, ScrollView } from 'react-native';
import DeviceInfo from '@amazon-devices/react-native-device-info';

const DeviceDetailsApp = () => {
  const [installTime, setInstallTime] = useState(null);
  const [os, setOs] = useState('');
  const [userAgent, setUa] = useState('');
  const [brightness, setBrightness] = useState(null);

  useEffect(() => {
    DeviceInfo.getFirstInstallTime()
      .then((firstInstallTime) => {
        setInstallTime(firstInstallTime);
      })
      .catch((error) => {
        console.error('Error fetching first install time:', error);
      });

    // Fetch base operating system
    DeviceInfo.getBaseOs()
      .then((baseOs) => {
        setOs(baseOs);
      });

    // Fetch user agent
    DeviceInfo.getUserAgent()
      .then((userAgent) => {
        setUa(userAgent);
      });

    // Fetch screen brightness level
    DeviceInfo.getBrightness()
      .then((brightness) => {
        setBrightness(brightness);
      });
  }, []);

  return (
    <ScrollView contentContainerStyle={styles.container}>
      <Text style={styles.header}>Device Information</Text>

      <View style={styles.infoBox}>
        <Text style={styles.label}>First Install Time (ms):</Text>
        <Text style={styles.value}>{installTime !== null ? installTime : 'Loading...'}</Text>
      </View>

      <View style={styles.infoBox}>
        <Text style={styles.label}>Base OS:</Text>
        <Text style={styles.value}>{os || 'Loading...'}</Text>
      </View>

      <View style={styles.infoBox}>
        <Text style={styles.label}>User Agent:</Text>
        <Text style={styles.value}>{userAgent || 'Loading...'}</Text>
      </View>

      <View style={styles.infoBox}>
        <Text style={styles.label}>Screen Brightness:</Text>
        <Text style={styles.value}>{brightness !== null ? brightness : 'Loading...'}</Text>
      </View>
    </ScrollView>
  );
};
export default DeviceDetailsApp;

Output: Screenshot of the output of a Vega emulator that shows device information such as the first install time, base OS, user agent, and screen brightness.

Screenshot of the output of a Vega emulator that shows device information such as the first install time, base OS, user agent, and screen brightness.

Example 2

For debugging and logging, synchronous methods get information on model, base OS, device type, app name, and application for your project. You can also use these same methods asynchronously.

import React, {useState, useEffect} from 'react';
import DeviceInfo from '@amazon-devices/react-native-device-info';
import { View, Text, StyleSheet, ScrollView } from 'react-native';

const ExampleApp = () => {
  const MODEL = DeviceInfo.getModel();
  const DEVICE_TYPE = DeviceInfo.getDeviceType();
  const APPLICATION_NAME = DeviceInfo.getApplicationName();
  const DEVICE_ID = DeviceInfo.getDeviceId();
  const SYSTEM_VERSION = DeviceInfo.getSystemVersion();
  const APP_VERSION = DeviceInfo.getVersion();

  return (
    <ScrollView contentContainerStyle={styles.container}>
      <Text style={styles.header}>Device Information</Text>
      <View style={styles.infoBox}>
        <Text style={styles.label}>Model:</Text>
        <Text style={styles.value}>{MODEL}</Text>
      </View>
      <View style={styles.infoBox}>
        <Text style={styles.label}>Device Type:</Text>
        <Text style={styles.value}>{DEVICE_TYPE}</Text>
      </View>
      <View style={styles.infoBox}>
        <Text style={styles.label}>Application Name:</Text>
        <Text style={styles.value}>{APPLICATION_NAME}</Text>
      </View>
      <View style={styles.infoBox}>
        <Text style={styles.label}>Device ID:</Text>
        <Text style={styles.value}>{DEVICE_ID}</Text>
      </View>
      <View style={styles.infoBox}>
        <Text style={styles.label}>System Version:</Text>
        <Text style={styles.value}>{SYSTEM_VERSION}</Text>
      </View>
      <View style={styles.infoBox}>
        <Text style={styles.label}>App Version:</Text>
        <Text style={styles.value}>{APP_VERSION}</Text>
      </View>
    </ScrollView>
  );
};

export default ExampleApp;

Asynchronous

For debugging and logging, asynchronous methods get information on model, base OS, device type, app name, and application for your project. You can also use these same methods synchronously without async / await.

Example

import React, {useState, useEffect} from 'react';
import DeviceInfo from '@amazon-devices/react-native-device-info';
import { View, Text, StyleSheet, ScrollView } from 'react-native';

const ExampleApp = () => {
  const [deviceInfo, setDeviceInfo] = useState({
    model: '',
    deviceType: '',
    applicationName: '',
    deviceId: '',
    systemVersion: '',
    appVersion: ''
  });

  useEffect(() => {
    const fetchDeviceInfo = async () => {
      const model = await DeviceInfo.getModel();
      const deviceType = await DeviceInfo.getDeviceType();
      const applicationName = await DeviceInfo.getApplicationName();
      const deviceId = await DeviceInfo.getDeviceId();
      const systemVersion = await DeviceInfo.getSystemVersion();
      const appVersion = await DeviceInfo.getVersion();

      setDeviceInfo({
        model,
        deviceType,
        applicationName,
        deviceId,
        systemVersion,
        appVersion
      });
    };

    fetchDeviceInfo();
  }, []);

  return (
    <ScrollView contentContainerStyle={styles.container}>
      <Text style={styles.header}>Device Information</Text>
      <View style={styles.infoBox}>
        <Text style={styles.label}>Model:</Text>
        <Text style={styles.value}>{deviceInfo.model}</Text>
      </View>
      <View style={styles.infoBox}>
        <Text style={styles.label}>Device Type:</Text>
        <Text style={styles.value}>{deviceInfo.deviceType}</Text>
      </View>
      <View style={styles.infoBox}>
        <Text style={styles.label}>Application Name:</Text>
        <Text style={styles.value}>{deviceInfo.applicationName}</Text>
      </View>
      <View style={styles.infoBox}>
        <Text style={styles.label}>Device ID:</Text>
        <Text style={styles.value}>{deviceInfo.deviceId}</Text>
      </View>
      <View style={styles.infoBox}>
        <Text style={styles.label}>System Version:</Text>
        <Text style={styles.value}>{deviceInfo.systemVersion}</Text>
      </View>
      <View style={styles.infoBox}>
        <Text style={styles.label}>App Version:</Text>
        <Text style={styles.value}>{deviceInfo.appVersion}</Text>
      </View>
    </ScrollView>
  );
};

export default ExampleApp;

Output: Screenshot of the output of a Vega emulator that shows device information such as the model, device type, application name, device ID, system version, and app version.

Screenshot of the output of a Vega emulator that shows device information such as the model, device type, application name, device ID, system version, and app version.

Hooks

useBrightness()
useManufacturer()
useDeviceName()
useFirstInstallTime()

Here’s an example of using useDeviceName().

import { useDeviceName } from '@amzn/react-native-device-info';

const { loading, result } = useDeviceName();

<Text>{loading ? 'loading...' : result}</Text>;

Important: The following properties are not currently supported and return a blank response if used:

Location
Memory

API reference

Vega only supports the APIs mentioned in this document. Many APIs from react-native-device-info APIs are environment-specific. If there’s no implementation for an environment, the default return values are unknown for string, -1 for number, and false for Boolean. Arrays and objects are empty ([] and {} respectively). Most of the APIs return a promise but also have a corresponding API with Sync on the end that operates synchronously. For example, you might prefer to call getBaseOsSync() during your app bootstrap to avoid async calls during the first parts of app startup.

getBaseOs()

Gets the base OS build the product is based on.

DeviceInfo.getBaseOs().then((baseOs) => {
  // "Kepler"
});

getFirstInstallTime()

Gets the time in milliseconds when the app was first installed.

DeviceInfo.getFirstInstallTime().then((firstInstallTime) => {
  // 1517681764528
});

getInstallerPackageName()

The internal value used by the underlying source control to represent this build.

DeviceInfo.getInstallerPackageName().then((installerPackageName) => {
  // "com.amazon.venezia"
});

getManufacturer()

Gets the device manufacturer.

DeviceInfo.getManufacturer().then((manufacturer) => {
   // "Amazon"
});

getLastUpdateTime()

Gets the time in milliseconds when the app was last updated.

DeviceInfo.getLastUpdateTime().then((lastUpdateTime) => {
  //  1517681764992
});

getUserAgent()

Gets the device User Agent.

DeviceInfo.getUserAgent().then((userAgent) => {
  // "Kepler/1.1 (Linux; AFTCA002)"
});

Known issues

getuserAgent might not return a value in the Vega Virtual Device, but returns a value on the Fire TV Stick.

getApplicationName()

Gets the application name.

let appName = DeviceInfo.getApplicationName();
// "AwesomeApp"

getVersion()

Gets the application version.

let version = DeviceInfo.getVersion();
//  "1.0.0"

getModel()

Gets the device model.

let model = DeviceInfo.getModel();
// AFTCA001

getSystemName()

Gets the device OS name.

let systemName = DeviceInfo.getSystemName();
// "Kepler"

getSystemVersion()

Gets the device OS version.

let systemVersion = DeviceInfo.getSystemVersion();
// "1.1"

getBundleId()

Gets the application bundle identifier.

let bundleId = DeviceInfo.getBundleId();
// "com.example.awesomeApp"

getDeviceType()

Returns the device type as a string.

let type = DeviceInfo.getDeviceType();
// 'TV'
// unknown

getDeviceId()

Gets the device ID.

let deviceId = DeviceInfo.getDeviceId();
// AFTCA001

Supported versions

Package name	Amazon NPM library version	Vega OS build number	Vega SDK version	Release notes
`@amazon-devices/react-native-device-info`	2.1.0+10.11.0	OS 1.1 (201010438050)	0.20

Supported Third-Party Libraries and Services
react-native-localize — To retrieve locale-specific information such as country, timezone, and language preferences, use the react-native-localize package alongside react-native-device-info.

​Why use react-native-device-info?

​Troubleshooting and logging

​User personalization

​Installation

​How to use react-native-device-info in Vega

​Synchronous

​Example 2

​Asynchronous

​Example

​Hooks

​API reference

​getBaseOs()

​getFirstInstallTime()

​getInstallerPackageName()

​getManufacturer()

​getLastUpdateTime()

​getUserAgent()

​Known issues

​getApplicationName()

​getVersion()

​getModel()

​getSystemName()

​getSystemVersion()

​getBundleId()

​getDeviceType()

​getDeviceId()

​Supported versions

​Related topics