diff --git a/native/chat/multimedia-message-tooltip-button.react.js b/native/chat/multimedia-message-tooltip-button.react.js --- a/native/chat/multimedia-message-tooltip-button.react.js +++ b/native/chat/multimedia-message-tooltip-button.react.js @@ -1,7 +1,11 @@ // @flow import * as React from 'react'; -import Animated, { type SharedValue } from 'react-native-reanimated'; +import Animated, { + type SharedValue, + useAnimatedStyle, + interpolate, +} from 'react-native-reanimated'; import { chatMessageItemHasEngagement } from 'lib/shared/chat-message-item-utils.js'; import { @@ -24,7 +28,7 @@ import { useTooltipActions } from '../tooltip/tooltip-hooks.js'; import type { TooltipRoute } from '../tooltip/tooltip.react.js'; -const { Node, Extrapolate, interpolateNode } = Animated; +const { Node, Extrapolate } = Animated; function noop() {} @@ -36,7 +40,7 @@ +isOpeningSidebar: boolean, }; function MultimediaMessageTooltipButton(props: Props): React.Node { - const { navigation, route, progress, progressV2, isOpeningSidebar } = props; + const { navigation, route, progressV2, isOpeningSidebar } = props; const windowWidth = useSelector(state => state.dimensions.width); @@ -56,13 +60,14 @@ targetInputBarHeight: sidebarInputBarHeight, }); - const headerStyle = React.useMemo(() => { + const headerStyle = useAnimatedStyle(() => { const bottom = initialCoordinates.height; - const opacity = interpolateNode(progress, { - inputRange: [0, 0.05], - outputRange: [0, 1], - extrapolate: Extrapolate.CLAMP, - }); + const opacity = interpolate( + progressV2.value, + [0, 0.05], + [0, 1], + Extrapolate.CLAMP, + ); return { opacity, position: 'absolute', @@ -70,7 +75,7 @@ width: windowWidth, bottom, }; - }, [initialCoordinates.height, initialCoordinates.x, progress, windowWidth]); + }, [initialCoordinates.height, initialCoordinates.x, windowWidth]); const inlineEngagement = React.useMemo(() => { if (!chatMessageItemHasEngagement(item, item.threadInfo.id)) {