{"_id":"@albizures/react-native-modal","_rev":"1-f2068e17f4fd942f3fb5f739369d930c","name":"@albizures/react-native-modal","dist-tags":{"latest":"9.0.0"},"versions":{"9.0.0":{"name":"@albizures/react-native-modal","version":"9.0.0","description":"An enhanced React-Native modal","main":"src/index.js","types":"src/index.d.ts","scripts":{"lint":"eslint src","test":"npm run lint","prettier":"prettier --write src/**/*.js","reset":"watchman watch-del-all && rm -rf node_modules/"},"keywords":["react-native","react","native","modal","android","ios","backdrop","simple","animated"],"author":{"name":"Mazzarolo Matteo"},"license":"MIT","homepage":"https://github.com/react-native-community/react-native-modal","repository":{"type":"git","url":"git+https://github.com/react-native-community/react-native-modal.git"},"dependencies":{"prop-types":"^15.6.2","react-native-animatable":"^1.3.1"},"devDependencies":{"eslint":"^5.13.0","eslint-plugin-react-app":"^4.0.1","prettier":"^1.16.4","react":"16.8.3","react-native":"0.58.5"},"peerDependencies":{"react":"*","react-native":"*"},"gitHead":"8fe4b3be03887994210ce80a69ed61fc187a76a0","bugs":{"url":"https://github.com/react-native-community/react-native-modal/issues"},"_id":"@albizures/react-native-modal@9.0.0","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"albizures","email":"albizures3601@gmail.com"},"dist":{"integrity":"sha512-3TffaQUYqU+LjSYaroS7ARWaTemZhGYZ/bFD0JXFbuoLda6mJCqCf/38EZCO/NcxAEqj1vMsrAj7wKskHSkwHQ==","shasum":"c8aa77b9e8e27f179e7b4239cce60079524a3cce","tarball":"https://registry.npmjs.org/@albizures/react-native-modal/-/react-native-modal-9.0.0.tgz","fileCount":8,"unpackedSize":40466,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmBldCRA9TVsSAnZWagAAPa0P/Rk5qP/wgKTbao0Xym6U\nLlKIlxsSRXcgMo8kEx24kNGBb5u+5uRe5f9lCY4iHXpCP2YSzkAV6kWXQBmI\nsTyH6UOvPhgWpwuYatd9OU14T/pizvQ7gnLSTNykmYAWVoFb+wfKz+iX7ayz\n4yV2loiyuPlfMASJrhk6vDhE+0P33qrQ8jl4hT6MewMhj9pleBP23GIk1m5B\nYGuK/xVy6LccaGeRjk3C/SBHif0XE7bPZG3UHL97+DLbytSiCpwVB4YDd1Y5\nKS3QBvN+i+5JjbKUHEs41PXalsIPhp3IsFAkaMdu7AlMyjn8rgFC6zIqtohJ\njN+JuYaQI+5skGjaIkBpO1Hp0jU1QLdU5ZZbpQcLO/+O7fSZmVnzDHVjenmm\nBCpDH0A4E8XFYuvkzBK4NhFlLNUUUMoq4W2/bSS7dqe9zi8VtoLzIeLLOKhS\nfI8paPjfL/yrxlHzj2WFCJ9K6GPitFQF0Uk85UgrVlsf4MiUsZjx9WVUGiFb\npyM1Js5nxx4WQLOpeJck2LCyduu+gC9dwo7e6Xc1n2TdTjRh8gEb8GxiZ5Gr\nXC2CEx3LTLzcN5dwFHvzmzjGuW6gQuEk8DNqPXjXHSDcN91f59LeZbqVQfjL\nHJmu3PdEs4n8Xtt20PikI7cDfmnd14zqU42gjjtFN6uk1jxGob1kmBwwqR0e\ngiN8\r\n=3ur8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCdzvbBOjYC22ZQlY2GC845uYqfjpF1g4Mjoommtl4wZgIgD4hTQfVhYbY6XLT1vO6G0+Ty3dhpDfT806hoO4Y6KfM="}]},"maintainers":[{"name":"albizures","email":"albizures3601@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-modal_9.0.0_1553471836408_0.46816291185196035"},"_hasShrinkwrap":false}},"time":{"created":"2019-03-24T23:57:16.218Z","9.0.0":"2019-03-24T23:57:16.559Z","modified":"2022-04-04T12:35:29.982Z"},"maintainers":[{"name":"albizures","email":"albizures3601@gmail.com"}],"description":"An enhanced React-Native modal","homepage":"https://github.com/react-native-community/react-native-modal","keywords":["react-native","react","native","modal","android","ios","backdrop","simple","animated"],"repository":{"type":"git","url":"git+https://github.com/react-native-community/react-native-modal.git"},"author":{"name":"Mazzarolo Matteo"},"bugs":{"url":"https://github.com/react-native-community/react-native-modal/issues"},"license":"MIT","readme":"# NOTE: This [react-native-modal](https://github.com/react-native-community/react-native-modal) fork only what it does it removes the usage of the native Modal, and use a simple View instead, hopefully, this fork won't be needed after the [js version](https://github.com/react-native-community/react-native-modal/issues/145) of react-native-modal has been shipped.\n> This fork hasn't been widely tested, you can check the [changes](https://github.com/albizures/react-native-modal/pull/1) made, and use it at your own risk\n-----\n\n# react-native-modal\n\n[![npm version](https://badge.fury.io/js/react-native-modal.svg)](https://badge.fury.io/js/react-native-modal)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n\nAn enhanced, animated and customizable react-native modal.\n\nThe aim of `react-native-modal` is expanding the original react-native `Modal` component by adding animations and styles customization options while still providing a plain-simple API.\n\n## Features\n\n- Smooth enter/exit animations\n- Plain simple and flexible APIs\n- Customizable backdrop opacity, color and timing\n- Listeners for the modal animations ending\n- Resize itself correctly on device rotation\n- Swipeable\n- Scrollable\n\n## Demo\n\n<p align=\"center\">\n<img src=\"https://raw.githubusercontent.com/mmazzarolo/react-native-tips/master/imgs/modal.gif\" height=\"300\" />\n<img src=\"https://raw.githubusercontent.com/mmazzarolo/react-native-modal-datetime-picker/master/extras/datetimepicker-ios.gif\" height=\"300\" />\n<img src=\"https://raw.githubusercontent.com/mmazzarolo/react-native-modal/master/.github/example-modal.gif\" height=\"300\" />\n</p>\n\n<p align=\"center\">\n  New GIFs of your modal are warmly welcome! Feel free to submit a PR. 🎉\n</p>\n\n## Setup\n\nThis library is available on npm, install it with: `npm install --save react-native-modal` or `yarn add react-native-modal`.\n\n## Usage\n\nSince react-native-modal is an extension of the original react native modal, it works in a similar fashion [react-native original modal](https://facebook.github.io/react-native/docs/modal.html).\n\n1.  Import react-native-modal:\n\n```javascript\nimport Modal from \"react-native-modal\";\n```\n\n2.  Create a modal and nest its content inside of it:\n\n```javascript\nrender () {\n    return (\n      <View>\n        <Modal>\n          <View style={{ flex: 1 }}>\n            <Text>I am the modal content!</Text>\n          </View>\n        </Modal>\n      </View>\n    )\n  }\n```\n\n3.  Then simply show it by setting the `isVisible` prop to true:\n\n```javascript\nrender () {\n    return (\n      <View>\n        <Modal isVisible={true}>\n          <View style={{ flex: 1 }}>\n            <Text>I am the modal content!</Text>\n          </View>\n        </Modal>\n      </View>\n    )\n  }\n```\n\nThe `isVisible` prop is the only prop you'll really need to make the modal work: you should control this prop value by saving it in your state and setting it to `true` or `false` when needed.\n\n## A complete example\n\nThe following example consists in a component (`ModalTester`) with a button and a modal.\nThe modal is controlled by the `isModalVisible` state variable and it is initially hidden, since its value is `false`.  \nPressing the button sets `isModalVisible` to true, making the modal visible.  \nInside the modal there is another button that, when pressed, sets `isModalVisible` to false, hiding the modal.\n\n```javascript\nimport React, { Component } from \"react\";\nimport { Text, TouchableOpacity, View } from \"react-native\";\nimport Modal from \"react-native-modal\";\n\nexport default class ModalTester extends Component {\n  state = {\n    isModalVisible: false,\n  };\n\n  _toggleModal = () =>\n    this.setState({ isModalVisible: !this.state.isModalVisible });\n\n  render() {\n    return (\n      <View style={{ flex: 1 }}>\n        <TouchableOpacity onPress={this._toggleModal}>\n          <Text>Show Modal</Text>\n        </TouchableOpacity>\n        <Modal isVisible={this.state.isModalVisible}>\n          <View style={{ flex: 1 }}>\n            <Text>Hello!</Text>\n            <TouchableOpacity onPress={this._toggleModal}>\n              <Text>Hide me!</Text>\n            </TouchableOpacity>\n          </View>\n        </Modal>\n      </View>\n    );\n  }\n}\n```\n\nFor a more complex example take a look at the `/example` directory.\n\n## Available props\n\n| Name                           | Type             | Default                   | Description                                                                                  |\n| ------------------------------ | ---------------- | ------------------------- | -------------------------------------------------------------------------------------------- |\n| animationIn                    | string or object | 'slideInUp'               | Modal show animation                                                                         |\n| animationInTiming              | number           | 300                       | Timing for the modal show animation (in ms)                                                  |\n| animationOut                   | string or object | 'slideOutDown'            | Modal hide animation                                                                         |\n| animationOutTiming             | number           | 300                       | Timing for the modal hide animation (in ms)                                                  |\n| avoidKeyboard                  | bool             | false                     | Move the modal up if the keyboard is open                                                    |\n| hasBackdrop                    | bool             | true                      | Render the backdrop                                                                          |\n| backdropColor                  | string           | 'black'                   | The backdrop background color                                                                |\n| backdropOpacity                | number           | 0.70                      | The backdrop opacity when the modal is visible                                               |\n| backdropTransitionInTiming     | number           | 300                       | The backdrop show timing (in ms)                                                             |\n| backdropTransitionOutTiming    | number           | 300                       | The backdrop hide timing (in ms)                                                             |\n| children                       | node             | **REQUIRED**              | The modal content                                                                            |\n| deviceHeight                   | number           | null                      | Device height (useful on devices that can hide the navigation bar)                           |\n| deviceWidth                    | number           | null                      | Device width (useful on devices that can hide the navigation bar)                            |\n| isVisible                      | bool             | **REQUIRED**              | Show the modal?                                                                              |\n| onBackButtonPress              | func             | () => null                | Called when the Android back button is pressed                                               |\n| onBackdropPress                | func             | () => null                | Called when the backdrop is pressed                                                          |\n| onModalWillHide                | func             | () => null                | Called before the modal hide animation begins                                                |\n| onModalHide                    | func             | () => null                | Called when the modal is completely hidden                                                   |\n| onModalWillShow                | func             | () => null                | Called before the modal show animation begins                                                |\n| onModalShow                    | func             | () => null                | Called when the modal is completely visible                                                  |\n| onSwipeStart                   | func             | () => null                | Called when the swipe action started                                                         |\n| onSwipeMove                    | func             | (percentageShown) => null | Called on each swipe event                                                                   |\n| onSwipeComplete                | func             | () => null                | Called when the `swipeThreshold` has been reached                                            |\n| onSwipeCancel                  | func             | () => null                | Called when the `swipeThreshold` has not been reached                                        |\n| scrollOffset                   | number           | 0                         | When > 0, disables swipe-to-close, in order to implement scrollable content                  |\n| scrollOffsetMax                | number           | 0                         | Used to implement overscroll feel when content is scrollable. See `/example` directory       |\n| scrollTo                       | func             | null                      | Used to implement scrollable modal. See `/example` directory for reference on how to use it  |\n| swipeThreshold                 | number           | 100                       | Swiping threshold that when reached calls `onSwipeComplete`                                  |\n| swipeDirection                 | string           | null                      | Defines the direction where the modal can be swiped (can be 'up', 'down', 'left, or 'right') |\n| useNativeDriver                | bool             | false                     | Defines if animations should use native driver                                               |\n| hideModalContentWhileAnimating | bool             | false                     | Enhances the performance by hiding the modal content until the animations complete           |\n| propagateSwipe                 | bool             | false                     | Allows swipe events to propagate to children components (eg a ScrollView inside a modal)     |\n| style                          | any              | null                      | Style applied to the modal                                                                   |\n\n## Frequently Asked Questions\n\n### The component is not working as expected\n\nUnder the hood `react-native-modal` uses react-native original [Modal component](https://facebook.github.io/react-native/docs/modal.html).  \nBefore reporting a bug, try swapping `react-native-modal` with react-native original Modal component and, if the issue persists, check if it has already been reported as a [react-native issue](https://github.com/facebook/react-native/issues).\n\n### The backdrop is not completely filled/covered on some Android devices (Galaxy, for one)\n\nReact-Native has a few issues detecting the correct device width/height of some devices.  \nIf you're experiencing this issue, you'll need to install [`react-native-extra-dimensions-android`](https://github.com/Sunhat/react-native-extra-dimensions-android).  \nThen, provide the real window height (obtained from `react-native-extra-dimensions-android`) to the modal:\n\n```javascript\nrender() {\n  const deviceWidth = Dimensions.get(\"window\").width;\n  const deviceHeight = Platform.OS === \"ios\"\n    ? Dimensions.get(\"window\").height\n    : require(\"react-native-extra-dimensions-android\").get(\"REAL_WINDOW_HEIGHT\");\n\n  return (\n  <Modal\n    isVisible={this.state.isVisible}\n    deviceWidth={deviceWidth}\n    deviceHeight={deviceHeight}\n  >\n    <View style={{ flex: 1 }}>\n      <Text>I am the modal content!</Text>\n    </View>\n  </Modal>\n  )\n}\n```\n\n### How can I hide the modal by pressing outside of its content?\n\nThe prop `onBackdropPress` allows you to handle this situation:\n\n```javascript\n<Modal\n  isVisible={this.state.isVisible}\n  onBackdropPress={() => this.setState({ isVisible: false })}>\n  <View style={{ flex: 1 }}>\n    <Text>I am the modal content!</Text>\n  </View>\n</Modal>\n```\n\n### How can I hide the modal by swiping it?\n\nThe prop `onSwipeComplete` allows you to handle this situation (remember to set `swipeDirection` too!):\n\n```javascript\n<Modal\n  isVisible={this.state.isVisible}\n  onSwipeComplete={() => this.setState({ isVisible: false })}\n  swipeDirection=\"left\">\n  <View style={{ flex: 1 }}>\n    <Text>I am the modal content!</Text>\n  </View>\n</Modal>\n```\n\nNote that when using `useNativeDriver={true}` the modal won't drag correctly. This is a [known issue](https://github.com/react-native-community/react-native-modal/issues/163#issuecomment-409760695).\n\n### The modal flashes in a weird way when animating\n\nUnfortunately this is a [know issue](https://github.com/react-native-community/react-native-modal/issues/92) that happens when `useNativeDriver=true` and must still be solved.  \nIn the meanwhile as a workaround you can set the `hideModalContentWhileAnimating` prop to `true`: this seems to solve the issue.\nAlso, do not assign a `backgroundColor` property directly to the Modal. Prefer to set it on the child container.\n\n### The modal background doesn't animate properly\n\nAre you sure you named the `isVisible` prop correctly? Make sure it is spelled correctly: `isVisible`, not `visible`.\n\n### The modal doesn't change orientation\n\nAdd a `supportedOrientations={['portrait', 'landscape']}` prop to the component, as described [in the React Native documentation](https://facebook.github.io/react-native/docs/modal.html#supportedorientations).\n\nAlso, if you're providing the `deviceHeight` and `deviceWidth` props you'll have to manually update them when the layout changes.\n\n### I can't show multiple modals one after another\n\nUnfortunately right now react-native doesn't allow multiple modals to be displayed at the same time.\nThis means that, in `react-native-modal`, if you want to immediately show a new modal after closing one you must first make sure that the modal that your closing has completed its hiding animation by using the `onModalHide` prop.\n\n### I can't show multiple modals at the same time\n\nSee the question above.\nShowing multiple modals (or even alerts/dialogs) at the same time is not doable because of a react-native bug.\nThat said, I would strongly advice against using multiple modals at the same time because, most often than not, this leads to a bad UX, especially on mobile (just my opinion).\n\n### The StatusBar style changes when the modal shows up\n\nThis issue has ben discussed [here](https://github.com/react-native-community/react-native-modal/issues/50).  \nThe TLDR is: it's a know React-Native issue with the Modal component 😞\n\n### The modal is not covering the entire screen\n\nThe modal style applied by default has a small margin.  \nIf you want the modal to cover the entire screen you can easily override it this way:\n\n```js\n<Modal style={{ margin: 0 }}>...</Modal>\n```\n\n### I can't scroll my ScrollView inside of the modal\n\nEnable propagateSwipe to allow your child components to receive swipe events:\n\n```js\n<Modal propagateSwipe>...</Modal>\n```\n\nPlease notice that this is still a WIP fix and might not fix your issue yet, see [issue #236](https://github.com/react-native-community/react-native-modal/issues/236).\n\n### The modal enter/exit animation flickers\n\nMake sure your `animationIn` and `animationOut` are set correctly.  \nWe noticed that, for example, using `fadeIn` as an exit animation makes the modal flicker (it should be `fadeOut`!).  \n\n## Available animations\n\nTake a look at [react-native-animatable](https://github.com/oblador/react-native-animatable) to see the dozens of animations available out-of-the-box. You can also pass in custom animation definitions and have them automatically register with react-native-animatable. For more information on creating custom animations, see the react-native-animatable [animation definition schema](https://github.com/oblador/react-native-animatable#animation-definition-schema).\n\n## Acknowledgements\n\nThanks [@oblador](https://github.com/oblador) for react-native-animatable, [@brentvatne](https://github.com/brentvatne) for the npm namespace and to anyone who contributed to this library!\n\nPull requests, feedbacks and suggestions are welcome!\n","readmeFilename":"README.md"}