react-native-reanimated Fix useAnimatedKeyboard not giving proper value when using modal

Summary

Fixes #5754

Because modals are open next to the root view in view hierarchy, they are not observed by InsetManager. In this PR I added separate class that manages opened dialogs, so we can listen to changes on modals too. The assumption is that the useAnimatedKeyboard gives the value of any opened keyboard, not only the one in current view.

Before	After

Test plan

Test component

import * as React from 'react';
import {
  TextInput,
  View,
  Button,
  Modal,
  SafeAreaView,
  StyleSheet,
} from 'react-native';
import Animated, {
  useAnimatedKeyboard,
  useAnimatedReaction,
  useAnimatedStyle,
} from 'react-native-reanimated';

function MyModal({ visible, hide }) {
  return (
    <Modal transparent visible={visible} onDismiss={hide} onRequestClose={hide} onLayout={(layout) => console.log('layout', layout)}>
      <View style={styles.modalContainer}>
        <View style={styles.modalContent}>
          <Button onPress={hide} title="Close Modal" />
          <TextInput style={styles.textInput} placeholder="Inside a modal" />
          <KeyboardHeightResponder />
        </View>
      </View>
    </Modal>
  );
}

function KeyboardHeightResponder() {
  const keyboard = useAnimatedKeyboard();
  const style = useAnimatedStyle(() => ({
    width: 50,
    height: 50,
    borderRadius: 25,
    backgroundColor: 'red',
    transform: [{ translateY: -keyboard.height.value }],
  }));

  useAnimatedReaction(
    () => keyboard.height,
    (height) => console.log(height.value)
  );

  return <Animated.View style={style} />;
}

export default function EmptyExample() {
  const [visible, setVisible] = React.useState(false);

  return (
    <>
      <SafeAreaView style={styles.container}>
        <Button onPress={() => setVisible(true)} title="Open Modal" />
        <TextInput style={styles.textInput} placeholder="Outside a modal" />
        <KeyboardHeightResponder />
      </SafeAreaView>
      <MyModal visible={visible} hide={() => setVisible(false)} />
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-between',
    backgroundColor: '#ecf0f1',
    paddingHorizontal: 8,
    paddingBottom: 50,
    paddingTop: 8,
  },
  modalContainer: {
    ...StyleSheet.absoluteFill,
    flex: 1,
    justifyContent: 'center',
    backgroundColor: 'rgba(0,0,0,0.2)',
  },
  modalContent: {
    justifyContent: 'space-between',
    backgroundColor: 'white',
    borderRadius: 24,
    padding: 24,
    minHeight: 256,
  },
  textInput: {
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 8,
    backgroundColor: 'silver',
    fontSize: 18,
    textAlign: 'center',
  },
});

Apr 19 '24 10:04 maciekstosio

Hey @maciekstosio

Have you tested Fabric architecture? I've applied changes from this branch and it crashes app immediately when modal appears with:

FATAL EXCEPTION: main

com.facebook.react.uimanager.IllegalViewOperationException: Trying to resolve view with tag 480 which doesn't exist

FATAL EXCEPTION: main
Process: com.keyboardcontrollerfabricexample, PID: 3726
com.facebook.react.uimanager.IllegalViewOperationException: Trying to resolve view with tag 480 which doesn't exist
	at com.facebook.react.uimanager.NativeViewHierarchyManager.resolveView(NativeViewHierarchyManager.java:102)
	at com.facebook.react.uimanager.UIManagerModule.resolveView(UIManagerModule.java:870)
	at com.swmansion.reanimated.NodesManager.handleEvent(NodesManager.java:337)
	at com.swmansion.reanimated.NodesManager.onEventDispatch(NodesManager.java:320)
	at com.facebook.react.uimanager.events.FabricEventDispatcher.dispatchEvent(FabricEventDispatcher.java:43)

May 14 '24 14:05 kirillzyusko

Hi @kirillzyusko! I did test it on Fabric and it worked on example form the PR. I added try catch when resolving the view, that may help with your problem 42c1ad3. If it won't, please provide a reproducible repo, I'll take a look.

May 15 '24 08:05 maciekstosio

@maciekstosio hey, yes, I'll provide a repo 👍

May 16 '24 08:05 kirillzyusko

@maciekstosio it seems like I tested your PR against RN 0.73.4 (though now if I try to consume it, I'm getting an error that REA from branch is incompatible with RN 0.73.4).

Did you test your PR on RN 0.73 or only RN 0.74? 🤔

May 16 '24 08:05 kirillzyusko

@kirillzyusko I didn't test it on Fabric on RN 0.73, as we support Fabric since 0.74

May 21 '24 07:05 maciekstosio

@maciekstosio I have tried to test RN 0.74 + Fabric but for me it looked like modals were kind of broken there (I could open a modal, but window callbacks were not fired).

But if you tested it and it worked good in your case, then I think it's okay - I will try to test everything again more carefully next week.

May 21 '24 08:05 kirillzyusko

I tested few more approaches to tackle detecting Dialog open, but none of them seems like good fit: 

Add addEventListener on NodesManager - that would make registering modal separate from other logic, but the main problem with listening to all events remains.
addWindowFocusChangeListener with onWindowFocusChange and WindowInspector.getGlobalWindowViews() - that allows use do detect new dialogs, but we don’t have access to Window, which we need to set setDecorFitsSystemWindows.