fix: memoize text input events

Author: yenbekbay

@types/react-native.d.ts

@@ -0,0 +1,7 @@
+declare module 'react-native/Libraries/vendor/emitter/EventEmitter' {
+  import {EventEmitter} from 'react-native';
+
+  const EventEmitter: EventEmitter;
+
+  export = EventEmitter;
+}

src/KeyboardAwareContainer.tsx

@@ -285,12 +285,14 @@ export function useKeyboardAwareContainerProps<
   }, [updateOffsets]);
 
   useEffect(() => {
-    const sub = hijackTextInputEvents({
-      // We watch for the switch between two text inputs and update offsets
-      // accordingly.
-      // A switch between two text inputs happens when a keyboard is shown
-      // and another text input is currently being focused on.
-      onFocusTextInput: newFocusedTextInputNodeHandle => {
+    const textInputEvents = hijackTextInputEvents();
+    // We watch for the switch between two text inputs and update offsets
+    // accordingly.
+    // A switch between two text inputs happens when a keyboard is shown
+    // and another text input is currently being focused on.
+    const sub = textInputEvents.addListener(
+      'textInputDidFocus',
+      newFocusedTextInputNodeHandle => {
         requestAnimationFrame(async () => {
           if (
             !keyboardLayoutRef.current ||
@@ -315,7 +317,7 @@ export function useKeyboardAwareContainerProps<
           updateOffsets();
         });
       },
-    });
+    );
 
     return () => {
       sub.remove();
@@ -348,13 +350,13 @@ export function useKeyboardAwareContainerProps<
     const flatStyleProp = StyleSheet.flatten(styleProp) || {};
 
     let scrollViewBottomInsetProp = 0;
-    if ('paddingBottom' in flatStyleProp) {
-      if (typeof flatStyleProp.paddingBottom === 'number') {
-        scrollViewBottomInsetProp = flatStyleProp.paddingBottom;
+    if ('marginBottom' in flatStyleProp) {
+      if (typeof flatStyleProp.marginBottom === 'number') {
+        scrollViewBottomInsetProp = flatStyleProp.marginBottom;
       }
-    } else if ('padding' in flatStyleProp) {
-      if (typeof flatStyleProp.padding === 'number') {
-        scrollViewBottomInsetProp = flatStyleProp.padding;
+    } else if ('margin' in flatStyleProp) {
+      if (typeof flatStyleProp.margin === 'number') {
+        scrollViewBottomInsetProp = flatStyleProp.margin;
       }
     }
 

src/utils/EventEmitter.ts

@@ -0,0 +1,52 @@
+import {
+  EventEmitterListener,
+  EmitterSubscription as EventEmitterSubscription,
+  EventEmitter as WeaklyTypedEventEmitterInstance,
+} from 'react-native';
+import WeaklyTypedEventEmitter from 'react-native/Libraries/vendor/emitter/EventEmitter';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type ListenerType<T> = [T] extends [(...args: infer U) => any]
+  ? U
+  : [T] extends [void]
+  ? []
+  : [T];
+
+export interface EventEmitterInstance<TEvents>
+  extends Omit<
+    WeaklyTypedEventEmitterInstance,
+    | 'addListener'
+    | 'once'
+    | 'removeAllListeners'
+    | 'listeners'
+    | 'emit'
+    | 'removeListener'
+  > {
+  addListener<K extends keyof TEvents>(
+    eventType: K,
+    listener: (...args: ListenerType<TEvents[K]>) => void,
+    context?: unknown,
+  ): EventEmitterSubscription;
+  once<K extends keyof TEvents>(
+    eventType: K,
+    listener: (...args: ListenerType<TEvents[K]>) => void,
+    context?: unknown,
+  ): EventEmitterSubscription;
+  removeAllListeners(eventType: keyof TEvents): void;
+  listeners(eventType: keyof TEvents): EventEmitterSubscription[];
+  emit<K extends keyof TEvents>(
+    eventType: K,
+    ...params: ListenerType<TEvents[K]>
+  ): void;
+  removeListener<K extends keyof TEvents>(
+    eventType: K,
+    listener: (...args: ListenerType<TEvents[K]>) => void,
+  ): void;
+}
+
+export type EventEmitter<TEvents> = EventEmitterInstance<TEvents>;
+export type EventEmitterListener = EventEmitterListener;
+
+export const EventEmitter = (WeaklyTypedEventEmitter as unknown) as {
+  new <TEvents>(): EventEmitterInstance<TEvents>;
+};

src/utils/hijackTextInputEvents.ts

@@ -1,13 +1,19 @@
 // @ts-ignore: internal module
 import TextInputState from 'react-native/Libraries/Components/TextInput/TextInputState';
+import {EventEmitter} from './EventEmitter';
+
+interface TextInputEvents {
+  textInputDidFocus: (focusedTextInputId: number) => void;
+  textInputDidBlur: (focusedTextInputId: number) => void;
+}
+
+let textInputEvents: EventEmitter<TextInputEvents> | null = null;
+
+export function hijackTextInputEvents() {
+  if (textInputEvents) return textInputEvents;
+
+  textInputEvents = new EventEmitter();
 
-export function hijackTextInputEvents({
-  onFocusTextInput,
-  onBlurTextInput,
-}: {
-  onFocusTextInput?: (focusedTextInputId: number) => void;
-  onBlurTextInput?: (focusedTextInputId: number) => void;
-}) {
   const originalFocusTextInput = TextInputState.focusTextInput.bind(
     TextInputState,
   );
@@ -25,10 +31,11 @@ export function hijackTextInputEvents({
       focusedTextInputId !== null
     ) {
       currentlyFocusedTextInputId = focusedTextInputId;
-      if (onFocusTextInput) onFocusTextInput(focusedTextInputId);
+      if (textInputEvents) {
+        textInputEvents.emit('textInputDidFocus', focusedTextInputId);
+      }
     }
   };
-
   TextInputState.blurTextInput = (focusedTextInputId: number | null) => {
     originalBlurTextInput(focusedTextInputId);
 
@@ -37,14 +44,11 @@ export function hijackTextInputEvents({
       focusedTextInputId !== null
     ) {
       currentlyFocusedTextInputId = null;
-      if (onBlurTextInput) onBlurTextInput(focusedTextInputId);
+      if (textInputEvents) {
+        textInputEvents.emit('textInputDidBlur', focusedTextInputId);
+      }
     }
   };
 
-  return {
-    remove: () => {
-      TextInputState.focusTextInput = originalFocusTextInput;
-      TextInputState.blurTextInput = originalBlurTextInput;
-    },
-  };
+  return textInputEvents;
 }

tsconfig.json

@@ -18,5 +18,5 @@
     "strictPropertyInitialization": true,
     "target": "esnext"
   },
-  "include": ["./src/**/*"]
+  "include": ["./@types/**/*", "./src/**/*"]
 }