How to retrieve device and app information in Vega

Vega Open Beta Knowledge Base
1

For React Native for Vega apps, we now support two popular community packages react-native-device-info and react-native-localize. With these packages, you gain access to device-specific information such as OS version, device model and locale.

Vega does not support all of the methods available in react-native-device-info. For a list of supported methods in react-native-device-info, see react-native-device-info | Vega Libraries

Please use our Kepler Graphics API to query the display capabilities such as screen resolution, refresh rate, color depth/format, and HDR support for the connected display from the platform: https://developer.amazon.com/docs/vega-api/latest/kepler-graphics-overview.html

:white_check_mark: In this article, we’ll show you how to call the APIs in these packages and the example output.

Let’s begin by adding these two packages into your package.json file.

"dependencies": {
  ...
  "@amzn/react-native-device-info": "~2.0.0",
  "@amzn/react-native-localize": "~2.0.0",
}

Now, let’s retrieve the OS information and hardware details in our App.tsx file.

import { getSystemName, getSystemVersion, getModel, getDeviceType, getApplicationName, getBundleId, getVersion } from '@amzn/react-native-device-info';
...
const systemName = getSystemName(); // Example Output: "Kepler"
const systemVersion = getSystemVersion(); // Example Output: "1.1"
const model = getModel(); // Example Output: "AFTCA001"
const deviceType = getDeviceType(); // Example Output: 'TV'

With react-native-device-info, you can also retrieve app information such as using getBundleId to retrieve the package name.

const appName = getApplicationName(); // Example Output: "AwesomeApp"
const bundleId = getBundleId(); // Example Output: "com.example.awesomeApp"
const appVersion = getVersion(); // Example Output: "1.0.0"

To help localize your app, let’s use react-native-localize to retrieve the country and timezone.

import {getCountry, getTimeZone, getLocales} from "@amzn/react-native-localize";
...

const country = getCountry(); // Example Output: "FR"
const timeZone = getTimeZone(); // Example Output: "Asia/Yerevan"

Here’s an App.tsx while with all of this information pulled together.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { getSystemName, getSystemVersion, getModel, getDeviceType, getApplicationName, getBundleId, getVersion } from '@amzn/react-native-device-info';
import { getCountry, getTimeZone } from "@amzn/react-native-localize";


export const App = () => {
 //Device System Name
 const systemName = getSystemName();
 console.log(`System Name: ${systemName}`);
 // Example Output: "Kepler"


 //Device System Version
 const systemVersion = getSystemVersion();
 console.log(`System Version: ${systemVersion}`);
 // Example Output: "1.1"


 //Device Model
 const model = getModel();
 console.log(`Model: ${model}`);
 // Example Output: "AFTCA001"


 // Device Type
 const deviceType = getDeviceType();
 console.log(`Device Type: ${deviceType}`);
 // Example Output: 'TV'


 // App Name
 const appName = getApplicationName();
 console.log(`Application Name: ${appName}`);
 // Example Output: "AwesomeApp"


 // App package name
 const bundleId = getBundleId();
 console.log(`Application Package Name: ${bundleId}`);
 // Example Output: "com.example.awesomeApp"


 // App Version
 const appVersion = getVersion();
 console.log(`App Version: ${appVersion}`);
 // Example Output: "1.0.0"


 // Contry
 const country = getCountry();
 console.log(`Country: ${country}`);
 // Example Output: "US"


 // Time Zone
 const timeZone = getTimeZone();
 console.log(`Time Zone: ${timeZone}`);
 // Example Output: "Asia/Yerevan"

 return (
   <View style={styles.container}>
     <Text style={styles.text}>Please check device and app info in the console log results.</Text>
     <Text style={styles.text}>{'\n'}To view the console.log output in Visual Studio Code, go to View {'>'} Output,
     or press Ctrl+Shift+U (Windows/Linux) or Cmd+Shift+U (macOS).{'\n'}
     {'\n'}For other editors, search for an "Output" or "Console" panel.{'\n'}
     {'\n'}Once in the Output window, select the "React Native" option to see logs from your React Native app.</Text>
   </View>
 );
};

const styles = StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
     padding: 20,
     backgroundColor: '#fff',
   },
   text: {
     fontSize: 20,
     marginVertical: 3,
     textAlign: 'center',
     paddingHorizontal: 40,
   }
})