How to Use Bottom Sheet Popup modal: A Step-by-Step Guide for React Native Developers

If you are using BottomSheet from react-native-raw-bottom-sheet, the usage is quite similar to what I provided earlier. Here’s a simple example using BottomSheet:

1. Install the library:

   npm install react-native-raw-bottom-sheet

or

   yarn add react-native-raw-bottom-sheet

2. Import the component:

   import BottomSheet from 'react-native-raw-bottom-sheet';

3. Create a Bottom Sheet component:

   import React, { useRef } from 'react';
   import { View, Text, TouchableOpacity } from 'react-native';

   const App = () => {
     const bottomSheetRef = useRef();

     const openBottomSheet = () => {
       bottomSheetRef.current.open();
     };

     return (
       <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
         <TouchableOpacity onPress={openBottomSheet}>
           <Text>Open Bottom Sheet</Text>
         </TouchableOpacity>

         <BottomSheet
           ref={bottomSheetRef}
           closeOnDragDown={true}
           closeOnPressMask={true}
           height={300}
           customStyles={{
             wrapper: {
               backgroundColor: 'transparent',
             },
             draggableIcon: {
               backgroundColor: '#000',
             },
           }}
         >
           {/* Content of the bottom sheet */}
           <View>
             <Text>Bottom Sheet Content</Text>
             {/* Add your additional content here */}
           </View>
         </BottomSheet>
       </View>
     );
   };

   export default App;

Make sure to check the documentation or GitHub repository of react-native-raw-bottom-sheet for any specific details related to the library version you are using.

To use react-native-raw-bottom-sheet in your main component, you can follow these steps:

• Import the necessary components:

   import React, { useRef } from 'react';
   import { View, Text, TouchableOpacity } from 'react-native';
   import BottomSheet from 'react-native-raw-bottom-sheet';

• Create your main component:

   const MainComponent = () => {
     const bottomSheetRef = useRef();

     const openBottomSheet = () => {
       bottomSheetRef.current.open();
     };

     return (
       <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
         <TouchableOpacity onPress={openBottomSheet}>
           <Text>Open Bottom Sheet</Text>
         </TouchableOpacity>

         <BottomSheet
           ref={bottomSheetRef}
           closeOnDragDown={true}
           closeOnPressMask={true}
           height={300}
           customStyles={{
             wrapper: {
               backgroundColor: 'transparent',
             },
             draggableIcon: {
               backgroundColor: '#000',
             },
           }}
         >
           {/* Content of the bottom sheet */}
           <View>
             <Text>Bottom Sheet Content</Text>
             {/* Add your additional content here */}
           </View>
         </BottomSheet>
       </View>
     );
   };

   export default MainComponent;

• Integrate your main component into the root component (e.g., App.js):

   import React from 'react';
   import MainComponent from './MainComponent';

   const App = () => {
     return <MainComponent />;
   };

   export default App;

Make sure to replace the placeholder content in the MainComponent with your actual application logic and UI. This structure allows you to encapsulate the use of the bottom sheet within your main component and keeps your code organized.

Always refer to the latest documentation of react-native-raw-bottom-sheet for any updates or changes, and adjust your code accordingly.