What is the difference between Bottom Sheet & Bottom Sheet Modal

[ronnaf]

Hi, everyone! I've been looking for an awesome bottom drawer component, and this looks really good so far!

I've been reading the documentation but I can't find a section where it describes the use cases of both Bottom Sheet and Bottom Sheet Modal. I'm confused about their intended use because they seem to be similar.

I've also been wondering if this project has an interactive example somewhere.

Thank you!

[preshonyee]

Any updates on this yet? I'm also curious on the differences between the 2

[curiosbasant]

@gorhom Can you answer on this one, plz?

[iway1]

Looking at the code, it looks like BottomSheetModal is just a bottom sheet wrapped in @gorhom/portal.

The purpose is so that you can render your bottom sheet in any component and it will render on top of all of your screens. (Where as with the vanilla bottom sheet, it will render inside the parent view which can look weird if the parent view doesn't take up the full screen etc)

It uses the same bottom sheet component, except that it renders on top of everything else no matter where you render it in your component

[Darren120]

also renders on to of RN modals?

[ScreamZ]

Also there is the context about pushing modals on top of each other with stacking or replace. Not really clear yet

[kevindice]

I'm facing an issue where I want the contents of the bottom-sheet to be able to access data from a data-only Context. Because these bottomsheets are getting hoisted to the root, they're no longer inside of the context. And looking at the @gorhom/portal docs, it is possible to render a PortalHost where you want it, but this requires you to specify a name prop which must match the name prop which is passed to the Portal. Unfortunately, this is nondeterministic:

react-native-bottom-sheet/src/components/bottomSheetModalProvider/BottomSheetModalProvider.tsx

Line 33 in fc3409d

const hostName = useMemo(() => `bottom-sheet-portal-${id()}`, []);

I could do something silly like:

<MyDataContext>
  {Array(20).keys().map(i => (
    <PortalHost key={i} name={`bottom-sheet-portal-${i}`} />
  ))}
</MyDataContext>

but not ideal

[buitrbao222]

I'm facing an issue where I want the contents of the bottom-sheet to be able to access data from a data-only Context. Because these bottomsheets are getting hoisted to the root, they're no longer inside of the context. And looking at the @gorhom/portal docs, it is possible to render a PortalHost where you want it, but this requires you to specify a name prop which must match the name prop which is passed to the Portal. Unfortunately, this is nondeterministic:

react-native-bottom-sheet/src/components/bottomSheetModalProvider/BottomSheetModalProvider.tsx

Line 33 in fc3409d

const hostName = useMemo(() => `bottom-sheet-portal-${id()}`, []);

I could do something silly like:

<MyDataContext>
  {Array(20).keys().map(i => (
    <PortalHost key={i} name={`bottom-sheet-portal-${i}`} />
  ))}
</MyDataContext>

but not ideal

you just need to wrap the Context outside the BottomSheetModalProvider, but at that point it would be a global Context so you should just use a state management library instead, i recommend zustand

[vitorcamachoo]

you just need to wrap the Context outside the BottomSheetModalProvider, but at that point it would be a global Context so you should just use a state management library instead, i recommend zustand

This approach doesn't fit all use cases. For example, when integrating into a component structure with multiple layers (Provider, Items, Item), it doesn't make sense to place the context outside of the BottomSheetModalProvider, since that would make it a global context. In these cases, I can't use any state management library. Specifically, I'm trying to combine BottomSheet with Select (rn-primitives), so that the select options display inside the Bottom Sheet. The problem is, <Select.Item /> triggers an error because it exists outside of its Provider.

<BottomSheetModalProvider>
   <Select.Provider>
      <Select.Trigger asChild>
         <BottomSheet.Trigger> 
            <BottomSheet.Value placeholder="Select an item" /> 
         </BottomSheet.Trigger>
      </Select.Trigger>

      <BottomSheet.Modal>
         <BottomSheetView>
            <Select.Item>Item 1</Select.Item>
            <Select.Item>Item 2</Select.Item>
         </BottomSheetView>
      </BottomSheet.Modal>

   </Select.Provider>
</BottomSheetModalProvider>

Any advice?