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,7 @@
TouchableOpacity,
Keyboard,
} from 'react-native';
-import Animated from 'react-native-reanimated';
+import Animated, { SlideInDown, SlideOutDown } from 'react-native-reanimated';
import { useDispatch } from 'react-redux';
import {
@@ -117,8 +117,8 @@
+inputState: ?InputState,
+chatContext: ?ChatContextType,
+showActionSheetWithOptions: ShowActionSheetWithOptions,
- +actionSheetShown: boolean,
- +setActionSheetShown: (actionSheetShown: boolean) => void,
+ +hideTooltip: boolean,
+ +setHideTooltip: (actionSheetShown: boolean) => void,
};
function createTooltip<
@@ -324,7 +324,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 +364,9 @@
style.transform.push({ translateY: this.tooltipVerticalBelow });
}
- style.transform.push({ scale: this.tooltipScale });
+ if (location !== 'fixed') {
+ style.transform.push({ scale: this.tooltipScale });
+ }
return style;
}
@@ -377,8 +382,8 @@
inputState,
chatContext,
showActionSheetWithOptions,
- actionSheetShown,
- setActionSheetShown,
+ hideTooltip,
+ setHideTooltip,
...navAndRouteForFlow
} = this.props;
@@ -467,12 +472,34 @@
const itemsStyle = [styles.items];
+ let tooltip = (
+
+ {triangleUp}
+ {items}
+ {triangleDown}
+
+ );
+
if (this.location === 'fixed') {
itemsStyle.push(styles.itemsFixed);
+
+ const animationDelay = Platform.OS === 'ios' ? 200 : 500;
+
+ tooltip = (
+
+ {items}
+
+ );
}
- let tooltip = {items};
- if (this.props.actionSheetShown) {
+ if (this.props.hideTooltip) {
tooltip = null;
}
@@ -485,21 +512,22 @@
-
- {triangleUp}
- {tooltip}
- {triangleDown}
-
+ {tooltip}
);
}
onPressBackdrop = () => {
- this.props.navigation.goBackOnce();
+ if (this.location !== 'fixed') {
+ this.props.navigation.goBackOnce();
+ } else {
+ this.props.setHideTooltip(true);
+
+ setTimeout(() => {
+ this.props.navigation.goBackOnce();
+ }, 100);
+ }
};
onPressEntry = (entry: TooltipEntry) => {
@@ -521,7 +549,7 @@
onPressMore = () => {
Keyboard.dismiss();
- this.props.setActionSheetShown(true);
+ this.props.setHideTooltip(true);
const { entries } = this;
const options = entries.map(entry => entry.text);
@@ -651,9 +679,7 @@
const inputState = React.useContext(InputStateContext);
const chatContext = React.useContext(ChatContext);
- const [actionSheetShown, setActionSheetShown] = React.useState(
- false,
- );
+ const [hideTooltip, setHideTooltip] = React.useState(false);
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 =