feature: Detect edge-to-edge and set isStatusBarTranslucentAndroid / …

…isNavigationBarTranslucentAndroid (#6732)

## Summary

Similar to [the
PR](software-mansion/react-native-screens#2464)
I opened on the `react-native-screens` repository (I highly recommend to
read the discussion there to understand the motivation behind this),
this PR detects if the user enabled edge-to-edge and act accordingly:
`useAnimatedKeyboard` are ignored, set to `true` automatically. If those
are set, a warning is logged:

> `isStatusBarTranslucentAndroid` and
`isNavigationBarTranslucentAndroid` values are ignored when `using
react-native-edge-to-edge`

It at some point [this
proposal](facebook/react-native#47554) lands in
core, `react-native-is-edge-to-edge` will be updated to support both the
library and the core edge-to-edge flag, making the transition seamless
for the users.

## Test plan

- Install
[react-native-edge-to-edge](https://github.com/zoontek/react-native-edge-to-edge)
in the example app.
- Don't set `isStatusBarTranslucentAndroid` /
`isNavigationBarTranslucentAndroid`, or set them to something else than
`true`

---------

Co-authored-by: Bartłomiej Błoniarz <[email protected]>

packages/react-native-reanimated/package.json

@@ -89,7 +89,8 @@
     "@babel/plugin-transform-unicode-regex": "^7.0.0-0",
     "@babel/preset-typescript": "^7.16.7",
     "convert-source-map": "^2.0.0",
-    "invariant": "^2.2.4"
+    "invariant": "^2.2.4",
+    "react-native-is-edge-to-edge": "1.1.6"
   },
   "peerDependencies": {
     "@babel/core": "^7.0.0-0",

packages/react-native-reanimated/src/core.ts

@@ -1,4 +1,9 @@
 'use strict';
+import {
+  controlEdgeToEdgeValues,
+  isEdgeToEdge,
+} from 'react-native-is-edge-to-edge';
+
 import type {
   AnimatedKeyboardOptions,
   LayoutAnimationBatchItem,
@@ -23,6 +28,7 @@ export { createWorkletRuntime, runOnRuntime } from './runtimes';
 export { makeShareable, makeShareableCloneRecursive } from './shareables';
 export { executeOnUIRuntimeSync, runOnJS, runOnUI } from './threads';
 
+const EDGE_TO_EDGE = isEdgeToEdge();
 const SHOULD_BE_USE_WEB = shouldBeUseWeb();
 
 /** @returns `true` in Reanimated 3, doesn't exist in Reanimated 2 or 1 */
@@ -112,12 +118,21 @@ export function subscribeForKeyboardEvents(
     global.__flushAnimationFrame(now);
     global.__frameTimestamp = undefined;
   }
+
+  if (__DEV__) {
+    controlEdgeToEdgeValues({
+      isStatusBarTranslucentAndroid: options.isStatusBarTranslucentAndroid,
+      isNavigationBarTranslucentAndroid:
+        options.isNavigationBarTranslucentAndroid,
+    });
+  }
+
   return ReanimatedModule.subscribeForKeyboardEvents(
     makeShareableCloneRecursive(
       handleAndFlushAnimationFrame as WorkletFunction
     ),
-    options.isStatusBarTranslucentAndroid ?? false,
-    options.isNavigationBarTranslucentAndroid ?? false
+    EDGE_TO_EDGE || (options.isStatusBarTranslucentAndroid ?? false),
+    EDGE_TO_EDGE || (options.isNavigationBarTranslucentAndroid ?? false)
   );
 }
 

packages/react-native-reanimated/src/hook/useAnimatedKeyboard.ts

@@ -22,8 +22,8 @@ import {
  */
 export function useAnimatedKeyboard(
   options: AnimatedKeyboardOptions = {
-    isStatusBarTranslucentAndroid: false,
-    isNavigationBarTranslucentAndroid: false,
+    isStatusBarTranslucentAndroid: undefined,
+    isNavigationBarTranslucentAndroid: undefined,
   }
 ): AnimatedKeyboardInfo {
   const ref = useRef<AnimatedKeyboardInfo | null>(null);

yarn.lock

@@ -17591,6 +17591,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-is-edge-to-edge@npm:1.1.6":
+  version: 1.1.6
+  resolution: "react-native-is-edge-to-edge@npm:1.1.6"
+  peerDependencies:
+    react: ">=18.2.0"
+    react-native: ">=0.73.0"
+  checksum: 10/4e07c1e34c01c8d50fd7c1d0460db06f6f0515197405230386a8ffb950cb724b10743af032310d1384df0a90059bfb8992ba2d93344ce86315315f0493feccc2
+  languageName: node
+  linkType: hard
+
 "react-native-macos@npm:^0.75.13":
   version: 0.75.16
   resolution: "react-native-macos@npm:0.75.16"
@@ -17736,6 +17746,7 @@ __metadata:
     react-native: "npm:0.77.0"
     react-native-builder-bob: "npm:0.33.1"
     react-native-gesture-handler: "npm:2.22.0"
+    react-native-is-edge-to-edge: "npm:1.1.6"
     react-native-web: "npm:0.19.11"
     react-test-renderer: "npm:18.2.0"
     shelljs: "npm:^0.8.5"