Missing Bottom Safe Area Insets on IOS 26 / Iphone 17 Pro

[sravis02]

Description:
When using react-native-image-crop-picker on iOS, the picker modal does not respect the bottom safe area insets. This causes the action buttons at the bottom of the picker (e.g., "Choose," "Cancel") to be partially hidden behind the native iOS tab bar or home indicator, making them difficult or impossible to tap.

Environment:

Library Version: 0.51.0

Platform: iOS

Device: iPhone 17 Pro Simulator (iOS 26)

Expo: 54.0.0

React Native: 0.81.4

Steps to Reproduce:

Open the image picker using ImagePicker.openPicker or ImagePicker.openCamera.

Observe that the bottom of the picker modal extends to the very bottom of the screen.

The bottom action bar is overlapped by the device's tab bar or home indicator.

Expected Behavior:
The picker modal should have appropriate padding at the bottom to account for the safe area, ensuring all buttons are fully visible and tappable.

Screenshots:

Additional Context:
This is a critical UI/UX issue on newer iPhone models with a home indicator and apps using a bottom tab bar. The problem exists in both the photo library picker and the camera view.

[mapledan]

Same issue in iPhone 14 pro (IOS 26).

[darshan09200]

Hey everyone,

I was also facing this alignment bug on iOS 17 and have confirmed a fix. The issue is resolved by updating the TOCropViewController dependency to version 2.8.0, which includes the necessary upstream layout fix.

I've submitted a pull request with the changes here: 👉 #2209

---

🛠️ Immediate Workaround Using patch-package

Until the PR is reviewed and a new version is released, you can apply the fix locally in your own project using patch-package.

1. Install patch-package:

   npm install patch-package
   # or
   yarn add patch-package

2. Add postinstall script: In your package.json, add this script:

   "scripts": {
     "postinstall": "patch-package"
   }

3. Apply the fix: Manually edit the following file in your project:

   • node_modules/react-native-image-crop-picker/RNImageCropPicker.podspec

   • Change the line s.dependency 'TOCropViewController', '~> 2.7.4' to:

     s.dependency 'TOCropViewController', '~> 2.8.0'

4. Create the patch:

   npx patch-package react-native-image-crop-picker

   This will create a patches/react-native-image-crop-picker+... file.

5. Commit the patch file to your repository and run npm install or yarn install to ensure the patch is applied.

Hope this helps everyone get unblocked!