Page MenuHomePhabricator
Files F3503148

D13066.id43375.diff
No OneTemporary
Actions

D13066.id43375.diff
View Options

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
@@ -3,7 +3,7 @@
import invariant from 'invariant';
import * as React from 'react';
import { View, TouchableWithoutFeedback, Platform, Text } from 'react-native';
-import Animated from 'react-native-reanimated';
+import Animated, { withTiming } from 'react-native-reanimated';
import type { AppNavigationProp } from '../navigation/app-navigator.react.js';
import { OverlayContext } from '../navigation/overlay-context.js';
@@ -23,6 +23,8 @@
const { Value, Extrapolate, add, multiply, interpolateNode } = Animated;
+const animationDuration = 150;
+
const unboundStyles = {
backdrop: {
backgroundColor: 'black',
@@ -78,6 +80,20 @@
const tipHeight: number = 30;
const margin: number = 20;
+function opacityEnteringAnimation() {
+ 'worklet';
+
+ return {
+ animations: {
+ opacity: withTiming(0.7, { duration: animationDuration }),
+ transform: [{}],
+ },
+ initialValues: {
+ opacity: 0,
+ },
+ };
+}
+
function createNUXTipsOverlay(
ButtonComponent: React.ComponentType<NUXTipsOverlayProps>,
tipText: string,
@@ -86,6 +102,7 @@
const dimensions = useSelector(state => state.dimensions);
const overlayContext = React.useContext(OverlayContext);
invariant(overlayContext, 'NUXTipsOverlay should have OverlayContext');
+ const { animationCallback } = overlayContext;
const position = React.useMemo(() => new Animated.Value(1), []);
@@ -108,18 +125,6 @@
};
}, [dimensions.height, 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]);
-
const { initialCoordinates, verticalBounds } = props.route.params;
const buttonStyle = React.useMemo(() => {
@@ -246,10 +251,29 @@
}
}, [dimensions.width, initialCoordinates]);
+ const opacityExitingAnimation = React.useCallback(() => {
+ 'worklet';
+
+ return {
+ animations: {
+ opacity: withTiming(0, { duration: animationDuration }),
+ },
+ initialValues: {
+ opacity: 0.7,
+ },
+ callback: animationCallback,
+ };
+ }, [animationCallback]);
+
return (
<TouchableWithoutFeedback onPress={goBackOnce}>
<View style={styles.container}>
- <AnimatedView style={opacityStyle} />
+ <AnimatedView
+ style={styles.backdrop}
+ // $FlowFixMe
+ entering={opacityEnteringAnimation}
+ exiting={opacityExitingAnimation}
+ />
<View style={contentContainerStyle}>
<View style={buttonStyle}>
<ButtonComponent navigation={props.navigation} route={route} />
@@ -268,7 +292,17 @@
</TouchableWithoutFeedback>
);
}
- return React.memo<NUXTipsOverlayProps>(NUXTipsOverlay);
+
+ function NUXTipsOverlayWrapper(props: NUXTipsOverlayProps) {
+ const overlayContext = React.useContext(OverlayContext);
+ invariant(overlayContext, 'NUXTipsOverlay should have OverlayContext');
+
+ const { renderChild } = overlayContext;
+
+ return renderChild ? <NUXTipsOverlay {...props} /> : null;
+ }
+
+ return React.memo<NUXTipsOverlayProps>(NUXTipsOverlayWrapper);
}
export { createNUXTipsOverlay };

File Metadata

Mime Type
text/plain
Expires
Sat, Dec 21, 5:17 AM (18 h, 6 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2686202
Default Alt Text
D13066.id43375.diff (3 KB)

Event Timeline