diff --git a/app/AppContainer.js b/app/AppContainer.js
index 1d4a89234..76e2fee8e 100644
--- a/app/AppContainer.js
+++ b/app/AppContainer.js
@@ -10,6 +10,7 @@ import { defaultHeader, getActiveRouteName, navigationTheme } from './utils/navi
import {
ROOT_LOADING, ROOT_OUTSIDE, ROOT_NEW_SERVER, ROOT_INSIDE, ROOT_SET_USERNAME, ROOT_BACKGROUND
} from './actions/app';
+import { ActionSheetProvider } from './containers/ActionSheet';
// Stacks
import AuthLoadingView from './views/AuthLoadingView';
@@ -53,53 +54,55 @@ const App = React.memo(({ root, isMasterDetail }) => {
return (
- {
- const previousRouteName = Navigation.routeNameRef.current;
- const currentRouteName = getActiveRouteName(state);
- if (previousRouteName !== currentRouteName) {
- setCurrentScreen(currentRouteName);
- }
- Navigation.routeNameRef.current = currentRouteName;
- }}
- >
-
- <>
- {root === ROOT_LOADING || root === ROOT_BACKGROUND ? (
-
- ) : null}
- {root === ROOT_OUTSIDE || root === ROOT_NEW_SERVER ? (
-
- ) : null}
- {root === ROOT_INSIDE && isMasterDetail ? (
-
- ) : null}
- {root === ROOT_INSIDE && !isMasterDetail ? (
-
- ) : null}
- {root === ROOT_SET_USERNAME ? (
-
- ) : null}
-
-
-
+
+ {
+ const previousRouteName = Navigation.routeNameRef.current;
+ const currentRouteName = getActiveRouteName(state);
+ if (previousRouteName !== currentRouteName) {
+ setCurrentScreen(currentRouteName);
+ }
+ Navigation.routeNameRef.current = currentRouteName;
+ }}
+ >
+
+ <>
+ {root === ROOT_LOADING || root === ROOT_BACKGROUND ? (
+
+ ) : null}
+ {root === ROOT_OUTSIDE || root === ROOT_NEW_SERVER ? (
+
+ ) : null}
+ {root === ROOT_INSIDE && isMasterDetail ? (
+
+ ) : null}
+ {root === ROOT_INSIDE && !isMasterDetail ? (
+
+ ) : null}
+ {root === ROOT_SET_USERNAME ? (
+
+ ) : null}
+
+
+
+
);
});
diff --git a/app/containers/ActionSheet/ActionSheet.js b/app/containers/ActionSheet/ActionSheet.js
new file mode 100644
index 000000000..c450e0419
--- /dev/null
+++ b/app/containers/ActionSheet/ActionSheet.js
@@ -0,0 +1,214 @@
+import React, {
+ useRef,
+ useState,
+ useEffect,
+ forwardRef,
+ useImperativeHandle,
+ useCallback,
+ isValidElement
+} from 'react';
+import PropTypes from 'prop-types';
+import { Keyboard, Text } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { TapGestureHandler, State } from 'react-native-gesture-handler';
+import ScrollBottomSheet from 'react-native-scroll-bottom-sheet';
+import Animated, {
+ Extrapolate,
+ interpolate,
+ Value,
+ Easing
+} from 'react-native-reanimated';
+import * as Haptics from 'expo-haptics';
+import {
+ useDimensions,
+ useBackHandler,
+ useDeviceOrientation
+} from '@react-native-community/hooks';
+
+import { Item } from './Item';
+import { Handle } from './Handle';
+import { Button } from './Button';
+import { themes } from '../../constants/colors';
+import styles, { ITEM_HEIGHT } from './styles';
+import { isTablet, isIOS } from '../../utils/deviceInfo';
+import Separator from '../Separator';
+import I18n from '../../i18n';
+
+const getItemLayout = (data, index) => ({ length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index });
+
+const HANDLE_HEIGHT = isIOS ? 40 : 56;
+const MAX_SNAP_HEIGHT = 16;
+const CANCEL_HEIGHT = 64;
+
+const ANIMATION_DURATION = 250;
+
+const ANIMATION_CONFIG = {
+ duration: ANIMATION_DURATION,
+ // https://easings.net/#easeInOutCubic
+ easing: Easing.bezier(0.645, 0.045, 0.355, 1.0)
+};
+
+const ActionSheet = React.memo(forwardRef(({ children, theme }, ref) => {
+ const bottomSheetRef = useRef();
+ const [data, setData] = useState({});
+ const [isVisible, setVisible] = useState(false);
+ const orientation = useDeviceOrientation();
+ const { height } = useDimensions().window;
+ const insets = useSafeAreaInsets();
+ const { landscape } = orientation;
+
+ const maxSnap = Math.max(
+ (
+ height
+ // Items height
+ - (ITEM_HEIGHT * (data?.options?.length || 0))
+ // Handle height
+ - HANDLE_HEIGHT
+ // Custom header height
+ - (data?.headerHeight || 0)
+ // Insets bottom height (Notch devices)
+ - insets.bottom
+ // Cancel button height
+ - (data?.hasCancel ? CANCEL_HEIGHT : 0)
+ ),
+ MAX_SNAP_HEIGHT
+ );
+
+ /*
+ * if the action sheet cover more
+ * than 60% of the whole screen
+ * and it's not at the landscape mode
+ * we'll provide more one snap
+ * that point 50% of the whole screen
+ */
+ const snaps = (height - maxSnap > height * 0.6) && !landscape ? [maxSnap, height * 0.5, height] : [maxSnap, height];
+ const openedSnapIndex = snaps.length > 2 ? 1 : 0;
+ const closedSnapIndex = snaps.length - 1;
+
+ const toggleVisible = () => setVisible(!isVisible);
+
+ const hide = () => {
+ bottomSheetRef.current?.snapTo(closedSnapIndex);
+ };
+
+ const show = (options) => {
+ setData(options);
+ toggleVisible();
+ };
+
+ const onBackdropPressed = ({ nativeEvent }) => {
+ if (nativeEvent.oldState === State.ACTIVE) {
+ hide();
+ }
+ };
+
+ useBackHandler(() => {
+ if (isVisible) {
+ hide();
+ }
+ return isVisible;
+ });
+
+ useEffect(() => {
+ if (isVisible) {
+ Keyboard.dismiss();
+ Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+ bottomSheetRef.current?.snapTo(openedSnapIndex);
+ }
+ }, [isVisible]);
+
+ // Hides action sheet when orientation changes
+ useEffect(() => {
+ setVisible(false);
+ }, [orientation.landscape]);
+
+ useImperativeHandle(ref, () => ({
+ showActionSheet: show,
+ hideActionSheet: hide
+ }));
+
+ const renderHandle = useCallback(() => (
+ <>
+
+ {isValidElement(data?.customHeader) ? data.customHeader : null}
+
+ ));
+
+ const renderFooter = useCallback(() => (data?.hasCancel ? (
+
+ ) : null));
+
+ const renderSeparator = useCallback(() => );
+
+ const renderItem = useCallback(({ item }) =>