Skip to content

Commit 4d5f34b

Browse files
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 <bartlomiej.bloniarz@swmansion.com>
1 parent 507c8c4 commit 4d5f34b

File tree

4 files changed

+32
-5
lines changed

4 files changed

+32
-5
lines changed

packages/react-native-reanimated/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,8 @@
9090
"@babel/plugin-transform-unicode-regex": "^7.0.0-0",
9191
"@babel/preset-typescript": "^7.16.7",
9292
"convert-source-map": "^2.0.0",
93-
"invariant": "^2.2.4"
93+
"invariant": "^2.2.4",
94+
"react-native-is-edge-to-edge": "1.1.6"
9495
},
9596
"peerDependencies": {
9697
"@babel/core": "^7.0.0-0",

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

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
11
'use strict';
2+
import {
3+
controlEdgeToEdgeValues,
4+
isEdgeToEdge,
5+
} from 'react-native-is-edge-to-edge';
6+
27
import type {
38
AnimatedKeyboardOptions,
49
LayoutAnimationBatchItem,
@@ -27,6 +32,7 @@ export {
2732
runOnUI,
2833
} from './WorkletsResolver';
2934

35+
const EDGE_TO_EDGE = isEdgeToEdge();
3036
const SHOULD_BE_USE_WEB = shouldBeUseWeb();
3137

3238
/** @returns `true` in Reanimated 3, doesn't exist in Reanimated 2 or 1 */
@@ -116,12 +122,21 @@ export function subscribeForKeyboardEvents(
116122
global.__flushAnimationFrame(now);
117123
global.__frameTimestamp = undefined;
118124
}
125+
126+
if (__DEV__) {
127+
controlEdgeToEdgeValues({
128+
isStatusBarTranslucentAndroid: options.isStatusBarTranslucentAndroid,
129+
isNavigationBarTranslucentAndroid:
130+
options.isNavigationBarTranslucentAndroid,
131+
});
132+
}
133+
119134
return ReanimatedModule.subscribeForKeyboardEvents(
120135
makeShareableCloneRecursive(
121136
handleAndFlushAnimationFrame as WorkletFunction
122137
),
123-
options.isStatusBarTranslucentAndroid ?? false,
124-
options.isNavigationBarTranslucentAndroid ?? false
138+
EDGE_TO_EDGE || (options.isStatusBarTranslucentAndroid ?? false),
139+
EDGE_TO_EDGE || (options.isNavigationBarTranslucentAndroid ?? false)
125140
);
126141
}
127142

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@ import {
2222
*/
2323
export function useAnimatedKeyboard(
2424
options: AnimatedKeyboardOptions = {
25-
isStatusBarTranslucentAndroid: false,
26-
isNavigationBarTranslucentAndroid: false,
25+
isStatusBarTranslucentAndroid: undefined,
26+
isNavigationBarTranslucentAndroid: undefined,
2727
}
2828
): AnimatedKeyboardInfo {
2929
const ref = useRef<AnimatedKeyboardInfo | null>(null);

yarn.lock

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17952,6 +17952,16 @@ __metadata:
1795217952
languageName: node
1795317953
linkType: hard
1795417954

17955+
"react-native-is-edge-to-edge@npm:1.1.6":
17956+
version: 1.1.6
17957+
resolution: "react-native-is-edge-to-edge@npm:1.1.6"
17958+
peerDependencies:
17959+
react: ">=18.2.0"
17960+
react-native: ">=0.73.0"
17961+
checksum: 10/4e07c1e34c01c8d50fd7c1d0460db06f6f0515197405230386a8ffb950cb724b10743af032310d1384df0a90059bfb8992ba2d93344ce86315315f0493feccc2
17962+
languageName: node
17963+
linkType: hard
17964+
1795517965
"react-native-macos@npm:^0.75.13":
1795617966
version: 0.75.16
1795717967
resolution: "react-native-macos@npm:0.75.16"
@@ -18108,6 +18118,7 @@ __metadata:
1810818118
react-native: "npm:0.77.0"
1810918119
react-native-builder-bob: "npm:0.33.1"
1811018120
react-native-gesture-handler: "npm:2.22.0"
18121+
react-native-is-edge-to-edge: "npm:1.1.6"
1811118122
react-native-web: "npm:0.19.11"
1811218123
react-native-worklets: "workspace:*"
1811318124
react-test-renderer: "npm:18.2.0"

0 commit comments

Comments
 (0)