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.42k stars 119 forks source link

Sheet Manager does not work in react-native version 0.73.1 #326

Closed omerkok closed 5 months ago

omerkok commented 7 months ago

SheetManager is not working in react-antive 0.73.1 version. These action sheets cannot be managed with the provider. When SheetManager.show('sheetname') is run, no response is received. Since this feature does not work, sheets can be intervened with ref.

How can the Sheetmanager issue be resolved?

The issue is present in all 3 versions: 0.8.10, 0.8.29 and 0.9.0-alpha.24.

umairb-pedal commented 6 months ago

This seems to be a problem with hermes and it's relentless optimisation.

Depending on your setup, the call to registerSheet may end up being passed an undefined sheet which this library will then ignore, via this piece of code: https://github.com/ammarahm-ed/react-native-actions-sheet/blob/feb14334a0630df0e68bda85823ee90e6c6595c0/src/provider.tsx#L34C21-L34C21

What I think is happening is if hermes detects that the component you pass to registerSheet is actually not being used in the overall component hierarchy, it will throw it away and set the component (or more precisely, all imports of it) to undefined.

I have managed to "fix" it by having the code for the component and the registerSheet call in the same place: an index.tsx file. That way, hermes can't throw the component away as it is essentially being forced to run the piece of code.

umairb-pedal commented 6 months ago

Ok after a little bit more of an investigation, I can confirm this works:

registerSheet("sheet", function Sheet() {
    return (
        <ActionSheet>
            <Text>Hello</Text>
        </ActionSheet>
    );
});

So components need to be inlined, or declared in the same file as the registerSheet call. Imports won't work.

It seems like either metro/babel or hermes is aggressively removing components that are not directly a part of the component hierarchy. I'm not sure what the library author can do about this other than a huge refactor, and I'm also not sure if there are some compiler hints to not remove components (if they are being removed at compile stage).

But in any case, there is a workaround.

Mangoz1x commented 6 months ago

SheetManager is not working in react-antive 0.73.1 version. These action sheets cannot be managed with the provider. When SheetManager.show('sheetname') is run, no response is received. Since this feature does not work, sheets can be intervened with ref.

How can the Sheetmanager issue be resolved?

The issue is present in all 3 versions: 0.8.10, 0.8.29 and 0.9.0-alpha.24.

I think I fixed it by installing @shopify/flash-list in my project.

omerkok commented 6 months ago
Ekran Resmi 2024-01-11 22 40 10

I am already creating registerSheet and I am sure that it is correct. SheetManager does not give any reaction or error even though everything is correct in version 0.73.1. That's why I couldn't fully understand what you said. I mentioned the unresponsiveness of the SheetManager.show function.

omerkok commented 6 months ago
Ekran Resmi 2024-01-11 22 44 32

The error given when I do not have this library installed in my @shopify/flash-list project is different. Unfortunately, I can't get any errors. There is just a lack of reaction.