fix context menu

apps/mobile/src/components/Container/ContainerBottomButton.js

@@ -1,27 +1,37 @@
 import React, {useEffect, useState} from 'react';
-import {Keyboard, Platform, Text, View} from 'react-native';
+import {Keyboard, Platform, Text, UIManager, View} from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import {useTracked} from '../../provider';
-import {getElevation} from '../../utils';
+import {getElevation, showContext} from '../../utils';
 import {PressableButton} from '../PressableButton';
 import {normalize, pv, SIZE, WEIGHT} from '../../utils/SizeUtils';
 import {DDS} from '../../services/DeviceDetection';
+import {sleep} from '../../utils/TimeUtils';
+import Animated, {Easing} from 'react-native-reanimated';
 
+const translateY = new Animated.Value(0);
 export const ContainerBottomButton = ({title, onPress, color}) => {
   const [state] = useTracked();
   const {colors} = state;
-  const [buttonHide, setButtonHide] = useState(false);
   const insets = useSafeAreaInsets();
 
-  const onKeyboardHide = () => {
+  function animate(translate) {
+    Animated.timing(translateY, {
+      toValue: translate,
+      duration: 250,
+      easing: Easing.elastic(1),
+    }).start();
+  }
+
+  const onKeyboardHide = async () => {
     if (DDS.isTab) return;
-    setButtonHide(false);
+    animate(0);
   };
 
-  const onKeyboardShow = () => {
+  const onKeyboardShow = async () => {
     if (DDS.isTab) return;
-    setButtonHide(true);
+    animate(150);
   };
 
   useEffect(() => {
@@ -34,17 +44,18 @@ export const ContainerBottomButton = ({title, onPress, color}) => {
   }, []);
 
   return (
-    <View
+    <Animated.View
       style={{
-        width: '100%',
-        opacity: buttonHide ? 0 : 1,
         position: 'absolute',
-        paddingHorizontal: 12,
-        bottom: Platform.OS === 'ios' ? insets.bottom - 10 : insets.bottom + 20,
+        right: 12,
+        bottom: Platform.OS === 'ios' ? insets.bottom - 10 : insets.bottom + 12,
         zIndex: 10,
         transform: [
           {
-            translateY: buttonHide ? 200 : 0,
+            translateY: translateY,
+          },
+          {
+            translateX: translateY,
           },
         ],
       }}>
@@ -55,34 +66,26 @@ export const ContainerBottomButton = ({title, onPress, color}) => {
         customStyle={{
           ...getElevation(5),
         }}
+        onLongPress={event => {
+           console.log(event)
+          showContext(event,title);
+        }}
         onPress={onPress}>
         <View
           style={{
-            justifyContent: 'flex-start',
             alignItems: 'center',
-            flexDirection: 'row',
+            justifyContent: 'center',
             width: '100%',
-            padding: pv,
-            borderRadius: 5,
             height: normalize(60),
+            width: normalize(60),
           }}>
           <Icon
             name={title === 'Clear all trash' ? 'delete' : 'plus'}
             color="white"
             size={SIZE.xl}
           />
-          <Text
-            testID="container_bottom_btn_text"
-            style={{
-              fontSize: SIZE.md,
-              color: 'white',
-              fontFamily: WEIGHT.regular,
-              textAlignVertical: 'center',
-            }}>
-            {'  ' + title}
-          </Text>
         </View>
       </PressableButton>
-    </View>
+    </Animated.View>
   );
 };