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

Cannot open action sheet again when using closable={false} #329

Closed denysoleksiienko closed 5 months ago

denysoleksiienko commented 5 months ago

I need to control the closable action sheet. For example, I select some items on the background list and the action list is not closable, if I click 'Cancel' it should close to the next handling. But closable={false} backgroundInteractionEnabled={true} props doesn't work properly, can't open again and the app is stacked. Only helps reload the app.

"react-native-actions-sheet": "^0.8.29"
import React, { useRef } from 'react';
import { ScrollView } from 'react-native';
import ActionSheet, {
  ActionSheetRef,
  SheetManager,
  SheetProps,
  useScrollHandlers,
} from 'react-native-actions-sheet';
import { SheetButton } from '@/components/SheetButton';

function ScrollableActionsSheet({ sheetId }: SheetProps) {
  const actionSheetRef = useRef<ActionSheetRef>(null);
  const scrollHandlers = useScrollHandlers<ScrollView>(
    'scrollview-1',
    actionSheetRef
  );

  return (
    <ActionSheet
      ref={actionSheetRef}
      backgroundInteractionEnabled
      closable={false}
      drawUnderStatusBar
      enableGesturesInScrollView
      gestureEnabled
      id={sheetId}
      indicatorStyle={{ height: 4 }}
      snapPoints={[40, 60]}
    >
      <ScrollView {...scrollHandlers} style={{ maxHeight: 300 }}>
        <SheetButton
          color={'red'}
          onPress={() => SheetManager.hide(sheetId, { payload: false })}
          title='Cancel'
        />
        <SheetButton
          color={'red'}
          onPress={() => SheetManager.hide(sheetId, { payload: false })}
          title='Cancel'
        />
      </ScrollView>
    </ActionSheet>
  );
}

https://github.com/ammarahm-ed/react-native-actions-sheet/assets/42835486/ea240755-7177-46f8-9ecc-d0d769d886a7