react-native-keyboard-controller 1.0.0-alpha.0

package/src/native.ts

@@ -0,0 +1,82 @@
+import React, { useEffect } from 'react';
+import {
+  requireNativeComponent,
+  UIManager,
+  Platform,
+  ViewStyle,
+  NativeModules,
+  NativeEventEmitter,
+  NativeSyntheticEvent,
+} from 'react-native';
+
+const LINKING_ERROR =
+  `The package 'react-native-keyboard-controller' doesn't seem to be linked. Make sure: \n\n` +
+  Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
+  '- You rebuilt the app after installing the package\n' +
+  '- You are not using Expo managed workflow\n';
+
+export enum AndroidSoftInputModes {
+  SOFT_INPUT_ADJUST_NOTHING = 48,
+  SOFT_INPUT_ADJUST_PAN = 32,
+  SOFT_INPUT_ADJUST_RESIZE = 16,
+  SOFT_INPUT_ADJUST_UNSPECIFIED = 0,
+}
+
+export type NativeEvent = {
+  progress: number;
+  height: number;
+};
+export type EventWithName<T> = {
+  eventName: string;
+} & T;
+export type KeyboardControllerProps = {
+  style?: ViewStyle;
+  children: React.ReactNode;
+  onKeyboardMove: (e: NativeSyntheticEvent<EventWithName<NativeEvent>>) => void;
+  // fake prop used to activate reanimated bindings
+  onKeyboardMoveReanimated: (
+    e: NativeSyntheticEvent<EventWithName<NativeEvent>>
+  ) => void;
+};
+type KeyboardController = {
+  // android only
+  setDefaultMode: () => void;
+  setInputMode: (mode: AndroidSoftInputModes) => void;
+};
+
+const ComponentName = 'KeyboardControllerView';
+
+const RCTKeyboardController = NativeModules.KeyboardController;
+export const KeyboardController = RCTKeyboardController as KeyboardController;
+
+const eventEmitter = new NativeEventEmitter(RCTKeyboardController);
+type KeyboardControllerEvents =
+  | 'keyboardWillShow'
+  | 'keyboardDidShow'
+  | 'keyboardWillHide'
+  | 'keyboardDidHide';
+type KeyboardEvent = {
+  height: number;
+};
+export const KeyboardEvents = {
+  addListener: (
+    name: KeyboardControllerEvents,
+    cb: (e: KeyboardEvent) => void
+  ) => eventEmitter.addListener('KeyboardController::' + name, cb),
+};
+export const KeyboardControllerView =
+  UIManager.getViewManagerConfig(ComponentName) != null
+    ? requireNativeComponent<KeyboardControllerProps>(ComponentName)
+    : () => {
+        throw new Error(LINKING_ERROR);
+      };
+
+export const useResizeMode = () => {
+  useEffect(() => {
+    KeyboardController.setInputMode(
+      AndroidSoftInputModes.SOFT_INPUT_ADJUST_RESIZE
+    );
+
+    return () => KeyboardController.setDefaultMode();
+  }, []);
+};

package/src/replicas.ts

