'how to use multiple react spring bottom sheet?

hello guys i'm using react-spring-bottom-sheet i have a page that should be act as a bottomsheet and inside this page i have another bottom sheet when inside this page i colse second bottomsheet , both bottomsheets are closed, how should I use multiple react-spring-bottom-sheet in one component, in a way that on each swipe down only topper bottomsheet would be closed?

  <SpringBottomSheet
      isOpen={open}
      onDismiss={onBottomSheetClose}>
    data and other things of first bottom sheet
 <SpringBottomSheet
      isOpen={open}
      onDismiss={onBottomSheetSecondClose}>
   data of second one
 </SpringBottomSheet>

</SpringBottomSheet>

reactjs react-spring

Solution 1:^[1]

you should add dismiss to upper bottom sheet on close second one , because if a bottom sheet doesnot have onDismiss property, base on the docs it won't close , so i add onDismiss conditionally to bottomsheet

 <SpringBottomSheet
      isOpen={open}
      onDismiss={isDismisableBottomSheet ? onBottomSheetClose : undefined}></SpringBottomSheet>

isDismisableBottomSheet will be true after closing second bottomsheet, also it shouldnot be immediate and sould be couple of milisconds after closing upper bottomsheet

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	ghazaleh javaheri

'how to use multiple react spring bottom sheet?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]