KeyboardAvoidingView doesn't work as intended on Android 10

[breakingrobot]

Describe the bug
On an Android 10 React Native app using a multi-step form with two screens that include an autofocused TextInput, any router.navigate or router.push will succeed but the following will happen

• While navigation from ScreenA to ScreenB, keyboard doesn't seem to be dismissed
• On ScreenB, TextInput is focused but the keyboard has no animation and KeyboardAvoidingView does not apply the padding expected.

Repo for reproducing
https://github.com/breakingrobot/react-native-keyboard-controller/tree/android-10-bug

To Reproduce
Steps to reproduce the behavior:

1. Run an emulator with Android SDK <=29 (Android 10 and lower)
2. Build the example app from my fork
3. Go to Example 14. Keyboard Avoiding View
4. Press Submit
5. Go back and retry

Expected behavior
Behavior that exhibit any Android devices with Android 11 and higher :

• While navigating from ScreenA to ScreenB, keyboard should be dismissed
• On ScreenB, TextInput is focused, keyboard and KeyboardAvoidingView should trigger its animation and apply the correct padding

Screenshots

Android 10 - SDK 29

Enregistrement.de.l.ecran.2024-03-21.a.18.53.16.mp4

Android 14 - SDK 34

Enregistrement.de.l.ecran.2024-03-21.a.18.56.28.mp4

Smartphone (please complete the following information):

• Desktop OS: macOS 14.0 (Sonoma)
• Device:
  • Failing device: Emulated Pixel 4 - SDK 29 (arm64_v8a)
  • Successful device: Emulated Pixel 8 - SDK 34 (arm64_v8a)
• OS: Android 10 (SDK 29)
• RN version: 0.73.6 / 0.73.4 (on our Expo Project)
• RN architecture: Fabric
• JS engine: Hermes
• Library version: 1.11.4

[kirillzyusko]

@breakingrobot Interesting! I thought it could be fixed in #391 but it looks like you are using latest version and if the issues is reproducible - it means that it's something else.

On your video I see, that on Android 14 keyboard starts to hide, but then appears again, while on Android 10 it always stays on the screen.

I'll look into the problem, but as a potential workaround I could suggest you to manually close keyboard before navigating to the next screen (KeyboardController.dismiss()) and do autoFocus with some delay, like:

useEffect(() => {
  setTimeout(() => textInputRef.current.focus(), 250);
}, []);

I think it should do the trick! But I'll try to allocate some time and look into the problem 👀

[breakingrobot]

@kirillzyusko Thanks for your quick answer, just to let you know I had a workaround with KeyboardController.dismiss()

I then tried with delaying focus with a textInputRef exactly like your code snippet and it alone solved the issue without KeyboardController.dismiss()

Using expo-router or react-navigation useFocusEffect :

useFocusEffect(
    useCallback(() => {
      setTimeout(() => inputRef?.current?.focus(), 250);
    }, []),
  );

This seems to do the trick right now, again thank you for your time to look into the problem!