React hooks for displaying a modal window in React Native
npm install react-native-use-modal-hooksReact hooks for displaying a modal window in React Native.
This library does not provide any UI, but instead offers a convenient way to render modal components defined elsewhere.
For a simple modal component check out react-modal, which works well with this library.
ref: react-modal-hook
npm install react-native-use-modal-hooks or yarn add react-native-use-modal-hooks- Use ModalProvider to provide modal context for your application:
``
import React from 'react'
import { NavigationContainer } from '@react-navigation/native';
import { ModalProvider } from "react-native-use-modal-hooks";
const App: React.FC = () => {
return (
{/ Screen configuration /}
)
}
export default App
`
- Call useModal with the dialog component of your choice.
`
import React from 'react'
import { View, Text, StyleSheet, Modal, TouchableHighlight, Button } from 'react-native'
import { useModal } from 'react-native-use-modal-hooks';
const styles = StyleSheet.create({
centeredView: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: 22
},
modalView: {
margin: 20,
backgroundColor: "white",
borderRadius: 20,
padding: 35,
alignItems: "center",
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5
},
openButton: {
backgroundColor: "#F194FF",
borderRadius: 20,
padding: 10,
elevation: 2
},
textStyle: {
color: "white",
fontWeight: "bold",
textAlign: "center"
},
modalText: {
marginBottom: 15,
textAlign: "center"
}
})
export const Screen: React.FC = () => {
const [showModal, hideModal] = useModal(() => (
transparent={true}
>
onPress={hideModal}
>
))
return (
onPress={showModal}
/>
)
}
``