Handling SafeArea

If you are using react-native-safe-area-context library in your project you can do the following to provide the sheet with device insets information:

const insets = useSafeAreaInsets();
return <ActionSheet safeAreaInsets={insets}></ActionSheet>;

There are two main props that will come in handy when dealing with SafeArea in the action sheet.

The first one is useBottomSafeAreaPadding. This prop uses the top padding as a reference to calculate the bottom padding on mobile to Views do not hide under the Navigation Bar.

<ActionSheet useBottomSafeAreaPadding />

The second one is drawUnderStatusBar. This is useful for action sheets that cover full screen. In that case, the sheet will grow under the StatusBar by default. However you can set this to false if you don't want that default behavior.

<ActionSheet drawUnderStatusBar={false} />