Bottom Sheet Modal

BottomSheetModal.tsx

import React, {
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from 'react';
import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
import BottomSheet from '@gorhom/bottom-sheet';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import Button from '../components/button';

const App = () => {
  // state
  const [mount, setMount] = useState(false);

  // ref
  const bottomSheetRef = useRef<BottomSheet>(null);

  // variables
  const snapPoints = useMemo(() => [0, 300], []);

  // callbacks
  const handlePresentModal = useCallback(() => {
    setMount(state => !state);
  }, []);

  // effects
  useEffect(() => {
    if (mount === true) {
      bottomSheetRef.current?.expand();
    }
  }, [mount]);
  // render
  return (
    <SafeAreaProvider>
      <SafeAreaView style={styles.container}>
        <Button
          label="Present"
          style={styles.buttonContainer}
          onPress={handlePresentModal}
        />
        {mount && (
          <BottomSheet
            ref={bottomSheetRef}
            initialSnapIndex={-1}
            snapPoints={snapPoints}
          >
            <View style={styles.content}>
              <Text>Content</Text>
            </View>
          </BottomSheet>
        )}
      </SafeAreaView>
    </SafeAreaProvider>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#555',
  },
  content: {
    flex: 1,
    backgroundColor: 'white',
  },
  buttonContainer: {
    marginHorizontal: 24,
    marginBottom: 6,
  },
});

export default App;