[RNKC-041] - correct subscribe/unsubscribe mechanism for keyboard events on iOS

[kirillzyusko]

Description

Reorganised subscription mechanism as per this SO answer.

Context And Motivation

The problem with old code was in the fact, that if subview is getting removed, then we unsubscribe from keyboard events. It's incorrect behaviour, since we should unsubscribe from events only in case if view itself is getting removed (not subviews, not sibling views).

Code to test

It was reproducible using code below:

// App.tsx
import 'react-native-gesture-handler';

import * as React from 'react';

import { NavigationContainer } from '@react-navigation/native';
import { KeyboardProvider } from 'react-native-keyboard-controller';
import {
  SafeAreaProvider,
  initialWindowMetrics,
} from 'react-native-safe-area-context';
import { PortalProvider } from '@gorhom/portal';
import RootStack from './navigation/RootStack';

export default function App() {
  return (
    <SafeAreaProvider initialMetrics={initialWindowMetrics}>
      <KeyboardProvider>
        <PortalProvider>
          <NavigationContainer>
            <RootStack />
          </NavigationContainer>
        </PortalProvider>
      </KeyboardProvider>
    </SafeAreaProvider>
  );
}

// screen
import React, { useState } from 'react';
import { Animated, Button, Text, TextInput, View } from 'react-native';
import Reanimated, { useAnimatedStyle } from 'react-native-reanimated';
import {
  useKeyboardAnimation,
  useReanimatedKeyboardAnimation,
} from 'react-native-keyboard-controller';
import { Portal } from '@gorhom/portal';
import styles from './styles';

export default function KeyboardAnimation({ navigation }) {
  const { height, progress } = useKeyboardAnimation();
  const { height: heightReplica } = useReanimatedKeyboardAnimation();
  const [portals, setPortals] = useState([]);

  const style = useAnimatedStyle(
    () => ({
      width: 50,
      height: 50,
      backgroundColor: 'blue',
      borderRadius: 25,
      transform: [{ translateY: heightReplica.value }],
    }),
    []
  );

  return (
    <View style={styles.container}>
      <View style={styles.row}>
        <Animated.View
          style={{
            width: 50,
            height: 50,
            backgroundColor: 'red',
            borderRadius: 25,
            transform: [{ translateY: height }],
          }}
        />
        <Animated.View
          style={{
            width: 50,
            height: 50,
            backgroundColor: 'green',
            borderRadius: 25,
            transform: [
              {
                translateX: progress.interpolate({
                  inputRange: [0, 1],
                  outputRange: [0, 100],
                }),
              },
            ],
          }}
        />
        <Reanimated.View style={style} />
      </View>
      <Button
        title="Open"
        onPress={() => setPortals([...portals, Math.random()])}
      />
      <Button title="Close" onPress={() => setPortals(portals.slice(0, -1))} />
      <TextInput
        style={{
          width: 200,
          marginTop: 50,
          marginBottom: 50,
          height: 50,
          backgroundColor: 'yellow',
        }}
      />
      {portals.map((portal, index) => (
        <Portal key={portal}>
          <View>
            <Text>Awesome {portal}</Text>
          </View>
        </Portal>
      ))}
    </View>
  );
}