{"library":"react-native-modal","title":"React Native Modal","description":"react-native-modal is an enhanced and highly customizable modal component for React Native, extending the capabilities of the built-in `<Modal>` component. It offers smooth enter/exit animations, flexible APIs, and features such as a customizable backdrop (opacity, color, timing), listeners for animation completion, automatic resizing on device rotation, and swipe-to-close functionality. The current development focus is on version 14.x, with `14.0.0-rc.1` being the latest release candidate, introducing support for React Native 0.78 and above. Historically, releases have been somewhat irregular, often aligning with major React Native version updates. This library differentiates itself by providing a richer user experience with built-in animations and gestures, which the native `<Modal>` component lacks by default.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-native-modal"],"cli":null},"imports":["import Modal from 'react-native-modal';","import type { ModalProps } from 'react-native-modal';","const Modal = require('react-native-modal').default;"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, {useState} from 'react';\nimport {Button, Text, View, StyleSheet} from 'react-native';\nimport Modal from 'react-native-modal';\n\nfunction ModalTester() {\n  const [isModalVisible, setModalVisible] = useState(false);\n\n  const toggleModal = () => {\n    setModalVisible(!isModalVisible);\n  };\n\n  return (\n    <View style={styles.container}>\n      <Button title=\"Show modal\" onPress={toggleModal} />\n\n      <Modal isVisible={isModalVisible}>\n        <View style={styles.modalContent}>\n          <Text style={styles.modalText}>Hello from the modal!</Text>\n          <Button title=\"Hide modal\" onPress={toggleModal} />\n        </View>\n      </Modal>\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  modalContent: {\n    backgroundColor: 'white',\n    padding: 22,\n    justifyContent: 'center',\n    alignItems: 'center',\n    borderRadius: 4,\n    borderColor: 'rgba(0, 0, 0, 0.1)',\n  },\n  modalText: {\n    marginBottom: 15,\n    fontSize: 18,\n  },\n});\n\nexport default ModalTester;","lang":"typescript","description":"This example demonstrates a basic animated modal. It uses `useState` to control the modal's visibility via the `isVisible` prop and includes buttons to toggle its state.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}