react-native-actions-sheet

react-native-actions-sheet copied to clipboard

Issue Description: When the presentation type is set to "Modal," the sheet should appear on top of the stack screen, but for some reason, it fails to do so.

Example for reproducing the issue

import { createNativeStackNavigator } from "@react-navigation/native-stack";
const Stack = createNativeStackNavigator();

export function ScreenStack() {
  return (
    <Stack.Navigator
      screenOptions={{
        animation: "none",
        headerShown: false,
      }}
    >
    <Stack.Screen
        name={"Example"}
        component={Example}
        options={{
          presentation: "modal",
          animation: "slide_from_bottom",
        }}
      />
    </Stack.Navigator>
)}

export function Example({ placeholder, data, reactionType }) {

   const handleClick = () => {
      SheetManager.show("upload-image-sheet",);
    };

    return (<>
        ...
    </>
)}

Env: RN : 0.70.7 react-native-actions-sheet: 0.8.29

Same problem here, any solutions so far?

Does it need something like gestureHandlerRootHOC from react-native-gesture-handler? That is required on a modal to be able to use the gestures, at least in Android.

I have added a secondary <SheetProvider> within my modal screen and it seems to be working for me

You need to register the sheets under a new context for a modal and add a sheet provider. https://rnas.vercel.app/reference/sheetprovider