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