Fix useAnimatedKeyboard not giving proper value when using modal

[maciekstosio]

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
before.useAnimatedKeyboardModal.mov	after.useAnimatedKeyboard.modal.mov

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',
  },
});

[kirillzyusko]

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)

[maciekstosio]

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.

[kirillzyusko]

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

[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? 🤔

[maciekstosio]

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

[kirillzyusko]

@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.