diff --git a/FabricExample/src/components/KeyboardAnimation/index.tsx b/FabricExample/src/components/KeyboardAnimation/index.tsx index 920b277af3..672d52518d 100644 --- a/FabricExample/src/components/KeyboardAnimation/index.tsx +++ b/FabricExample/src/components/KeyboardAnimation/index.tsx @@ -1,15 +1,11 @@ import React from "react"; import { Animated, TextInput, View } from "react-native"; -import { - useKeyboardAnimation, - useKeyboardAnimationReplica, -} from "react-native-keyboard-controller"; +import { useKeyboardAnimation } from "react-native-keyboard-controller"; import styles from "./styles"; export default function KeyboardAnimation() { const { height, progress } = useKeyboardAnimation(); - const { height: heightReplica } = useKeyboardAnimationReplica(); return ( @@ -51,15 +47,6 @@ export default function KeyboardAnimation() { transform: [{ translateY: height }], }} /> - diff --git a/e2e/kit/assets/android/e2e_emulator/DisabledKeyboardIsHidden.png b/e2e/kit/assets/android/e2e_emulator/DisabledKeyboardIsHidden.png index 636d72579a..1b1a0420c8 100644 Binary files a/e2e/kit/assets/android/e2e_emulator/DisabledKeyboardIsHidden.png and b/e2e/kit/assets/android/e2e_emulator/DisabledKeyboardIsHidden.png differ diff --git a/e2e/kit/assets/android/e2e_emulator/DisabledKeyboardIsShown.png b/e2e/kit/assets/android/e2e_emulator/DisabledKeyboardIsShown.png index e121b7f41c..ed940a1c54 100644 Binary files a/e2e/kit/assets/android/e2e_emulator/DisabledKeyboardIsShown.png and b/e2e/kit/assets/android/e2e_emulator/DisabledKeyboardIsShown.png differ diff --git a/e2e/kit/assets/android/e2e_emulator/EnabledKeyboardIsHidden.png b/e2e/kit/assets/android/e2e_emulator/EnabledKeyboardIsHidden.png index 75953f695e..cd10b13ddf 100644 Binary files a/e2e/kit/assets/android/e2e_emulator/EnabledKeyboardIsHidden.png and b/e2e/kit/assets/android/e2e_emulator/EnabledKeyboardIsHidden.png differ diff --git a/e2e/kit/assets/android/e2e_emulator/EnabledKeyboardIsShown.png b/e2e/kit/assets/android/e2e_emulator/EnabledKeyboardIsShown.png index aac9f71dcb..a3511ea3fb 100644 Binary files a/e2e/kit/assets/android/e2e_emulator/EnabledKeyboardIsShown.png and b/e2e/kit/assets/android/e2e_emulator/EnabledKeyboardIsShown.png differ diff --git a/e2e/kit/assets/android/e2e_emulator/KeyboardAnimationKeyboardIsHidden.png b/e2e/kit/assets/android/e2e_emulator/KeyboardAnimationKeyboardIsHidden.png index a51a9112b4..eedf96620d 100644 Binary files a/e2e/kit/assets/android/e2e_emulator/KeyboardAnimationKeyboardIsHidden.png and b/e2e/kit/assets/android/e2e_emulator/KeyboardAnimationKeyboardIsHidden.png differ diff --git a/e2e/kit/assets/android/e2e_emulator/KeyboardAnimationKeyboardIsShown.png b/e2e/kit/assets/android/e2e_emulator/KeyboardAnimationKeyboardIsShown.png index f6c92edb4c..4009b7805e 100644 Binary files a/e2e/kit/assets/android/e2e_emulator/KeyboardAnimationKeyboardIsShown.png and b/e2e/kit/assets/android/e2e_emulator/KeyboardAnimationKeyboardIsShown.png differ diff --git a/e2e/kit/assets/ios/iPhone 15 Pro/DisabledKeyboardIsHidden.png b/e2e/kit/assets/ios/iPhone 15 Pro/DisabledKeyboardIsHidden.png index 803c362e77..1757cc10f9 100644 Binary files a/e2e/kit/assets/ios/iPhone 15 Pro/DisabledKeyboardIsHidden.png and b/e2e/kit/assets/ios/iPhone 15 Pro/DisabledKeyboardIsHidden.png differ diff --git a/e2e/kit/assets/ios/iPhone 15 Pro/DisabledKeyboardIsShown.png b/e2e/kit/assets/ios/iPhone 15 Pro/DisabledKeyboardIsShown.png index 00b16f856b..f47fae056b 100644 Binary files a/e2e/kit/assets/ios/iPhone 15 Pro/DisabledKeyboardIsShown.png and b/e2e/kit/assets/ios/iPhone 15 Pro/DisabledKeyboardIsShown.png differ diff --git a/e2e/kit/assets/ios/iPhone 15 Pro/EnabledKeyboardIsHidden.png b/e2e/kit/assets/ios/iPhone 15 Pro/EnabledKeyboardIsHidden.png index b2c2b0e224..74b90316d7 100644 Binary files a/e2e/kit/assets/ios/iPhone 15 Pro/EnabledKeyboardIsHidden.png and b/e2e/kit/assets/ios/iPhone 15 Pro/EnabledKeyboardIsHidden.png differ diff --git a/e2e/kit/assets/ios/iPhone 15 Pro/EnabledKeyboardIsShown.png b/e2e/kit/assets/ios/iPhone 15 Pro/EnabledKeyboardIsShown.png index 7341e612c5..35d7b3fe89 100644 Binary files a/e2e/kit/assets/ios/iPhone 15 Pro/EnabledKeyboardIsShown.png and b/e2e/kit/assets/ios/iPhone 15 Pro/EnabledKeyboardIsShown.png differ diff --git a/e2e/kit/assets/ios/iPhone 15 Pro/KeyboardAnimationKeyboardIsHidden.png b/e2e/kit/assets/ios/iPhone 15 Pro/KeyboardAnimationKeyboardIsHidden.png index fb3ee733c5..dc9ebd9d6f 100644 Binary files a/e2e/kit/assets/ios/iPhone 15 Pro/KeyboardAnimationKeyboardIsHidden.png and b/e2e/kit/assets/ios/iPhone 15 Pro/KeyboardAnimationKeyboardIsHidden.png differ diff --git a/e2e/kit/assets/ios/iPhone 15 Pro/KeyboardAnimationKeyboardIsShown.png b/e2e/kit/assets/ios/iPhone 15 Pro/KeyboardAnimationKeyboardIsShown.png index f092906c41..bfd02a25b2 100644 Binary files a/e2e/kit/assets/ios/iPhone 15 Pro/KeyboardAnimationKeyboardIsShown.png and b/e2e/kit/assets/ios/iPhone 15 Pro/KeyboardAnimationKeyboardIsShown.png differ diff --git a/example/src/components/KeyboardAnimation/index.tsx b/example/src/components/KeyboardAnimation/index.tsx index 920b277af3..672d52518d 100644 --- a/example/src/components/KeyboardAnimation/index.tsx +++ b/example/src/components/KeyboardAnimation/index.tsx @@ -1,15 +1,11 @@ import React from "react"; import { Animated, TextInput, View } from "react-native"; -import { - useKeyboardAnimation, - useKeyboardAnimationReplica, -} from "react-native-keyboard-controller"; +import { useKeyboardAnimation } from "react-native-keyboard-controller"; import styles from "./styles"; export default function KeyboardAnimation() { const { height, progress } = useKeyboardAnimation(); - const { height: heightReplica } = useKeyboardAnimationReplica(); return ( @@ -51,15 +47,6 @@ export default function KeyboardAnimation() { transform: [{ translateY: height }], }} /> - diff --git a/src/index.ts b/src/index.ts index 9ef5e4e39a..a4ffe00a50 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,6 +1,5 @@ export * from "./bindings"; export * from "./animated"; -export * from "./replicas"; export * from "./context"; export * from "./hooks"; export * from "./constants"; diff --git a/src/replicas.ts b/src/replicas.ts deleted file mode 100644 index 9b85c5d9dd..0000000000 --- a/src/replicas.ts +++ /dev/null @@ -1,154 +0,0 @@ -import { useCallback, useEffect, useMemo, useRef } from "react"; -import { Animated, Easing, Keyboard, Platform } from "react-native"; -import { - runOnUI, - useAnimatedReaction, - useDerivedValue, - useSharedValue, - withSpring, -} from "react-native-reanimated"; - -import { KeyboardController } from "./bindings"; -import { AndroidSoftInputModes } from "./constants"; -import { useReanimatedKeyboardAnimation } from "./hooks"; - -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 = useCallback((_height: number) => { - "worklet"; - - 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;