├── .babelrc ├── .circleci └── config.yml ├── .editorconfig ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .release-it.json ├── LICENSE.md ├── README.md ├── example ├── .buckconfig ├── .eslintrc ├── .watchmanconfig ├── App.js ├── README.md ├── app.json ├── babel.config.js ├── package.json ├── src │ ├── Lists.js │ └── ScrollView.js └── yarn.lock ├── jest-setup.js ├── package.json ├── src ├── ResourceSavingSceneView.js ├── Scrollables.js ├── Themed.js ├── __tests__ │ ├── __snapshots__ │ │ ├── createAppContainer-test.js.snap │ │ └── withOrientation-test.js.snap │ ├── createAppContainer-test.js │ └── withOrientation-test.js ├── createAppContainer.js ├── createKeyboardAwareNavigator.js ├── createNavigationAwareScrollable.js ├── index.js ├── throwIfWrongVersion.js ├── utils │ ├── docsUrl.js │ └── invariant.js └── withOrientation.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-native"] 3 | } 4 | -------------------------------------------------------------------------------- /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | 3 | defaults: &defaults 4 | docker: 5 | - image: circleci/node:8 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 "package.json" }} 18 | - v1-dependencies- 19 | - restore_cache: 20 | keys: 21 | - v1-dependencies-example-{{ checksum "example/package.json" }} 22 | - v1-dependencies-example- 23 | - run: | 24 | yarn install 25 | yarn install --cwd example 26 | - save_cache: 27 | key: v1-dependencies-{{ checksum "package.json" }} 28 | paths: node_modules 29 | - save_cache: 30 | key: v1-dependencies-example-{{ checksum "example/package.json" }} 31 | paths: example/node_modules 32 | - persist_to_workspace: 33 | root: . 34 | paths: . 35 | lint: 36 | <<: *defaults 37 | steps: 38 | - attach_workspace: 39 | at: ~/project 40 | - run: | 41 | yarn run lint 42 | unit-tests: 43 | <<: *defaults 44 | steps: 45 | - attach_workspace: 46 | at: ~/project 47 | - run: yarn test -- --coverage 48 | - store_artifacts: 49 | path: coverage 50 | destination: coverage 51 | 52 | workflows: 53 | version: 2 54 | build-and-test: 55 | jobs: 56 | - install-dependencies 57 | - lint: 58 | requires: 59 | - install-dependencies 60 | - unit-tests: 61 | requires: 62 | - install-dependencies 63 | -------------------------------------------------------------------------------- /.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 | dist/ 3 | jest-setup.js 4 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "eslint-config-satya164", 3 | 4 | "plugins": ["react-native-globals"], 5 | 6 | "env": { 7 | "es6": true, 8 | "react-native-globals/all": true, 9 | }, 10 | 11 | "rules": { 12 | "import/no-unresolved": "off", 13 | "react/sort-comp": "off", 14 | "jest/no-disabled-tests": "off", 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # XDE 6 | .expo/ 7 | 8 | # VSCode 9 | .vscode/ 10 | tsconfig.json 11 | jsconfig.json 12 | 13 | # Xcode 14 | # 15 | build/ 16 | *.pbxuser 17 | !default.pbxuser 18 | *.mode1v3 19 | !default.mode1v3 20 | *.mode2v3 21 | !default.mode2v3 22 | *.perspectivev3 23 | !default.perspectivev3 24 | xcuserdata 25 | *.xccheckout 26 | *.moved-aside 27 | DerivedData 28 | *.hmap 29 | *.ipa 30 | *.xcuserstate 31 | project.xcworkspace 32 | 33 | # Android/IJ 34 | # 35 | .idea 36 | .gradle 37 | local.properties 38 | 39 | # node.js 40 | # 41 | node_modules/ 42 | npm-debug.log 43 | yarn-debug.log 44 | yarn-error.log 45 | 46 | # BUCK 47 | buck-out/ 48 | \.buckd/ 49 | android/app/libs 50 | android/keystores/debug.keystore 51 | 52 | # Build 53 | dist/ 54 | -------------------------------------------------------------------------------- /.release-it.json: -------------------------------------------------------------------------------- 1 | { 2 | "increment": "conventional:angular", 3 | "changelogCommand": "conventional-changelog -p angular | tail -n +3", 4 | "safeBump": false, 5 | "src": { 6 | "commitMessage": "chore: release %s", 7 | "tagName": "v%s" 8 | }, 9 | "npm": { 10 | "publish": true 11 | }, 12 | "github": { 13 | "release": true 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /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 | # React Navigation Native 2 | 3 | [![npm version](https://badge.fury.io/js/%40react-navigation%2Fnative.svg)](https://badge.fury.io/js/%40react-navigation%2Fnative) [![CircleCI badge](https://circleci.com/gh/react-navigation/native/tree/master.svg?style=shield)](https://circleci.com/gh/react-navigation/react-navigation-native/tree/master) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://reactnavigation.org/docs/contributing.html) 4 | 5 | React Native support for React Navigation 6 | 7 | ## Docs 8 | 9 | Documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/getting-started.html). 10 | -------------------------------------------------------------------------------- /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 | "import/core-modules": [ "expo", "react-navigation-stack" ] 6 | }, 7 | 8 | "rules": { 9 | "react/prop-types": "off" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /example/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /example/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Asset, registerRootComponent } from 'expo'; 3 | import { FlatList, I18nManager } from 'react-native'; 4 | import { createAppContainer } from '@react-navigation/native'; 5 | 6 | import { 7 | Assets as StackAssets, 8 | createStackNavigator, 9 | } from 'react-navigation-stack'; 10 | import { List, Divider } from 'react-native-paper'; 11 | 12 | import ScrollView from './src/ScrollView'; 13 | import Lists from './src/Lists'; 14 | 15 | // Comment/uncomment the following two lines to toggle react-native-screens 16 | // import { useScreens } from 'react-native-screens'; 17 | // useScreens(); 18 | 19 | // Uncomment the following line to force RTL. Requires closing and re-opening 20 | // your app after you first load it with this option enabled. 21 | I18nManager.forceRTL(false); 22 | 23 | const data = [ 24 | { component: ScrollView, title: 'ScrollView', routeName: 'ScrollView' }, 25 | { component: Lists, title: 'FlatList and SectionList', routeName: 'Lists' }, 26 | ]; 27 | 28 | // Cache images 29 | Asset.loadAsync(StackAssets); 30 | 31 | class Home extends React.Component { 32 | static navigationOptions = { 33 | title: 'Examples', 34 | }; 35 | 36 | _renderItem = ({ item }) => ( 37 | this.props.navigation.navigate(item.routeName)} 40 | /> 41 | ); 42 | 43 | _keyExtractor = item => item.routeName; 44 | 45 | render() { 46 | return ( 47 | 54 | ); 55 | } 56 | } 57 | 58 | const Root = createStackNavigator( 59 | { 60 | Home: createStackNavigator({ Home }), 61 | ...data.reduce((acc, it) => { 62 | acc[it.routeName] = { 63 | screen: it.component, 64 | navigationOptions: { 65 | title: it.title, 66 | }, 67 | }; 68 | 69 | return acc; 70 | }, {}), 71 | }, 72 | { 73 | mode: 'modal', 74 | headerMode: 'none', 75 | defaultNavigationOptions: { 76 | gesturesEnabled: false, 77 | }, 78 | } 79 | ); 80 | 81 | const App = createAppContainer(Root); 82 | export default App; 83 | registerRootComponent(App); 84 | -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | ## Run the example 2 | 3 | - [View it with Expo](https://expo.io/@satya164/react-navigation-tabs-demos) 4 | - Run the example locally 5 | + Clone the repository and `cd` to this directory 6 | + Run `yarn` to install the dependencies 7 | + Run `yarn start` to start the packager 8 | + Scan the QR Code with the Expo app 9 | -------------------------------------------------------------------------------- /example/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "React Navigation Native Example", 4 | "description": "Demonstrates the various capabilities of @react-navigation/native", 5 | "slug": "react-navigation-Native-demo", 6 | "sdkVersion": "32.0.0", 7 | "version": "1.0.0", 8 | "primaryColor": "#2196f3" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /example/babel.config.js: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line import/no-commonjs 2 | module.exports = function(api) { 3 | api.cache(true); 4 | return { 5 | presets: ['babel-preset-expo'], 6 | }; 7 | }; 8 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "native-example", 3 | "version": "0.0.1", 4 | "private": true, 5 | "main": "App.js", 6 | "scripts": { 7 | "start": "expo start", 8 | "android": "expo start --android", 9 | "ios": "expo start --ios", 10 | "postinstall": "rm -rf node_modules/@react-navigation/native/{.git,node_modules,example}" 11 | }, 12 | "dependencies": { 13 | "@react-navigation/native": "../", 14 | "@react-navigation/core": "^3.1.0", 15 | "expo": "~32.0.0", 16 | "hoist-non-react-statics": "^2.5.0", 17 | "prop-types": "^15.6.0", 18 | "query-string": "^6.2.0", 19 | "react": "16.5.0", 20 | "react-is": "^16.5.2", 21 | "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz", 22 | "react-native-paper": "^2.2.8", 23 | "react-navigation-stack": "^1.0.7", 24 | "react-navigation-tabs": "^1.0.2" 25 | }, 26 | "resolutions": { 27 | "**/react": "16.5.0", 28 | "**/prop-types": "15.6.2", 29 | "**/hoist-non-react-statics": "3.1.0" 30 | }, 31 | "devDependencies": { 32 | "babel-preset-expo": "^5.0.0" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /example/src/Lists.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Button, TouchableOpacity, View, Text } from 'react-native'; 3 | import { MaterialIcons } from 'react-native-vector-icons'; 4 | import { createStackNavigator } from 'react-navigation-stack'; 5 | import { SectionList, FlatList } from '@react-navigation/native'; 6 | 7 | const LOREM = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in lacus malesuada tellus bibendum fringilla. Integer suscipit suscipit erat, sed molestie eros. Nullam fermentum odio vel mauris pulvinar accumsan. Duis blandit id nulla ac euismod. Nunc nec convallis mauris. Proin sit amet malesuada orci. Aliquam blandit mattis nisi ut eleifend. Morbi blandit ante neque, eu tincidunt est interdum in. Mauris pellentesque euismod nulla. Mauris posuere egestas nulla, sit amet eleifend quam egestas at. Maecenas odio erat, auctor eu consectetur eu, vulputate nec arcu. Praesent in felis massa. Nunc fermentum, massa vitae ultricies dictum, est mi posuere eros, sit amet posuere mi ante ac nulla. Etiam odio libero, tempor sit amet sagittis sed, fermentum ac lorem. Donec dignissim fermentum velit, ac ultrices nulla tristique vel. 8 | Suspendisse auctor elit vitae elementum auctor. Vestibulum gravida auctor facilisis. Vivamus rhoncus ornare magna, non pharetra diam porta ac. Aliquam et justo vitae neque congue dignissim. Etiam et dui euismod, cursus mauris in, aliquam nunc. Mauris elit nulla, rutrum non aliquam a, imperdiet a erat. Nullam molestie elit risus, in posuere dui maximus ut. Integer ac sapien molestie, vestibulum ligula ultricies, pellentesque nisl. Duis elementum, ante ac tincidunt cursus, odio leo lacinia purus, at posuere mauris diam suscipit lorem. In hac habitasse platea dictumst. Pellentesque sagittis nunc non ipsum porttitor pellentesque. Phasellus dapibus accumsan aliquam. Etiam feugiat vitae magna condimentum tincidunt. 9 | Donec vitae sollicitudin felis, eget tempus odio. Nulla fringilla urna id tristique molestie. Sed sed tellus semper, pharetra tellus vel, egestas enim. Ut dictum erat vitae lectus vestibulum tincidunt nec et sapien. Integer faucibus felis et interdum condimentum. Praesent lacus tortor, euismod sed dui nec, elementum auctor lorem. Vestibulum at iaculis lorem. Suspendisse tempor efficitur blandit. Sed elementum libero ut metus lobortis, cursus molestie nisi laoreet. Cras porta metus vitae orci rutrum suscipit. In non massa in nunc interdum condimentum et ut urna. Praesent hendrerit mauris sed vestibulum condimentum. Mauris tincidunt orci at nibh maximus aliquet. Nulla tristique turpis quis sem ultrices, at aliquet dui varius. Nunc convallis massa ac libero posuere sagittis. Pellentesque euismod nunc blandit turpis placerat lacinia. 10 | Donec eget mi a justo congue faucibus eu sed odio. Morbi condimentum, nulla non iaculis lobortis, mauris diam facilisis nisi, in tincidunt ex nulla bibendum ipsum. Nam interdum turpis eget leo convallis, lobortis sollicitudin elit posuere. Aliquam erat volutpat. Suspendisse in nibh interdum nibh porttitor accumsan. Nullam blandit, neque sed lacinia dapibus, nisl lacus egestas odio, sit amet molestie libero nibh ac massa. Quisque tempor placerat elit, non volutpat elit pellentesque quis. Etiam sit amet nisi at ex ornare commodo non vel tortor. Mauris ac dictum sem. Donec feugiat id augue at tempus. Nunc non aliquam odio, quis luctus augue. Maecenas vulputate urna aliquet ultricies tincidunt.`; 11 | 12 | const DATA = LOREM.split('\n').map((line, i) => ({ 13 | key: i.toString(), 14 | value: line, 15 | })); 16 | 17 | class LoremScreen extends React.Component { 18 | static navigationOptions = ({ navigation }) => { 19 | let currentListType = navigation.getParam('listType'); 20 | let nextListType = 21 | currentListType === 'FlatList' ? 'SectionList' : 'FlatList'; 22 | 23 | return { 24 | title: currentListType, 25 | headerRight: ( 26 |