react-native-modalize icon indicating copy to clipboard operation
react-native-modalize copied to clipboard

Add a hook to access Modalize itself inside it's children

Open likeSo opened this issue 3 years ago • 6 comments

Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

A modal will be opened outside and will be closed after it finishes its job. The modal should be closed by itself after its jobs are done. Consider we have a SingleSelectBottomSheetModal component, which displays a bottom sheet with a flatlist and a close button inside the header, which let the user chose an option. the modal should be closed when the user selects an option or hits the close button. But i think the outer components should only care about the option of the user select, the modal should be closed inside the SingleSelectBottomSheetModal

Describe the solution you'd like A clear and concise description of what you want to happen.

Add a hook named useModalize or something, it includes some Modalize methods such as close(). When the user taps on the close button, we can close the modalize inside the modalize, we don't need to add any callback to outer components.

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered. // TODO

// BTW, Modalize is a great library~

likeSo avatar Jul 17 '21 16:07 likeSo

Recently he has merged one implementation of this hook, but idk how to use

alucardeht avatar Nov 03 '21 20:11 alucardeht

https://jeremybarbet.github.io/react-native-modalize/#/HOOKS Maybe this? But this is not what i want, i need a hook that accesses the modalize INSIDE itself, which allows me to close the modal inside itself.

likeSo avatar Nov 04 '21 02:11 likeSo

I know, it's late but have you found any solution to this ??

OKhanRevvlab avatar Aug 25 '23 11:08 OKhanRevvlab

@OKhanRevvlab Nope. There is no update in these year. I am now considering change to another bottom sheet library.

likeSo avatar Aug 28 '23 02:08 likeSo

@likeSo You can create a HeaderComponent inside the Modelize and then create a button that can access your ModelizeRef and then close it. It will be something like this:

`<Modalize HeaderComponent={ <Button onPress={ () => ModalizeRef.current.close() } /> }

-- your content -- </Modalize>`

For me use Modalize Hooks didn't work (such as "useModalize()").

JairFsl avatar Sep 19 '23 20:09 JairFsl

@JairFsl Yes! I am now using forwardRef and use the ref prop to close the modal inside the Modalize. I got warnings but, it works!

likeSo avatar Sep 21 '23 10:09 likeSo