React Native で OS判定 を実装する方法

やりたいこと

React Native で OS判定 を行い
iOS と Android で処理を出し分けたい

使用技術

• react : 18.1.0
• react-native : 0.70.2
• @types/react-native : 0.70.0
• typescript : 4.8.3

実現方法

React Native Platform を使用すれば
iOS と Android で処理を分けることは実現可能

以下に、実際のサンプルコードを記載しておきます。

iOS判定をしたい場合

Platform.OS === 'ios' で判定を行う

import { Platform } from 'react-native';
const isIOS = Platform.OS === 'ios'
console.log(isIOS)
// expected output : iOSの場合`true`になる。Androidの場合`false`になる

確認方法

yarn ios で開発環境を起動したらtrueが出力されます
yarn androidで開発環境を起動したらfalseが出力されます

Android判定をしたい場合

Platform.OS === 'android' で判定を行う

import { Platform } from 'react-native';
const isAndroid = Platform.OS === 'android'
console.log(isAndroid)
// expected output : Androidの場合`true`になる。iOSの場合`false`になる

確認方法

yarn ios で開発環境を起動したらfalseが出力されます
yarn androidで開発環境を起動したらtrueが出力されます

[おまけ] iPad判定をしたい場合

Platform を PlatformIOSStatic で型アサーションすると
isPad にドット記法でアクセスできるようになるので以下のコードで実現可能。

import { Platform, PlatformIOSStatic } from 'react-native'

if (Platform.OS === 'ios') {
  const platformIOS = Platform as PlatformIOSStatic
  console.log(platformIOS.isPad)
  // expected output : iPadの場合`true`になる。それ以外の場合`false`になる
}