diff --git a/native/tooltip/nux-tips-overlay.react.js b/native/tooltip/nux-tips-overlay.react.js --- a/native/tooltip/nux-tips-overlay.react.js +++ b/native/tooltip/nux-tips-overlay.react.js @@ -90,6 +90,8 @@ +onTipContainerLayout: (event: LayoutEvent) => void, +tipContainerOpacity: Node, +tipVerticalBelow: Node, + +tipHorizontal: Node, + +tipScale: Node, }; const tipHeight: number = 30; @@ -103,8 +105,6 @@ NUXTipsOverlayProps, > { tipVerticalAbove: Node; - tipHorizontal: Node; - tipScale: Node; fixedTipVertical: Node; constructor(props: NUXTipsOverlayProps) { @@ -120,17 +120,6 @@ const invertedPosition = add(1, multiply(-1, position)); - this.tipHorizontal = multiply( - invertedPosition, - this.props.tipHorizontalOffset, - ); - - this.tipScale = interpolateNode(position, { - inputRange: [0, 0.2, 0.8, 1], - outputRange: [0, 0, 1, 1], - extrapolate: Extrapolate.CLAMP, - }); - this.fixedTipVertical = multiply( invertedPosition, props.dimensions.height, @@ -138,8 +127,14 @@ } get tipContainerStyle(): AnimatedViewStyle { - const { dimensions, route, tipContainerOpacity, tipVerticalBelow } = - this.props; + const { + dimensions, + route, + tipContainerOpacity, + tipVerticalBelow, + tipHorizontal, + tipScale, + } = this.props; const { initialCoordinates, verticalBounds } = route.params; const { x, y, width, height } = initialCoordinates; @@ -150,7 +145,7 @@ const transform: Array = []; - transform.push({ translateX: this.tipHorizontal }); + transform.push({ translateX: tipHorizontal }); const extraLeftSpace = x; const extraRightSpace = dimensions.width - width - x; @@ -165,7 +160,7 @@ style.top = Math.min(y + height, verticalBounds.y + verticalBounds.height) + margin; transform.push({ translateY: tipVerticalBelow }); - transform.push({ scale: this.tipScale }); + transform.push({ scale: tipScale }); style.transform = transform; return style; @@ -184,6 +179,8 @@ onTipContainerLayout, tipContainerOpacity, tipVerticalBelow, + tipHorizontal, + tipScale, ...navAndRouteForFlow } = this.props; @@ -331,6 +328,21 @@ [position], ); + const tipHorizontal = React.useMemo(() => { + const invertedPosition = add(1, multiply(-1, position)); + return multiply(invertedPosition, tipHorizontalOffset); + }, [position, tipHorizontalOffset]); + + const tipScale = React.useMemo( + () => + interpolateNode(position, { + inputRange: [0, 0.2, 0.8, 1], + outputRange: [0, 0, 1, 1], + extrapolate: Extrapolate.CLAMP, + }), + [position], + ); + return ( ); }