React Native: How to Determine if Device is iPhone or iPad

react-native-device-info
react-device-detect
react-native-device-info expo
react-native-device-detection
react-native detect tablet
react-native-device-info npm
react native platform
react-native-device-info timezone

I know with React Native that we have the ability to determine whether iOS or Android is being run using the Platform module, but how can we determine what device is being used on iOS?

React Native Platform - To Detect Android or iOS Device, Example to Detect Device is Android or IOS using React Native Platform If you want to start a new project with a specific React Native version, you can use the  5.2 Step 2: Plugin your iOS device / iPhone, iPod touch or iPad 5.3 Step 3: Click the device icon on the top of the screen 5.4 Step 4: Ensure you’re on the Summary tab.

Simplest approach will be using the aspect ratio. The code will be:

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

}

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

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

react-native-community/react-native-device-info, For now at least iPads have a different aspect ratio as iPhones. This could be used to detect iOS tablets at least. Not sure if it's true for Android  Click and hold (or right-click) the Start button, then choose Device Manager. Locate and expand the Portable Devices section. Look for your connected device (such as Apple iPhone), then right-click on the device name and choose Update driver. Select "Search automatically for updated driver software."

If you're looking for a way to do that without including 3rd party libraries (like react-native-device-info) you can also do:

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

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

react-native-community/react-native-device-info: Device , Device Information for React Native iOS and Android - react-native-community/​react-native-device-info. If you are upgrading from v2 to v3, check the guide out​:  If you're using a different version of com.google.android.gms:play-services-gcm in your app, you can define the googlePlayServicesVersion gradle variable in your build.gradle file to tell react-native-device-info what version it should require. See the example project included here for a sample.

You can roughly determine what iOS device is being used without any external dependencies... First query Platform.OS then the Dimensions module allows you to query the device for screen dimensions which can be translated to devices: http://iosres.com/

How to Check a Device is Tablet or not in React Native, When the method returns true then it means the app is running on a tablet. Go through the react native example given below. First of all install and  react-native-cli: 2.0.1 react-native: 0.47.1 react: 16.0.0-alpha.12 I finally managed to hook up an iOS device (iPhone 4S) to xcode and build my react native code to the device. Shaking the phone gives me the following options: as you can see there is no Live Reload option and the Reload doesn't work. I am forced to build it from xcode every

if using TypeScript, there is a type in react-native called PlatformIOSStatic, you need to force-cast Platform to PlatformIOSStatic.

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 here is pretty bad, hope RN team would improve it.

react-native-device-info, Learn about our RFC process, Open RFC meetings & more.Join in the discussion​! » react-native-device-info. 5.6.1 • Public • Published a month  Device Based SplitView in react-native(only for Tablets and iPad's ) 1. Proper way to make a react native app for iPad and tablets with landscape mode only.

react-device-detect, Detect device type and render your component according to it. true if os type is Windows Phone. isIOS, bool, returns true if os type is iOS. by Soujanya PS How to run a React Native app on iOS I recently started to develop a React-Native app on iOS. This was my first foray into native app development. I was surprised by the ease and level of abstraction provided by React-Native’s command line interface. I was also curious to understand what happens under the hood when React-Native runs an app on a device or a simulator. I spent a

Platform Specific Code · React Native, React Native provides a module that detects the platform in which the app is running. That is, if you're running on a phone, ios and android keys will take On Android, the Platform module can also be used to detect the version of the  Type the following in your command prompt to install and launch your app on the device: $ npx react-native run-android If you get a "bridge configuration isn't available" error, see Using adb reverse. Hint. You can also use the React Native CLI to generate and run a Release build (e.g. npx react-native run-android --variant=release).

Running On Simulator · React Native, If you wish to run your app on an iPhone 5s, run npx react-native run-ios You can check your available devices by running xcrun simctl list devices from the  So in this tutorial we would going to create a react native application and find at run time whether the device is in Portrait mode or Landscape mode android iOS tutorial without restarting the app using onLayout={} View method to find out the screen width and height.

Comments
  • undefined for react native 0.57
  • Platform.OS === 'ios'
  • it's Perfect solution for me.
  • This could also work on Android to detect a tablet no?
  • This will work with android but not all Android tablets have the same aspect ratio.
  • this solution return me "undefined".
  • I liked the "without any external dependencies", people let their code get so dependent on unnecessary libs my head hurts sometimes. +1
  • I certainly prefer this approach, as assuming Apple will never produce a device with a different aspect ratio is a bit risky, and this module does actually relate to models. Sadly the emulator returns "Simulator" which is a bit awkward for testing.