react-nativebottom-sheet

How to center @gorhom/bottom-sheet with not 100% width?

I am using https://gorhom.github.io/react-native-bottom-sheet/ library and I do not want the BottomSheet to take full width of the screen. So I limit it as

<BottomSheet snapPoints={snapPoints} style={{width: '80%'}}>
      ...
</BottomSheet>

and try to center it as justifyContent: 'center' in View wrapping the BottomSheet. However, it does not work as expected.

enter image description here

So the question is: how do I reduce the width of the BottomSheet and center it?

Solution

  • There is a quick workaround:

    import {Dimensions, ...} from "react-native";

...

<BottomSheet
  snapPoints={snapPoints}
  style={{marginHorizontal: Dimensions.get("screen").width*0.1}}
>
  ...
</BottomSheet>

    What it does: It calculates the margin to both sides (right and left): There should be 10% margin to each side (in total a width of 80%).

    Hope that helps! :)