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 =