skip to Main Content

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

2

Answers


  1. Chosen as BEST ANSWER

    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()
    

  2. 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
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search