react-native-keyboard-controller 1.2.0 → 1.4.0

package/lib/typescript/context.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { Animated } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
+import type { KeyboardHandlers } from './types';
+export declare type AnimatedContext = {
+    progress: Animated.Value;
+    height: Animated.AnimatedMultiplication<number>;
+};
+export declare type ReanimatedContext = {
+    progress: SharedValue<number>;
+    height: SharedValue<number>;
+};
+export declare type KeyboardAnimationContext = {
+    animated: AnimatedContext;
+    reanimated: ReanimatedContext;
+    setHandlers: (handlers: KeyboardHandlers) => void;
+};
+export declare const KeyboardContext: import("react").Context<KeyboardAnimationContext>;

package/lib/typescript/hooks.d.ts

@@ -0,0 +1,8 @@
+import { DependencyList } from 'react';
+import { AnimatedContext, ReanimatedContext } from './context';
+import type { KeyboardHandler } from './types';
+export declare const useResizeMode: () => void;
+export declare const useKeyboardAnimation: () => AnimatedContext;
+export declare const useReanimatedKeyboardAnimation: () => ReanimatedContext;
+export declare function useGenericKeyboardHandler(handler: KeyboardHandler, deps?: DependencyList): void;
+export declare function useKeyboardHandler(handler: KeyboardHandler, deps?: DependencyList): void;

package/lib/typescript/index.d.ts

@@ -2,3 +2,6 @@ import './monkey-patch';
 export * from './native';
 export * from './animated';
 export * from './replicas';
+export * from './context';
+export * from './hooks';
+export * from './types';

package/lib/typescript/internal.d.ts

@@ -0,0 +1,21 @@
+import type { EventWithName, Handlers, NativeEvent } from './types';
+export declare function useAnimatedKeyboardHandler<TContext extends Record<string, unknown>>(handlers: {
+    onKeyboardMoveStart?: (e: NativeEvent, context: TContext) => void;
+    onKeyboardMove?: (e: NativeEvent, context: TContext) => void;
+    onKeyboardMoveEnd?: (e: NativeEvent, context: TContext) => void;
+}, dependencies?: ReadonlyArray<unknown>): (e: import("react-native").NativeSyntheticEvent<EventWithName<NativeEvent>>) => void;
+/**
+ * Hook for storing worklet handlers (objects with keys, where values are worklets).
+ * Returns methods for setting handlers and broadcasting events in them.
+ *
+ * T is a generic that looks like:
+ * @example
+ * {
+ *  onEvent: () => {},
+ *  onEvent2: () => {},
+ * }
+ */
+export declare function useSharedHandlers<T extends Record<string, Function>>(): {
+    setHandlers: (handler: Handlers<T>) => void;
+    broadcast: (type: keyof T, event: NativeEvent) => void;
+};

package/lib/typescript/native.d.ts

@@ -1,34 +1,22 @@
-import { NativeSyntheticEvent, ViewProps } from 'react-native';
+import type { KeyboardControllerEvents, KeyboardControllerModule, KeyboardEventData } from './types';
 export declare enum AndroidSoftInputModes {
     SOFT_INPUT_ADJUST_NOTHING = 48,
     SOFT_INPUT_ADJUST_PAN = 32,
     SOFT_INPUT_ADJUST_RESIZE = 16,
-    SOFT_INPUT_ADJUST_UNSPECIFIED = 0
+    SOFT_INPUT_ADJUST_UNSPECIFIED = 0,
+    SOFT_INPUT_IS_FORWARD_NAVIGATION = 256,
+    SOFT_INPUT_MASK_ADJUST = 240,
+    SOFT_INPUT_MASK_STATE = 15,
+    SOFT_INPUT_MODE_CHANGED = 512,
+    SOFT_INPUT_STATE_ALWAYS_HIDDEN = 3,
+    SOFT_INPUT_STATE_ALWAYS_VISIBLE = 5,
+    SOFT_INPUT_STATE_HIDDEN = 2,
+    SOFT_INPUT_STATE_UNCHANGED = 1,
+    SOFT_INPUT_STATE_UNSPECIFIED = 0,
+    SOFT_INPUT_STATE_VISIBLE = 4
 }
