CODEWITHSUNDEEP
javascriptreact-nativedynamic-island
Kevin Amiranoff
Kevin Amiranoff

Reputation: 14523

React Native: How to detect phone with dynamic island?

Is it possible to target phones (iPhone 14 Pro and iPhone 14 Pro Max) with dynamic islands with React Native?

Upvotes: 3

Views: 7824

Answers (3)

Awais Saifi
Awais Saifi

Reputation: 73

You can use react-native-device-info's hasDynamicIsland() method.

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

let hasDynamicIsland = DeviceInfo.hasDynamicIsland();
// true

here is the link for more info react-native-device-info - hasDynamicIsland()

Upvotes: 0

Soliman
Soliman

Reputation: 371

You can simply detect an iPhone with a dynamic island by using react-native-safe-area-context by getting the height/top of it, if it was 59 then this iPhone has a dynamic island

import { useSafeAreaInsets } from 'react-native-safe-area-context';
const insets = useSafeAreaInsets();
console.log(insets.top == 59 ? true : false ) // has dynamic 


// this is some of the other heights of other iPhones
59 - iPhone 14 Pro / 14Pro Max
50 - iPhone 13 mini
47 - iPhone 12 / 12Pro / 13 / 13Pro / 13Pro Max / 14 / 14 Plus
44 - on iPhoneX
20 - on iOS device

Upvotes: 1

Kevin Amiranoff
Kevin Amiranoff

Reputation: 14523

Just to complement the other answer it is also possible to use react-native-device-info

  const iPhonesWithDynamicIsland = ['iPhone15,2', 'iPhone15,3']; // iPhone 14 Pro, iPhone 14 Pro Max
  const isIphoneWithDynamicIsland = iPhonesWithDynamicIsland.includes(DeviceInfo.getDeviceId());
  console.log(isIphoneWithDynamicIsland);

or even simpler:

DeviceInfo.hasDynamicIsland()

Upvotes: 8

Related Questions