Skip to content

Commit 19371d8

Browse files
authored
fix: apply monkey patch before StatusBar updates (#744)
## 📜 Description Execute monkey-patch applying earlier than `StatusBar` modifications. ## 💡 Motivation and Context It happens when `KeyboardProvider` had direct child as `StatusBar` - and such thing can happen in `expo-router`, for example: https://github.com/expo/expo/blob/5f40a80019bb6b892eda94dd244fdc0df8880ccb/packages/expo-router/src/ExpoRoot.tsx#L57 To prevent this problem I'm executing monkey patch applying in "layout effect" instead of plain "effect". This gives me a precious time and an ability to apply patch earlier and thus re-direct a call to my module. And if we dig a little bit deeper. When `KeyboardProvider` gets mounted the `useLayoutEffect` will be fired after component mount. On contrast `StatusBar` will try to change its properties in `componentDidMount`. And technically `componentDidMount` will be executed first (before `useLayoutEffect`). But `StatusBar` schedules update via `setImmediate` and `setImmediate` will execute its callback after `useLayoutEffect`, so this fix should work 🙂 Closes #708 #587 ## 📢 Changelog ### Android - apply monkey patch in layout effect to be sure monkey patch can be applied earlier than first call to `StatusBar` module (if `KeyboardProvider` and `StatusBar` were mounted simultaneously). ## 🤔 How Has This Been Tested? Tested manually in https://github.com/NyoriK/keyboard-controller-test-project ## 📸 Screenshots (if appropriate): https://github.com/user-attachments/assets/6e259ffe-de59-46a6-b9a6-26de05698b06 ## 📝 Checklist - [x] CI successfully passed - [x] I added new mocks and corresponding unit-tests if library API was changed
1 parent 0ce68ed commit 19371d8

File tree

1 file changed

+3
-3
lines changed

1 file changed

+3
-3
lines changed

src/animated.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/* eslint react/jsx-sort-props: off */
2-
import React, { useEffect, useMemo, useRef, useState } from "react";
2+
import React, { useLayoutEffect, useMemo, useRef, useState } from "react";
33
import { Animated, Platform, StyleSheet } from "react-native";
44
import {
55
controlEdgeToEdgeValues,
@@ -192,8 +192,8 @@ export const KeyboardProvider = ({
192192
[],
193193
);
194194

195-
// effects
196-
useEffect(() => {
195+
// layout effects
196+
useLayoutEffect(() => {
197197
if (enabled) {
198198
applyMonkeyPatch();
199199
} else {

0 commit comments

Comments
 (0)