[Android] Last option unavailable when windowTranslucentNavigation = true

[nicolasdevienne]

When we set windowTranslucentNavigation = true in android/app/src/main/res/values/styles.xml the last option on the action sheet is unavailable. When we set to false, it's OK as you can see at the bottom of the 2 following screens :

windowTranslucentNavigation = false

windowTranslucentNavigation = true

React Native version = 0.72.4

@expo/react-native-action-sheet version = 4.0.1

android/app/build.gradle

dependencies {
    ...
    implementation("com.google.android.material:material:1.9.0")
    ...
}

android/app/src/main/res/values.styles.xml

<resources>
    <style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">
        <item name="android:windowTranslucentNavigation">true</item>
    </style>
</resources>

[bradzickafoose]

I noticed the same issue on Android, except, in my case, windowTranslucentNavigation is not set at all in the app, and yet it still occurs. I'm still looking into what the issue may be, but I just dropped in to see if anyone else was experiencing it, or had a working solution.

[bradzickafoose]

The solution I came up with was just to add a marginBottom using a bottom safe area inset returned from react-native-safe-area-context and applied it in the action sheet options.

For example:

import { useSafeAreaInsets } from 'react-native-safe-area-context';

const bottomInset = useSafeAreaInsets().bottom;
const { showActionSheetWithOptions } = useActionSheet();

showActionSheetWithOptions(
  {
    {
       containerStyle: { marginBottom: bottomInset },
    {
  },
  (buttonIndex) => {},
);