├── .circleci └── config.yml ├── .editorconfig ├── .eslintignore ├── .eslintrc ├── .github ├── ISSUE_TEMPLATE.md ├── PULL_REQUEST_TEMPLATE.md └── workflows │ └── stale.yml ├── .gitignore ├── .release-it.json ├── LICENSE.md ├── README.md ├── babel.config.js ├── commitlint.config.js ├── example ├── .babelrc ├── .buckconfig ├── .eslintrc ├── .expo-shared │ └── assets.json ├── .gitignore ├── .watchmanconfig ├── App.tsx ├── app.json ├── index.js ├── metro.config.js ├── package.json ├── src │ ├── DragLimitedToModal.tsx │ ├── FullScreen.tsx │ ├── GestureInteraction.tsx │ ├── HeaderBackgrounds.tsx │ ├── HeaderPreset.tsx │ ├── ImageStack.tsx │ ├── ImmediateTransition.tsx │ ├── LifecycleInteraction.tsx │ ├── ModalPresentation.tsx │ ├── ModalStack.tsx │ ├── PerScreenTransitions.tsx │ ├── RevealStack.tsx │ ├── SimpleStack.tsx │ ├── StackAnimationConsumerStack.tsx │ ├── StackWithDrawer.tsx │ ├── StackWithInput.tsx │ ├── SwitchWithStacks.tsx │ └── TransparentStack.tsx └── yarn.lock ├── jest-setup.js ├── package.json ├── scripts ├── stack.patch └── sync-stack.sh ├── src ├── index.tsx ├── navigators │ ├── __tests__ │ │ ├── NestedNavigator.test.tsx │ │ ├── StackNavigator.test.tsx │ │ └── __snapshots__ │ │ │ ├── NestedNavigator.test.tsx.snap │ │ │ └── StackNavigator.test.tsx.snap │ └── createStackNavigator.tsx ├── types.tsx ├── utils │ ├── useTheme.tsx │ ├── validateDeprecatedConfig.tsx │ └── validateDeprecatedOptions.tsx └── views │ └── StackView.tsx ├── tsconfig.json ├── types └── index.d.ts └── yarn.lock /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | 3 | defaults: &defaults 4 | docker: 5 | - image: circleci/node:10 6 | working_directory: ~/project 7 | 8 | jobs: 9 | install-dependencies: 10 | <<: *defaults 11 | steps: 12 | - checkout 13 | - attach_workspace: 14 | at: ~/project 15 | - restore_cache: 16 | keys: 17 | - v1-dependencies-{{ checksum "yarn.lock" }} 18 | - v1-dependencies- 19 | - restore_cache: 20 | keys: 21 | - v1-dependencies-example-{{ checksum "example/yarn.lock" }} 22 | - v1-dependencies-example- 23 | - run: | 24 | yarn install --frozen-lockfile --cwd example 25 | yarn install --frozen-lockfile --ignore-scripts 26 | yarn sync 27 | - save_cache: 28 | key: v1-dependencies-{{ checksum "yarn.lock" }} 29 | paths: node_modules 30 | - save_cache: 31 | key: v1-dependencies-example-{{ checksum "example/yarn.lock" }} 32 | paths: example/node_modules 33 | - persist_to_workspace: 34 | root: . 35 | paths: . 36 | lint-and-typecheck: 37 | <<: *defaults 38 | steps: 39 | - attach_workspace: 40 | at: ~/project 41 | - run: | 42 | yarn lint 43 | yarn typescript 44 | unit-tests: 45 | <<: *defaults 46 | steps: 47 | - attach_workspace: 48 | at: ~/project 49 | - run: | 50 | yarn test --coverage 51 | - store_artifacts: 52 | path: coverage 53 | destination: coverage 54 | build: 55 | <<: *defaults 56 | steps: 57 | - attach_workspace: 58 | at: ~/project 59 | - run: yarn prepare 60 | 61 | workflows: 62 | version: 2 63 | build-and-test: 64 | jobs: 65 | - install-dependencies 66 | - lint-and-typecheck: 67 | requires: 68 | - install-dependencies 69 | - unit-tests: 70 | requires: 71 | - install-dependencies 72 | - build: 73 | requires: 74 | - install-dependencies 75 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | 8 | [*] 9 | 10 | # change these settings to your own preference 11 | indent_style = space 12 | indent_size = 2 13 | 14 | # we recommend you to keep these unchanged 15 | end_of_line = lf 16 | charset = utf-8 17 | trim_trailing_whitespace = true 18 | insert_final_newline = true 19 | 20 | [*.md] 21 | trim_trailing_whitespace = false 22 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | coverage/ 3 | lib/ 4 | vendor/ 5 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "eslint-config-satya164", 3 | 4 | "plugins": ["react-native-globals"], 5 | 6 | "settings": { 7 | "react": { 8 | "version": "detect" 9 | }, 10 | "import/core-modules": ["react-native-screens"] 11 | }, 12 | 13 | "env": { 14 | "es6": true, 15 | "react-native-globals/all": true, 16 | }, 17 | 18 | "rules": { 19 | "import/named": "off", 20 | "react/sort-comp": "off", 21 | "jest/no-disabled-tests": "off", 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | **Current Behavior** 2 | 3 | - What code are you running and what is happening? 4 | - Include a screenshot or video if it makes sense. 5 | 6 | **Expected Behavior** 7 | 8 | - What do you expect should be happening? 9 | - Include a screenshot or video if it makes sense. 10 | 11 | **How to reproduce** 12 | 13 | - You must provide a way to reproduce the problem. If you are having an issue with your machine or build tools, the issue belongs on another repository as that is outside of the scope of React Navigation. 14 | - Either re-create the bug on [Snack](https://snack.expo.io) or link to a GitHub repository with code that reproduces the bug. 15 | - Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app. 16 | - Keep the repro code as simple as possible, with the minimum amount of code required to repro the issue. 17 | - Before reporting an issue, make sure you are on latest version of the package. 18 | 19 | **Your Environment** 20 | 21 | | software | version | 22 | | ------------------------------ | ------- | 23 | | iOS or Android | 24 | | react-navigation | 25 | | react-navigation-stack | 26 | | react-native-gesture-handler | 27 | | react-native-safe-area-context | 28 | | react-native-screens | 29 | | react-native | 30 | | expo | 31 | | node | 32 | | npm or yarn | 33 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | Please provide enough information so that others can review your pull request: 2 | 3 | **Motivation** 4 | 5 | Explain the **motivation** for making this change. What existing problem does the pull request solve? 6 | 7 | **Test plan** 8 | 9 | Demonstrate the code is solid. Example: the exact commands you ran and their output, screenshots / videos if the pull request changes UI. 10 | 11 | Make sure you test on both platforms if your change affects both platforms. 12 | 13 | The code must pass tests. 14 | 15 | **Code formatting** 16 | 17 | Look around. Match the style of the rest of the codebase. Run `yarn lint --fix` before committing. 18 | -------------------------------------------------------------------------------- /.github/workflows/stale.yml: -------------------------------------------------------------------------------- 1 | name: "Close stale issues and pull requests" 2 | on: 3 | schedule: 4 | - cron: "0 0 * * *" 5 | 6 | jobs: 7 | stale: 8 | runs-on: ubuntu-latest 9 | steps: 10 | - uses: actions/stale@v1 11 | with: 12 | repo-token: ${{ secrets.GITHUB_TOKEN }} 13 | stale-issue-message: 'Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.' 14 | stale-pr-message: 'Hello 👋, this pull request has been open for more than 2 months with no activity on it. If you think this is still necessary with the latest version, please comment and ping a maintainer to get this reviewed, otherwise it will be closed automatically in 7 days.' 15 | exempt-issue-label: 'Keep opened' 16 | exempt-pr-label: 'Keep opened' 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # XDE 6 | .expo/ 7 | 8 | # VSCode 9 | .vscode/ 10 | jsconfig.json 11 | 12 | # Xcode 13 | # 14 | build/ 15 | *.pbxuser 16 | !default.pbxuser 17 | *.mode1v3 18 | !default.mode1v3 19 | *.mode2v3 20 | !default.mode2v3 21 | *.perspectivev3 22 | !default.perspectivev3 23 | xcuserdata 24 | *.xccheckout 25 | *.moved-aside 26 | DerivedData 27 | *.hmap 28 | *.ipa 29 | *.xcuserstate 30 | project.xcworkspace 31 | 32 | # Android/IJ 33 | # 34 | .idea 35 | .gradle 36 | local.properties 37 | 38 | # node.js 39 | # 40 | node_modules/ 41 | npm-debug.log 42 | yarn-debug.log 43 | yarn-error.log 44 | 45 | # BUCK 46 | buck-out/ 47 | \.buckd/ 48 | android/app/libs 49 | android/keystores/debug.keystore 50 | 51 | # Build 52 | dist/ 53 | generated/ 54 | vendor/ 55 | 56 | # generated by bob 57 | lib/ 58 | -------------------------------------------------------------------------------- /.release-it.json: -------------------------------------------------------------------------------- 1 | { 2 | "git": { 3 | "commitMessage": "chore: release %s", 4 | "tagName": "v%s" 5 | }, 6 | "npm": { 7 | "publish": true 8 | }, 9 | "github": { 10 | "release": true 11 | }, 12 | "plugins": { 13 | "@release-it/conventional-changelog": { 14 | "preset": "angular" 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 React Native Community 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 | This package has been moved to https://github.com/react-navigation/react-navigation/tree/master/packages/stack 2 | 3 | --- 4 | 5 | # React Navigation Stack 6 | 7 | [![Build Status][build-badge]][build] 8 | [![Version][version-badge]][package] 9 | [![MIT License][license-badge]][license] 10 | 11 | Stack navigator for use on iOS and Android. 12 | 13 | ## Installation 14 | 15 | Open a Terminal in your project's folder and run, 16 | 17 | ```sh 18 | yarn add react-navigation-stack @react-native-community/masked-view react-native-safe-area-context 19 | ``` 20 | 21 | or 22 | 23 | ```sh 24 | npm install react-navigation-stack @react-native-community/masked-view react-native-safe-area-context 25 | ``` 26 | 27 | ## Usage 28 | 29 | ```js 30 | import { createStackNavigator } from 'react-navigation-stack'; 31 | 32 | export default createStackNavigator({ 33 | Inbox: InboxScreen, 34 | Drafts: DraftsScreen, 35 | }, { 36 | initialRouteName: 'Inbox', 37 | }); 38 | ``` 39 | 40 | ## Development workflow 41 | 42 | To setup the development environment, open a Terminal in the repo directory and run the following: 43 | 44 | ```sh 45 | yarn bootstrap 46 | ``` 47 | 48 | While developing, you can run the example app with [Expo](https://expo.io/) to test your changes: 49 | 50 | ```sh 51 | yarn example start 52 | ``` 53 | 54 | The code in this repo uses the source from [`@react-navigation/stack`](https://github.com/react-navigation/navigation-ex/tree/master/packages/stack) and patches it to make it usable in React Navigation 4. If you need to make changes, please send a pull request there. 55 | 56 | If the change is specifically related to React Navigation 4 integration, first run `yarn sync`, then change the files in `src/vendor` and then run `yarn patch` to update the patch file with the latest changes. 57 | 58 | Make sure your code passes TypeScript and ESLint. Run the following to verify: 59 | 60 | ```sh 61 | yarn typescript 62 | yarn lint 63 | ``` 64 | 65 | To fix formatting errors, run the following: 66 | 67 | ```sh 68 | yarn lint --fix 69 | ``` 70 | 71 | ## Docs 72 | 73 | Documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/en/stack-navigator.html). 74 | 75 | 76 | 77 | [build-badge]: https://img.shields.io/circleci/project/github/react-navigation/stack/master.svg?style=flat-square 78 | [build]: https://circleci.com/gh/react-navigation/stack 79 | [version-badge]: https://img.shields.io/npm/v/react-navigation-stack.svg?style=flat-square 80 | [package]: https://www.npmjs.com/package/react-navigation-stack 81 | [license-badge]: https://img.shields.io/npm/l/react-navigation-stack.svg?style=flat-square 82 | [license]: https://opensource.org/licenses/MIT 83 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['@commitlint/config-conventional'], 3 | }; 4 | -------------------------------------------------------------------------------- /example/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "expo" 4 | ], 5 | "plugins": [ 6 | ["module-resolver", { 7 | "alias": { 8 | "react-navigation-stack": "../src/index" 9 | } 10 | }] 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /example/.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /example/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | 'extends': '../.eslintrc', 3 | 4 | 'settings': 5 | { 6 | 'import/core-modules': 7 | [ 8 | 'expo-asset', 9 | 'react-navigation-stack', 10 | 'react-native-gesture-handler', 11 | 'react-native-vector-icons', 12 | ], 13 | }, 14 | 15 | "rules": { 16 | "react-native/no-inline-styles": "off" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /example/.expo-shared/assets.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /example/.gitignore: -------------------------------------------------------------------------------- 1 | ios/Pods 2 | -------------------------------------------------------------------------------- /example/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /example/App.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Asset } from 'expo-asset'; 3 | import { FlatList, I18nManager } from 'react-native'; 4 | import { createAppContainer, SafeAreaView, ScrollView } from 'react-navigation'; 5 | import { 6 | Assets as StackAssets, 7 | createStackNavigator, 8 | NavigationStackScreenProps, 9 | NavigationStackOptions, 10 | } from 'react-navigation-stack'; 11 | import { List, Divider } from 'react-native-paper'; 12 | 13 | import FullScreen from './src/FullScreen'; 14 | import SimpleStack from './src/SimpleStack'; 15 | import RevealStack from './src/RevealStack'; 16 | import ImageStack from './src/ImageStack'; 17 | import TransparentStack from './src/TransparentStack'; 18 | import ModalStack from './src/ModalStack'; 19 | import ModalPresentation from './src/ModalPresentation'; 20 | import PerScreenTransitions from './src/PerScreenTransitions'; 21 | import LifecycleInteraction from './src/LifecycleInteraction'; 22 | import GestureInteraction from './src/GestureInteraction'; 23 | import SwitchWithStacks from './src/SwitchWithStacks'; 24 | import StackWithDrawer from './src/StackWithDrawer'; 25 | import StackWithInput from './src/StackWithInput'; 26 | import HeaderPreset from './src/HeaderPreset'; 27 | import { 28 | HeaderBackgroundDefault, 29 | HeaderBackgroundFade, 30 | } from './src/HeaderBackgrounds'; 31 | import DragLimitedToModal from './src/DragLimitedToModal'; 32 | import StackAnimationConsumerStack from './src/StackAnimationConsumerStack'; 33 | 34 | // Comment the following two lines to stop using react-native-screens 35 | // eslint-disable-next-line import/no-unresolved 36 | import { useScreens } from 'react-native-screens'; 37 | 38 | // eslint-disable-next-line react-hooks/rules-of-hooks 39 | useScreens(true); 40 | 41 | // Change `false` to `true` to force RTL. Requires closing and re-opening 42 | // your app after you first load it with this option enabled. 43 | I18nManager.forceRTL(false); 44 | 45 | type Item = { 46 | component: React.ComponentType; 47 | title: string; 48 | routeName: string; 49 | }; 50 | 51 | const data: Item[] = [ 52 | { component: SimpleStack, title: 'Simple', routeName: 'SimpleStack' }, 53 | { component: HeaderPreset, title: 'UIKit Preset', routeName: 'UIKit' }, 54 | { component: RevealStack, title: 'Reveal Preset', routeName: 'Reveal' }, 55 | { component: ImageStack, title: 'Image', routeName: 'ImageStack' }, 56 | { component: ModalStack, title: 'Modal', routeName: 'ModalStack' }, 57 | { 58 | component: ModalPresentation, 59 | title: 'Modal (iOS style)', 60 | routeName: 'ModalPresentation', 61 | }, 62 | { 63 | component: PerScreenTransitions, 64 | title: 'Per screen transitions', 65 | routeName: 'PerScreenTransitions', 66 | }, 67 | { component: FullScreen, title: 'Full Screen', routeName: 'FullScreen' }, 68 | { 69 | component: LifecycleInteraction, 70 | title: 'Lifecycle', 71 | routeName: 'LifecycleStack', 72 | }, 73 | { 74 | component: TransparentStack, 75 | title: 'Transparent', 76 | routeName: 'TransparentStack', 77 | }, 78 | { 79 | component: GestureInteraction, 80 | title: 'Gesture Interaction', 81 | routeName: 'GestureInteraction', 82 | }, 83 | { 84 | component: SwitchWithStacks, 85 | title: 'Switch with Stacks', 86 | routeName: 'SwitchWithStacks', 87 | }, 88 | { 89 | component: StackWithDrawer, 90 | title: 'Stack with drawer inside', 91 | routeName: 'StackWithDrawer', 92 | }, 93 | { 94 | component: StackWithInput, 95 | title: 'Stack with text input', 96 | routeName: 'StackWithInput', 97 | }, 98 | { 99 | component: HeaderBackgroundDefault, 100 | title: 'Header background (UIKit transition)', 101 | routeName: 'HeaderBackgroundDefault', 102 | }, 103 | { 104 | component: HeaderBackgroundFade, 105 | title: 'Header background (fade transition)', 106 | routeName: 'HeaderBackgroundFade', 107 | }, 108 | { 109 | component: DragLimitedToModal, 110 | title: 'Drag limited to modal', 111 | routeName: 'DragLimitedToModal', 112 | }, 113 | { 114 | component: StackAnimationConsumerStack, 115 | title: 'Stack animation consumer stack', 116 | routeName: 'StackAnimationConsumerStack', 117 | }, 118 | ]; 119 | 120 | // Cache images 121 | Asset.loadAsync(StackAssets); 122 | 123 | class Home extends React.Component { 124 | static navigationOptions = { 125 | title: 'Examples', 126 | }; 127 | 128 | _renderItem = ({ item }: { item: Item }) => ( 129 | this.props.navigation.navigate(item.routeName)} 132 | /> 133 | ); 134 | 135 | _keyExtractor = (item: Item) => item.routeName; 136 | 137 | render() { 138 | return ( 139 | } 144 | data={data} 145 | style={{ backgroundColor: '#fff' }} 146 | /> 147 | ); 148 | } 149 | } 150 | 151 | class SafeAreaScrollView extends React.Component { 152 | render() { 153 | let { children, ...scrollViewProps } = this.props; 154 | return ( 155 | 156 | {children} 157 | 158 | ); 159 | } 160 | } 161 | 162 | const Root = createStackNavigator( 163 | { 164 | Home: createStackNavigator({ Home }), 165 | ...data.reduce<{ 166 | [key: string]: { 167 | screen: React.ComponentType; 168 | navigationOptions: NavigationStackOptions; 169 | }; 170 | }>((acc, it) => { 171 | acc[it.routeName] = { 172 | screen: it.component, 173 | navigationOptions: { 174 | title: it.title, 175 | }, 176 | }; 177 | 178 | return acc; 179 | }, {}), 180 | }, 181 | { 182 | mode: 'modal', 183 | headerMode: 'none', 184 | } 185 | ); 186 | 187 | export default createAppContainer(Root); 188 | 189 | // Uncomment this to test immediate transitions 190 | // import ImmediateTransition from './src/ImmediateTransition'; 191 | // Expo.registerRootComponent(ImmediateTransition); 192 | -------------------------------------------------------------------------------- /example/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "React Navigation Stack Example", 4 | "description": "Demonstrates the various capabilities of react-navigation-stack", 5 | "slug": "react-navigation-stack-demo", 6 | "sdkVersion": "36.0.0", 7 | "version": "1.0.0", 8 | "primaryColor": "#2196f3", 9 | "packagerOpts": { 10 | "config": "./metro.config.js", 11 | "projectRoots": "" 12 | }, 13 | "entryPoint": "node_modules/expo/AppEntry.js", 14 | "platforms": [ 15 | "android", 16 | "ios" 17 | ] 18 | }, 19 | "displayName": "React Navigation Stack Example", 20 | "name": "StackExample" 21 | } 22 | -------------------------------------------------------------------------------- /example/index.js: -------------------------------------------------------------------------------- 1 | import { AppRegistry } from 'react-native'; 2 | import App from './App.tsx'; 3 | 4 | AppRegistry.registerComponent('StackExample', () => App); 5 | -------------------------------------------------------------------------------- /example/metro.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-extraneous-dependencies */ 2 | 3 | const path = require('path'); 4 | const fs = require('fs'); 5 | const escape = require('escape-string-regexp'); 6 | const blacklist = require('metro-config/src/defaults/blacklist'); 7 | 8 | const root = path.resolve(__dirname, '..'); 9 | const pak = JSON.parse( 10 | fs.readFileSync(path.join(root, 'package.json'), 'utf8') 11 | ); 12 | 13 | const modules = [ 14 | '@babel/runtime', 15 | '@expo/vector-icons', 16 | ...Object.keys(pak.dependencies || {}), 17 | ...Object.keys(pak.peerDependencies || {}), 18 | ]; 19 | 20 | module.exports = { 21 | projectRoot: __dirname, 22 | watchFolders: [root], 23 | 24 | resolver: { 25 | blacklistRE: blacklist([ 26 | new RegExp(`^${escape(path.join(root, 'node_modules'))}\\/.*$`), 27 | ]), 28 | 29 | extraNodeModules: modules.reduce((acc, name) => { 30 | acc[name] = path.join(__dirname, 'node_modules', name); 31 | return acc; 32 | }, {}), 33 | }, 34 | 35 | transformer: { 36 | getTransformOptions: async () => ({ 37 | transform: { 38 | experimentalImportSupport: false, 39 | inlineRequires: true, 40 | }, 41 | }), 42 | }, 43 | }; 44 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "stackexample", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "expo start", 7 | "android": "expo android", 8 | "ios": "expo ios" 9 | }, 10 | "dependencies": { 11 | "@react-native-community/masked-view": "0.1.5", 12 | "expo": "^36.0.0", 13 | "expo-asset": "~8.0.0", 14 | "expo-barcode-scanner": "~8.0.0", 15 | "expo-constants": "~8.0.0", 16 | "hoist-non-react-statics": "^3.3.0", 17 | "react": "16.9.0", 18 | "react-dom": "16.9.0", 19 | "react-native": "0.61.4", 20 | "react-native-gesture-handler": "^1.5.5", 21 | "react-native-iphone-x-helper": "^1.2.1", 22 | "react-native-maps": "0.26.1", 23 | "react-native-paper": "^2.15.2", 24 | "react-native-reanimated": "^1.4.0", 25 | "react-native-safe-area-context": "0.6.0", 26 | "react-native-unimodules": "^0.7.0-rc.1", 27 | "react-native-web": "^0.11.4", 28 | "react-native-webview": "7.4.3", 29 | "react-navigation": "^4.1.1", 30 | "react-navigation-drawer": "^2.2.2", 31 | "react-navigation-tabs": "^2.5.5" 32 | }, 33 | "devDependencies": { 34 | "babel-plugin-module-resolver": "^3.2.0", 35 | "expo-cli": "^3.2.3" 36 | }, 37 | "resolutions": { 38 | "react-native-screens": "1.0.0-alpha.23" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /example/src/DragLimitedToModal.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { View, Text, StyleSheet, Dimensions } from 'react-native'; 3 | import { NavigationStackScreenComponent } from 'react-navigation-stack'; 4 | 5 | const HEIGHT = Dimensions.get('screen').height; 6 | 7 | const DragLimitedToModal: NavigationStackScreenComponent = () => ( 8 | 9 | Adjusts to the size of text 10 | 11 | ); 12 | 13 | DragLimitedToModal.navigationOptions = { 14 | cardStyle: { backgroundColor: 'transparent' }, 15 | gestureDirection: 'vertical', 16 | gestureResponseDistance: { vertical: HEIGHT }, 17 | cardStyleInterpolator: ({ current }) => { 18 | const translateY = current.progress.interpolate({ 19 | inputRange: [0, 1], 20 | outputRange: [HEIGHT, 0], 21 | }); 22 | 23 | return { 24 | cardStyle: { 25 | transform: [{ translateY }], 26 | flex: undefined, 27 | }, 28 | containerStyle: { 29 | alignItems: 'center', 30 | justifyContent: 'center', 31 | }, 32 | }; 33 | }, 34 | }; 35 | 36 | const styles = StyleSheet.create({ 37 | modal: { 38 | padding: 30, 39 | borderRadius: 15, 40 | backgroundColor: '#000', 41 | }, 42 | text: { 43 | fontSize: 18, 44 | color: '#fff', 45 | }, 46 | }); 47 | 48 | export default DragLimitedToModal; 49 | -------------------------------------------------------------------------------- /example/src/FullScreen.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { View } from 'react-native'; 3 | import { createStackNavigator } from 'react-navigation-stack'; 4 | 5 | class Screen extends React.Component { 6 | static navigationOptions = { 7 | headerShown: false, 8 | }; 9 | 10 | render() { 11 | return ; 12 | } 13 | } 14 | 15 | export default createStackNavigator({ Screen }); 16 | -------------------------------------------------------------------------------- /example/src/GestureInteraction.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { 3 | ActivityIndicator, 4 | Button, 5 | InteractionManager, 6 | View, 7 | } from 'react-native'; 8 | import { WebView } from 'react-native-webview'; 9 | import MapView from 'react-native-maps'; 10 | import { 11 | createStackNavigator, 12 | GestureHandlerRefContext, 13 | NavigationStackScreenComponent, 14 | NavigationStackScreenProps, 15 | } from 'react-navigation-stack'; 16 | import { NativeViewGestureHandler } from 'react-native-gesture-handler'; 17 | 18 | const IndexScreen: NavigationStackScreenComponent = ({ navigation }) => ( 19 | 20 |