├── .babelrc ├── .eslintignore ├── .eslintrc ├── .expo ├── packager-info.json └── settings.json ├── .flowconfig ├── .github ├── bottom-modal.gif ├── fade-animation.gif ├── popup-dialog.png ├── scale-animation.gif ├── slide-animation.gif └── swipeable-modal.gif ├── .gitignore ├── .travis.yml ├── LICENSE.md ├── README.md ├── __tests__ ├── Dialog.test.js ├── DialogTitle.test.js ├── __snapshots__ │ ├── Dialog.test.js.snap │ └── DialogTitle.test.js.snap └── setup-tests.js ├── dist ├── BottomModal.js ├── Modal.js ├── ModalPortal.js ├── animations │ ├── Animation.js │ ├── FadeAnimation.js │ ├── ScaleAnimation.js │ └── SlideAnimation.js ├── components │ ├── Backdrop.js │ ├── BaseModal.js │ ├── BottomModal.js │ ├── DraggableView.js │ ├── ModalButton.js │ ├── ModalContent.js │ ├── ModalContext.js │ ├── ModalFooter.js │ └── ModalTitle.js ├── constants │ └── Constants.js ├── index.js └── type.js ├── example ├── .expo-shared │ ├── README.md │ └── assets.json ├── .gitignore ├── App.js ├── app.json ├── assets │ ├── adaptive-icon.png │ ├── favicon.png │ ├── icon.png │ └── splash.png ├── babel.config.js ├── package.json ├── src │ ├── DemoScreen.js │ ├── EmptyScreen.js │ └── Navigator.js └── yarn.lock ├── package.json ├── src ├── BottomModal.js ├── Modal.js ├── ModalPortal.js ├── animations │ ├── Animation.js │ ├── FadeAnimation.js │ ├── ScaleAnimation.js │ └── SlideAnimation.js ├── components │ ├── Backdrop.js │ ├── BaseModal.js │ ├── BottomModal.js │ ├── DraggableView.js │ ├── ModalButton.js │ ├── ModalContent.js │ ├── ModalContext.js │ ├── ModalFooter.js │ └── ModalTitle.js ├── constants │ └── Constants.js ├── index.js └── type.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "react-native" 4 | ], 5 | "env": { 6 | "development": { 7 | "plugins": [ 8 | "flow-react-proptypes" 9 | ] 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules 3 | yarn-error.log 4 | __tests__/__snapshots__ 5 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "airbnb", 3 | "parser": "babel-eslint", 4 | "ecmaFeatures": { 5 | "jsx": true 6 | }, 7 | "env": { 8 | "es6": true, 9 | "jest": true 10 | }, 11 | "plugins": [ 12 | "react", 13 | "jsx-a11y" 14 | ], 15 | "rules": { 16 | "jsx-a11y/href-no-hash": "off", 17 | "jsx-a11y/anchor-is-valid": ["warn", { "aspects": ["invalidHref"] }], 18 | "import/no-extraneous-dependencies": 0, 19 | "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }] 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /.expo/packager-info.json: -------------------------------------------------------------------------------- 1 | { 2 | "expoServerPort": null, 3 | "expoServerNgrokUrl": null, 4 | "packagerNgrokUrl": null, 5 | "ngrokPid": null 6 | } -------------------------------------------------------------------------------- /.expo/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "hostType": "tunnel", 3 | "lanType": "ip", 4 | "dev": true, 5 | "strict": false, 6 | "minify": false, 7 | "urlType": "exp", 8 | "urlRandomness": null 9 | } -------------------------------------------------------------------------------- /.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | .*/node_modules/.* 3 | 4 | ; We fork some components by platform 5 | .*/*[.]android.js 6 | 7 | ; Ignore "BUCK" generated dirs 8 | /\.buckd/ 9 | 10 | ; Ignore unexpected extra "@providesModule" 11 | .*/node_modules/.*/node_modules/fbjs/.* 12 | 13 | ; Ignore duplicate module providers 14 | ; For RN Apps installed via npm, "Libraries" folder is inside 15 | ; "node_modules/react-native" but in the source repo it is in the root 16 | .*/Libraries/react-native/React.js 17 | 18 | ; Ignore polyfills 19 | .*/Libraries/polyfills/.* 20 | 21 | ; Ignore metro 22 | .*/node_modules/metro/.* 23 | 24 | [include] 25 | 26 | [libs] 27 | node_modules/react-native/Libraries/react-native/react-native-interface.js 28 | node_modules/react-native/flow/ 29 | node_modules/react-native/flow-github/ 30 | 31 | [options] 32 | emoji=true 33 | 34 | esproposal.optional_chaining=enable 35 | esproposal.nullish_coalescing=enable 36 | 37 | module.system=haste 38 | module.system.haste.use_name_reducers=true 39 | # get basename 40 | module.system.haste.name_reducers='^.*/\([a-zA-Z0-9$_.-]+\.js\(\.flow\)?\)$' -> '\1' 41 | # strip .js or .js.flow suffix 42 | module.system.haste.name_reducers='^\(.*\)\.js\(\.flow\)?$' -> '\1' 43 | # strip .ios suffix 44 | module.system.haste.name_reducers='^\(.*\)\.ios$' -> '\1' 45 | module.system.haste.name_reducers='^\(.*\)\.android$' -> '\1' 46 | module.system.haste.name_reducers='^\(.*\)\.native$' -> '\1' 47 | module.system.haste.paths.blacklist=.*/__tests__/.* 48 | module.system.haste.paths.blacklist=.*/__mocks__/.* 49 | module.system.haste.paths.blacklist=/node_modules/react-native/Libraries/Animated/src/polyfills/.* 50 | module.system.haste.paths.whitelist=/node_modules/react-native/Libraries/.* 51 | 52 | munge_underscores=true 53 | 54 | module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub' 55 | 56 | module.file_ext=.js 57 | module.file_ext=.jsx 58 | module.file_ext=.json 59 | module.file_ext=.native.js 60 | 61 | suppress_type=$FlowIssue 62 | suppress_type=$FlowFixMe 63 | suppress_type=$FlowFixMeProps 64 | suppress_type=$FlowFixMeState 65 | 66 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\) 67 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+ 68 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy 69 | suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError -------------------------------------------------------------------------------- /.github/bottom-modal.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jacklam718/react-native-modals/d68d1cba2066bb87fc082d837dd129681349989e/.github/bottom-modal.gif -------------------------------------------------------------------------------- /.github/fade-animation.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jacklam718/react-native-modals/d68d1cba2066bb87fc082d837dd129681349989e/.github/fade-animation.gif -------------------------------------------------------------------------------- /.github/popup-dialog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jacklam718/react-native-modals/d68d1cba2066bb87fc082d837dd129681349989e/.github/popup-dialog.png -------------------------------------------------------------------------------- /.github/scale-animation.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jacklam718/react-native-modals/d68d1cba2066bb87fc082d837dd129681349989e/.github/scale-animation.gif -------------------------------------------------------------------------------- /.github/slide-animation.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jacklam718/react-native-modals/d68d1cba2066bb87fc082d837dd129681349989e/.github/slide-animation.gif -------------------------------------------------------------------------------- /.github/swipeable-modal.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jacklam718/react-native-modals/d68d1cba2066bb87fc082d837dd129681349989e/.github/swipeable-modal.gif -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | popupDialogExample/node_modules 3 | .DS_Store 4 | npm-debug.log 5 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | cache: yarn 3 | before_install: 4 | - npm install -g yarn --cache-min "999999999" 5 | node_js: 6 | - '10' 7 | install: 8 | - yarn 9 | deploy: 10 | provider: npm 11 | email: jacklam718@gmail.com 12 | api_key: $NPM_TOKEN 13 | on: 14 | tags: true 15 | repo: jacklam718/react-native-modals 16 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Jack Lam 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![Build Status](https://travis-ci.org/jacklam718/react-native-modals.svg?branch=master)](https://travis-ci.org/jacklam718/react-native-modals) 2 | [![npm](https://img.shields.io/npm/dm/react-native-modals.svg)]() 3 | [![npm](https://img.shields.io/npm/v/react-native-modals.svg)]() 4 | 5 | ## React Native Modals 6 | React Native Modals Library for iOS & Android. 7 | 8 | #### How to thank me ? 9 | Just click on ⭐️ button 😘 10 | 11 | [Try it with Exponent](https://exp.host/@jacklam718/modals-example)
12 | 13 |
14 |
15 | 16 | 17 |    18 |    19 | 20 | 21 | 22 | ## BREAKING CHANGE 23 | A lot of backward incompatible changes in `v0.22.0`. Please, Read the Docs before upgrading to `v0.22.0` 24 | 25 | ## Installation 26 | 27 | ``` 28 | npm install --save react-native-modals 29 | # OR 30 | yarn add react-native-modals 31 | ``` 32 | 33 | ## Exposed Modules 34 | 35 | * Modal 36 | * ButtomModal 37 | * ModalPortal 38 | * Backdrop 39 | * ModalButton 40 | * ModalContent 41 | * ModalTitle 42 | * ModalFooter 43 | * Animation 44 | * FadeAnimation 45 | * ScaleAnimation 46 | * SlideAnimation 47 | * DragEvent, 48 | * SwipeDirection, 49 | * ModalProps 50 | * ModalFooterProps 51 | * ModalButtonProps 52 | * ModalTitleProps 53 | * ModalContentProps 54 | * BackdropProps 55 | 56 | ## Examples 57 | [Example](https://github.com/jacklam718/react-native-modals/blob/master/example/src/DemoScreen.js) 58 | 59 | ## Setup - this is essential step 60 | The Component can not be used until `ModalPortal` is mounted. 61 | You should register in your app root. For example: 62 | ```jsx 63 | import { ModalPortal } from 'react-native-modals'; 64 | import { Provider } from 'react-redux'; 65 | 66 | const Root = () => { 67 | return ( 68 | 69 | 70 | 71 | 72 | ); 73 | } 74 | ``` 75 | 76 | ## Basic Usage 77 | ```jsx 78 | import { Modal, ModalContent } from 'react-native-modals'; 79 | import { Button } from 'react-native' 80 | 81 | 82 |