diff --git a/native/navigation/tooltip.react.js b/native/navigation/tooltip.react.js --- a/native/navigation/tooltip.react.js +++ b/native/navigation/tooltip.react.js @@ -16,7 +16,11 @@ TouchableOpacity, Keyboard, } from 'react-native'; -import Animated from 'react-native-reanimated'; +import Animated, { + SlideInDown, + SlideOutDown, + runOnJS, +} from 'react-native-reanimated'; import { useDispatch } from 'react-redux'; import { @@ -119,6 +123,9 @@ +showActionSheetWithOptions: ShowActionSheetWithOptions, +actionSheetShown: boolean, +setActionSheetShown: (actionSheetShown: boolean) => void, + +hideTooltip: boolean, + +setHideTooltip: (actionSheetShown: boolean) => void, + +exitAnimationWorklet: (finished: boolean) => void, }; function createTooltip< @@ -324,7 +331,10 @@ style.position = 'absolute'; (style.alignItems = 'center'), (style.opacity = this.tooltipContainerOpacity); - style.transform = [{ translateX: this.tooltipHorizontal }]; + + if (location !== 'fixed') { + style.transform = [{ translateX: this.tooltipHorizontal }]; + } const extraLeftSpace = x; const extraRightSpace = dimensions.width - width - x; @@ -361,7 +371,9 @@ style.transform.push({ translateY: this.tooltipVerticalBelow }); } - style.transform.push({ scale: this.tooltipScale }); + if (location !== 'fixed') { + style.transform.push({ scale: this.tooltipScale }); + } return style; } @@ -379,6 +391,9 @@ showActionSheetWithOptions, actionSheetShown, setActionSheetShown, + hideTooltip, + setHideTooltip, + exitAnimationWorklet, ...navAndRouteForFlow } = this.props; @@ -465,15 +480,36 @@ isOpeningSidebar, }; - const itemsStyle = [styles.items]; + const itemsStyles = [styles.items, styles.itemsFixed]; - if (this.location === 'fixed') { - itemsStyle.push(styles.itemsFixed); - } + const animationDelay = Platform.OS === 'ios' ? 200 : 500; + const enterAnimation = SlideInDown.delay(animationDelay); - let tooltip = {items}; - if (this.props.actionSheetShown) { - tooltip = null; + const exitAnimation = SlideOutDown.withCallback(exitAnimationWorklet); + + let tooltip = null; + + if (this.location !== 'fixed') { + tooltip = ( + + {triangleUp} + {items} + {triangleDown} + + ); + } else if (this.location === 'fixed' && !this.props.hideTooltip) { + tooltip = ( + + {items} + + ); } return ( @@ -485,25 +521,27 @@ - - {triangleUp} - {tooltip} - {triangleDown} - + {tooltip} ); } onPressBackdrop = () => { - this.props.navigation.goBackOnce(); + if (this.location !== 'fixed') { + this.props.navigation.goBackOnce(); + } else { + this.props.setHideTooltip(true); + } }; onPressEntry = (entry: TooltipEntry) => { - this.props.navigation.goBackOnce(); + if (this.location !== 'fixed' || this.props.actionSheetShown) { + this.props.navigation.goBackOnce(); + } else { + this.props.setHideTooltip(true); + } + const dispatchFunctions = { dispatch: this.props.dispatch, dispatchActionPromise: this.props.dispatchActionPromise, @@ -522,6 +560,7 @@ onPressMore = () => { Keyboard.dismiss(); this.props.setActionSheetShown(true); + this.props.setHideTooltip(true); const { entries } = this; const options = entries.map(entry => entry.text); @@ -654,6 +693,23 @@ const [actionSheetShown, setActionSheetShown] = React.useState( false, ); + const [hideTooltip, setHideTooltip] = React.useState(false); + + const goBackCallback = React.useCallback(() => { + if (!actionSheetShown) { + props.navigation.goBackOnce(); + } + }, [actionSheetShown, props.navigation]); + + const exitAnimationWorklet = React.useCallback( + finished => { + 'worklet'; + if (finished) { + runOnJS(goBackCallback)(); + } + }, + [goBackCallback], + ); return ( ); }); diff --git a/native/types/styles.js b/native/types/styles.js --- a/native/types/styles.js +++ b/native/types/styles.js @@ -2,7 +2,10 @@ import * as React from 'react'; import { View, Text, Image } from 'react-native'; -import Animated from 'react-native-reanimated'; +import Animated, { + type ReanimatedAnimationBuilder, + type EntryExitAnimationFunction, +} from 'react-native-reanimated'; type ViewProps = React.ElementConfig; export type ViewStyle = $PropertyType; @@ -30,6 +33,11 @@ const AnimatedView: React.ComponentType<{ ...$Diff, +style: AnimatedViewStyle, + +entering?: + | ReanimatedAnimationBuilder + | EntryExitAnimationFunction + | Keyframe, + +exiting?: ReanimatedAnimationBuilder | EntryExitAnimationFunction | Keyframe, }> = Animated.View; export type AnimatedTextStyle =