diff --git a/node_modules/react-native-reanimated-material-menu/src/Menu.js b/node_modules/react-native-reanimated-material-menu/src/Menu.js
deleted file mode 100644
index 69065f0..0000000
--- a/node_modules/react-native-reanimated-material-menu/src/Menu.js
+++ /dev/null
@@ -1,268 +0,0 @@
-import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import {
-  Dimensions, I18nManager, Modal,
-  Platform,
-  StatusBar,
-  StyleSheet,
-  TouchableWithoutFeedback,
-  View
-} from 'react-native';
-import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
-
-const STATES = {
-  HIDDEN: 'HIDDEN',
-  ANIMATING: 'ANIMATING',
-  SHOWN: 'SHOWN',
-};
-
-const EASING = Easing.bezier(0.4, 0, 0.2, 1);
-const SCREEN_INDENT = 8;
-
-const Menu = ({ animationDuration = 300, ...props }, ref) => {
-  const container = useRef();
-  const [state, setState] = useState({
-    menuState: STATES.HIDDEN,
-
-    top: 0,
-    left: 0,
-
-    menuWidth: 0,
-    menuHeight: 0,
-
-    buttonWidth: 0,
-    buttonHeight: 0,
-  });
-  const menuSizeXAnimation = useSharedValue(0);
-  const menuSizeYAnimation = useSharedValue(0);
-  const opacityAnimation = useSharedValue(0);
-
-  const _onMenuLayout = e => {
-    if (state.menuState === STATES.ANIMATING) {
-      return;
-    }
-    const { width, height } = e.nativeEvent.layout;
-    setState(state => {
-      return {
-        ...state,
-        menuState: STATES.ANIMATING,
-        menuWidth: width,
-        menuHeight: height,
-      }
-    }
-
-    );
-  };
-
-  useEffect(() => {
-    if (menuState === STATES.ANIMATING) {
-
-      menuSizeXAnimation.value = withTiming(state.menuWidth, {
-        duration: animationDuration * 2,
-        easing: EASING
-      })
-      menuSizeYAnimation.value = withTiming(state.menuHeight, {
-        duration: animationDuration,
-        easing: EASING
-      })
-      opacityAnimation.value = withTiming(1, {
-        duration: animationDuration + 25,
-        easing: EASING
-      })
-    }
-  }, [state])
-
-  const _onDismiss = () => {
-    if (props.onHidden) {
-      props.onHidden();
-    }
-  };
-  useImperativeHandle(ref, () => {
-    return {
-      show: () => {
-        container.current.measureInWindow((left, top, buttonWidth, buttonHeight) => {
-
-          setState(state => {
-
-            return {
-              ...state,
-              buttonHeight,
-              buttonWidth,
-              left,
-              menuState: STATES.SHOWN,
-              top,
-            }
-          });
-        });
-      },
-
-      hide: hide
-    }
-
-  }, [hide, container])
-
-  const hide = onHidden => {
-    opacityAnimation.value = withTiming(0, {
-      duration: animationDuration,
-      easing: EASING
-    });
-    setTimeout(() => {
-      setState(
-        state => {
-          return {
-            ...state,
-            menuState: STATES.HIDDEN,
-          }
-        }
-      );
-      menuSizeXAnimation.value = 0;
-      menuSizeYAnimation.value = 0;
-      opacityAnimation.value = 0;
-
-      onHidden && onHidden();
-      if (Platform.OS !== 'ios' && props.onHidden) {
-        props.onHidden();
-      }
-    }, props.animationDuration)
-
-  };
-
-  // @@ TODO: Rework this
-  const _hide = () => {
-    hide();
-  };
-
-
-  const menuSize = useAnimatedStyle(() => {
-    return {
-      width: menuSizeXAnimation.value,
-      height: menuSizeYAnimation.value,
-    }
-  });
-  const shadowMenuContainerStyle = useAnimatedStyle(() => {
-    return {
-      opacity: opacityAnimation.value,
-    };
-  }, [state])
-
-  const { isRTL } = I18nManager;
-  const dimensions = Dimensions.get('window');
-  const { width: windowWidth } = dimensions;
-  const windowHeight = dimensions.height - (StatusBar.currentHeight || 0);
-  const {
-    menuWidth,
-    menuHeight,
-    buttonWidth,
-    buttonHeight,
-  } = state;
-
-  // Adjust position of menu
-  let { left, top } = state;
-  const transforms = [];
-  if (
-    (isRTL && left + buttonWidth - menuWidth > SCREEN_INDENT) ||
-    (!isRTL && left + menuWidth > windowWidth - SCREEN_INDENT)
-  ) {
-    transforms.push({
-      translateX: menuSizeXAnimation.value * -1,
-    });
-
-    left = Math.min(windowWidth - SCREEN_INDENT, left + buttonWidth);
-  } else if (left < SCREEN_INDENT) {
-    left = SCREEN_INDENT;
-  }
-
-
-  // Flip by Y axis if menu hits bottom screen border
-  if (top > windowHeight - menuHeight - SCREEN_INDENT) {
-    transforms.push({
-      translateY: menuSizeYAnimation.value * -1,
-    });
-
-    top = windowHeight - SCREEN_INDENT;
-    top = Math.min(windowHeight - SCREEN_INDENT, top + buttonHeight);
-  } else if (top < SCREEN_INDENT) {
-    top = SCREEN_INDENT;
-  }
-
-  const extraStyles = {
-    transform: transforms,
-    top,
-
-    // Switch left to right for rtl devices
-    ...(isRTL ? { right: left } : { left }),
-  }
-
-  const { menuState } = state;
-  const animationStarted = menuState === STATES.ANIMATING;
-  const modalVisible = menuState === STATES.SHOWN || animationStarted;
-
-  const { testID, button, style, children } = props;
-
-  return <View ref={container} collapsable={false} testID={testID}>
-    <View>{button}</View>
-
-    <Modal
-      visible={modalVisible}
-      onRequestClose={_hide}
-      supportedOrientations={[
-        'portrait',
-        'portrait-upside-down',
-        'landscape',
-        'landscape-left',
-        'landscape-right',
-      ]}
-      transparent
-      onDismiss={_onDismiss}
-    >
-      <TouchableWithoutFeedback onPress={_hide} accessible={false}>
-        <View style={StyleSheet.absoluteFill}>
-          <Animated.View
-            onLayout={_onMenuLayout}
-            style={[
-              styles.shadowMenuContainer,
-              shadowMenuContainerStyle,
-              extraStyles,
-              style,
-            ]}
-          >
-            <Animated.View
-              style={[styles.menuContainer, animationStarted && menuSize]}
-            >
-              {children}
-            </Animated.View>
-          </Animated.View>
-        </View>
-      </TouchableWithoutFeedback>
-    </Modal>
-  </View>
-
-}
-
-
-const styles = StyleSheet.create({
-  shadowMenuContainer: {
-    position: 'absolute',
-    backgroundColor: 'white',
-    borderRadius: 4,
-    opacity: 0,
-    overflow: "hidden",
-
-    // Shadow
-    ...Platform.select({
-      ios: {
-        shadowColor: 'black',
-        shadowOffset: { width: 0.3 * 5, height: 0.5 * 5 },
-        shadowOpacity: 0.2,
-        shadowRadius: 0.7 * 5,
-      },
-      android: {
-        elevation: 8,
-      },
-    }),
-  },
-  menuContainer: {
-    overflow: 'hidden',
-  },
-});
-
-export default forwardRef(Menu);
diff --git a/node_modules/react-native-reanimated-material-menu/src/Menu.tsx b/node_modules/react-native-reanimated-material-menu/src/Menu.tsx
new file mode 100644
index 0000000..20469ee
--- /dev/null
+++ b/node_modules/react-native-reanimated-material-menu/src/Menu.tsx
@@ -0,0 +1,289 @@
+import React from 'react';
+
+import {
+  Animated,
+  Dimensions,
+  Easing,
+  I18nManager,
+  LayoutChangeEvent,
+  Modal,
+  Platform,
+  StatusBar,
+  StyleSheet,
+  TouchableWithoutFeedback,
+  View,
+  ViewStyle,
+} from 'react-native';
+
+export interface MenuProps {
+  children?: React.ReactNode;
+  anchor?: React.ReactNode;
+  style?: ViewStyle;
+  onRequestClose?(): void;
+  animationDuration?: number;
+  testID?: string;
+  visible?: boolean;
+}
+
+enum States {
+  Hidden,
+  Animating,
+  Shown,
+}
+
+interface State {
+  buttonHeight: number;
+  buttonWidth: number;
+  left: number;
+  menuHeight: number;
+  menuSizeAnimation: Animated.ValueXY;
+  menuState: States;
+  menuWidth: number;
+  opacityAnimation: Animated.Value;
+  top: number;
+}
+
+const EASING = Easing.bezier(0.4, 0, 0.2, 1);
+const SCREEN_INDENT = 8;
+
+class Menu extends React.Component<MenuProps, State> {
+  _container: View | null = null;
+
+  static defaultProps = {
+    animationDuration: 300,
+  };
+
+  constructor(props: MenuProps) {
+    super(props);
+
+    this.state = {
+      menuState: States.Hidden,
+
+      top: 0,
+      left: 0,
+
+      menuWidth: 0,
+      menuHeight: 0,
+
+      buttonWidth: 0,
+      buttonHeight: 0,
+
+      menuSizeAnimation: new Animated.ValueXY({ x: 0, y: 0 }),
+      opacityAnimation: new Animated.Value(0),
+    };
+  }
+
+  componentDidMount() {
+    if (!this.props.visible) {
+      return;
+    }
+
+    this.show();
+  }
+
+  componentDidUpdate(prevProps: MenuProps) {
+    if (prevProps.visible === this.props.visible) {
+      return;
+    }
+
+    if (this.props.visible) {
+      this.show();
+    } else {
+      this.hide();
+    }
+  }
+
+  private setContainerRef = (ref: View) => {
+    this._container = ref;
+  };
+
+  // Start menu animation
+  private onMenuLayout = (e: LayoutChangeEvent) => {
+    if (this.state.menuState === States.Animating) {
+      return;
+    }
+
+    const { width, height } = e.nativeEvent.layout;
+
+    this.setState(
+      {
+        menuState: States.Animating,
+        menuWidth: width,
+        menuHeight: height,
+      },
+      () => {
+        Animated.parallel([
+          Animated.timing(this.state.menuSizeAnimation, {
+            toValue: { x: width, y: height },
+            duration: this.props.animationDuration,
+            easing: EASING,
+            useNativeDriver: false,
+          }),
+          Animated.timing(this.state.opacityAnimation, {
+            toValue: 1,
+            duration: this.props.animationDuration,
+            easing: EASING,
+            useNativeDriver: false,
+          }),
+        ]).start();
+      },
+    );
+  };
+
+  show = () => {
+    this._container?.measureInWindow((left, top, buttonWidth, buttonHeight) => {
+      this.setState({
+        buttonHeight,
+        buttonWidth,
+        left,
+        menuState: States.Shown,
+        top,
+      });
+    });
+  };
+
+  hide = () => {
+    Animated.timing(this.state.opacityAnimation, {
+      toValue: 0,
+      duration: this.props.animationDuration,
+      easing: EASING,
+      useNativeDriver: false,
+    }).start(() => {
+      // Reset state
+      this.setState({
+        menuState: States.Hidden,
+        menuSizeAnimation: new Animated.ValueXY({ x: 0, y: 0 }),
+        opacityAnimation: new Animated.Value(0),
+      });
+    });
+  };
+
+  private onRequestClose = () => {
+    this.props.onRequestClose?.();
+  };
+
+  render() {
+    const { isRTL } = I18nManager;
+
+    const dimensions = Dimensions.get('window');
+    const { width: windowWidth } = dimensions;
+    const windowHeight = dimensions.height - (StatusBar.currentHeight || 0);
+
+    const {
+      menuSizeAnimation,
+      menuWidth,
+      menuHeight,
+      buttonWidth,
+      buttonHeight,
+      opacityAnimation,
+    } = this.state;
+    const menuSize = {
+      width: menuSizeAnimation.x,
+      height: menuSizeAnimation.y,
+    };
+
+    // Adjust position of menu
+    let { left, top } = this.state;
+    const transforms = [];
+
+    if (
+      (isRTL && left + buttonWidth - menuWidth > SCREEN_INDENT) ||
+      (!isRTL && left + menuWidth > windowWidth - SCREEN_INDENT)
+    ) {
+      transforms.push({
+        translateX: Animated.multiply(menuSizeAnimation.x, -1),
+      });
+
+      left = Math.min(windowWidth - SCREEN_INDENT, left + buttonWidth);
+    } else if (left < SCREEN_INDENT) {
+      left = SCREEN_INDENT;
+    }
+
+    // Flip by Y axis if menu hits bottom screen border
+    if (top > windowHeight - menuHeight - SCREEN_INDENT) {
+      transforms.push({
+        translateY: Animated.multiply(menuSizeAnimation.y, -1),
+      });
+
+      top = windowHeight - SCREEN_INDENT;
+      top = Math.min(windowHeight - SCREEN_INDENT, top + buttonHeight);
+    } else if (top < SCREEN_INDENT) {
+      top = SCREEN_INDENT;
+    }
+
+    const shadowMenuContainerStyle = {
+      opacity: opacityAnimation,
+      transform: transforms,
+      top,
+
+      // Switch left to right for rtl devices
+      ...(isRTL ? { right: left } : { left }),
+    };
+
+    const { menuState } = this.state;
+    const animationStarted = menuState === States.Animating;
+    const modalVisible = menuState === States.Shown || animationStarted;
+
+    const { testID, anchor, style, children } = this.props;
+
+    return (
+      <View ref={this.setContainerRef} collapsable={false} testID={testID}>
+        {anchor}
+
+        <Modal
+          visible={modalVisible}
+          onRequestClose={this.onRequestClose}
+          supportedOrientations={[
+            'portrait',
+            'portrait-upside-down',
+            'landscape',
+            'landscape-left',
+            'landscape-right',
+          ]}
+          transparent
+        >
+          <TouchableWithoutFeedback onPress={this.onRequestClose} accessible={false}>
+            <View style={StyleSheet.absoluteFill}>
+              <Animated.View
+                onLayout={this.onMenuLayout}
+                style={[styles.shadowMenuContainer, shadowMenuContainerStyle, style]}
+              >
+                <Animated.View style={[styles.menuContainer, animationStarted && menuSize]}>
+                  {children}
+                </Animated.View>
+              </Animated.View>
+            </View>
+          </TouchableWithoutFeedback>
+        </Modal>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  shadowMenuContainer: {
+    position: 'absolute',
+    backgroundColor: 'white',
+    borderRadius: 4,
+    opacity: 0,
+
+    // Shadow
+    ...Platform.select({
+      ios: {
+        shadowColor: 'black',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.14,
+        shadowRadius: 2,
+      },
+      android: {
+        elevation: 8,
+      },
+    }),
+  },
+  menuContainer: {
+    overflow: 'hidden',
+  },
+});
+
+
+export default Menu
\ No newline at end of file
