react-native-use-modal-hooks

react-native-use-modal-hooks

React 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

Demo

How to install

npm install react-native-use-modal-hooks or yarn add react-native-use-modal-hooks

How to use

• 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 (
    <ModalProvider>
      <NavigationContainer>
        {/* Screen configuration */}
      </NavigationContainer>
    </ModalProvider>
  )
}

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(() => (
    <Modal
      animationType="slide"
      transparent={true}
    >
      <View style={styles.centeredView}>
        <View style={styles.modalView}>
          <Text style={styles.modalText}>Hello World!</Text>

          <TouchableHighlight
            style={{ ...styles.openButton, backgroundColor: "#2196F3" }}
            onPress={hideModal}
          >
            <Text style={styles.textStyle}>Hide Modal</Text>
          </TouchableHighlight>
        </View>
      </View>
    </Modal>
  ))
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        title="Open Modal"
        onPress={showModal}
      />
    </View>
  )
}