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

Distinguish between explicit close and close due to navigating to another screen #300

Closed tibbe closed 1 year ago

tibbe commented 1 year ago

I have an action sheet that contains an image. When then image is clicked I navigate to another screen showing a fullscreen version of the image. When I navigate back (i.e. pop the stack) the action sheet is no longer there (i.e. it self-closed). I'd like it to stay open (or re-open) on navigating back but to do so I need to know whether the user closed the action sheet explicitly or if it was implicitly closed due to navigation. Is there a way to distinguish these two cases using the current API?

tibbe commented 1 year ago

Put another way, I'd like to implement a Google Maps-style UI when you can select one of many pins and if one pin is selected an action card is shown. In pseudo code:

const [selected, setSelected] = useState<string | undefined>(undefined);

useEffect(() => {
  if (selected) {
    SheetManager.show('my-sheet', {
      payload: {onClose: () => setSelected(undefined)}
    });
  }
}, [selected]);

return (
  <View>
    {pins.map(pinId => <Button onPress={() => setSelected(pinId)}>)}
  </View>
);

my-sheet above would contain a navigate() call somewhere if its content was clicked. We want goBack() from whatever screen was navigated to to again open the action card when we get back. We still want the user to be able to close the card manually (and thus unsetting selected) by e.g. swiping it down.

tibbe commented 1 year ago

I figured it out on my own. By passing some data to hide() you can know why the action sheet was closed.