Android: Sheet does not respect safe area of SafeAreaView

[jforaker]

Usually in Samsung / Google Pixel devices, the bottom item gets cut off, even when the screen is wrapped in a SafeAreaView.

Interestingly, it seems to happen after you background the app, and then reopen it.

"@expo/react-native-action-sheet": "4.1.1",

[samelas]

Possible workaround is to wrap the ActionSheetProvider in SafeAreaView from "react-native-safe-area-context" but then you have to put your SafeAreaView at the top of your app or have multiple ActionSheetProviders

[passerbyloo]

if already wrap in safeview but still not work，can try add useModal: true, and add paddingBottom: 0 in containerStyle

[ayozebarrera]

Same issue here

[jforaker]

Interestingly, it seems to happen after you background the app, and then reopen it.

I'm thinking this issue must be related to either react-native-screens or react-navigation. There is probably some improperly measured safe area when the app gets backgrounded and then reopened. Leaving this issue open because I've tried to open issues in those repos, to no avail.

[Lakston]

It might be a problem with edge-to-edge, you should specify your Android version and your SDK build target version

[gozegotushar]

I think we can use container style.
const {bottom} = useSafeAreaInsets();
containerStyle:{ paddingBottom: bottom, },

[NicTorgersen]

I ended up doing what @gozegotushar is doing, but wrapping it in a reusable hook (like the library does). That way I can set some sensible defaults and use those everywhere. Common knowledge, but sometimes it's nice to be reminded that this is allowed!

// hooks/useActionSheet.ts
import { EdgeInsets, useSafeAreaInsets } from "react-native-safe-area-context";
import { ActionSheetOptions, useActionSheet } from "@expo/react-native-action-sheet";

function useMyOverriddenActionSheet() {
    const insets: EdgeInsets = useSafeAreaInsets();
    const { showActionSheetWithOptions: baseShowActionSheetWithOptions } = useActionSheet();

    return {
        showActionSheetWithOptions(options: ActionSheetOptions, callback: (index: number) => void): void {
            baseShowActionSheetWithOptions({
                containerStyle: {
                    marginBottom: insets.bottom,
                },
                showSeparators: true, // personal preference
                ...options,
            }, callback);
        },
    };
}

export default useMyOverriddenActionSheet;

// Pages/MyPage.tsx
import useMyOverriddenActionSheet from "../hooks/useActionSheet";

// ...
const { showActionSheetWithOptions } = useMyOverriddenActionSheet();

// only have to pass title, options and callback instead of using insets everywhere
showActionSheetWithOptions({
    title: "My action sheet",
    options: ["one", "two", "three"],
}, console.log)