@@ -0,0 +1,152 @@
+import { useRef, useEffect, useMemo } from 'react';
+import { Animated, Easing, Keyboard, Platform } from 'react-native';
+import {
+  runOnUI,
+  useAnimatedReaction,
+  useDerivedValue,
+  useSharedValue,
+  useWorkletCallback,
+  withSpring,
+} from 'react-native-reanimated';
+import { useReanimatedKeyboardAnimation } from './animated';
+
+import { AndroidSoftInputModes, KeyboardController } from './native';
+
+const availableOSEventType = Platform.OS === 'ios' ? 'Will' : 'Did';
+
+// cubic-bezier(.17,.67,.34,.94)
+export const defaultAndroidEasing = Easing.bezier(0.4, 0.0, 0.2, 1);
+type KeyboardAnimation = {
+  progress: Animated.Value;
+  height: Animated.Value;
+};
+
+/**
+ * An experimental implementation of tracing keyboard appearance.
+ * Switch an input mode to adjust resize mode. In this case all did* events
+ * are triggering before keyboard appears, and using some approximations
+ * it tries to mimicries a native transition.
+ *
+ * @returns {Animated.Value}
+ */
+export const useKeyboardAnimationReplica = (): KeyboardAnimation => {
+  const height = useRef(new Animated.Value(0));
+  const progress = useRef(new Animated.Value(0));
+  const animation = useMemo(
+    () => ({
+      height: height.current,
+      progress: progress.current,
+    }),
+    []
+  );
+
+  useEffect(() => {
+    KeyboardController.setInputMode(
+      AndroidSoftInputModes.SOFT_INPUT_ADJUST_RESIZE
+    );
+
+    return () => KeyboardController.setDefaultMode();
+  }, []);
+  useEffect(() => {
+    const listener = Keyboard.addListener(
+      `keyboard${availableOSEventType}Show`,
+      (e) => {
+        Animated.timing(height.current, {
+          toValue: -e.endCoordinates.height,
+          duration: e.duration !== 0 ? e.duration : 300,
+          easing: Easing.bezier(0.4, 0.0, 0.2, 1),
+          useNativeDriver: true,
+        }).start();
+
+        return () => listener.remove();
+      }
+    );
+  }, []);
+  useEffect(() => {
+    const listener = Keyboard.addListener(
+      `keyboard${availableOSEventType}Hide`,
+      (e) => {
+        Animated.timing(height.current, {
+          toValue: 0,
+          duration: e.duration !== 0 ? e.duration : 300,
+          easing: Easing.bezier(0.4, 0.0, 0.2, 1),
+          useNativeDriver: true,
+        }).start();
+
+        return () => listener.remove();
+      }
+    );
+  }, []);
+
+  return animation;
+};
+
+const IOS_SPRING_CONFIG = {
+  damping: 500,
+  stiffness: 1000,
+  mass: 3,
+  overshootClamping: true,
+  restDisplacementThreshold: 10,
+  restSpeedThreshold: 10,
+};
+
+/**
+ * A close replica to native iOS keyboard animation. The problem is that
+ * iOS (unlike Android) can not fire events for each keyboard frame movement.
+ * As a result we can not get gradual values (for example, for progress it always
+ * will be 1 or 0). So if you want to rely on gradual values you will need to use
+ * this replica.
+ *
+ * The transition is hardcoded and may vary from one to another OS versions. But it
+ * seems like last time it has been changed in iOS 7. Since RN supports at least iOS
+ * 11 it doesn't make sense to replicate iOS 7 behavior. If it changes in next OS
+ * versions, then this implementation should be revisited and reflect necessary changes.
+ *
+ * @returns {height, progress} - animated values
+ */
+export const useReanimatedKeyboardAnimationReplica = () => {
+  const height = useSharedValue(0);
+  const heightEvent = useSharedValue(0);
+
+  const progress = useDerivedValue(() => height.value / heightEvent.value);
+
+  const handler = useWorkletCallback((_height: number) => {
+    heightEvent.value = _height;
+  }, []);
+
+  useAnimatedReaction(
+    () => ({
+      _keyboardHeight: heightEvent.value,
+    }),
+    (result, _previousResult) => {
+      const { _keyboardHeight } = result;
+      const _previousKeyboardHeight = _previousResult?._keyboardHeight;
+
+      if (_keyboardHeight !== _previousKeyboardHeight) {
+        height.value = withSpring(_keyboardHeight, IOS_SPRING_CONFIG);
+      }
+    },
+    []
+  );
+
+  useEffect(() => {
+    const show = Keyboard.addListener('keyboardWillShow', (e) => {
+      runOnUI(handler)(-e.endCoordinates.height);
+    });
+    const hide = Keyboard.addListener('keyboardWillHide', () => {
+      runOnUI(handler)(0);
+    });
+
+    return () => {
+      show.remove();
+      hide.remove();
+    };
+  }, []);
+
+  return { height, progress };
+};
+
+export const useGradualKeyboardAnimation =
+  Platform.OS === 'ios'
+    ? useReanimatedKeyboardAnimationReplica
+    : useReanimatedKeyboardAnimation;