Skip to content

Commit

Permalink
fix: apply monkey patch before StatusBar updates (#744)
Browse files Browse the repository at this point in the history
## 📜 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
  • Loading branch information
kirillzyusko authored Dec 24, 2024
1 parent 0ce68ed commit 19371d8
Showing 1 changed file with 3 additions and 3 deletions.
6 changes: 3 additions & 3 deletions src/animated.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* eslint react/jsx-sort-props: off */
import React, { useEffect, useMemo, useRef, useState } from "react";
import React, { useLayoutEffect, useMemo, useRef, useState } from "react";
import { Animated, Platform, StyleSheet } from "react-native";
import {
controlEdgeToEdgeValues,
Expand Down Expand Up @@ -192,8 +192,8 @@ export const KeyboardProvider = ({
[],
);

// effects
useEffect(() => {
// layout effects
useLayoutEffect(() => {
if (enabled) {
applyMonkeyPatch();
} else {
Expand Down

0 comments on commit 19371d8

Please sign in to comment.