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

In React Native, we can detect whether the current device is an iPhone or iPad by using the react-native-device-info library. This library provides various methods and properties to retrieve detailed device information.

First, we need to install the react-native-device-info library:

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

Alternatively, if you use yarn:

bash
yarn add react-native-device-info

After installation, you can check the device type using the following code:

jsx
import DeviceInfo from 'react-native-device-info';

// Get device type
const deviceType = DeviceInfo.getDeviceType();

if (deviceType === 'Tablet') {
  console.log('This device is an iPad');
} else {
  console.log('This device is an iPhone');
}

The getDeviceType method returns either Handset or Tablet. For iPhones, it typically returns Handset, while iPads return Tablet. This allows us to determine which device the user is using based on the returned device type.

The advantage of this method is that it is straightforward and applicable to both Android and iOS platforms, helping us handle UI adaptation for different devices more flexibly and conveniently in cross-platform development.