Add preserveEdgeToEdge prop (#765)

## 📜 Description

Currently, even when `react-native-edge-to-edge` is installed, RNKC is
able to disable `edge-to-edge`. For example, if we set `enable={false}`
on `KeyboardProvider`, `disable` will be called on
`EdgeToEdgeReactViewGroup`, and `WindowCompat.setDecorFitsSystemWindows`
too.

This change detect if `react-native-edge-to-edge` is installed. If it
is, edge-to-edge is forced and cannot be disabled.

## 💡 Motivation and Context

It fixes an issue that breaks edge-to-edge (not only when enabled with
`react-native-edge-to-edge`, but in general).

Fixes
#592
(_Toggle enabled to false, observe that the NavigationBar reappears and
lifts the content._)

## 📢 Changelog

### Android

- Fixes issue with edge-to-edge when `KeyboardProvider` is used with
`enabled={false}`.

## 🤔 How Has This Been Tested?

- Using the example app (`react-native-edge-to-edge` installed). Before,
when switching on the "14. Enable / disable" screen, we were able to
disable edge-to-edge too, not only keyboard management. Now it stays
edge-to-edge.

## 📸 Screenshots (if appropriate):

![Screenshot 2025-01-19 at 22 59
31](https://github.com/user-attachments/assets/de7b9b9d-2b57-45ad-a960-f57ea3e0f43b)

## 📝 Checklist

- [x] CI successfully passed
- [x] I added new mocks and corresponding unit-tests if library API was
changed

Author: zoontek

android/src/fabric/java/com/reactnativekeyboardcontroller/KeyboardControllerViewManager.kt

@@ -36,6 +36,12 @@ class KeyboardControllerViewManager(
     value: Boolean,
   ) = manager.setNavigationBarTranslucent(view as EdgeToEdgeReactViewGroup, value)
 
+  @ReactProp(name = "preserveEdgeToEdge")
+  override fun setPreserveEdgeToEdge(
+    view: ReactViewGroup,
+    value: Boolean,
+  ) = manager.setPreserveEdgeToEdge(view as EdgeToEdgeReactViewGroup, value)
+
   @ReactProp(name = "enabled")
   override fun setEnabled(
     view: ReactViewGroup,

android/src/main/java/com/reactnativekeyboardcontroller/managers/KeyboardControllerViewManagerImpl.kt

@@ -37,6 +37,13 @@ class KeyboardControllerViewManagerImpl(
     view.setNavigationBarTranslucent(isNavigationBarTranslucent)
   }
 
+  fun setPreserveEdgeToEdge(
+    view: EdgeToEdgeReactViewGroup,
+    isPreservingEdgeToEdge: Boolean,
+  ) {
+    view.setPreserveEdgeToEdge(isPreservingEdgeToEdge)
+  }
+
   fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any> {
     val map: MutableMap<String, Any> =
       MapBuilder.of(

android/src/main/java/com/reactnativekeyboardcontroller/views/EdgeToEdgeReactViewGroup.kt

@@ -31,6 +31,7 @@ class EdgeToEdgeReactViewGroup(
   // props
   private var isStatusBarTranslucent = false
   private var isNavigationBarTranslucent = false
+  private var isPreservingEdgeToEdge = false
   private var active = false
 
   // internal class members
@@ -188,7 +189,10 @@ class EdgeToEdgeReactViewGroup(
   }
 
   private fun disable() {
-    this.goToEdgeToEdge(false)
+    if (!isPreservingEdgeToEdge) {
+      this.goToEdgeToEdge(false)
+    }
+
     this.setupWindowInsets()
     this.removeKeyboardCallbacks()
     modalAttachedWatcher.disable()
@@ -208,6 +212,10 @@ class EdgeToEdgeReactViewGroup(
     this.isNavigationBarTranslucent = isNavigationBarTranslucent
   }
 
+  fun setPreserveEdgeToEdge(isPreservingEdgeToEdge: Boolean) {
+    this.isPreservingEdgeToEdge = isPreservingEdgeToEdge
+  }
+
   fun setActive(active: Boolean) {
     this.active = active
 

android/src/paper/java/com/reactnativekeyboardcontroller/KeyboardControllerViewManager.kt

@@ -41,6 +41,14 @@ class KeyboardControllerViewManager(
     manager.setNavigationBarTranslucent(view, isNavigationBarTranslucent)
   }
 
+  @ReactProp(name = "preserveEdgeToEdge")
+  fun setPreserveEdgeToEdge(
+    view: EdgeToEdgeReactViewGroup,
+    isPreservingEdgeToEdge: Boolean,
+  ) {
+    manager.setPreserveEdgeToEdge(view, isPreservingEdgeToEdge)
+  }
+
   override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any> =
     manager.getExportedCustomDirectEventTypeConstants()
 }

docs/docs/api/keyboard-controller-view.md

@@ -45,6 +45,10 @@ A boolean prop to indicate whether `StatusBar` should be translucent on `Android
 
 A boolean prop to indicate whether [NavigationBar](https://m2.material.io/design/platform-guidance/android-bars.html#android-navigation-bar) should be translucent on `Android` or not.
 
+### `preserveEdgeToEdge` <div className="label android"></div>
+
+A boolean property indicating whether to keep [edge-to-edge](https://developer.android.com/develop/ui/views/layout/edge-to-edge) mode always enabled (even when you disable the module). This is useful if you are using an external library to enable it and don't want this library to disable it.
+
 ### `enabled`
 
 A boolean prop indicating whether the view is active or not. If it's `true` then it moves application to [edge-to-edge](https://developer.android.com/training/gestures/edge-to-edge) mode on Android and setup keyboard callbacks. When `false` - moves app away from [edge-to-edge](https://developer.android.com/training/gestures/edge-to-edge) and removes keyboard listeners.

docs/docs/api/keyboard-provider.md

@@ -21,6 +21,14 @@ By default this library stretches to full screen (`edge-to-edge` mode) and statu
 
 A boolean prop to indicate whether [NavigationBar](https://m2.material.io/design/platform-guidance/android-bars.html#android-navigation-bar) should be translucent on `Android` or not.
 
+### `preserveEdgeToEdge` <div className="label android"></div>
+
+A boolean property indicating whether to keep [edge-to-edge](https://developer.android.com/develop/ui/views/layout/edge-to-edge) mode always enabled (even when you disable the module). This is useful if you are using an external library to enable it and don't want this library to disable it.
+
+:::info Good to know
+If you use [react-native-edge-to-edge](https://github.com/zoontek/react-native-edge-to-edge), then `statusBarTranslucent`, `navigationBarTranslucent` and `preserveEdgeToEdge` are automatically set to `true`, so you don't need to worry about them.
+:::
+
 ### `enabled`
 
 A boolean prop indicating whether the module is enabled. It indicate only initial state, i. e. if you try to change this prop after component mount it will not have any effect. To change the property in runtime use [useKeyboardController](./hooks/module/use-keyboard-controller.md) hook and `setEnabled` method. Defaults to `true`.

src/animated.tsx

@@ -68,6 +68,14 @@ type KeyboardProviderProps = {
    * @platform android
    */
   navigationBarTranslucent?: boolean;
+  /**
+   * A boolean property indicating whether to keep edge-to-edge mode always enabled (even when you disable the module).
+   * Defaults to `false`.
+   *
+   * @see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/592
+   * @platform android
+   */
+  preserveEdgeToEdge?: boolean;
   /**
    * A boolean prop indicating whether the module is enabled. It indicate only initial state,
    * i. e. if you try to change this prop after component mount it will not have any effect.
@@ -85,6 +93,7 @@ export const KeyboardProvider = ({
   children,
   statusBarTranslucent,
   navigationBarTranslucent,
+  preserveEdgeToEdge,
   enabled: initiallyEnabled = true,
 }: KeyboardProviderProps) => {
   // ref
@@ -202,7 +211,11 @@ export const KeyboardProvider = ({
   }, [enabled]);
 
   if (__DEV__) {
-    controlEdgeToEdgeValues({ statusBarTranslucent, navigationBarTranslucent });
+    controlEdgeToEdgeValues({
+      statusBarTranslucent,
+      navigationBarTranslucent,
+      preserveEdgeToEdge,
+    });
   }
 
   return (
@@ -212,6 +225,7 @@ export const KeyboardProvider = ({
         enabled={enabled}
         navigationBarTranslucent={IS_EDGE_TO_EDGE || navigationBarTranslucent}
         statusBarTranslucent={IS_EDGE_TO_EDGE || statusBarTranslucent}
+        preserveEdgeToEdge={IS_EDGE_TO_EDGE || preserveEdgeToEdge}
         style={styles.container}
         // on*Reanimated prop must precede animated handlers to work correctly
         onKeyboardMoveReanimated={keyboardHandler}

src/specs/KeyboardControllerViewNativeComponent.ts

@@ -53,6 +53,7 @@ export interface NativeProps extends ViewProps {
   enabled?: boolean;
   statusBarTranslucent?: boolean;
   navigationBarTranslucent?: boolean;
+  preserveEdgeToEdge?: boolean;
   // callbacks
   /// keyboard
   onKeyboardMoveStart?: DirectEventHandler<KeyboardMoveEvent>;

src/types.ts

@@ -89,6 +89,7 @@ export type KeyboardControllerProps = {
   // props
   statusBarTranslucent?: boolean;
   navigationBarTranslucent?: boolean;
+  preserveEdgeToEdge?: boolean;
   enabled?: boolean;
 } & ViewProps;