Setup Guide

While the basic installation is straightforward, there are a few platform-specific details to be aware of.

iOS Configuration

React Native Device Geometry supports iOS 13.0+.

Podfile

Ensure your ios/Podfile targets at least iOS 13:

platform :ios, '13.0'

Dynamic Island

To detect the Dynamic Island on iPhone 14 Pro and newer, no special permission is needed. The library automatically detects the device model and screen configuration.

Android Configuration

Supports Android 9 (API Level 28) and above for cutout detection.

Edge-to-Edge

To fully utilize this library, your app should be drawing edge-to-edge. Ensure you have configured your Android theme to be translucent or transparent for the status bar and navigation bar.

In android/app/src/main/res/values/styles.xml:

<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>

Troubleshooting

"Native module not found"

If you see this error, try rebuilding your native app:

# iOS
cd ios && pod install && cd ..
yarn ios

# Android
yarn android

Incorrect Metrics

If metrics seem wrong (e.g., width/height are swapped), check if you are handling orientation changes correctly. The library provides an event listener for this.

import { EVENTS, DeviceGeometry } from 'react-native-device-geometry';

DeviceGeometry.addListener(EVENTS.ORIENTATION_CHANGE, (event) => {
  // Handle new dimensions
});