Bottom Sheet Modal

Modal Bottom Menu

React Native Bottom Sheet | Doc | Youtube | Example

Bottom Sheet Modal (Components tree)

Excalidraw link

Implementation:

1. npm i @gorhom/bottom-sheet

2. Wrap app with BottomSheetModalProvider and GestureHandlerRootView

import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function App() {
  return (
    <Provider store={store}>
      <GestureHandlerRootView style={{ flex: 1 }}>
        <BottomSheetModalProvider>
          <ActionSheetProvider>
            <NavigationContainer onReady={onLayoutRootView} headerMode="none">
              <Main />
            </NavigationContainer>
          </ActionSheetProvider>
        </BottomSheetModalProvider>
      </GestureHandlerRootView>
    </Provider>
  );
}

3. Implement ModalBottomMenu as forvardRef and in outer component (PostCard) use its ref to open modal

const openModalMenu = () => bottomSheetRef.current?.present();

4. For close modal menu after select item in BottomMenuItem import useBottomSheetModal:

import { useBottomSheetModal } from '@gorhom/bottom-sheet';

export const BottomMenuItem = ({
  ioniconsName = 'share-social-outline',
  text = 'Share via',
  handler = () => {},
}) => {
  const { dismiss } = useBottomSheetModal();

  const onMenuItemPress = () => {
    handler();
    dismiss();
  };

  return (
    <Styled.ItemWrapper>
      <Styled.Container activeOpacity={0.8} onPress={onMenuItemPress}>
        <Ionicons name={ioniconsName} size={24} color="black" />
        <Styled.ItemText>{text}</Styled.ItemText>
      </Styled.Container>
    </Styled.ItemWrapper>
  );
};