diff --git a/native/chat/reaction-selection-popover.react.js b/native/chat/reaction-selection-popover.react.js --- a/native/chat/reaction-selection-popover.react.js +++ b/native/chat/reaction-selection-popover.react.js @@ -18,7 +18,11 @@ import { useStyles } from '../themes/colors.js'; import { useTooltipActions } from '../tooltip/tooltip-hooks.js'; import type { TooltipRoute } from '../tooltip/tooltip.react.js'; -import { AnimatedView } from '../types/styles.js'; +import { + AnimatedView, + type WritableAnimatedStyleObj, + type ReanimatedTransform, +} from '../types/styles.js'; type Props> = { +navigation: AppNavigationProp, @@ -71,13 +75,13 @@ const calculatedMargin = getCalculatedMargin(margin); const animationStyle = React.useMemo(() => { - const style = {}; + const style: WritableAnimatedStyleObj = {}; style.opacity = interpolateNode(position, { inputRange: [0, 0.1], outputRange: [0, 1], extrapolate: Extrapolate.CLAMP, }); - style.transform = [ + const transform: Array = [ { scale: interpolateNode(position, { inputRange: [0.2, 0.8], @@ -93,7 +97,7 @@ }, ]; if (popoverLocation === 'above') { - style.transform.push({ + transform.push({ translateY: interpolateNode(position, { inputRange: [0, 1], outputRange: [ @@ -104,7 +108,7 @@ }), }); } else { - style.transform.push({ + transform.push({ translateY: interpolateNode(position, { inputRange: [0, 1], outputRange: [ @@ -115,6 +119,7 @@ }), }); } + style.transform = transform; return style; }, [position, calculatedMargin, popoverLocation, popoverHorizontalOffset]); diff --git a/native/tooltip/tooltip.react.js b/native/tooltip/tooltip.react.js --- a/native/tooltip/tooltip.react.js +++ b/native/tooltip/tooltip.react.js @@ -40,6 +40,8 @@ AnimatedView, type ViewStyle, type AnimatedViewStyle, + type WritableAnimatedStyleObj, + type ReanimatedTransform, } from '../types/styles.js'; /* eslint-disable import/no-named-as-default-member */ @@ -308,13 +310,15 @@ const { x, y, width, height } = initialCoordinates; const { margin, tooltipLocation } = this; - const style = {}; + const style: WritableAnimatedStyleObj = {}; style.position = 'absolute'; style.alignItems = 'center'; style.opacity = this.tooltipContainerOpacity; + const transform: Array = []; + if (tooltipLocation !== 'fixed') { - style.transform = [{ translateX: this.tooltipHorizontal }]; + transform.push({ translateX: this.tooltipHorizontal }); } const extraLeftSpace = x; @@ -341,22 +345,24 @@ verticalBounds.y - inputBarHeight + padding; - style.transform = [{ translateY: this.fixedTooltipVertical }]; + transform.push({ translateY: this.fixedTooltipVertical }); } else if (tooltipLocation === 'above') { style.bottom = dimensions.height - Math.max(y, verticalBounds.y) + margin; - style.transform.push({ translateY: this.tooltipVerticalAbove }); + transform.push({ translateY: this.tooltipVerticalAbove }); } else { style.top = Math.min(y + height, verticalBounds.y + verticalBounds.height) + margin; - style.transform.push({ translateY: this.tooltipVerticalBelow }); + transform.push({ translateY: this.tooltipVerticalBelow }); } if (tooltipLocation !== 'fixed') { - style.transform.push({ scale: this.tooltipScale }); + transform.push({ scale: this.tooltipScale }); } + style.transform = transform; + return style; } diff --git a/native/types/react-native.js b/native/types/react-native.js --- a/native/types/react-native.js +++ b/native/types/react-native.js @@ -3,6 +3,7 @@ import AnimatedInterpolation from 'react-native/Libraries/Animated/nodes/AnimatedInterpolation.js'; import type ReactNativeAnimatedValue from 'react-native/Libraries/Animated/nodes/AnimatedValue.js'; import type { ViewToken } from 'react-native/Libraries/Lists/ViewabilityHelper.js'; +import type { ____ViewStyle_Internal } from 'react-native/Libraries/StyleSheet/StyleSheetTypes.js'; export type { Layout, @@ -43,3 +44,5 @@ }; export type { AnimatedInterpolation }; + +export type ViewStyleObj = ____ViewStyle_Internal; diff --git a/native/types/styles.js b/native/types/styles.js --- a/native/types/styles.js +++ b/native/types/styles.js @@ -7,6 +7,8 @@ type EntryExitAnimationFunction, } from 'react-native-reanimated'; +import type { ViewStyleObj } from './react-native.js'; + type ViewProps = React.ElementConfig; export type ViewStyle = $PropertyType; @@ -16,24 +18,29 @@ type ImageProps = React.ElementConfig; export type ImageStyle = $PropertyType; -export type AnimatedStyleObj = { - +opacity?: ?number | Animated.Node, - +height?: ?number | Animated.Node, - +width?: ?number | Animated.Node, - +marginTop?: ?number | Animated.Node, - +marginRight?: ?number | Animated.Node, - +marginLeft?: ?number | Animated.Node, - +backgroundColor?: ?string | Animated.Node, - +bottom?: ?number | Animated.Node, - +transform?: $ReadOnlyArray<{ - +scale?: ?number | Animated.Node, - +translateX?: ?number | Animated.Node, - +translateY?: ?number | Animated.Node, - ... - }>, +export type ReanimatedTransform = { + +scale?: ?number | Animated.Node, + +translateX?: ?number | Animated.Node, + +translateY?: ?number | Animated.Node, ... }; +export type WritableAnimatedStyleObj = { + ...ViewStyleObj, + opacity?: ?number | Animated.Node, + height?: ?number | Animated.Node, + width?: ?number | Animated.Node, + marginTop?: ?number | Animated.Node, + marginRight?: ?number | Animated.Node, + marginLeft?: ?number | Animated.Node, + backgroundColor?: ?string | Animated.Node, + bottom?: ?number | Animated.Node, + transform?: $ReadOnlyArray, + ... +}; + +export type AnimatedStyleObj = $ReadOnly; + export type AnimatedViewStyle = | AnimatedStyleObj | $ReadOnlyArray;