diff --git a/src/components/KeyboardStickyView/index.tsx b/src/components/KeyboardStickyView/index.tsx index 68baa1287e..798981ba3c 100644 --- a/src/components/KeyboardStickyView/index.tsx +++ b/src/components/KeyboardStickyView/index.tsx @@ -1,7 +1,10 @@ import React, { forwardRef, useMemo } from "react"; -import { Animated } from "react-native"; +import Reanimated, { + interpolate, + useAnimatedStyle, +} from "react-native-reanimated"; -import { useKeyboardAnimation } from "../../hooks"; +import { useReanimatedKeyboardAnimation } from "../../hooks"; import type { View, ViewProps } from "react-native"; @@ -51,29 +54,25 @@ const KeyboardStickyView = forwardRef< }, ref, ) => { - const { height, progress } = useKeyboardAnimation(); + const { height, progress } = useReanimatedKeyboardAnimation(); - const offset = progress.interpolate({ - inputRange: [0, 1], - outputRange: [closed, opened], - }); + const stickyViewStyle = useAnimatedStyle(() => { + const offset = interpolate(progress.value, [0, 1], [closed, opened]); - const styles = useMemo(() => { - const disabled = Animated.add(Animated.multiply(height, 0), closed); - const active = Animated.add(height, offset); + return { + transform: [{ translateY: enabled ? height.value + offset : closed }], + }; + }, [closed, opened, enabled]); - return [ - { - transform: [{ translateY: enabled ? active : disabled }], - }, - style, - ]; - }, [closed, enabled, height, offset, style]); + const styles = useMemo( + () => [style, stickyViewStyle], + [style, stickyViewStyle], + ); return ( - + {children} - + ); }, );