-export declare type NativeEvent = {
-    progress: number;
-    height: number;
-};
-export declare type EventWithName<T> = {
-    eventName: string;
-} & T;
-export declare type KeyboardControllerProps = {
-    onKeyboardMove: (e: NativeSyntheticEvent<EventWithName<NativeEvent>>) => void;
-    onKeyboardMoveReanimated: (e: NativeSyntheticEvent<EventWithName<NativeEvent>>) => void;
-    statusBarTranslucent?: boolean;
-} & ViewProps;
-declare type KeyboardController = {
-    setDefaultMode: () => void;
-    setInputMode: (mode: AndroidSoftInputModes) => void;
-};
-export declare const KeyboardController: KeyboardController;
-declare type KeyboardControllerEvents = 'keyboardWillShow' | 'keyboardDidShow' | 'keyboardWillHide' | 'keyboardDidHide';
-declare type KeyboardEvent = {
-    height: number;
-};
+export declare const KeyboardController: KeyboardControllerModule;
 export declare const KeyboardEvents: {
-    addListener: (name: KeyboardControllerEvents, cb: (e: KeyboardEvent) => void) => import("react-native").EmitterSubscription;
+    addListener: (name: KeyboardControllerEvents, cb: (e: KeyboardEventData) => void) => import("react-native").EmitterSubscription;
 };
 export declare const KeyboardControllerView: any;
-export declare const useResizeMode: () => void;
-export {};

package/lib/typescript/{KeyboardControllerViewNativeComponent.d.ts → specs/KeyboardControllerViewNativeComponent.d.ts}

