Camera and cropping view on Android 15

[flipflop97]

Version

Tell us which versions you are using:

• react-native-image-crop-picker v0.41.4
• react-native v0.75.4

Platform

Tell us to which platform this issue is related

• [ ] iOS
• [x] Android

Expected behaviour

Camera picker should have device insets to make sure elements are not drawn underneath the system bars

Actual behaviour

Camera picker and cropper draw under system bars in some circumstances

Steps to reproduce

1. Setup project which targets Android 15, and uses the camera image crop picker

2. Run on Android virtual device "Pixel 8 Pro - API 35-ext13"

3. Open the camera picker and cropper, and notice the system bars cover the top and bottom

Note that I cannot reproduce this on a real Pixel 8 Pro with Android 14 and edge-to-edge mode enabled but can reproduce on a real Pixel 8 Pro with Android 15

Attachments

[flipflop97]

Update: Just tested this on my real Pixel 8 Pro with Android 15, and the issue also appears there

[SectionTN]

having the same issue

[mozzius]

Also getting this. It's due to this:

https://developer.android.com/about/versions/15/behavior-changes-15#window-insets

Edit: https://github.com/Yalantis/uCrop/issues/913

[almastabssam]

@ivpusic @mozzius Please update library with above changes and create the PR. Thanks

[mozzius]

Here's the patch file I made for Bluesky: https://github.com/bluesky-social/social-app/blob/973538d246a3f76550611e438152f1a6cad75f49/patches/react-native-image-crop-picker+0.42.0.patch

Feel free to make a PR, but it is a temporary solution. It would be better to handle the insets properly

[almastabssam]

thanks, i already made a patch. Please add it in library. thanks Almas Tabssam Senior React Native Developer Mobile No: +923137833381

On Fri, 10 Jan 2025 at 02:59, Samuel Newman @.***> wrote:

Here's the patch file I made for Bluesky: https://github.com/bluesky-social/social-app/blob/main/patches/react-native-image-crop-picker+0.41.6.patch

Feel free to make a PR, but it is a temporary solution. It would be better to handle the insets properly

— Reply to this email directly, view it on GitHub https://github.com/ivpusic/react-native-image-crop-picker/issues/2102#issuecomment-2581321820, or unsubscribe https://github.com/notifications/unsubscribe-auth/AREENHLHCY6PLNYRT3U2C5L2J3WK5AVCNFSM6AAAAABP6W5Q6GVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKOBRGMZDCOBSGA . You are receiving this because you commented.Message ID: @.***>

[mozzius]

I'd love to but I am not a maintainer and I don't know Android dev :P

[rpopovici]

This happens only because you set targetSdkVersion=35. You can fix it by setting targetSdkVersion=34 or by settings compileSdkVersion=35 and setting <item name="android:windowOptOutEdgeToEdgeEnforcement">true</item> in AndroidManifest.xml

https://www.droidcon.com/2024/09/20/%F0%9F%9A%A8-google-secretly-adds-opt-out-api-for-android-15s-edge-to-edge-behaviour-%F0%9F%9A%A8/

[designervenkat]

This happens only because you set targetSdkVersion=35. You can fix it by setting targetSdkVersion=34 or by settings compileSdkVersion=35 and setting <item name="android:windowOptOutEdgeToEdgeEnforcement">true</item> in AndroidManifest.xml

https://www.droidcon.com/2024/09/20/%F0%9F%9A%A8-google-secretly-adds-opt-out-api-for-android-15s-edge-to-edge-behaviour-%F0%9F%9A%A8/

This solutons works for me ! Thanks @rpopovici

[joaolfr]

Having the same issue

[flipflop97]

Adding <item name="android:windowOptOutEdgeToEdgeEnforcement">true</item> would be a workaround for now. But since this will likely be removed in the nearby future and targeting SDK 35 will be forced, it needs a proper solution.

[danger9224]

Yeah, Android 16 DP1 already removed the option to opt-out of the edge-to-edge enforcement: https://android-developers.googleblog.com/2025/02/second-beta-android16.html

[tapz]

A quick and dirty fix to just add some top margin would help a lot as it's now completely unusable.

[mozzius]

Update: this library is totally dead and unmaintained (800 open issues!!), so we made our own one from scratch: https://github.com/bluesky-social/expo-image-crop-tool

[tapz]

@mozzius This seems to require integrating expo to the RN app. Tried that and made too many changes to my app, so reverted.

[aadityapaliwal94]

Can we have a permanent fix for this issue?

[bhanuka-viraj]

I've got the same issue. Is there any permanent fix ?

[MaioranoB]

Still relevant. Waiting merge of #2168

[huseyintamer]

Patch for latest version 0.50.1

react-native-image-crop-picker+0.50.1.patch

[nes123]

Patch for latest version 0.50.1

react-native-image-crop-picker+0.50.1.patch

does not work

[hamzamehmoodkayani1995]

Just add StatusBar and SafeAreaView on screen on which you use picker. this will resolve this issue no need for patch. <StatusBar barStyle="light-content" backgroundColor={colors.black} /> <SafeAreaView style={[profileStyles.container, { backgroundColor: colors.black }]}> {/* Your screen content here */} </SafeAreaView>

[renishmithani]

+1

[Flyview16]

This worked for me (I'm using v.11)

Opt out of edge-to-edge in styles

Create or update this file: android/app/src/main/res/values-v35/styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <style name="Ucrop.CropTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowOptOutEdgeToEdgeEnforcement">true</item>
  </style>
</resources>

Then reference that theme in your manifest

<activity
  android:name="com.yalantis.ucrop.UCropActivity"
  android:screenOrientation="portrait"
  android:theme="@style/Ucrop.CropTheme" />

Add the new light-mode flags in your codes

AndroidUiSettings(
 ...
  // keep bars visible and icons bright
  statusBarLight: false,
  navBarLight: false,
)