[Android] UI elements hidden behind system bars on targetSdk 35

[Paukku]

Description

When using @baronha/react-native-photo-editor on Android devices with targetSdkVersion 35, the photo editor screen does not respect the system safe areas. The top and bottom parts of the UI — including some buttons — are hidden behind the status bar and the navigation bar, making them hard or impossible to use.

Current behavior

On Android 13 and newer (tested on Android 14 and 15), the editor screen overlaps with:

• The status bar (top)
• The navigation bar (bottom)

As a result, buttons or tools placed near the top or bottom edges are obscured or clipped.

Environment

• Library version: @baronha/[email protected]
• React Native version: 0.76.9
• Android targetSdkVersion: 35
• Device(s) tested: Pixel 9, Oneplus (android 15) and Android Emulator API 35

Let me know if I can provide any more details or help testing a fix. Thanks for maintaining this library!

[Thilanka-97]

I faced the same issue and applied a fix using the patch below.

File @baronha+react-native-photo-editor+1.1.6.patch

diff --git a/node_modules/@baronha/react-native-photo-editor/android/src/main/java/com/reactnativephotoeditor/activity/PhotoEditorActivity.kt b/node_modules/@baronha/react-native-photo-editor/android/src/main/java/com/reactnativephotoeditor/activity/PhotoEditorActivity.kt
index 2f10101..4bbe8eb 100644
--- a/node_modules/@baronha/react-native-photo-editor/android/src/main/java/com/reactnativephotoeditor/activity/PhotoEditorActivity.kt
+++ b/node_modules/@baronha/react-native-photo-editor/android/src/main/java/com/reactnativephotoeditor/activity/PhotoEditorActivity.kt
@@ -3,6 +3,7 @@ package com.reactnativephotoeditor.activity
 import android.Manifest
 import android.annotation.SuppressLint
 import android.app.ProgressDialog
+import android.content.Context
 import android.content.DialogInterface
 import android.content.Intent
 import android.content.pm.PackageManager
@@ -14,10 +15,10 @@ import android.os.Bundle
 import android.os.Environment
 import android.util.Log
 import android.view.View
+import android.view.ViewGroup
 import android.view.Window
 import android.view.WindowManager
 import android.view.animation.AnticipateOvershootInterpolator
-import android.widget.Button
 import android.widget.ImageView
 import android.widget.TextView
 import androidx.annotation.NonNull
@@ -28,6 +29,8 @@ import androidx.constraintlayout.widget.ConstraintLayout
 import androidx.constraintlayout.widget.ConstraintSet
 import androidx.core.app.ActivityCompat
 import androidx.core.content.ContextCompat
+import androidx.core.view.ViewCompat
+import androidx.core.view.WindowInsetsCompat
 import androidx.recyclerview.widget.LinearLayoutManager
 import androidx.recyclerview.widget.RecyclerView
 import androidx.transition.ChangeBounds
@@ -184,6 +187,24 @@ open class PhotoEditorActivity : AppCompatActivity(), OnPhotoEditorListener, Vie
     )
   }
 
+  private fun getNavigationBarHeight(context: Context): Int {
+    val resourceId = context.resources.getIdentifier("navigation_bar_height", "dimen", "android")
+    return if (resourceId > 0) {
+      context.resources.getDimensionPixelSize(resourceId)
+    } else {
+      0
+    }
+  }
+
+  private fun applyRootBottomPadding(root: View, spacingPx: Int) {
+    root.setPadding(
+      root.paddingLeft,
+      root.paddingTop,
+      root.paddingRight,
+      root.paddingBottom + spacingPx 
+    )
+  }
+
   private fun initViews() {
     //REDO
     val imgRedo: ImageView = findViewById(R.id.imgRedo)
@@ -204,6 +225,7 @@ open class PhotoEditorActivity : AppCompatActivity(), OnPhotoEditorListener, Vie
     mRvTools = findViewById(R.id.rvConstraintTools)
     mRvFilters = findViewById(R.id.rvFilterView)
     mRootView = findViewById(R.id.rootView)
+    applyRootBottomPadding(mRootView as ConstraintLayout, getNavigationBarHeight(this))
   }
 
   override fun onEditTextChangeListener(rootView: View, text: String, colorCode: Int) {

[MrTurtlev2]

Thanks, it works on Android 15 and SDK 35. But "/Redo" comment is worrying me, is it a temporary solution or something like that?

For the rest of the people do not forget to run "yarn patch-package" command after pasting the file into project/patches

[joaosodres]

Thanks, that dit it