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 =