@@ -8,6 +8,8 @@ declare type KeyboardMoveEvent = Readonly<{
 export interface NativeProps extends ViewProps {
     statusBarTranslucent?: boolean;
     onKeyboardMove?: DirectEventHandler<KeyboardMoveEvent>;
+    onKeyboardMoveStart?: DirectEventHandler<KeyboardMoveEvent>;
+    onKeyboardMoveEnd?: DirectEventHandler<KeyboardMoveEvent>;
 }
 declare const _default: HostComponent<NativeProps>;
 export default _default;

package/lib/typescript/types.d.ts

@@ -0,0 +1,32 @@
+import type { NativeSyntheticEvent, ViewProps } from 'react-native';
+export declare type NativeEvent = {
+    progress: number;
+    height: number;
+};
+export declare type EventWithName<T> = {
+    eventName: string;
+} & T;
+export declare type KeyboardControllerProps = {
+    onKeyboardMoveStart?: (e: NativeSyntheticEvent<EventWithName<NativeEvent>>) => void;
+    onKeyboardMove?: (e: NativeSyntheticEvent<EventWithName<NativeEvent>>) => void;
+    onKeyboardMoveEnd?: (e: NativeSyntheticEvent<EventWithName<NativeEvent>>) => void;
+    onKeyboardMoveReanimated: (e: NativeSyntheticEvent<EventWithName<NativeEvent>>) => void;
+    statusBarTranslucent?: boolean;
+} & ViewProps;
+export declare type KeyboardControllerModule = {
+    setDefaultMode: () => void;
+    setInputMode: (mode: number) => void;
+    addListener: (eventName: string) => void;
+    removeListeners: (count: number) => void;
+};
+export declare type KeyboardControllerEvents = 'keyboardWillShow' | 'keyboardDidShow' | 'keyboardWillHide' | 'keyboardDidHide';
+export declare type KeyboardEventData = {
+    height: number;
+};
+export declare type Handlers<T> = Record<string, T | undefined>;
+export declare type KeyboardHandler = {
+    onStart?: (e: NativeEvent) => void;
+    onMove?: (e: NativeEvent) => void;
+    onEnd?: (e: NativeEvent) => void;
+};
+export declare type KeyboardHandlers = Handlers<KeyboardHandler>;

package/lib/typescript/utils.d.ts

@@ -0,0 +1 @@
+export declare const uuid: () => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-keyboard-controller",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "Keyboard manager which works in identical way on both iOS and Android",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -17,6 +17,9 @@
     "!lib/typescript/example",
     "!android/build",
     "!android/.gradle",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
     "!ios/build",
     "!**/__tests__",
     "!**/__fixtures__",
@@ -55,8 +58,8 @@
     "@react-native-community/eslint-config": "^2.0.0",
     "@release-it/conventional-changelog": "^2.0.0",
     "@types/jest": "^27.4.1",
-    "@types/react": "^18.0.17",
-    "@types/react-native": "0.69.5",
+    "@types/react": "^18.0.21",
+    "@types/react-native": "0.70.4",
     "commitlint": "^11.0.0",
     "clang-format": "^1.8.0",
     "eslint": "^7.2.0",
@@ -66,17 +69,17 @@
     "jest": "^27.5.1",
     "pod-install": "^0.1.0",
     "prettier": "^2.6.2",
-    "react": "18.0.0",
-    "react-native": "0.69.4",
+    "react": "18.1.0",
+    "react-native": "0.70.2",
     "react-native-builder-bob": "^0.18.0",
-    "react-native-reanimated": "2.9.1",
+    "react-native-reanimated": "2.10.0",
     "release-it": "^14.2.2",
-    "typescript": "^4.6.3"
+    "typescript": "^4.8.4"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
-    "react-native-reanimated": "^2.3.0"
+    "react-native-reanimated": ">=2.3.0"
   },
   "jest": {
     "preset": "react-native",
@@ -153,17 +156,11 @@
     ]
   },
   "codegenConfig": {
-    "libraries": [
-      {
-        "name": "RNKeyboardControllerSpec",
-        "type": "modules",
-        "jsSrcsDir": "src"
-      },
-      {
-        "name": "RNKeyboardControllerViewSpec",
-        "type": "components",
-        "jsSrcsDir": "src"
-      }
-    ]
+    "name": "reactnativekeyboardcontroller",
+    "type": "all",
+    "jsSrcsDir": "./src/specs",
+    "android": {
+      "javaPackageName": "com.reactnativekeyboardcontroller"
+    }
   }
 }

package/react-native-keyboard-controller.podspec

@@ -12,7 +12,7 @@ Pod::Spec.new do |s|
   s.license      = package["license"]
   s.authors      = package["author"]
 
-  s.platforms    = { :ios => "10.0" }
+  s.platforms    = { :ios => "11.0" }
   s.source       = { :git => "https://github.com/kirillzyusko/react-native-keyboard-controller.git", :tag => "#{s.version}" }
 
   s.source_files = "ios/**/*.{h,m,mm,swift}"
@@ -25,6 +25,7 @@ Pod::Spec.new do |s|
     s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
     s.pod_target_xcconfig    = {
       "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
+      "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1",
       "CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
     }
 

package/src/animated.tsx

