ReactNativeでOSの判定と端末固有のIDおよび端末名を取得する

OS判定

• AndroidとiOSで処理を分けたい場合

import { StyleSheet, Text, View, Platform } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>          
        {Platform.OS === 'ios' ? 'IOSです' : 'Androidです'}
      </Text>
      <StatusBar style="auto" />
    </View>
  );
}

端末固有のIDを取得する

• react-native-device-infoをインストールする
• expoをリジェクトして利用するしか方法がなさそう github.com

react-native-device-infoをインストールする

npm install react-native-device-info --save

サンプルコード

• expoをリジェクトしないとgetUniqueID実行時にエラーが発生する

import { StatusBar } from 'expo-status-bar';
import React, {useState, useEffect } from 'react';
import { StyleSheet, Text, View, Platform,TouchableOpacity } from 'react-native';
import DeviceInfo from 'react-native-device-info';

const App = () => {
  const [deviceId, setDeviceId] = useState('')

  const getdeviceId = () => {
    var id = DeviceInfo.getUniqueID();
    setDeviceId(id);
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity
          onPress={getdeviceId}
          activeOpacity={0.5}
          style={styles.button}>
          <Text style={styles.TextStyle}>{ deviceId ? deviceId : '端末IDを取得する'}</Text>
      </TouchableOpacity>      
   
    </View>
  );
}
export default App

端末の機種情報を取得する

• expoだけで開発するのであれば下記をインストールする
• このライブラリは端末固有のIDを取得することができない
• 仕方ないので、端末名を表示させるサンプルを作成する

expo-deviceをインストールする

expo install expo-device

docs.expo.io

サンプルコード

import { StatusBar } from 'expo-status-bar';
import React, {useState, useEffect } from 'react';
import { StyleSheet, Text, View, Platform,TouchableOpacity } from 'react-native';
import * as Device from 'expo-device';

const App = () => {
  const [modelName, setModelName] = useState('')

  const getdeviceId = () => {
    var modelName =Device.modelName;
    setModelName(modelName);
  };

  return (
    <View style={styles.container}>
      <Text>          
        {Platform.OS === 'ios' ? 'Device is IOS' : 'Device is Android'}
      </Text>
      <TouchableOpacity
          onPress={getdeviceId}
          activeOpacity={0.5}
          style={styles.button}>
          <Text style={styles.TextStyle}>{ modelName ? modelName : '端末名を取得する'}</Text>
      </TouchableOpacity>      
      <StatusBar style="auto" />

    </View>
  );
}

開発時におきた問題と解決方法

• Expoで「Uncaught Error xx.x.x is not a valid SDK version Options..」エラーが発生したら、expo clinetのアプリを更新すると解決する

Uncaught Error 38.0.0 is not a valid SDK version Options are