ammarahm-ed / react-native-actions-sheet

A Cross Platform(Android, iOS & Web) ActionSheet with a flexible api, native performance and zero dependency code for react native. Create anything you want inside ActionSheet.
https://rnas.vercel.app
MIT License
1.49k stars 121 forks source link

SheetManager.show() doesn't work when the the Stack Screen presentation type is "Modal" #296

Open ayuleul opened 1 year ago

ayuleul commented 1 year ago

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

DraghiciAdrian commented 1 year ago

Same problem here, any solutions so far?

dangilbert commented 1 year ago

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

johnny-mcfadden-dailypay commented 1 year ago

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