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 @@ -84,6 +84,7 @@ +styles: $ReadOnly, +closeTip: () => mixed, +contentContainerStyle: ViewStyle, + +opacityStyle: AnimatedViewStyle, }; function createNUXTipsOverlay( @@ -93,7 +94,6 @@ class NUXTipsOverlay extends React.PureComponent< NUXTipsOverlayProps, > { - backdropOpacity: Node; tipContainerOpacity: Node; tipVerticalAbove: Node; tipVerticalBelow: Node; @@ -109,11 +109,6 @@ const { position } = props; - this.backdropOpacity = interpolateNode(position, { - inputRange: [0, 1], - outputRange: [0, 0.7], - extrapolate: Extrapolate.CLAMP, - }); this.tipContainerOpacity = interpolateNode(position, { inputRange: [0, 0.1], outputRange: [0, 1], @@ -148,13 +143,6 @@ ); } - get opacityStyle(): AnimatedViewStyle { - return { - ...this.props.styles.backdrop, - opacity: this.backdropOpacity, - }; - } - get buttonStyle(): ViewStyle { const { params } = this.props.route; const { initialCoordinates, verticalBounds } = params; @@ -208,6 +196,7 @@ styles, closeTip, contentContainerStyle, + opacityStyle, ...navAndRouteForFlow } = this.props; @@ -253,7 +242,7 @@ return ( - + @@ -306,6 +295,18 @@ }; }, [dimensions.height, props.route.params, styles.contentContainer]); + const opacityStyle = React.useMemo(() => { + const backdropOpacity = interpolateNode(position, { + inputRange: [0, 1], + outputRange: [0, 0.7], + extrapolate: Extrapolate.CLAMP, + }); + return { + ...styles.backdrop, + opacity: backdropOpacity, + }; + }, [position, styles.backdrop]); + return ( ); }