Modalize
A modal that loves scrollable content.
This component has been built with react-native-gesture-handler
to address the common issue of scrolling, swipping and handling the keyboard behaviors, you can face with react-native's modal. This component comes with a ScrollView, the default content renderer, a FlatList and a SectionList. They are all three built-in and make your life easier, just pass your content and Modalize will handle the rest for you.
Installation
yarn add react-native-modalize
Check out react-native-gesture-handler
's documentation to set it up.
Usage
Here is the quick how-to example:
import React useRef from 'react';import View Text TouchableOpacity from 'react-native';import Modalize from 'react-native-modalize'; const MyApp = const modalRef = useRef<Modalize>null; const onOpen = const modal = modalRefcurrent; if modal modal; ; return <> <TouchableOpacity => <Text>Open the modal</Text> </TouchableOpacity> <Modalize => ...your content </Modalize> </> ;
Documentation
The full documentation is available here. There is multiple examples runing through differents navigators, with more informations here.