ActionSheetProvider in place, class actionSheet works, hook actionSheet does not work.

I have an ActionSheetProvider that works and is in App.tsx. In many class component the actionSheet works, however in a functional component using the hook it doesn’t.

I was trying to make sure I followed correctly the docs.

App.tsx

In my functional component:

const { showActionSheetWithOptions } = useActionSheet();

const openActionSheet = (document: {}) =>
    showActionSheetWithOptions(
      {
        options,
        cancelButtonIndex,
      },
      (buttonIndex) => {
        switch (buttonIndex) {
          case 0:
            pickImageAsync(
              onDocumentPicker,
              document != null
                ? document
                : { document: { documentType: "foto" } }
            );
            return;
          case 1:
            takePictureAsync(
              onDocumentPicker,
              document != null
                ? {
                    document,
                  }
                : null
            );
            return;
          case 2:
            chooseFileAsync(
              onDocumentPicker,
              document != null
                ? {
                    document,
                  }
                : null
            );
            return;
          default:
        }
      }
    );

The action gets fired but nothing happens. Any help would be appreciated. Since the examples in the doc explain how to use the hook in app.tsx I’m not sure if the hook should be used directly in a functional component or if it is an alternative to the <ActionSheetProvider /> HOC

[superandrew]

unfortunately no, I didn’t. I’m sure there is an explanation, however I am forced to embed the component inside the tag to make it work on the functional component.

[yybot1]

I encountered a similar problem, and eventually I noticed that the problem is related to the “react-native-navigation” library I used. If you use any navigation libraries, then just wrap top-level component with ActionSheetProvider may not work.

For “react-native-navigation”, I have to wrap each component separately using Navigation.registerComponent()