[expo-image-picker] Handle edge-to-edge (expo#44208)

# Why

Closes expo#44164

The `expo-image-picker` `ExpoCropImageActivity` doesn't handle
edge-to-edge display properly on Android. The crop view overlaps with
system bars and display cutouts, and the status bar theming uses the
deprecated `window.statusBarColor` API (that has no effect on Android
16+).

# How

- Enabled edge-to-edge rendering with `WindowCompat.enableEdgeToEdge`.
- Added window insets listeners to properly inset the `CropImageView`
margins so it avoids system bars.
- Replaced the deprecated `window.statusBarColor` with a custom status
bar background view sized dynamically via insets.
- Apply both status and navigation bar style.
- Inlined the palette/theming logic from `ExpoCropImageUtils` directly
into `ExpoCropImageActivity`, removing the now-unused
`applyPaletteToOptions` and `applyWindowTheming` utility methods.
- Added `androidx.core:core-ktx:1.17.0` dependency for
`enableEdgeToEdge` / `updateLayoutParams`.

# Test Plan

- Open the image picker with cropping enabled on an Android device with
edge-to-edge display (Android 15+). Verify the crop view doesn't overlap
with the status bar, navigation bar, or display cutouts. Test in both
light and dark modes.
- Do the same test on Android < 15. It should be edge-to-edge too.

# Checklist

- [x] I added a `changelog.md` entry and rebuilt the package sources
according to [this short
guide](https://github.com/expo/expo/blob/main/CONTRIBUTING.md#-before-submitting)
- [ ] This diff will work correctly for `npx expo prebuild` & EAS Build
(eg: updated a module plugin).
- [ ] Conforms with the [Documentation Writing Style
Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)

# Screenshots

### Android 16 - Light mode

<img width="265" height="489" alt="Screenshot 2026-03-24 at 20 22 34"
src="https://github.com/user-attachments/assets/56754ea7-3e85-4780-b453-73968263c697"
/>

### Android 16 - Dark mode

<img width="265" height="489" alt="Screenshot 2026-03-24 at 20 25 35"
src="https://github.com/user-attachments/assets/cbd5c9d9-282b-4e31-bae1-c1fb3bde1329"
/>

### Android 16 - Custom colors

<img width="265" height="489" alt="Screenshot 2026-03-24 at 20 27 21"
src="https://github.com/user-attachments/assets/c60376c7-cce4-4b6f-97e2-47a2a71d38ea"
/>

### Android 14 - Light mode

<img width="260" height="483" alt="Screenshot 2026-03-24 at 20 29 50"
src="https://github.com/user-attachments/assets/bff85951-423a-4d66-a18b-95a8239ea47e"
/>

Author: zoontek

packages/expo-image-picker/CHANGELOG.md

@@ -10,6 +10,7 @@
 
 ### 🐛 Bug fixes
 
+- [android] Handle edge-to-edge display in crop activity. ([#44208](https://github.com/expo/expo/pull/44208) by [@zoontek](https://github.com/zoontek))
 - fix potential `null` mime type reported ([#43734](https://github.com/expo/expo/pull/43734) by [@vonovak](https://github.com/vonovak))
 - [android] fix cropper default colors in light mode ([#42437](https://github.com/expo/expo/pull/42437) by [@fobos531](https://github.com/fobos531))
 - [iOS] Fix `base64` result not being a JPEG data. ([#43806](https://github.com/expo/expo/pull/43806) by [@barthap](https://github.com/barthap))

packages/expo-image-picker/android/build.gradle

@@ -21,6 +21,7 @@ android {
 dependencies {
   implementation "androidx.activity:activity-ktx:1.11.0"
   implementation "androidx.appcompat:appcompat:1.7.1"
+  implementation "androidx.core:core-ktx:1.17.0"
   implementation "androidx.exifinterface:exifinterface:1.4.1"
   implementation "com.vanniktech:android-image-cropper:4.7.0"
   implementation "org.jetbrains.kotlinx:kotlinx-coroutines-android:1.10.2"

packages/expo-image-picker/android/src/main/java/expo/modules/imagepicker/ExpoCropImageActivity.kt

@@ -2,8 +2,18 @@ package expo.modules.imagepicker
 
 import android.graphics.Color
 import android.view.Menu
+import android.view.View
+import android.view.ViewGroup
+import androidx.core.view.ViewCompat
+import androidx.core.view.WindowCompat
+import androidx.core.view.WindowInsetsCompat
+import androidx.core.view.WindowInsetsControllerCompat
+import androidx.core.view.updateLayoutParams
 import com.canhub.cropper.CropImageActivity
 import com.canhub.cropper.CropImageOptions
+import com.canhub.cropper.CropImageView
+import expo.modules.imagepicker.ExpoCropImageUtils.getColorResource
+import expo.modules.imagepicker.ExpoCropImageUtils.getThemeColor
 
 /**
  * A wrapper around `CropImageActivity` to provide custom theming and functionality.
@@ -15,6 +25,7 @@ import com.canhub.cropper.CropImageOptions
  */
 class ExpoCropImageActivity : CropImageActivity() {
   private var currentIconColor: Int = Color.BLACK
+  private var cropImageViewRef: CropImageView? = null
 
   // region Lifecycle Methods
   override fun onCreate(savedInstanceState: android.os.Bundle?) {
@@ -23,12 +34,21 @@ class ExpoCropImageActivity : CropImageActivity() {
     // the toolbar and menu icons are tinted correctly on first render.
     getCropOptions()?.let { opts ->
       val isNight = (resources.configuration.uiMode and android.content.res.Configuration.UI_MODE_NIGHT_MASK) == android.content.res.Configuration.UI_MODE_NIGHT_YES
-      applyPalette(isNight, opts)
+      applyCustomization(isNight, opts)
       invokeSetCustomizations()
       invalidateOptionsMenu() // Recreate the menu to apply the new icon colors.
     }
   }
 
+  override fun onDestroy() {
+    ViewCompat.setOnApplyWindowInsetsListener(window.decorView, null)
+
+    cropImageViewRef?.let { ViewCompat.setOnApplyWindowInsetsListener(it, null) }
+    cropImageViewRef = null
+
+    super.onDestroy()
+  }
+
   override fun onCreateOptionsMenu(menu: Menu): Boolean {
     val result = super.onCreateOptionsMenu(menu)
     tintAllMenuItems(menu)
@@ -40,22 +60,88 @@ class ExpoCropImageActivity : CropImageActivity() {
     tintAllMenuItems(menu)
     return result
   }
+
+  override fun setCropImageView(cropImageView: CropImageView) {
+    super.setCropImageView(cropImageView)
+
+    cropImageViewRef = cropImageView
+
+    // Inset the crop view margins so it doesn't overlap with system bars or display cutouts
+    ViewCompat.setOnApplyWindowInsetsListener(cropImageView) { view, insets ->
+      val values = insets.getInsets(
+        WindowInsetsCompat.Type.systemBars() or WindowInsetsCompat.Type.displayCutout())
+
+      view.updateLayoutParams<ViewGroup.MarginLayoutParams> {
+        setMargins(values.left, values.top, values.right, values.bottom)
+      }
+
+      insets
+    }
+  }
+
   // endregion
 
-  private fun applyPalette(isNight: Boolean, opts: CropImageOptions) {
-    // Apply palette to options and get the toolbar widget color
-    val toolbarWidgetColor = ExpoCropImageUtils.applyPaletteToOptions(theme, resources, isNight, opts)
+  private fun applyCustomization(isNight: Boolean, options: CropImageOptions) {
+    val defaultBackgroundColor = if (isNight) Color.BLACK else Color.WHITE
+    val defaultContentColor = if (isNight) Color.WHITE else Color.BLACK
 
-    // Set the current icon color for menu tinting
-    currentIconColor = toolbarWidgetColor
+    // Try theme attributes first, then fall back to color resources
+    val expoCropBackButtonIconColor = getThemeColor(theme, R.attr.expoCropBackButtonIconColor)
+      ?: getColorResource(resources, R.color.expoCropBackButtonIconColor)
+    val expoCropBackgroundColor = getThemeColor(theme, R.attr.expoCropBackgroundColor)
+      ?: getColorResource(resources, R.color.expoCropBackgroundColor)
+    val expoCropToolbarActionTextColor = getThemeColor(theme, R.attr.expoCropToolbarActionTextColor)
+      ?: getColorResource(resources, R.color.expoCropToolbarActionTextColor)
+    val expoCropToolbarColor = getThemeColor(theme, R.attr.expoCropToolbarColor)
+      ?: getColorResource(resources, R.color.expoCropToolbarColor)
+    val expoCropToolbarIconColor = getThemeColor(theme, R.attr.expoCropToolbarIconColor)
+      ?: getColorResource(resources, R.color.expoCropToolbarIconColor)
+
+    val activityBackgroundColor = expoCropBackgroundColor ?: defaultBackgroundColor
+    val toolbarColor = expoCropToolbarColor ?: defaultBackgroundColor
+    val toolbarIconColor = expoCropToolbarIconColor ?: defaultContentColor
 
-    // Set up toolbar color with fallback for status bar theming
-    val defaultToolbarColor = if (isNight) Color.BLACK else Color.WHITE
-    val toolbarColor = opts.toolbarColor ?: defaultToolbarColor
-    ExpoCropImageUtils.applyWindowTheming(window, toolbarColor, isNight)
+    // Set the current icon color for menu tinting
+    currentIconColor = toolbarIconColor
 
     // Remove action bar elevation for a flat design
     supportActionBar?.elevation = 0f
+
+    options.activityBackgroundColor = activityBackgroundColor
+    options.activityMenuIconColor = toolbarIconColor
+    options.activityMenuTextColor = expoCropToolbarActionTextColor ?: defaultContentColor
+    options.toolbarBackButtonColor = expoCropBackButtonIconColor ?: toolbarIconColor
+    options.toolbarColor = toolbarColor
+    options.toolbarTitleColor = toolbarIconColor
+
+    window.run {
+      // Create a view that will sit behind the status bar, colored to match the toolbar
+      val statusBarView = View(context).apply { setBackgroundColor(toolbarColor) }
+
+      // Draw content edge-to-edge, behind system bars
+      WindowCompat.enableEdgeToEdge(this)
+
+      // Set system bar icon colors based on the current theme (dark icons on light bg, and vice versa)
+      WindowInsetsControllerCompat(this, decorView).run {
+        isAppearanceLightStatusBars = !isNight
+        isAppearanceLightNavigationBars = !isNight
+      }
+
+      // Set the root background color so it shows through transparent system bars
+      decorView.setBackgroundColor(activityBackgroundColor)
+
+      // Add the status bar view with zero initial height (will be sized by insets listener below)
+      addContentView(statusBarView,
+        ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 0))
+
+      // Dynamically resize the status bar view to match the actual status bar / display cutout height
+      ViewCompat.setOnApplyWindowInsetsListener(decorView) { _, insets ->
+        val values = insets.getInsets(
+          WindowInsetsCompat.Type.statusBars() or WindowInsetsCompat.Type.displayCutout())
+        statusBarView.updateLayoutParams { height = values.top }
+        insets
+      }
+    }
   }
 
   // region Helper Methods

packages/expo-image-picker/android/src/main/java/expo/modules/imagepicker/ExpoCropImageUtils.kt

@@ -1,9 +1,7 @@
 package expo.modules.imagepicker
 
-import android.graphics.Color
+import android.content.res.Resources
 import android.util.TypedValue
-import com.canhub.cropper.CropImageOptions
-import androidx.core.view.WindowInsetsControllerCompat
 
 /**
  * Utility functions for ExpoCropImageActivity theming and color management.
@@ -30,58 +28,4 @@ object ExpoCropImageUtils {
   fun getColorResource(resources: android.content.res.Resources, colorResId: Int): Int? = runCatching {
     resources.getColor(colorResId, null)
   }.getOrNull()
-
-  /**
-   * Applies a color palette to CropImageOptions based on theme attributes or color resources.
-   * @param theme The theme to resolve colors from
-   * @param resources The resources to get colors from
-   * @param isNight Whether the app is in dark mode
-   * @param options The CropImageOptions to apply colors to
-   * @return The toolbar widget color that was applied
-   */
-  fun applyPaletteToOptions(
-    theme: android.content.res.Resources.Theme,
-    resources: android.content.res.Resources,
-    isNight: Boolean,
-    options: CropImageOptions
-  ): Int {
-    // Try theme attributes first, then fall back to color resources
-    val customToolbar = getThemeColor(theme, R.attr.expoCropToolbarColor)
-      ?: getColorResource(resources, R.color.expoCropToolbarColor)
-    val customIconColor = getThemeColor(theme, R.attr.expoCropToolbarIconColor)
-      ?: getColorResource(resources, R.color.expoCropToolbarIconColor)
-    val customActionTextColor = getThemeColor(theme, R.attr.expoCropToolbarActionTextColor)
-      ?: getColorResource(resources, R.color.expoCropToolbarActionTextColor)
-    val customBackButtonIconColor = getThemeColor(theme, R.attr.expoCropBackButtonIconColor)
-      ?: getColorResource(resources, R.color.expoCropBackButtonIconColor)
-    val customBg = getThemeColor(theme, R.attr.expoCropBackgroundColor)
-      ?: getColorResource(resources, R.color.expoCropBackgroundColor)
-
-    val defaultColor = if (isNight) Color.BLACK else Color.WHITE
-    val toolbarWidgetColor = customIconColor ?: if (isNight) Color.WHITE else Color.BLACK
-
-    options.activityBackgroundColor = customBg ?: defaultColor
-    options.toolbarColor = customToolbar ?: defaultColor
-    options.toolbarTitleColor = toolbarWidgetColor
-    options.toolbarBackButtonColor = customBackButtonIconColor ?: toolbarWidgetColor
-    options.activityMenuIconColor = toolbarWidgetColor
-    options.activityMenuTextColor = customActionTextColor ?: if (isNight) Color.WHITE else Color.BLACK
-
-    return toolbarWidgetColor
-  }
-
-  /**
-   * Applies window-level theming (status bar, etc.) based on the applied palette.
-   * @param window The window to apply theming to
-   * @param toolbarColor The toolbar color that was applied
-   * @param isNight Whether the app is in dark mode
-   */
-  fun applyWindowTheming(
-    window: android.view.Window,
-    toolbarColor: Int,
-    isNight: Boolean
-  ) {
-    window.statusBarColor = toolbarColor
-    WindowInsetsControllerCompat(window, window.decorView).isAppearanceLightStatusBars = !isNight
-  }
 }