overlapping issue

[SKHRAPP]

The cropping screen is overlapping on the status bar of the device. This issue is faced in some Android devices. The screenshot is below.

[elkinjosetm]

I'm having the same issue

[murari-actxion]

i am also having same issue, any solution ?

[elkinjosetm]

There is workaround on another issue https://github.com/ivpusic/react-native-image-crop-picker/issues/2102

[AnthonyJamez12]

I'm having issues too, and the workaround sadly didn't work for me:/

[elkinjosetm]

The one that worked for me was the patch mentioned, I created a patch with those modifications and it was working as expected

[AnthonyJamez12]

Oh really?!? Could I use your patch? I saw mozzius had one too. But I never really worked with patches. Would I jjust npm install your package of the patch?

[murari-actxion]

@AnthonyJamez12 patch worked for me also , let me know if you need help.

[elkinjosetm]

@AnthonyJamez12 we use pnpm in our project, and it comes with a feature to patch a dependency, but if you use npm directly, there is dependency that you can setup in your project that will let you patch dependencies.

Yarn also has a patch functionality

[AnthonyJamez12]

Thank you @murari-actxion! The patch will be on hold for a while until I can get around to it, but if I need any help I'll let you know.

[AnthonyJamez12]

@elkinjosetm That's super clutch, I've seen that around but never really looked to far into it, I apprecieate the insight. Thanks a lot!

[murari-actxion]

@saucekantrol looks like i am not able to access it on my mac.

[AnthonyJamez12]

I finally got around to fixing this.

Here’s what worked for me:

In AndroidManifest.xml:

<activity
    android:name="com.yalantis.ucrop.UCropActivity"
    android:screenOrientation="nosensor"
    android:windowLayoutInDisplayCutoutMode="never"
    android:theme="@style/Ecift.CropTheme"
    tools:replace="android:theme" />

In res/values/styles.xml:

<style name="Ecift.CropTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">#000000</item>
    <item name="colorAccent">#FF4081</item>
    <item name="android:windowOptOutEdgeToEdgeEnforcement">true</item>
</style>

These changes fixed the issue for me. Hope this helps someone else!

[SureshVaishnnav]

I have changes native modules this is works for me

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

in res/values/styles.xml

<style name="Ecift.CropTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">#000000</item>
    <item name="colorAccent">#FF4081</item>
    <item name="android:windowOptOutEdgeToEdgeEnforcement">true</item>
</style>

[SureshVaishnnav]

Made changes in Go to node module then find the cropper Library move that android folder and make these changes do not made changes in our android menifist made changes in Library Android folder

[FardeenNiyaziHM]

I have changes native modules this is works for me

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

in res/values/styles.xml

<style name="Ecift.CropTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">#000000</item>
    <item name="colorAccent">#FF4081</item>
    <item name="android:windowOptOutEdgeToEdgeEnforcement">true</item>
</style>

I have followed the same but still not working the overlapp issue still persist

[SureshVaishnnav]

@FardeenNiyaziHM Made changes in Go to node module, then find the cropper Library Move the android folder, and make these changes Do not make changes in our android manifest Make changes inthe Library Android folder

[FardeenNiyaziHM]

@FardeenNiyaziHM Made changes in Go to node module, then find the cropper Library Move the android folder, and make these changes Do not make changes in our android manifest Make changes inthe Library Android folder

@SureshVaishnnav I have made changes in the android folder of library and added the patch did not work out

Using library version [email protected]

[FardeenNiyaziHM]

@RameshTigeen did you find any workaround If so, please share

[swathycsv]

@FardeenNiyaziHM

If your app targets Android 16 (API level 36) and is running on an Android 15 device, R.attr#windowOptOutEdgeToEdgeEnforcement continues to work. If your app targets Android 16 (API level 36) and is running on an Android 16 device, R.attr#windowOptOutEdgeToEdgeEnforcement is disabled.

So I added below style to UCropActivity, and it's working for me <item name="android:windowTranslucentStatus">false</item> <item name="android:windowTranslucentNavigation">false</item> <item name="android:fitsSystemWindows">true</item> <item name="android:statusBarColor">#FFFFFF</item> <!-- light background --> <item name="android:navigationBarColor">#FFFFFF</item> <item name="android:windowLightStatusBar">true</item> <!-- dark icons/text --> <item name="android:windowLightNavigationBar">true</item>

[devalphaklick]

in android styles

   <style name="UCropActivityInsetFix" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:fitsSystemWindows">true</item>
    </style>

In android

<activity
            tools:replace="android:theme"
            android:name="com.yalantis.ucrop.UCropActivity"
            android:theme="@style/UCropActivityInsetFix"/>

it will resolve the issue of image crop picker