feat: focused input (#257)

## 📜 Description

Added new `useReanimatedFocusedInput` hook that returns an information
about `TextInput` that currently is in focus.

## 💡 Motivation and Context

Before we could use a `target` property to measure `TextInput`. However
such approach had several disadvantages:

- on Fabric you need to have an access to `ShadowNode` and it adds more
complexity to the code (and you need to use `findNodeHandle` which is
deprecated in StrictMode);
- if view layout was changed - you are still not aware about it, because
`useKeyboardHandler` is not reporting such cases (and obviously it
shouldn't);
- it seems like measure on Fabric works differently and you need to take
into consideration other UI elements (header height, etc.)

With the introduction of this hook all these disadvantages are gone 😎 

In this hook can be enhanced to cover more cases (for example add method
`update` which can synchronously update layout before reading it, or
update layout when certain lifecycle events occurs (for example screen
rotation)).

Closes
#249
#222

## 📢 Changelog

### Docs
- added a new group `Input` in API section;
- added a new page for new `useReanimatedFocusedInput` hook;
- added new key feature in README;
- added new keywords to `package.json`.

### JS
- update KeyboardAwareScrollView UI (don't generate colors randomly
anymore);
- detect growth of `TextInputs`;
- unified codebase across RN architectures (fabric, paper);
- added new unit tests for new hook;

### iOS
- added `KVO` to focused input;

### Android
- all listeners (callbacks, observers) now live in `listeners` package;
- removed zombie-view (on Fabric)
- listener clean up after setEnabled call

## 🤔 How Has This Been Tested?

Tested manually on (both paper and fabric):

- iPhone 6s (iOS 15.6);
- iPhone 11 (iOS 17.0);
- Pixel 7 Pro (Android 14);
- Xiaomi Redmi Note 5 Pro (Android 9);
- iPhone 15 (iOS 17.0, simulator);
- Pixel 3a (Android 13, emulator).

## 📸 Screenshots (if appropriate):


https://github.com/kirillzyusko/react-native-keyboard-controller/assets/22820318/a82f8dcc-41d3-475f-925e-c4bf574f7967

## 📝 Checklist

- [x] CI successfully passed

Author: kirillzyusko

FabricExample/__tests__/focused-input.spec.tsx

@@ -0,0 +1,62 @@
+import '@testing-library/jest-native/extend-expect';
+import React from 'react';
+import Reanimated, { useAnimatedStyle } from 'react-native-reanimated';
+import { render } from '@testing-library/react-native';
+
+import { useReanimatedFocusedInput } from 'react-native-keyboard-controller';
+
+function RectangleWithFocusedInputLayout() {
+  const { input } = useReanimatedFocusedInput();
+  const style = useAnimatedStyle(
+    () => {
+      const layout = input.value?.layout;
+
+      return {
+        top: layout?.y,
+        left: layout?.x,
+        height: layout?.height,
+        width: layout?.width,
+      };
+    },
+    []
+  );
+
+  return <Reanimated.View testID="view" style={style} />;
+}
+
+describe('`useReanimatedFocusedInput` mocking', () => {
+  it('should have different styles depends on `useReanimatedFocusedInput`', () => {
+    const { getByTestId, update } = render(<RectangleWithFocusedInputLayout />);
+
+    expect(getByTestId('view')).toHaveStyle({ 
+      top: 0,
+      left: 0,
+      width: 200,
+      height: 40,
+    });
+
+    (useReanimatedFocusedInput as jest.Mock).mockReturnValue({
+      input: {
+        value: {
+          target: 2,
+          layout: {
+            x: 10,
+            y: 100,
+            width: 190,
+            height: 80,
+            absoluteX: 100,
+            absoluteY: 200,
+          },
+        },
+      }
+    });
+    update(<RectangleWithFocusedInputLayout />);
+
+    expect(getByTestId('view')).toHaveStyle({
+        top: 100,
+        left: 10,
+        width: 190,
+        height: 80,
+    });
+  });
+});

FabricExample/src/screens/Examples/AwareScrollView/KeyboardAwareScrollView.tsx

@@ -1,22 +1,20 @@
 import React, { FC } from 'react';
 import { ScrollViewProps, useWindowDimensions } from 'react-native';
+import { FocusedInputLayoutChangedEvent, useReanimatedFocusedInput } from 'react-native-keyboard-controller';
 import Reanimated, {
-  MeasuredDimensions,
   interpolate,
   scrollTo,
+  useAnimatedReaction,
   useAnimatedRef,
   useAnimatedScrollHandler,
   useAnimatedStyle,
   useSharedValue,
   useWorkletCallback,
 } from 'react-native-reanimated';
 import { useSmoothKeyboardHandler } from './useSmoothKeyboardHandler';
-import { AwareScrollViewProvider, useAwareScrollView } from './context';
 
 const BOTTOM_OFFSET = 50;
 
-type KeyboardAwareScrollViewProps = ScrollViewProps;
-
 /**
  * Everything begins from `onStart` handler. This handler is called every time,
  * when keyboard changes its size or when focused `TextInput` was changed. In
@@ -55,22 +53,21 @@ type KeyboardAwareScrollViewProps = ScrollViewProps;
  * +============================+       +============================+        +=====================================+
  *
  */
-const KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({
+const KeyboardAwareScrollView: FC<ScrollViewProps> = ({
   children,
   ...rest
 }) => {
   const scrollViewAnimatedRef = useAnimatedRef<Reanimated.ScrollView>();
   const scrollPosition = useSharedValue(0);
   const position = useSharedValue(0);
-  const layout = useSharedValue<MeasuredDimensions | null>(null);
-  const fakeViewHeight = useSharedValue(0);
   const keyboardHeight = useSharedValue(0);
   const tag = useSharedValue(-1);
   const initialKeyboardSize = useSharedValue(0);
   const scrollBeforeKeyboardMovement = useSharedValue(0);
+  const { input } = useReanimatedFocusedInput();
+  const layout = useSharedValue<FocusedInputLayoutChangedEvent | null>(null);
 
   const { height } = useWindowDimensions();
-  const { measure } = useAwareScrollView();
 
   const onScroll = useAnimatedScrollHandler(
     {
@@ -84,10 +81,9 @@ const KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({
   /**
    * Function that will scroll a ScrollView as keyboard gets moving
    */
-  const maybeScroll = useWorkletCallback((e: number, animated = false) => {
-    fakeViewHeight.value = e;
+  const maybeScroll = useWorkletCallback((e: number, animated: boolean = false) => {
     const visibleRect = height - keyboardHeight.value;
-    const point = (layout.value?.pageY || 0) + (layout.value?.height || 0);
+    const point = (layout.value?.layout.absoluteY || 0) + (layout.value?.layout.height || 0);
 
     if (visibleRect - point <= BOTTOM_OFFSET) {
       const interpolatedScrollTo = interpolate(
@@ -98,7 +94,11 @@ const KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({
       const targetScrollY =
         Math.max(interpolatedScrollTo, 0) + scrollPosition.value;
       scrollTo(scrollViewAnimatedRef, 0, targetScrollY, animated);
+
+      return interpolatedScrollTo;
     }
+
+    return 0;
   }, []);
 
   useSmoothKeyboardHandler(
@@ -110,6 +110,8 @@ const KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({
           keyboardHeight.value !== e.height && e.height > 0;
         const keyboardWillAppear = e.height > 0 && keyboardHeight.value === 0;
         const keyboardWillHide = e.height === 0;
+        const focusWasChanged = (tag.value !== e.target && e.target !== -1) || keyboardWillChangeSize;
+
         if (keyboardWillChangeSize) {
           initialKeyboardSize.value = keyboardHeight.value;
         }
@@ -120,24 +122,28 @@ const KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({
           scrollPosition.value = scrollBeforeKeyboardMovement.value;
         }
 
-        if (keyboardWillAppear || keyboardWillChangeSize) {
+        if (keyboardWillAppear || keyboardWillChangeSize || focusWasChanged) {
           // persist scroll value
           scrollPosition.value = position.value;
           // just persist height - later will be used in interpolation
           keyboardHeight.value = e.height;
         }
 
         // focus was changed
-        if (tag.value !== e.target || keyboardWillChangeSize) {
+        if (focusWasChanged) {
           tag.value = e.target;
 
-          if (tag.value !== -1) {
-            // save position of focused text input when keyboard starts to move
-            layout.value = measure(e.target);
-            // save current scroll position - when keyboard will hide we'll reuse
-            // this value to achieve smooth hide effect
-            scrollBeforeKeyboardMovement.value = position.value;
-          }
+          // save position of focused text input when keyboard starts to move
+          layout.value = input.value;
+          // save current scroll position - when keyboard will hide we'll reuse
+          // this value to achieve smooth hide effect
+          scrollBeforeKeyboardMovement.value = position.value;
+        }
+
+        if (focusWasChanged && !keyboardWillAppear) {
+          // update position on scroll value, so `onEnd` handler 
+          // will pick up correct values
+          position.value += maybeScroll(e.height, true);
         }
       },
       onMove: (e) => {
@@ -150,24 +156,24 @@ const KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({
 
         keyboardHeight.value = e.height;
         scrollPosition.value = position.value;
-
-        if (e.target !== -1 && e.height !== 0) {
-          const prevLayout = layout.value;
-          // just be sure, that view is no overlapped (i.e. focus changed)
-          layout.value = measure(e.target);
-          maybeScroll(e.height, true);
-          // do layout substitution back to assure there will be correct
-          // back transition when keyboard hides
-          layout.value = prevLayout;
-        }
       },
     },
     [height]
   );
 
+  useAnimatedReaction(() => input.value, (current, previous) => {
+    if (current?.target === previous?.target && current?.layout.height !== previous?.layout.height) {
+      const prevLayout = layout.value;
+
+      layout.value = input.value;
+      scrollPosition.value += maybeScroll(keyboardHeight.value, true);
+      layout.value = prevLayout;
+    }
+  }, []);
+
   const view = useAnimatedStyle(
     () => ({
-      height: fakeViewHeight.value,
+      paddingBottom: keyboardHeight.value,
     }),
     []
   );
@@ -179,16 +185,11 @@ const KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({
       onScroll={onScroll}
       scrollEventThrottle={16}
     >
-      {children}
-      <Reanimated.View style={view} />
+      <Reanimated.View style={view}>
+        {children}
+      </Reanimated.View>
     </Reanimated.ScrollView>
   );
 };
 
-export default function (props: KeyboardAwareScrollViewProps) {
-  return (
-    <AwareScrollViewProvider>
-      <KeyboardAwareScrollView {...props} />
-    </AwareScrollViewProvider>
-  );
-}
+export default KeyboardAwareScrollView;

FabricExample/src/screens/Examples/AwareScrollView/TextInput.tsx

@@ -1,29 +1,32 @@
 import React from 'react';
-import { TextInputProps, TextInput as TextInputRN } from 'react-native';
-import { randomColor } from '../../../utils';
-import { useAwareScrollView } from './context';
-
-const TextInput = React.forwardRef((props: TextInputProps, forwardRef) => {
-  const { onRef } = useAwareScrollView();
+import { StyleSheet, TextInputProps, TextInput as TextInputRN } from 'react-native';
 
+const TextInput = (props: TextInputProps) => {
   return (
     <TextInputRN
-      ref={(ref) => {
-        onRef(ref);
-        if (typeof forwardRef === 'function') {
-          forwardRef(ref);
-        }
-      }}
-      placeholderTextColor="black"
-      style={{
-        width: '100%',
-        height: 50,
-        backgroundColor: randomColor(),
-        marginTop: 50,
-      }}
+      placeholderTextColor="#6c6c6c"
+      style={styles.container}
+      multiline
+      numberOfLines={10}
       {...props}
+      placeholder={`${props.placeholder} (${props.keyboardType === 'default' ? 'text' : 'numeric'})`}
     />
   );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    minHeight: 50,
+    maxHeight: 200,
+    marginBottom: 50,
+    borderColor: 'black',
+    borderWidth: 2,
+    marginRight: 160,
+    borderRadius: 10,
+    color: 'black',
+    paddingHorizontal: 12,
+  },
 });
 
 export default TextInput;