@@ -1,17 +1,16 @@
-import React, { useContext, useMemo, useRef } from 'react';
-import { Animated, StyleSheet, ViewStyle } from 'react-native';
-import Reanimated, {
-  useEvent,
-  useHandler,
-  useSharedValue,
-} from 'react-native-reanimated';
-import {
-  EventWithName,
+import React, { useMemo, useRef } from 'react';
+import { Animated, Platform, StyleSheet, ViewStyle } from 'react-native';
+import Reanimated, { useSharedValue } from 'react-native-reanimated';
+
+import { KeyboardContext } from './context';
+import { useAnimatedKeyboardHandler, useSharedHandlers } from './internal';
+import { KeyboardControllerView } from './native';
+
+import type {
   KeyboardControllerProps,
-  KeyboardControllerView,
+  KeyboardHandler,
   NativeEvent,
-  useResizeMode,
-} from './native';
+} from './types';
 
 const KeyboardControllerViewAnimated = Reanimated.createAnimatedComponent(
   Animated.createAnimatedComponent(
@@ -19,66 +18,6 @@ const KeyboardControllerViewAnimated = Reanimated.createAnimatedComponent(
   ) as React.FC<KeyboardControllerProps>
 );
 
-type AnimatedContext = {
-  progress: Animated.Value;
-  height: Animated.Value;
-};
-type ReanimatedContext = {
-  progress: Reanimated.SharedValue<number>;
-  height: Reanimated.SharedValue<number>;
-};
-type KeyboardAnimationContext = {
-  animated: AnimatedContext;
-  reanimated: ReanimatedContext;
-};
-const defaultContext: KeyboardAnimationContext = {
-  animated: {
-    progress: new Animated.Value(0),
-    height: new Animated.Value(0),
-  },
-  reanimated: {
-    progress: { value: 0 },
-    height: { value: 0 },
-  },
-};
-export const KeyboardContext = React.createContext(defaultContext);
-
-export const useKeyboardAnimation = (): AnimatedContext => {
-  useResizeMode();
-  const context = useContext(KeyboardContext);
-
-  return context.animated;
-};
-
-export const useReanimatedKeyboardAnimation = (): ReanimatedContext => {
-  useResizeMode();
-  const context = useContext(KeyboardContext);
-
-  return context.reanimated;
-};
-
-function useAnimatedKeyboardHandler<TContext extends Record<string, unknown>>(
-  handlers: {
-    onKeyboardMove?: (e: NativeEvent, context: TContext) => void;
-  },
-  dependencies?: ReadonlyArray<unknown>
-) {
-  const { context, doDependenciesDiffer } = useHandler(handlers, dependencies);
-
-  return useEvent(
-    (event: EventWithName<NativeEvent>) => {
-      'worklet';
-      const { onKeyboardMove } = handlers;
-
-      if (onKeyboardMove && event.eventName.endsWith('onKeyboardMove')) {
-        onKeyboardMove(event, context);
-      }
-    },
-    ['onKeyboardMove'],
-    doDependenciesDiffer
-  );
-}
-
 type Styles = {
   container: ViewStyle;
   hidden: ViewStyle;
@@ -112,14 +51,19 @@ export const KeyboardProvider = ({
   children,
   statusBarTranslucent,
 }: KeyboardProviderProps) => {
+  // animated values
   const progress = useRef(new Animated.Value(0)).current;
   const height = useRef(new Animated.Value(0)).current;
+  // shared values
   const progressSV = useSharedValue(0);
   const heightSV = useSharedValue(0);
+  const { setHandlers, broadcast } = useSharedHandlers<KeyboardHandler>();
+  // memo
   const context = useMemo(
     () => ({
-      animated: { progress: progress, height: height },
+      animated: { progress: progress, height: Animated.multiply(height, -1) },
       reanimated: { progress: progressSV, height: heightSV },
+      setHandlers,
     }),
     []
   );
@@ -130,7 +74,6 @@ export const KeyboardProvider = ({
     ],
     []
   );
-
   const onKeyboardMove = useMemo(
     () =>
       Animated.event(
@@ -146,13 +89,33 @@ export const KeyboardProvider = ({
       ),
     []
   );
-
+  // handlers
+  const updateSharedValues = (event: NativeEvent, platforms: string[]) => {
+    'worklet';
+
+    if (platforms.includes(Platform.OS)) {
+      progressSV.value = event.progress;
+      heightSV.value = -event.height;
+    }
+  };
   const handler = useAnimatedKeyboardHandler(
     {
+      onKeyboardMoveStart: (event: NativeEvent) => {
+        'worklet';
+
+        broadcast('onStart', event);
+        updateSharedValues(event, ['ios']);
+      },
       onKeyboardMove: (event: NativeEvent) => {
         'worklet';
-        progressSV.value = event.progress;
-        heightSV.value = event.height;
+
+        broadcast('onMove', event);
+        updateSharedValues(event, ['android']);
+      },
+      onKeyboardMoveEnd: (event: NativeEvent) => {
+        'worklet';
+
+        broadcast('onEnd', event);
       },
     },
     []
@@ -162,7 +125,8 @@ export const KeyboardProvider = ({
     <KeyboardContext.Provider value={context}>
       <KeyboardControllerViewAnimated
         onKeyboardMoveReanimated={handler}
-        onKeyboardMove={onKeyboardMove}
+        onKeyboardMoveStart={Platform.OS === 'ios' ? onKeyboardMove : undefined}
+        onKeyboardMove={Platform.OS === 'android' ? onKeyboardMove : undefined}
         statusBarTranslucent={statusBarTranslucent}
         style={styles.container}
       >

package/src/context.ts

@@ -0,0 +1,31 @@
+import { createContext } from 'react';
+import { Animated } from 'react-native';
+
+import type { SharedValue } from 'react-native-reanimated';
+import type { KeyboardHandlers } from './types';
+
+export type AnimatedContext = {
+  progress: Animated.Value;
+  height: Animated.AnimatedMultiplication<number>;
+};
+export type ReanimatedContext = {
+  progress: SharedValue<number>;
+  height: SharedValue<number>;
+};
+export type KeyboardAnimationContext = {
+  animated: AnimatedContext;
+  reanimated: ReanimatedContext;
+  setHandlers: (handlers: KeyboardHandlers) => void;
+};
+const defaultContext: KeyboardAnimationContext = {
+  animated: {
+    progress: new Animated.Value(0),
+    height: new Animated.Value(0),
+  },
+  reanimated: {
+    progress: { value: 0 },
+    height: { value: 0 },
+  },
+  setHandlers: () => {},
+};
+export const KeyboardContext = createContext(defaultContext);

package/src/hooks.ts

@@ -0,0 +1,56 @@
+import { DependencyList, useContext, useEffect } from 'react';
+
+import { AnimatedContext, KeyboardContext, ReanimatedContext } from './context';
+import { AndroidSoftInputModes, KeyboardController } from './native';
+import { uuid } from './utils';
+
+import type { KeyboardHandler } from './types';
+
+export const useResizeMode = () => {
+  useEffect(() => {
+    KeyboardController.setInputMode(
+      AndroidSoftInputModes.SOFT_INPUT_ADJUST_RESIZE
+    );
+
+    return () => KeyboardController.setDefaultMode();
+  }, []);
+};
+
+export const useKeyboardAnimation = (): AnimatedContext => {
+  useResizeMode();
+  const context = useContext(KeyboardContext);
+
+  return context.animated;
+};
+
+export const useReanimatedKeyboardAnimation = (): ReanimatedContext => {
+  useResizeMode();
+  const context = useContext(KeyboardContext);
+
+  return context.reanimated;
+};
+
+export function useGenericKeyboardHandler(
+  handler: KeyboardHandler,
+  deps?: DependencyList
+) {
+  const context = useContext(KeyboardContext);
+
+  useEffect(() => {
+    const key = uuid();
+
+    context.setHandlers({ [key]: handler });
+
+    return () => {
+      context.setHandlers({ [key]: undefined });
+    };
+  }, deps);
+}
+
+export function useKeyboardHandler(
+  handler: KeyboardHandler,
+  deps?: DependencyList
+) {
+  useResizeMode();
+  useGenericKeyboardHandler(handler, deps);
+}

package/src/index.ts

@@ -3,3 +3,6 @@ import './monkey-patch';
 export * from './native';
 export * from './animated';
 export * from './replicas';
+export * from './context';
+export * from './hooks';
+export * from './types';

package/src/internal.ts

@@ -0,0 +1,87 @@
+import { useCallback, useRef } from 'react';
+import { useEvent, useHandler, useSharedValue } from 'react-native-reanimated';
+
+import type { EventWithName, Handlers, NativeEvent } from './types';
+
+export function useAnimatedKeyboardHandler<
+  TContext extends Record<string, unknown>
+>(
+  handlers: {
+    onKeyboardMoveStart?: (e: NativeEvent, context: TContext) => void;
+    onKeyboardMove?: (e: NativeEvent, context: TContext) => void;
+    onKeyboardMoveEnd?: (e: NativeEvent, context: TContext) => void;
+  },
+  dependencies?: ReadonlyArray<unknown>
+) {
+  const { context, doDependenciesDiffer } = useHandler(handlers, dependencies);
+
+  return useEvent(
+    (event: EventWithName<NativeEvent>) => {
+      'worklet';
+      const { onKeyboardMoveStart, onKeyboardMove, onKeyboardMoveEnd } =
+        handlers;
+
+      if (
+        onKeyboardMoveStart &&
+        event.eventName.endsWith('onKeyboardMoveStart')
+      ) {
+        onKeyboardMoveStart(event, context);
+      }
+
+      if (onKeyboardMove && event.eventName.endsWith('onKeyboardMove')) {
+        onKeyboardMove(event, context);
+      }
+
+      if (onKeyboardMoveEnd && event.eventName.endsWith('onKeyboardMoveEnd')) {
+        onKeyboardMoveEnd(event, context);
+      }
+    },
+    ['onKeyboardMoveStart', 'onKeyboardMove', 'onKeyboardMoveEnd'],
+    doDependenciesDiffer
+  );
+}
+
+/**
+ * Hook for storing worklet handlers (objects with keys, where values are worklets).
+ * Returns methods for setting handlers and broadcasting events in them.
+ *
+ * T is a generic that looks like:
+ * @example
+ * {
+ *  onEvent: () => {},
+ *  onEvent2: () => {},
+ * }
+ */
+export function useSharedHandlers<T extends Record<string, Function>>() {
+  const handlers = useSharedValue<Handlers<T>>({});
+  const jsHandlers = useRef<Handlers<T>>({});
+
+  // since js -> worklet -> js call is asynchronous, we can not write handlers
+  // straight into shared variable (using current shared value as a previous result),
+  // since there may be a race condition in a call, and closure may have out-of-dated
+  // values. As a result, some of handlers may be not written to "all handlers" object.
+  // Below we are writing all handlers to `ref` and afterwards synchronize them with
+  // shared value (since `refs` are not referring to actual value in worklets).
+  // This approach allow us to update synchronously handlers in js thread (and it assures,
+  // that it will have all of them) and then update them in worklet thread (calls are
+  // happening in FIFO order, so we will always have actual value).
+  const updateSharedHandlers = () => {
+    handlers.value = jsHandlers.current;
+  };
+  const setHandlers = useCallback((handler: Handlers<T>) => {
+    jsHandlers.current = {
+      ...jsHandlers.current,
+      ...handler,
+    };
+    updateSharedHandlers();
+  }, []);
+  const broadcast = (type: keyof T, event: NativeEvent) => {
+    'worklet';
+
+    Object.keys(handlers.value).forEach((key) =>
+      handlers.value[key]?.[type]?.(event)
+    );
+  };
+
+  return { setHandlers, broadcast };
+}

package/src/{monkey-patch.tsx → monkey-patch.ts}

@@ -1,14 +1,11 @@
-import { NativeModules, Platform } from 'react-native';
+import { Platform } from 'react-native';
 // @ts-expect-error because there is no corresponding type definition
 import * as NativeAndroidManager from 'react-native/Libraries/Components/StatusBar/NativeStatusBarManagerAndroid';
 
-import { isTurboModuleEnabled } from './architecture';
-
 const getConstants = NativeAndroidManager.default.getConstants;
 
-const RCTStatusBarManagerCompat = isTurboModuleEnabled
-  ? require('./NativeStatusBarManagerCompat').default
-  : NativeModules.StatusBarManagerCompat;
+const RCTStatusBarManagerCompat =
+  require('./specs/NativeStatusBarManagerCompat').default;
 
 // On Android < 11 RN uses legacy API which breaks EdgeToEdge mode in RN, so
 // in order to use library on all available platforms we have to monkey patch