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<typeof unboundStyles>, +closeTip: () => mixed, +contentContainerStyle: ViewStyle, + +opacityStyle: AnimatedViewStyle, }; function createNUXTipsOverlay( @@ -93,7 +94,6 @@ class NUXTipsOverlay extends React.PureComponent< NUXTipsOverlayProps<BaseNUXTipsOverlayProps>, > { - 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 ( <TouchableWithoutFeedback onPress={this.props.closeTip}> <View style={styles.container}> - <AnimatedView style={this.opacityStyle} /> + <AnimatedView style={opacityStyle} /> <View style={this.props.contentContainerStyle}> <View style={this.buttonStyle}> <ButtonComponent {...buttonProps} /> @@ -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 ( <NUXTipsOverlay {...props} @@ -314,6 +315,7 @@ styles={styles} closeTip={goBackOnce} contentContainerStyle={contentContainerStyle} + opacityStyle={opacityStyle} /> ); }