React Native: how to determine if an iPhone or iPad is a device

Question

I know with React Native that we have the ability to determine whether iOS or Android starts using the Platform module, but how can we determine which device is used in iOS?

Answer 1

As of February 9, 2018

 import { Platform } from 'react-native' Platform.isPad // boolean 

Keep in mind that (at the moment) it has no analogue for Android.

• IOS https://github.com/facebook/react-native/blob/master/Libraries/Utilities/Platform.ios.js#L23
• Android https://github.com/facebook/react-native/blob/master/Libraries/Utilities/Platform.android.js (no isPad!)

Answer 2

The simplest approach would be to use aspect ratio. The code will look like this:

 import { Dimensions } from 'react-native'; const {height, width} = Dimensions.get('window'); const aspectRatio = height/width; if(aspectRatio>1.6) { // Code for Iphone } else { // Code for Ipad } 

The aspect ratio of the iPad is 4: 3 (1.334) and the aspect ratio of the iPhone is 16: 9 (1.778)

Make sure you are using an iOS device using the Platform.OS === 'ios' method before applying the above logic.

Answer 3

If you are looking for a way to do this without including third-party libraries (e.g. response-native-device-info), you can also do the following:

 import { NativeModules } from 'react-native'; const { PlatformConstants } = NativeModules; const deviceType = PlatformConstants.interfaceIdiom; 

deviceType can take the values: phone , pad , tv , carplay and unknown .

Answer 4

You can roughly determine which iOS device is being used without any external dependencies ... First, request Platform.OS then the Dimensions module to request the device screen sizes that can be transferred to devices: http://iosres.com/

Answer 5

You should be able to get this information from the react-native-device-info module

https://github.com/rebeccahughes/react-native-device-info

Answer 6

There is a PlatformIOSStatic type in the responsive native, you need to force the Platform to PlatformIOSStatic when typing.

 import { Platform, PlatformIOSStatic } from 'react-native' if (Platform.OS === 'ios') { const platformIOS = Platform as PlatformIOSStatic console.log(platformIOS.isPad) console.log(platformIOS.isTVOS) } 

The interface design is pretty bad here, I hope the RN team will improve it.

Answer 7

Very simple

  import { Platform} from 'react-native' if (Platform.OS === 'android') { //do something... } 

Or if you need more information about the device:

You can use Just use NativeModules.RNDeviceInfo

There are many variables that will surely help you:

  import {NativeModules} from 'react-native' console.log("NativeModules.RNDeviceInfo", NativeModules.RNDeviceInfo) 

Output:

Answer 8

Good solution by @Maxwelll. A more accurate approach is to measure the ratio of the screen. All iPhones are 16: 9, all iPads are 3: 4.

Answer 9

$ npm install react-native-device-detection --save

$ react-native link

---

 if(Device.isIos) { } if(Device.isTablet) { } 

Answer 10

Personally , I don't like using an external component to apply simple functions, so I decided that the user:

Using EXPO

The expo contains properties that help verify device information → https://docs.expo.io/versions/latest/sdk/constants.html#expoconstantsplatform , for iOS you can use:

 import Expo from 'expo'; import React from 'react'; import { Text, View } from 'react-native'; class HomeComponent extends React.Component { render() { console.log(Expo.Constants.manifest); console.log(Expo.Constants.platform.ios.userInterfaceIdiom); return ( <View> <Text> {Expo.Constants.platform.ios.userInterfaceIdiom} </Text> </View> ); } } 

Using the React-Native API

However, my application also runs in android, then I used the solution raised by @Alex Pavtoulov:

 import React from 'react'; import { Text, View } from 'react-native'; const { height, width } = Dimensions.get('window'); const DeviceType = (height / width) > 1.6 ? 'Tablet' : 'Phone'; class HomeComponent extends React.Component { render() { return ( <View> <Text> This deice is: {DeviceType} </Text> </View> ); } }