├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc ├── .flowconfig ├── .github └── ISSUE_TEMPLATE.md ├── .gitignore ├── .npmignore ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── circle.yml ├── docs ├── Examples.md ├── README.md └── screenshot.gif ├── examples ├── Aviato │ ├── .babelrc │ ├── .buckconfig │ ├── .eslintrc │ ├── .flowconfig │ ├── .gitignore │ ├── .watchmanconfig │ ├── android │ │ ├── app │ │ │ ├── BUCK │ │ │ ├── build.gradle │ │ │ ├── proguard-rules.pro │ │ │ └── src │ │ │ │ └── main │ │ │ │ ├── AndroidManifest.xml │ │ │ │ ├── java │ │ │ │ └── com │ │ │ │ │ └── aviato │ │ │ │ │ ├── MainActivity.java │ │ │ │ │ └── MainApplication.java │ │ │ │ └── res │ │ │ │ ├── mipmap-hdpi │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-mdpi │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-xhdpi │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-xxhdpi │ │ │ │ └── ic_launcher.png │ │ │ │ └── values │ │ │ │ ├── strings.xml │ │ │ │ └── styles.xml │ │ ├── build.gradle │ │ ├── gradle.properties │ │ ├── gradle │ │ │ └── wrapper │ │ │ │ ├── gradle-wrapper.jar │ │ │ │ └── gradle-wrapper.properties │ │ ├── gradlew │ │ ├── gradlew.bat │ │ ├── keystores │ │ │ ├── BUCK │ │ │ └── debug.keystore.properties │ │ └── settings.gradle │ ├── app │ │ ├── components │ │ │ ├── Discover │ │ │ │ ├── Header.js │ │ │ │ └── index.js │ │ │ ├── Home │ │ │ │ ├── Header.js │ │ │ │ └── index.js │ │ │ ├── Master │ │ │ │ └── index.js │ │ │ ├── Notifications │ │ │ │ └── index.js │ │ │ ├── Profile │ │ │ │ ├── Header.js │ │ │ │ └── index.js │ │ │ ├── User │ │ │ │ ├── Overlay.js │ │ │ │ └── index.js │ │ │ ├── index.js │ │ │ └── styles.js │ │ └── routes.js │ ├── index.android.js │ ├── index.ios.js │ ├── ios │ │ ├── Aviato.xcodeproj │ │ │ ├── project.pbxproj │ │ │ └── xcshareddata │ │ │ │ └── xcschemes │ │ │ │ └── Aviato.xcscheme │ │ ├── Aviato │ │ │ ├── AppDelegate.h │ │ │ ├── AppDelegate.m │ │ │ ├── Base.lproj │ │ │ │ └── LaunchScreen.xib │ │ │ ├── Images.xcassets │ │ │ │ └── AppIcon.appiconset │ │ │ │ │ └── Contents.json │ │ │ ├── Info.plist │ │ │ └── main.m │ │ └── AviatoTests │ │ │ ├── AviatoTests.m │ │ │ └── Info.plist │ └── package.json └── Simple │ ├── .buckconfig │ ├── .eslintrc │ ├── .flowconfig │ ├── .gitignore │ ├── .watchmanconfig │ ├── android │ ├── app │ │ ├── BUCK │ │ ├── build.gradle │ │ ├── proguard-rules.pro │ │ └── src │ │ │ └── main │ │ │ ├── AndroidManifest.xml │ │ │ ├── java │ │ │ └── com │ │ │ │ └── simple │ │ │ │ ├── MainActivity.java │ │ │ │ └── MainApplication.java │ │ │ └── res │ │ │ ├── mipmap-hdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-mdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xhdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xxhdpi │ │ │ └── ic_launcher.png │ │ │ └── values │ │ │ ├── strings.xml │ │ │ └── styles.xml │ ├── build.gradle │ ├── gradle.properties │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── gradlew │ ├── gradlew.bat │ ├── keystores │ │ ├── BUCK │ │ └── debug.keystore.properties │ └── settings.gradle │ ├── app │ └── routes.js │ ├── index.android.js │ ├── index.ios.js │ ├── ios │ ├── Simple.xcodeproj │ │ ├── project.pbxproj │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ └── Simple.xcscheme │ ├── Simple │ │ ├── AppDelegate.h │ │ ├── AppDelegate.m │ │ ├── Base.lproj │ │ │ └── LaunchScreen.xib │ │ ├── Images.xcassets │ │ │ └── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ ├── Info.plist │ │ └── main.m │ └── SimpleTests │ │ ├── Info.plist │ │ └── SimpleTests.m │ └── package.json ├── flow └── global.js ├── gulpfile.js ├── modules ├── AddressBar.js ├── AddressBarHistory.js ├── Back.js ├── Forward.js ├── Go.js ├── Header.js ├── IndexLink.js ├── IndexRoute.js ├── Link.js ├── NavigationExperimental │ └── index.js ├── Pop.js ├── PropTypes.js ├── Reducer.js ├── ReducerUtils.js ├── RootContainer.js ├── Route.js ├── RouteUtils.js ├── RouteView.js ├── Router.js ├── RouterContext.js ├── RouterUtils.js ├── StackRoute.js ├── StackRouteView.js ├── TabsRoute.js ├── TabsRouteView.js ├── TypeDefinition.js ├── createMemoryHistory.js ├── history │ └── createMemoryHistory.js ├── index.js ├── nativeHistory.js ├── render.js ├── styles.js ├── transitionRegistry.js ├── util.js ├── warningUtil.js └── withRouter.js ├── package.json └── spec ├── .eslintrc ├── sanityCheck.spec.js └── util.spec.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ "react-native" ] 3 | } 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | tab_width = 2 8 | end_of_line = lf 9 | charset = utf-8 10 | trim_trailing_whitespace = true 11 | insert_final_newline = true 12 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | # node_modules ignored by default 2 | 3 | lib/ 4 | test/fixtures 5 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "airbnb", 3 | "parser": "babel-eslint", 4 | "globals": { 5 | // Flow global types 6 | "ReactComponent": false, 7 | "ReactClass": false, 8 | "ReactElement": false, 9 | "ReactPropsCheckType": false, 10 | "ReactPropsChainableTypeChecker": false, 11 | "ReactPropTypes": false, 12 | "SyntheticEvent": false, 13 | "$Either": false, 14 | "$All": false, 15 | "$Tuple": false, 16 | "$Supertype": false, 17 | "$Subtype": false, 18 | "$Shape": false, 19 | "$Diff": false, 20 | "$Keys": false, 21 | "$Enum": false, 22 | "$Exports": false, 23 | "$FlowIssue": false, 24 | "$FlowFixMe": false, 25 | "$FixMe": false, 26 | // Polyfill 27 | "requestAnimationFrame": false, 28 | }, 29 | "rules": { 30 | // TODO: Remove this override when airbnb bumps `import` to v1.14.0 31 | "import/no-extraneous-dependencies": [ 32 | "error", { 33 | "devDependencies": true, 34 | "peerDependencies": true 35 | }, 36 | ], 37 | "react/jsx-filename-extension": ["error", { "extensions": [".js"] }], 38 | "react/no-unused-prop-types": ["off"], 39 | "react/forbid-prop-types": ["off"], 40 | "class-methods-use-this": ["off"], 41 | "arrow-parens": ["off"], 42 | "no-underscore-dangle": [2, { allowAfterThis: true }], 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | 3 | .*/examples/.* 4 | 5 | # We fork some components by platform. 6 | .*/*.web.js 7 | .*/*.android.js 8 | 9 | # Some modules have their own node_modules with overlap 10 | .*/node_modules/node-haste/.* 11 | 12 | # Ugh 13 | .*/node_modules/babel.* 14 | .*/node_modules/babylon.* 15 | .*/node_modules/invariant.* 16 | 17 | # Ignore react and fbjs where there are overlaps, but don't ignore 18 | # anything that react-native relies on 19 | .*/node_modules/fbjs/lib/Map.js 20 | .*/node_modules/fbjs/lib/ErrorUtils.js 21 | 22 | # Flow has a built-in definition for the 'react' module which we prefer to use 23 | # over the currently-untyped source 24 | .*/node_modules/react/react.js 25 | .*/node_modules/react/lib/React.js 26 | .*/node_modules/react/lib/ReactDOM.js 27 | 28 | .*/__mocks__/.* 29 | .*/__tests__/.* 30 | 31 | .*/commoner/test/source/widget/share.js 32 | 33 | # Ignore commoner tests 34 | .*/node_modules/commoner/test/.* 35 | 36 | # See https://github.com/facebook/flow/issues/442 37 | .*/react-tools/node_modules/commoner/lib/reader.js 38 | 39 | # Ignore jest 40 | .*/node_modules/jest-cli/.* 41 | 42 | # Ignore Website 43 | .*/website/.* 44 | 45 | # Ignore generators 46 | .*/local-cli/generator.* 47 | 48 | # Ignore BUCK generated folders 49 | .*\.buckd/ 50 | 51 | # Ignore RNPM 52 | .*/local-cli/commands.js 53 | .*/local-cli/cliEntry.js 54 | 55 | # Ignore duplicate module providers 56 | .*/Libraries/react-native/ReactNative.js 57 | 58 | .*/node_modules/is-my-json-valid/test/.*\.json 59 | .*/node_modules/iconv-lite/encodings/tables/.*\.json 60 | .*/node_modules/y18n/test/.*\.json 61 | .*/node_modules/spdx-license-ids/spdx-license-ids.json 62 | .*/node_modules/spdx-exceptions/index.json 63 | .*/node_modules/resolve/test/subdirs/node_modules/a/b/c/x.json 64 | .*/node_modules/resolve/lib/core.json 65 | .*/node_modules/jsonparse/samplejson/.*\.json 66 | .*/node_modules/json5/test/.*\.json 67 | .*/node_modules/ua-parser-js/test/.*\.json 68 | .*/node_modules/builtin-modules/builtin-modules.json 69 | .*/node_modules/binary-extensions/binary-extensions.json 70 | .*/node_modules/url-regex/tlds.json 71 | .*/node_modules/joi/.*\.json 72 | .*/node_modules/isemail/.*\.json 73 | .*/node_modules/tr46/.*\.json 74 | 75 | 76 | [include] 77 | 78 | [libs] 79 | # modules/ 80 | node_modules/react-native/Libraries/react-native/react-native-interface.js 81 | node_modules/react-native/flow/ 82 | flow/ 83 | 84 | [options] 85 | module.system=haste 86 | 87 | esproposal.class_static_fields=enable 88 | esproposal.class_instance_fields=enable 89 | 90 | munge_underscores=true 91 | 92 | module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub' 93 | 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' 94 | 95 | suppress_type=$FlowIssue 96 | suppress_type=$FlowFixMe 97 | suppress_type=$FixMe 98 | 99 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-3]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\) 100 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-3]\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+ 101 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy 102 | 103 | unsafe.enable_getters_and_setters=true 104 | 105 | [version] 106 | ^0.33.0 107 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | This project contains components that are currently under active development and considered experimental. If it is something you can debug and fix, please consider submitting a pull request instead! 2 | *** 3 | 4 | ### Version 5 | 6 | | Dependency | Version | 7 | | ------------------- | ------------------- | 8 | | react-router-native | | 9 | | react-router | | 10 | | react-native | | 11 | 12 | ### Expected Behavior 13 | 14 | ### Actual Behavior 15 | 16 | ### Steps to Reproduce 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | npm-debug.log 3 | node_modules/ 4 | lib/ 5 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .babelrc 3 | .eslintrc 4 | test 5 | circle.yml 6 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Code of Conduct 2 | 3 | As contributors and maintainers of this project, and in the interest of 4 | fostering an open and welcoming community, we pledge to respect all people who 5 | contribute through reporting issues, posting feature requests, updating 6 | documentation, submitting pull requests or patches, and other activities. 7 | 8 | We are committed to making participation in this project a harassment-free 9 | experience for everyone, regardless of level of experience, gender, gender 10 | identity and expression, sexual orientation, disability, personal appearance, 11 | body size, race, ethnicity, age, religion, or nationality. 12 | 13 | Examples of unacceptable behavior by participants include: 14 | 15 | * The use of sexualized language or imagery 16 | * Personal attacks 17 | * Trolling or insulting/derogatory comments 18 | * Public or private harassment 19 | * Publishing other's private information, such as physical or electronic 20 | addresses, without explicit permission 21 | * Other unethical or unprofessional conduct 22 | 23 | Project maintainers have the right and responsibility to remove, edit, or 24 | reject comments, commits, code, wiki edits, issues, and other contributions 25 | that are not aligned to this Code of Conduct, or to ban temporarily or 26 | permanently any contributor for other behaviors that they deem inappropriate, 27 | threatening, offensive, or harmful. 28 | 29 | By adopting this Code of Conduct, project maintainers commit themselves to 30 | fairly and consistently applying these principles to every aspect of managing 31 | this project. Project maintainers who do not follow or enforce the Code of 32 | Conduct may be permanently removed from the project team. 33 | 34 | This Code of Conduct applies both within project spaces and in public spaces 35 | when an individual is representing the project or its community. 36 | 37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 38 | reported by contacting a project maintainer at rpflorence@gmail.com. All 39 | complaints will be reviewed and investigated and will result in a response that 40 | is deemed necessary and appropriate to the circumstances. Maintainers are 41 | obligated to maintain confidentiality with regard to the reporter of an 42 | incident. 43 | 44 | 45 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 46 | version 1.3.0, available at 47 | [http://contributor-covenant.org/version/1/3/0/][version] 48 | 49 | [homepage]: http://contributor-covenant.org 50 | [version]: http://contributor-covenant.org/version/1/3/0/ 51 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## Contributing 2 | 3 | Be it a bug fix, new feature, [documentation](/docs), or tests—we love pull requests from everyone. Every little bit helps. 4 | 5 | **Working on your first Pull Request?** You can learn how from this *free* series 6 | [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github). 7 | 8 | 9 | ## Found a Bug? 10 | 11 | Look through the GitHub issues for bugs. Anything tagged with "bug" is open to whoever wants to implement it. If you'd like to report a bug, please provide a reproducible test case. If possible, submit a Pull Request with a failing test. 12 | 13 | 14 | ## Making a Pull Request? 15 | The following guidelines will make your pull request easier to merge. So please, read on. 16 | 17 | - Ensure that the project stays lightweight and maintainable 18 | - Respect the coding style of the repository 19 | ```bash 20 | npm run lint 21 | ``` 22 | You can also use `.editorconfig` to check some basic code style conventions. You can install an [editorconfig plugin](http://editorconfig.org/#download) for your preferred editor so that the relevant settings are automatically setup when you work on this project. 23 | 24 | - Use ES2015 syntax when possible 25 | - Avoid abbreviated words 26 | - Write tests if you add code that should be tested 27 | - Ensure the test suite passes 28 | ```bash 29 | npm run spec 30 | ``` 31 | - Use Flow types, ensure there are no Flow errors 32 | ```bash 33 | npm run flow 34 | ``` 35 | - Ensure CI passes successfully 36 | ```bash 37 | npm test 38 | ``` 39 | - Write a good commit message 40 | 41 | Please be patient when your changes aren't merged immediately. 42 | 43 | 44 | ## Hacking 45 | 46 | Unfortunately, React Native packager does not support symlinking so you cannot use [`npm link`](https://docs.npmjs.com/cli/link) when hacking on this library. You can learn more about that, [here](https://productpains.com/post/react-native/symlink-support-for-packager/). 47 | 48 | The library code is specified as a [local dependency](local dependency) in the example's `package.json`. In order to hack on the library code, you need to sync it into `examples/Aviato/node_modules`. To do so, run: 49 | 50 | ```js 51 | npm run watch 52 | ``` 53 | 54 | This will automatically watch the `modules` directory and sync your changes into `examples/Aviato/node_modules` every time something changes. 55 | 56 | 57 | ## Flat Repository Format 58 | This project uses a flat repository structure. All source code is placed directly into `modules` directory. The main reason is that both `history` and `react-router` source repositories follow this convention and hacking on this library means hacking on those two as well. Mirroring the conventions used in those repos should make it easier to connect the pieces together. 59 | 60 | 61 | ## Feedback 62 | 63 | Feedback is always welcome. The best way to send feedback is to file an issue. If you are proposing a feature, explain in detail how it would work. 64 | 65 | 66 | ## License 67 | All pull requests that get merged will be made available under [the MIT license](https://github.com/jmurzy/react-router-native/blob/master/LICENSE.md), as the rest of the repository. 68 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015-2016 Jake Murzy 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 | -------------------------------------------------------------------------------- /circle.yml: -------------------------------------------------------------------------------- 1 | machine: 2 | node: 3 | version: 5.1.0 4 | 5 | dependencies: 6 | pre: 7 | - npm install -g npm@3.3.12 8 | 9 | test: 10 | override: 11 | - npm test 12 | -------------------------------------------------------------------------------- /docs/Examples.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | Please note that the __address bar__ used in examples is for development only and can be disabled by removing the [`addressBar`](https://github.com/jmurzy/react-router-native/blob/b988ea696cca272296c424e7381df00944c9d062/examples/Aviato/app/routes.js#L23-L24) prop from the ```` component. 4 | 5 | ### Simple 6 | 7 | To build and run the Simple app: 8 | 9 | ```bash 10 | git clone https://github.com/jmurzy/react-router-native 11 | 12 | cd react-router-native/examples/Simple 13 | npm install 14 | ``` 15 | 16 | To deploy to iOS simulator: 17 | 18 | ```bash 19 | npm run ios 20 | ``` 21 | 22 | —or— 23 | 24 | To deploy to Android simulator: 25 | 26 | ```bash 27 | npm run android 28 | ``` 29 | 30 | Or, [view the simple example with Exponent]( 31 | https://exp.host/@rncommunity/react-native-router-simple-example). 32 | 33 | ### Aviato 34 | 35 | To build and run the Aviato app: 36 | 37 | ```bash 38 | git clone https://github.com/jmurzy/react-router-native 39 | 40 | cd react-router-native/examples/Aviato 41 | npm install 42 | ``` 43 | 44 | To deploy to iOS simulator: 45 | 46 | ```bash 47 | npm run ios 48 | ``` 49 | 50 | —or— 51 | 52 | To deploy to Android simulator: 53 | 54 | ```bash 55 | npm run android 56 | ``` 57 | 58 | Or, [view Aviato with Exponent]( 59 | https://exp.host/@rncommunity/aviato). 60 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | ## Documentation 2 | 3 | Documentation is still a [work-in-progress](https://github.com/jmurzy/react-router-native/issues), and pull requests are accepted gratefully! 4 | 5 | One of the the primary goals of this project is to keep its API as close to [React Router](https://github.com/reactjs/react-router) as makes sense. However, navigation on native platforms is a broader topic and we have introduced new concepts and options to accommodate for richer animations, the lack of hyperlinks, scene transitions, gestures et al. For a quick and dirty introduction to these additions, please refer to the [examples](Examples.md). 6 | 7 | Surely a proper documentation is forthcoming. In the meantime, you can refer to the [React Router docs](https://github.com/reactjs/react-router/tree/master/docs) as all React Router functionality, except for a few route configuration props that are [not yet implemented](https://github.com/jmurzy/react-router-native/blob/800622777e0dac89461e378d7e6d4e0d37872215/modules/Route.js#L31-L33), is supported by React Router Native. Also look for issues tagged with the "[question](https://github.com/jmurzy/react-router-native/issues?utf8=%E2%9C%93&q=label%3Aquestion%20)" label. 8 | 9 | ### Hardware Back Button 10 | 11 | React Router Native provides sensible defaults to handle the user pressing the hardware back button on an Android device. If you want to customize the behavior of the hardware back button, you can do so as follows: 12 | 13 | ```js 14 | /* Will be called when hardware back button is pressed */ 15 | function handleHardwareBackPress(router) { 16 | // Pop currently active stack 17 | const didPop = router.pop(); 18 | 19 | if (didPop) { 20 | return true; 21 | } else { 22 | // App should exit 23 | return false; 24 | } 25 | } 26 | 27 | 28 | /* ... */ 29 | 30 | ``` 31 | 32 | ### Redux Support 33 | 34 | Redux is supported via [react-router-redux](https://github.com/reactjs/react-router-redux). The following example was adopted from the package's [README](https://github.com/reactjs/react-router-redux/blob/master/README.md): 35 | 36 | ```javascript 37 | import React from 'react' 38 | import { createStore, combineReducers, applyMiddleware } from 'redux' 39 | import { Provider } from 'react-redux' 40 | import { Router, nativeHistory } from 'react-router-native'; 41 | import { syncHistoryWithStore, routerReducer } from 'react-router-redux' 42 | 43 | import reducers from '/reducers' 44 | 45 | // Add the reducer to your store on the `routing` key 46 | const store = createStore( 47 | combineReducers({ 48 | ...reducers, 49 | routing: routerReducer 50 | }) 51 | ) 52 | 53 | // Create an enhanced history that syncs navigation events with the store 54 | const history = syncHistoryWithStore(nativeHistory, store) 55 | // Set current path to '/' 56 | history.push('/') 57 | 58 | const routes = ( 59 | 60 | /* Tell the Router to use our enhanced history */ 61 | 62 | /* ... */ 63 | 64 | 65 | ); 66 | 67 | AppRegistry.registerComponent('YourApp', () => () => routes); 68 | ``` 69 | -------------------------------------------------------------------------------- /docs/screenshot.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jmurzy/react-router-native/db1e194c2a6375f436a3f0d199a6d6387a8ca36c/docs/screenshot.gif -------------------------------------------------------------------------------- /examples/Aviato/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ "react-native" ] 3 | } 4 | -------------------------------------------------------------------------------- /examples/Aviato/.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /examples/Aviato/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "settings": { 3 | "import/resolver": { 4 | "node": { 5 | "extensions": [".ios.js", ".android.js", ".js"] 6 | } 7 | } 8 | }, 9 | "rules": { 10 | "import/no-unresolved": "off", 11 | "import/prefer-default-export": "off", 12 | "import/extensions": "off", 13 | "react/no-multi-comp": "off", 14 | "react/prop-types": "off" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /examples/Aviato/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | 3 | # We fork some components by platform. 4 | .*/*[.]android.js 5 | 6 | # Ignore templates with `@flow` in header 7 | .*/local-cli/generator.* 8 | 9 | # Ignore malformed json 10 | .*/node_modules/y18n/test/.*\.json 11 | 12 | # Ignore the website subdir 13 | /website/.* 14 | 15 | # Ignore BUCK generated dirs 16 | /\.buckd/ 17 | 18 | # Ignore unexpected extra @providesModule 19 | .*/node_modules/commoner/test/source/widget/share.js 20 | 21 | # Ignore duplicate module providers 22 | # For RN Apps installed via npm, "Libraries" folder is inside node_modules/react-native but in the source repo it is in the root 23 | .*/Libraries/react-native/React.js 24 | .*/Libraries/react-native/ReactNative.js 25 | .*/node_modules/jest-runtime/build/__tests__/.* 26 | 27 | [include] 28 | 29 | [libs] 30 | node_modules/react-native/Libraries/react-native/react-native-interface.js 31 | node_modules/react-native/flow 32 | flow/ 33 | 34 | [options] 35 | module.system=haste 36 | 37 | esproposal.class_static_fields=enable 38 | esproposal.class_instance_fields=enable 39 | 40 | experimental.strict_type_args=true 41 | 42 | munge_underscores=true 43 | 44 | module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub' 45 | 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' 46 | 47 | suppress_type=$FlowIssue 48 | suppress_type=$FlowFixMe 49 | suppress_type=$FixMe 50 | 51 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-3]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\) 52 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-3]\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+ 53 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy 54 | 55 | unsafe.enable_getters_and_setters=true 56 | 57 | [version] 58 | ^0.33.0 59 | -------------------------------------------------------------------------------- /examples/Aviato/.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | project.xcworkspace 24 | 25 | # Android/IJ 26 | # 27 | *.iml 28 | .idea 29 | .gradle 30 | local.properties 31 | 32 | # node.js 33 | # 34 | node_modules/ 35 | npm-debug.log 36 | 37 | # BUCK 38 | buck-out/ 39 | \.buckd/ 40 | android/app/libs 41 | android/keystores/debug.keystore 42 | -------------------------------------------------------------------------------- /examples/Aviato/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /examples/Aviato/android/app/BUCK: -------------------------------------------------------------------------------- 1 | import re 2 | 3 | # To learn about Buck see [Docs](https://buckbuild.com/). 4 | # To run your application with Buck: 5 | # - install Buck 6 | # - `npm start` - to start the packager 7 | # - `cd android` 8 | # - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"` 9 | # - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck 10 | # - `buck install -r android/app` - compile, install and run application 11 | # 12 | 13 | lib_deps = [] 14 | for jarfile in glob(['libs/*.jar']): 15 | name = 'jars__' + re.sub(r'^.*/([^/]+)\.jar$', r'\1', jarfile) 16 | lib_deps.append(':' + name) 17 | prebuilt_jar( 18 | name = name, 19 | binary_jar = jarfile, 20 | ) 21 | 22 | for aarfile in glob(['libs/*.aar']): 23 | name = 'aars__' + re.sub(r'^.*/([^/]+)\.aar$', r'\1', aarfile) 24 | lib_deps.append(':' + name) 25 | android_prebuilt_aar( 26 | name = name, 27 | aar = aarfile, 28 | ) 29 | 30 | android_library( 31 | name = 'all-libs', 32 | exported_deps = lib_deps 33 | ) 34 | 35 | android_library( 36 | name = 'app-code', 37 | srcs = glob([ 38 | 'src/main/java/**/*.java', 39 | ]), 40 | deps = [ 41 | ':all-libs', 42 | ':build_config', 43 | ':res', 44 | ], 45 | ) 46 | 47 | android_build_config( 48 | name = 'build_config', 49 | package = 'com.aviato', 50 | ) 51 | 52 | android_resource( 53 | name = 'res', 54 | res = 'src/main/res', 55 | package = 'com.aviato', 56 | ) 57 | 58 | android_binary( 59 | name = 'app', 60 | package_type = 'debug', 61 | manifest = 'src/main/AndroidManifest.xml', 62 | keystore = '//android/keystores:debug', 63 | deps = [ 64 | ':app-code', 65 | ], 66 | ) 67 | -------------------------------------------------------------------------------- /examples/Aviato/android/app/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: "com.android.application" 2 | 3 | import com.android.build.OutputFile 4 | 5 | /** 6 | * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets 7 | * and bundleReleaseJsAndAssets). 8 | * These basically call `react-native bundle` with the correct arguments during the Android build 9 | * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the 10 | * bundle directly from the development server. Below you can see all the possible configurations 11 | * and their defaults. If you decide to add a configuration block, make sure to add it before the 12 | * `apply from: "../../node_modules/react-native/react.gradle"` line. 13 | * 14 | * project.ext.react = [ 15 | * // the name of the generated asset file containing your JS bundle 16 | * bundleAssetName: "index.android.bundle", 17 | * 18 | * // the entry file for bundle generation 19 | * entryFile: "index.android.js", 20 | * 21 | * // whether to bundle JS and assets in debug mode 22 | * bundleInDebug: false, 23 | * 24 | * // whether to bundle JS and assets in release mode 25 | * bundleInRelease: true, 26 | * 27 | * // whether to bundle JS and assets in another build variant (if configured). 28 | * // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants 29 | * // The configuration property can be in the following formats 30 | * // 'bundleIn${productFlavor}${buildType}' 31 | * // 'bundleIn${buildType}' 32 | * // bundleInFreeDebug: true, 33 | * // bundleInPaidRelease: true, 34 | * // bundleInBeta: true, 35 | * 36 | * // the root of your project, i.e. where "package.json" lives 37 | * root: "../../", 38 | * 39 | * // where to put the JS bundle asset in debug mode 40 | * jsBundleDirDebug: "$buildDir/intermediates/assets/debug", 41 | * 42 | * // where to put the JS bundle asset in release mode 43 | * jsBundleDirRelease: "$buildDir/intermediates/assets/release", 44 | * 45 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 46 | * // require('./image.png')), in debug mode 47 | * resourcesDirDebug: "$buildDir/intermediates/res/merged/debug", 48 | * 49 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 50 | * // require('./image.png')), in release mode 51 | * resourcesDirRelease: "$buildDir/intermediates/res/merged/release", 52 | * 53 | * // by default the gradle tasks are skipped if none of the JS files or assets change; this means 54 | * // that we don't look at files in android/ or ios/ to determine whether the tasks are up to 55 | * // date; if you have any other folders that you want to ignore for performance reasons (gradle 56 | * // indexes the entire tree), add them here. Alternatively, if you have JS files in android/ 57 | * // for example, you might want to remove it from here. 58 | * inputExcludes: ["android/**", "ios/**"], 59 | * 60 | * // override which node gets called and with what additional arguments 61 | * nodeExecutableAndArgs: ["node"] 62 | * 63 | * // supply additional arguments to the packager 64 | * extraPackagerArgs: [] 65 | * ] 66 | */ 67 | 68 | apply from: "../../node_modules/react-native/react.gradle" 69 | 70 | /** 71 | * Set this to true to create two separate APKs instead of one: 72 | * - An APK that only works on ARM devices 73 | * - An APK that only works on x86 devices 74 | * The advantage is the size of the APK is reduced by about 4MB. 75 | * Upload all the APKs to the Play Store and people will download 76 | * the correct one based on the CPU architecture of their device. 77 | */ 78 | def enableSeparateBuildPerCPUArchitecture = false 79 | 80 | /** 81 | * Run Proguard to shrink the Java bytecode in release builds. 82 | */ 83 | def enableProguardInReleaseBuilds = false 84 | 85 | android { 86 | compileSdkVersion 23 87 | buildToolsVersion "23.0.1" 88 | 89 | defaultConfig { 90 | applicationId "com.aviato" 91 | minSdkVersion 16 92 | targetSdkVersion 22 93 | versionCode 1 94 | versionName "1.0" 95 | ndk { 96 | abiFilters "armeabi-v7a", "x86" 97 | } 98 | } 99 | splits { 100 | abi { 101 | reset() 102 | enable enableSeparateBuildPerCPUArchitecture 103 | universalApk false // If true, also generate a universal APK 104 | include "armeabi-v7a", "x86" 105 | } 106 | } 107 | buildTypes { 108 | release { 109 | minifyEnabled enableProguardInReleaseBuilds 110 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" 111 | } 112 | } 113 | // applicationVariants are e.g. debug, release 114 | applicationVariants.all { variant -> 115 | variant.outputs.each { output -> 116 | // For each separate APK per architecture, set a unique version code as described here: 117 | // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits 118 | def versionCodes = ["armeabi-v7a":1, "x86":2] 119 | def abi = output.getFilter(OutputFile.ABI) 120 | if (abi != null) { // null for the universal-debug, universal-release variants 121 | output.versionCodeOverride = 122 | versionCodes.get(abi) * 1048576 + defaultConfig.versionCode 123 | } 124 | } 125 | } 126 | } 127 | 128 | dependencies { 129 | compile fileTree(dir: "libs", include: ["*.jar"]) 130 | compile "com.android.support:appcompat-v7:23.0.1" 131 | compile "com.facebook.react:react-native:+" // From node_modules 132 | } 133 | 134 | // Run this once to be able to run the application with BUCK 135 | // puts all compile dependencies into folder libs for BUCK to use 136 | task copyDownloadableDepsToLibs(type: Copy) { 137 | from configurations.compile 138 | into 'libs' 139 | } 140 | -------------------------------------------------------------------------------- /examples/Aviato/android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | 12 | # If your project uses WebView with JS, uncomment the following 13 | # and specify the fully qualified class name to the JavaScript interface 14 | # class: 15 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 16 | # public *; 17 | #} 18 | 19 | # Disabling obfuscation is useful if you collect stack traces from production crashes 20 | # (unless you are using a system that supports de-obfuscate the stack traces). 21 | -dontobfuscate 22 | 23 | # React Native 24 | 25 | # Keep our interfaces so they can be used by other ProGuard rules. 26 | # See http://sourceforge.net/p/proguard/bugs/466/ 27 | -keep,allowobfuscation @interface com.facebook.proguard.annotations.DoNotStrip 28 | -keep,allowobfuscation @interface com.facebook.proguard.annotations.KeepGettersAndSetters 29 | -keep,allowobfuscation @interface com.facebook.common.internal.DoNotStrip 30 | 31 | # Do not strip any method/class that is annotated with @DoNotStrip 32 | -keep @com.facebook.proguard.annotations.DoNotStrip class * 33 | -keep @com.facebook.common.internal.DoNotStrip class * 34 | -keepclassmembers class * { 35 | @com.facebook.proguard.annotations.DoNotStrip *; 36 | @com.facebook.common.internal.DoNotStrip *; 37 | } 38 | 39 | -keepclassmembers @com.facebook.proguard.annotations.KeepGettersAndSetters class * { 40 | void set*(***); 41 | *** get*(); 42 | } 43 | 44 | -keep class * extends com.facebook.react.bridge.JavaScriptModule { *; } 45 | -keep class * extends com.facebook.react.bridge.NativeModule { *; } 46 | -keepclassmembers,includedescriptorclasses class * { native ; } 47 | -keepclassmembers class * { @com.facebook.react.uimanager.UIProp ; } 48 | -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactProp ; } 49 | -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactPropGroup ; } 50 | 51 | -dontwarn com.facebook.react.** 52 | 53 | # okhttp 54 | 55 | -keepattributes Signature 56 | -keepattributes *Annotation* 57 | -keep class okhttp3.** { *; } 58 | -keep interface okhttp3.** { *; } 59 | -dontwarn okhttp3.** 60 | 61 | # okio 62 | 63 | -keep class sun.misc.Unsafe { *; } 64 | -dontwarn java.nio.file.* 65 | -dontwarn org.codehaus.mojo.animal_sniffer.IgnoreJRERequirement 66 | -dontwarn okio.** 67 | -------------------------------------------------------------------------------- /examples/Aviato/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | 12 | 13 | 19 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /examples/Aviato/android/app/src/main/java/com/aviato/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.aviato; 2 | 3 | import com.facebook.react.ReactActivity; 4 | 5 | public class MainActivity extends ReactActivity { 6 | 7 | /** 8 | * Returns the name of the main component registered from JavaScript. 9 | * This is used to schedule rendering of the component. 10 | */ 11 | @Override 12 | protected String getMainComponentName() { 13 | return "Aviato"; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /examples/Aviato/android/app/src/main/java/com/aviato/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.aviato; 2 | 3 | import android.app.Application; 4 | import android.util.Log; 5 | 6 | import com.facebook.react.ReactApplication; 7 | import com.facebook.react.ReactInstanceManager; 8 | import com.facebook.react.ReactNativeHost; 9 | import com.facebook.react.ReactPackage; 10 | import com.facebook.react.shell.MainReactPackage; 11 | 12 | import java.util.Arrays; 13 | import java.util.List; 14 | 15 | public class MainApplication extends Application implements ReactApplication { 16 | 17 | private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { 18 | @Override 19 | protected boolean getUseDeveloperSupport() { 20 | return BuildConfig.DEBUG; 21 | } 22 | 23 | @Override 24 | protected List getPackages() { 25 | return Arrays.asList( 26 | new MainReactPackage() 27 | ); 28 | } 29 | }; 30 | 31 | @Override 32 | public ReactNativeHost getReactNativeHost() { 33 | return mReactNativeHost; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /examples/Aviato/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jmurzy/react-router-native/db1e194c2a6375f436a3f0d199a6d6387a8ca36c/examples/Aviato/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /examples/Aviato/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jmurzy/react-router-native/db1e194c2a6375f436a3f0d199a6d6387a8ca36c/examples/Aviato/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /examples/Aviato/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jmurzy/react-router-native/db1e194c2a6375f436a3f0d199a6d6387a8ca36c/examples/Aviato/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /examples/Aviato/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jmurzy/react-router-native/db1e194c2a6375f436a3f0d199a6d6387a8ca36c/examples/Aviato/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /examples/Aviato/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | Aviato 3 | 4 | -------------------------------------------------------------------------------- /examples/Aviato/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /examples/Aviato/android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | repositories { 5 | jcenter() 6 | } 7 | dependencies { 8 | classpath 'com.android.tools.build:gradle:1.3.1' 9 | 10 | // NOTE: Do not place your application dependencies here; they belong 11 | // in the individual module build.gradle files 12 | } 13 | } 14 | 15 | allprojects { 16 | repositories { 17 | mavenLocal() 18 | jcenter() 19 | maven { 20 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 21 | url "$rootDir/../node_modules/react-native/android" 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/Aviato/android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx10248m -XX:MaxPermSize=256m 13 | # org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true 19 | 20 | android.useDeprecatedNdk=true 21 | -------------------------------------------------------------------------------- /examples/Aviato/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jmurzy/react-router-native/db1e194c2a6375f436a3f0d199a6d6387a8ca36c/examples/Aviato/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /examples/Aviato/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | zipStoreBase=GRADLE_USER_HOME 4 | zipStorePath=wrapper/dists 5 | distributionUrl=https\://services.gradle.org/distributions/gradle-2.4-all.zip 6 | -------------------------------------------------------------------------------- /examples/Aviato/android/gradlew: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | ############################################################################## 4 | ## 5 | ## Gradle start up script for UN*X 6 | ## 7 | ############################################################################## 8 | 9 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 10 | DEFAULT_JVM_OPTS="" 11 | 12 | APP_NAME="Gradle" 13 | APP_BASE_NAME=`basename "$0"` 14 | 15 | # Use the maximum available, or set MAX_FD != -1 to use that value. 16 | MAX_FD="maximum" 17 | 18 | warn ( ) { 19 | echo "$*" 20 | } 21 | 22 | die ( ) { 23 | echo 24 | echo "$*" 25 | echo 26 | exit 1 27 | } 28 | 29 | # OS specific support (must be 'true' or 'false'). 30 | cygwin=false 31 | msys=false 32 | darwin=false 33 | case "`uname`" in 34 | CYGWIN* ) 35 | cygwin=true 36 | ;; 37 | Darwin* ) 38 | darwin=true 39 | ;; 40 | MINGW* ) 41 | msys=true 42 | ;; 43 | esac 44 | 45 | # For Cygwin, ensure paths are in UNIX format before anything is touched. 46 | if $cygwin ; then 47 | [ -n "$JAVA_HOME" ] && JAVA_HOME=`cygpath --unix "$JAVA_HOME"` 48 | fi 49 | 50 | # Attempt to set APP_HOME 51 | # Resolve links: $0 may be a link 52 | PRG="$0" 53 | # Need this for relative symlinks. 54 | while [ -h "$PRG" ] ; do 55 | ls=`ls -ld "$PRG"` 56 | link=`expr "$ls" : '.*-> \(.*\)$'` 57 | if expr "$link" : '/.*' > /dev/null; then 58 | PRG="$link" 59 | else 60 | PRG=`dirname "$PRG"`"/$link" 61 | fi 62 | done 63 | SAVED="`pwd`" 64 | cd "`dirname \"$PRG\"`/" >&- 65 | APP_HOME="`pwd -P`" 66 | cd "$SAVED" >&- 67 | 68 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 69 | 70 | # Determine the Java command to use to start the JVM. 71 | if [ -n "$JAVA_HOME" ] ; then 72 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 73 | # IBM's JDK on AIX uses strange locations for the executables 74 | JAVACMD="$JAVA_HOME/jre/sh/java" 75 | else 76 | JAVACMD="$JAVA_HOME/bin/java" 77 | fi 78 | if [ ! -x "$JAVACMD" ] ; then 79 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 80 | 81 | Please set the JAVA_HOME variable in your environment to match the 82 | location of your Java installation." 83 | fi 84 | else 85 | JAVACMD="java" 86 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 87 | 88 | Please set the JAVA_HOME variable in your environment to match the 89 | location of your Java installation." 90 | fi 91 | 92 | # Increase the maximum file descriptors if we can. 93 | if [ "$cygwin" = "false" -a "$darwin" = "false" ] ; then 94 | MAX_FD_LIMIT=`ulimit -H -n` 95 | if [ $? -eq 0 ] ; then 96 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then 97 | MAX_FD="$MAX_FD_LIMIT" 98 | fi 99 | ulimit -n $MAX_FD 100 | if [ $? -ne 0 ] ; then 101 | warn "Could not set maximum file descriptor limit: $MAX_FD" 102 | fi 103 | else 104 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" 105 | fi 106 | fi 107 | 108 | # For Darwin, add options to specify how the application appears in the dock 109 | if $darwin; then 110 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" 111 | fi 112 | 113 | # For Cygwin, switch paths to Windows format before running java 114 | if $cygwin ; then 115 | APP_HOME=`cygpath --path --mixed "$APP_HOME"` 116 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` 117 | 118 | # We build the pattern for arguments to be converted via cygpath 119 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` 120 | SEP="" 121 | for dir in $ROOTDIRSRAW ; do 122 | ROOTDIRS="$ROOTDIRS$SEP$dir" 123 | SEP="|" 124 | done 125 | OURCYGPATTERN="(^($ROOTDIRS))" 126 | # Add a user-defined pattern to the cygpath arguments 127 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then 128 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" 129 | fi 130 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 131 | i=0 132 | for arg in "$@" ; do 133 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` 134 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option 135 | 136 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition 137 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` 138 | else 139 | eval `echo args$i`="\"$arg\"" 140 | fi 141 | i=$((i+1)) 142 | done 143 | case $i in 144 | (0) set -- ;; 145 | (1) set -- "$args0" ;; 146 | (2) set -- "$args0" "$args1" ;; 147 | (3) set -- "$args0" "$args1" "$args2" ;; 148 | (4) set -- "$args0" "$args1" "$args2" "$args3" ;; 149 | (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; 150 | (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; 151 | (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; 152 | (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; 153 | (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; 154 | esac 155 | fi 156 | 157 | # Split up the JVM_OPTS And GRADLE_OPTS values into an array, following the shell quoting and substitution rules 158 | function splitJvmOpts() { 159 | JVM_OPTS=("$@") 160 | } 161 | eval splitJvmOpts $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS 162 | JVM_OPTS[${#JVM_OPTS[*]}]="-Dorg.gradle.appname=$APP_BASE_NAME" 163 | 164 | exec "$JAVACMD" "${JVM_OPTS[@]}" -classpath "$CLASSPATH" org.gradle.wrapper.GradleWrapperMain "$@" 165 | -------------------------------------------------------------------------------- /examples/Aviato/android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @if "%DEBUG%" == "" @echo off 2 | @rem ########################################################################## 3 | @rem 4 | @rem Gradle startup script for Windows 5 | @rem 6 | @rem ########################################################################## 7 | 8 | @rem Set local scope for the variables with windows NT shell 9 | if "%OS%"=="Windows_NT" setlocal 10 | 11 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 12 | set DEFAULT_JVM_OPTS= 13 | 14 | set DIRNAME=%~dp0 15 | if "%DIRNAME%" == "" set DIRNAME=. 16 | set APP_BASE_NAME=%~n0 17 | set APP_HOME=%DIRNAME% 18 | 19 | @rem Find java.exe 20 | if defined JAVA_HOME goto findJavaFromJavaHome 21 | 22 | set JAVA_EXE=java.exe 23 | %JAVA_EXE% -version >NUL 2>&1 24 | if "%ERRORLEVEL%" == "0" goto init 25 | 26 | echo. 27 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 28 | echo. 29 | echo Please set the JAVA_HOME variable in your environment to match the 30 | echo location of your Java installation. 31 | 32 | goto fail 33 | 34 | :findJavaFromJavaHome 35 | set JAVA_HOME=%JAVA_HOME:"=% 36 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 37 | 38 | if exist "%JAVA_EXE%" goto init 39 | 40 | echo. 41 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 42 | echo. 43 | echo Please set the JAVA_HOME variable in your environment to match the 44 | echo location of your Java installation. 45 | 46 | goto fail 47 | 48 | :init 49 | @rem Get command-line arguments, handling Windowz variants 50 | 51 | if not "%OS%" == "Windows_NT" goto win9xME_args 52 | if "%@eval[2+2]" == "4" goto 4NT_args 53 | 54 | :win9xME_args 55 | @rem Slurp the command line arguments. 56 | set CMD_LINE_ARGS= 57 | set _SKIP=2 58 | 59 | :win9xME_args_slurp 60 | if "x%~1" == "x" goto execute 61 | 62 | set CMD_LINE_ARGS=%* 63 | goto execute 64 | 65 | :4NT_args 66 | @rem Get arguments from the 4NT Shell from JP Software 67 | set CMD_LINE_ARGS=%$ 68 | 69 | :execute 70 | @rem Setup the command line 71 | 72 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 73 | 74 | @rem Execute Gradle 75 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS% 76 | 77 | :end 78 | @rem End local scope for the variables with windows NT shell 79 | if "%ERRORLEVEL%"=="0" goto mainEnd 80 | 81 | :fail 82 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 83 | rem the _cmd.exe /c_ return code! 84 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 85 | exit /b 1 86 | 87 | :mainEnd 88 | if "%OS%"=="Windows_NT" endlocal 89 | 90 | :omega 91 | -------------------------------------------------------------------------------- /examples/Aviato/android/keystores/BUCK: -------------------------------------------------------------------------------- 1 | keystore( 2 | name = 'debug', 3 | store = 'debug.keystore', 4 | properties = 'debug.keystore.properties', 5 | visibility = [ 6 | 'PUBLIC', 7 | ], 8 | ) 9 | -------------------------------------------------------------------------------- /examples/Aviato/android/keystores/debug.keystore.properties: -------------------------------------------------------------------------------- 1 | key.store=debug.keystore 2 | key.alias=androiddebugkey 3 | key.store.password=android 4 | key.alias.password=android 5 | -------------------------------------------------------------------------------- /examples/Aviato/android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'Aviato' 2 | 3 | include ':app' 4 | -------------------------------------------------------------------------------- /examples/Aviato/app/components/Discover/Header.js: -------------------------------------------------------------------------------- 1 | /* @noflow */ 2 | 3 | import React from 'react'; 4 | import { 5 | Header, 6 | } from 'react-router-native'; 7 | 8 | import styles from '../styles'; 9 | 10 | export default (props) => { 11 | const { scene } = props; 12 | const title = String(scene.route.key || ''); 13 | 14 | return ( 15 |
20 | ); 21 | }; 22 | -------------------------------------------------------------------------------- /examples/Aviato/app/components/Discover/index.js: -------------------------------------------------------------------------------- 1 | /* @noflow */ 2 | 3 | import React from 'react'; 4 | import { 5 | View, 6 | } from 'react-native'; 7 | import styles from '../styles'; 8 | 9 | import DiscoverHeader from './Header'; 10 | 11 | export { DiscoverHeader }; 12 | 13 | export const Discover = (props) => ( 14 | 15 | {props.children} 16 | 17 | ); 18 | -------------------------------------------------------------------------------- /examples/Aviato/app/components/Home/Header.js: -------------------------------------------------------------------------------- 1 | /* @noflow */ 2 | 3 | import React, { Component, PropTypes } from 'react'; 4 | import { 5 | View, 6 | Text, 7 | TouchableHighlight, 8 | } from 'react-native'; 9 | import { 10 | Link, 11 | AnimatedHeader, 12 | } from 'react-router-native'; 13 | 14 | import styles from '../styles'; 15 | 16 | const HomeSwitcher = () => ( 17 | 18 | 24 | User 25 | 26 | 32 | Following 33 | 34 | 40 | Bar 41 | 42 | 43 | ); 44 | 45 | export default class Header extends Component { 46 | static contextTypes = { 47 | showMenu: PropTypes.func, 48 | }; 49 | 50 | componentWillMount() { 51 | this.handlePress = this.handlePress.bind(this); 52 | this.renderMenuComponent = this.renderMenuComponent.bind(this); 53 | this.renderSwitcherComponent = this.renderSwitcherComponent.bind(this); 54 | } 55 | 56 | handlePress() { 57 | this.context.showMenu(); 58 | } 59 | 60 | renderMenuComponent() { 61 | return ( 62 | 67 | ☰ 68 | 69 | ); 70 | } 71 | 72 | renderSwitcherComponent() { 73 | return ( 74 | 75 | ); 76 | } 77 | 78 | render() { 79 | return ( 80 | 86 | ); 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /examples/Aviato/app/components/Home/index.js: -------------------------------------------------------------------------------- 1 | /* @noflow */ 2 | 3 | import HomeHeader from './Header'; 4 | 5 | export { HomeHeader }; 6 | -------------------------------------------------------------------------------- /examples/Aviato/app/components/Master/index.js: -------------------------------------------------------------------------------- 1 | /* @noflow */ 2 | 3 | import React, { 4 | Component, 5 | PropTypes, 6 | } from 'react'; 7 | import { 8 | View, 9 | Text, 10 | } from 'react-native'; 11 | import { 12 | Link, 13 | Pop, 14 | } from 'react-router-native'; 15 | import SideMenu from 'react-native-side-menu'; 16 | 17 | import styles from '../styles'; 18 | 19 | const Tabs = () => ( 20 | 21 | 27 | Home 28 | 29 | 35 | Discover 36 | 37 | 43 | Notifications 44 | 45 | 51 | Profile 52 | 53 | 54 | ); 55 | 56 | const menu = ( 57 | 58 | 59 | 65 | / 66 | 67 | 73 | Settings 74 | 75 | 81 | Info 82 | 83 | 89 | Private Settings 90 | 91 | 97 | Private Info 98 | 99 | 105 | Notifications (keep menu) 106 | 107 | 111 | Pop Stack 112 | 113 | 114 | ); 115 | 116 | export class Master extends Component { 117 | static childContextTypes = { 118 | hideMenu: PropTypes.func, 119 | showMenu: PropTypes.func, 120 | }; 121 | 122 | constructor(props, context) { 123 | super(props, context); 124 | 125 | this.state = { 126 | isMenuOpen: false, 127 | }; 128 | } 129 | 130 | getChildContext(): Object { 131 | return { 132 | hideMenu: this.hideMenu, 133 | showMenu: this.showMenu, 134 | }; 135 | } 136 | 137 | componentWillMount() { 138 | this.hideMenu = this.hideMenu.bind(this); 139 | this.showMenu = this.showMenu.bind(this); 140 | this.handleMenuChange = this.handleMenuChange.bind(this); 141 | } 142 | 143 | componentWillReceiveProps(nextProps) { 144 | const { location } = nextProps; 145 | if (location.query && location.query.hamburger !== undefined) { 146 | this.showMenu(); 147 | } else { 148 | this.hideMenu(); 149 | } 150 | } 151 | 152 | hideMenu() { 153 | requestAnimationFrame(() => { 154 | this.setState({ 155 | isMenuOpen: false, 156 | }); 157 | }); 158 | } 159 | 160 | showMenu() { 161 | requestAnimationFrame(() => { 162 | this.setState({ 163 | isMenuOpen: true, 164 | }); 165 | }); 166 | } 167 | 168 | handleMenuChange(isMenuOpen) { 169 | this.setState({ isMenuOpen }); 170 | } 171 | 172 | render() { 173 | const props = this.props; 174 | return ( 175 | 176 | 181 | 182 | {props.children} 183 | 184 | 185 | 186 | 187 | ); 188 | } 189 | } 190 | -------------------------------------------------------------------------------- /examples/Aviato/app/components/Notifications/index.js: -------------------------------------------------------------------------------- 1 | /* @noflow */ 2 | 3 | import React from 'react'; 4 | import { 5 | View, 6 | Text, 7 | } from 'react-native'; 8 | 9 | import styles from '../styles'; 10 | 11 | export const Notifications = () => ( 12 | 13 | 14 | {'Ask me what 9 times F is. It\'s fleventyfive.'} 15 | 16 | 17 | ); 18 | -------------------------------------------------------------------------------- /examples/Aviato/app/components/Profile/Header.js: -------------------------------------------------------------------------------- 1 | /* @noflow */ 2 | 3 | import React, { Component } from 'react'; 4 | import { 5 | Text, 6 | } from 'react-native'; 7 | import { 8 | Link, 9 | AnimatedHeader, 10 | AnimatedHeaderTitle, 11 | } from 'react-router-native'; 12 | 13 | import styles from '../styles'; 14 | 15 | export default class Header extends Component { 16 | 17 | componentWillMount() { 18 | this.renderTitleComponent = this.renderTitleComponent.bind(this); 19 | this.renderSettingsButtonComponent = this.renderSettingsButtonComponent.bind(this); 20 | } 21 | 22 | renderTitleComponent() { 23 | const { routeParams } = this.props; 24 | const title = `Profile ${routeParams.userId}`; 25 | 26 | return ( 27 | 28 | {title} 29 | 30 | ); 31 | } 32 | 33 | renderSettingsButtonComponent() { 34 | return ( 35 | 40 | Settings 41 | 42 | ); 43 | } 44 | 45 | renderLeftComponent() { 46 | return; 47 | } 48 | 49 | render() { 50 | return ( 51 | 58 | ); 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /examples/Aviato/app/components/Profile/index.js: -------------------------------------------------------------------------------- 1 | /* @noflow */ 2 | 3 | import ProfileHeader from './Header'; 4 | 5 | export { ProfileHeader }; 6 | -------------------------------------------------------------------------------- /examples/Aviato/app/components/User/Overlay.js: -------------------------------------------------------------------------------- 1 | /* @noflow */ 2 | 3 | import React from 'react'; 4 | import { 5 | View, 6 | Text, 7 | } from 'react-native'; 8 | import { 9 | Link, 10 | } from 'react-router-native'; 11 | 12 | import styles from '../styles'; 13 | 14 | const FeedSwitcher = () => ( 15 | 16 | 22 | Public 23 | 24 | 30 | Private 31 | 32 | 33 | ); 34 | 35 | export default () => ( 36 | 37 | 38 | 39 | ); 40 | -------------------------------------------------------------------------------- /examples/Aviato/app/components/User/index.js: -------------------------------------------------------------------------------- 1 | /* @noflow */ 2 | 3 | import UserOverlay from './Overlay'; 4 | 5 | export { UserOverlay }; 6 | -------------------------------------------------------------------------------- /examples/Aviato/app/components/index.js: -------------------------------------------------------------------------------- 1 | /* @noflow */ 2 | 3 | import React from 'react'; 4 | import { 5 | View, 6 | } from 'react-native'; 7 | 8 | import { 9 | Header, 10 | } from 'react-router-native'; 11 | 12 | import styles from './styles'; 13 | 14 | export const component = (backgroundColor) => (props) => ( 15 | 16 | {props.children} 17 | 18 | ); 19 | 20 | export const stackHeaderComponent = (backgroundColor) => (props) => { 21 | const { scene } = props; 22 | const title = String(scene.route.key || ''); 23 | 24 | return ( 25 |
31 | ); 32 | }; 33 | 34 | export const tabHeaderComponent = (backgroundColor) => (props) => { 35 | const { scene } = props; 36 | const title = String(scene.route.key || ''); 37 | 38 | return ( 39 |
44 | ); 45 | }; 46 | -------------------------------------------------------------------------------- /examples/Aviato/app/components/styles.js: -------------------------------------------------------------------------------- 1 | /* @noflow */ 2 | 3 | import { 4 | StyleSheet, 5 | Platform, 6 | } from 'react-native'; 7 | 8 | const { hairlineWidth } = StyleSheet; 9 | 10 | export const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : 0; 11 | 12 | export default StyleSheet.create({ 13 | master: { 14 | flex: 1, 15 | backgroundColor: 'black', 16 | }, 17 | body: { 18 | flex: 1, 19 | overflow: 'hidden', 20 | }, 21 | component: { 22 | flex: 1, 23 | }, 24 | hamburgerMenuWrapper: { 25 | flex: 1, 26 | backgroundColor: '#8B4DFC', 27 | }, 28 | hamburgerMenu: { 29 | position: 'absolute', 30 | right: 0, 31 | left: 0, 32 | top: 100, 33 | height: 280, 34 | }, 35 | hamburgerButton: { 36 | flex: 1, 37 | flexDirection: 'row', 38 | alignItems: 'center', 39 | justifyContent: 'center', 40 | }, 41 | hamburgerButtonText: { 42 | margin: 10, 43 | color: '#000000', 44 | fontSize: 20, 45 | }, 46 | tabs: { 47 | flexDirection: 'row', 48 | backgroundColor: 'white', 49 | height: 60, 50 | }, 51 | tabsActiveStyle: { 52 | backgroundColor: '#B185FD', 53 | }, 54 | tabLink: { 55 | flex: 1, 56 | justifyContent: 'center', 57 | alignItems: 'center', 58 | backgroundColor: '#CECAFE', 59 | }, 60 | tabLinkText: { 61 | fontSize: 12, 62 | }, 63 | leftHeaderLink: { 64 | flex: 1, 65 | flexDirection: 'row', 66 | alignItems: 'center', 67 | justifyContent: 'center', 68 | }, 69 | leftHeaderLinkText: { 70 | margin: 10, 71 | color: '#000000', 72 | fontSize: 14, 73 | }, 74 | switcher: { 75 | flexDirection: 'row', 76 | alignItems: 'center', 77 | borderWidth: hairlineWidth, 78 | borderColor: '#CECAFE', 79 | borderRadius: 10, 80 | overflow: 'hidden', 81 | }, 82 | switcherLink: { 83 | flex: 1, 84 | }, 85 | switcherLinkActive: { 86 | backgroundColor: '#CECAFE', 87 | }, 88 | homeSwitcher: { 89 | marginTop: 8, 90 | height: 26, 91 | }, 92 | feedSwitcher: { 93 | height: 28, 94 | }, 95 | switcherTabLinkTextWrapper: { 96 | flex: 1, 97 | height: 28, 98 | justifyContent: 'center', 99 | alignItems: 'center', 100 | }, 101 | userOverlay: { 102 | position: 'absolute', 103 | bottom: 50, 104 | right: 0, 105 | left: 0, 106 | paddingRight: 100, 107 | paddingLeft: 100, 108 | }, 109 | notifications: { 110 | flex: 1, 111 | justifyContent: 'center', 112 | alignItems: 'center', 113 | backgroundColor: 'white', 114 | }, 115 | profileHeader: { 116 | backgroundColor: '#B185FD', 117 | }, 118 | homeHeader: { 119 | backgroundColor: '#B185FD', 120 | }, 121 | discover: { 122 | flex: 1, 123 | backgroundColor: '#f8f8f8', 124 | }, 125 | discoverHeader: { 126 | backgroundColor: '#97CDF0', 127 | }, 128 | }); 129 | -------------------------------------------------------------------------------- /examples/Aviato/app/routes.js: -------------------------------------------------------------------------------- 1 | /* @noflow */ 2 | 3 | import React from 'react'; 4 | import { 5 | Route, 6 | StackRoute, 7 | TabsRoute, 8 | Router, 9 | nativeHistory, 10 | } from 'react-router-native'; 11 | import { 12 | component, 13 | tabHeaderComponent, 14 | stackHeaderComponent, 15 | } from './components'; 16 | import { 17 | Discover, 18 | DiscoverHeader, 19 | } from './components/Discover'; 20 | import { 21 | HomeHeader, 22 | } from './components/Home'; 23 | import { 24 | Master, 25 | } from './components/Master'; 26 | import { 27 | Notifications, 28 | } from './components/Notifications'; 29 | import { 30 | ProfileHeader, 31 | } from './components/Profile'; 32 | import { 33 | UserOverlay, 34 | } from './components/User'; 35 | 36 | const redirectToNotifications = (nextState, replace) => { 37 | replace('/notifications'); 38 | }; 39 | 40 | const routes = ( 41 | /* Address Bar can be toggled on or off by setting the addressBar prop */ 42 | 43 | 44 | 45 | 46 | 52 | 57 | 63 | 68 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 85 | 86 | 91 | 97 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | ); 113 | 114 | export default routes; 115 | -------------------------------------------------------------------------------- /examples/Aviato/index.android.js: -------------------------------------------------------------------------------- 1 | import { AppRegistry } from 'react-native'; 2 | import routes from './app/routes'; 3 | 4 | AppRegistry.registerComponent('Aviato', () => () => routes); 5 | -------------------------------------------------------------------------------- /examples/Aviato/index.ios.js: -------------------------------------------------------------------------------- 1 | import { AppRegistry } from 'react-native'; 2 | import routes from './app/routes'; 3 | 4 | AppRegistry.registerComponent('Aviato', () => () => routes); 5 | -------------------------------------------------------------------------------- /examples/Aviato/ios/Aviato.xcodeproj/xcshareddata/xcschemes/Aviato.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 29 | 35 | 36 | 37 | 38 | 39 | 44 | 45 | 47 | 53 | 54 | 55 | 56 | 57 | 63 | 64 | 65 | 66 | 75 | 77 | 83 | 84 | 85 | 86 | 87 | 88 | 94 | 96 | 102 | 103 | 104 | 105 | 107 | 108 | 111 | 112 | 113 | -------------------------------------------------------------------------------- /examples/Aviato/ios/Aviato/AppDelegate.h: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import 11 | 12 | @interface AppDelegate : UIResponder 13 | 14 | @property (nonatomic, strong) UIWindow *window; 15 | 16 | @end 17 | -------------------------------------------------------------------------------- /examples/Aviato/ios/Aviato/AppDelegate.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import "AppDelegate.h" 11 | 12 | #import "RCTBundleURLProvider.h" 13 | #import "RCTRootView.h" 14 | 15 | @implementation AppDelegate 16 | 17 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 18 | { 19 | NSURL *jsCodeLocation; 20 | 21 | jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil]; 22 | 23 | RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation 24 | moduleName:@"Aviato" 25 | initialProperties:nil 26 | launchOptions:launchOptions]; 27 | rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1]; 28 | 29 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 30 | UIViewController *rootViewController = [UIViewController new]; 31 | rootViewController.view = rootView; 32 | self.window.rootViewController = rootViewController; 33 | [self.window makeKeyAndVisible]; 34 | return YES; 35 | } 36 | 37 | @end 38 | -------------------------------------------------------------------------------- /examples/Aviato/ios/Aviato/Base.lproj/LaunchScreen.xib: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 21 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /examples/Aviato/ios/Aviato/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "size" : "29x29", 6 | "scale" : "2x" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "size" : "29x29", 11 | "scale" : "3x" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "size" : "40x40", 16 | "scale" : "2x" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "size" : "40x40", 21 | "scale" : "3x" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "size" : "60x60", 26 | "scale" : "2x" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "size" : "60x60", 31 | "scale" : "3x" 32 | } 33 | ], 34 | "info" : { 35 | "version" : 1, 36 | "author" : "xcode" 37 | } 38 | } -------------------------------------------------------------------------------- /examples/Aviato/ios/Aviato/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | APPL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | LSRequiresIPhoneOS 24 | 25 | UILaunchStoryboardName 26 | LaunchScreen 27 | UIRequiredDeviceCapabilities 28 | 29 | armv7 30 | 31 | UISupportedInterfaceOrientations 32 | 33 | UIInterfaceOrientationPortrait 34 | UIInterfaceOrientationLandscapeLeft 35 | UIInterfaceOrientationLandscapeRight 36 | 37 | UIViewControllerBasedStatusBarAppearance 38 | 39 | NSLocationWhenInUseUsageDescription 40 | 41 | NSAppTransportSecurity 42 | 43 | 44 | NSExceptionDomains 45 | 46 | localhost 47 | 48 | NSExceptionAllowsInsecureHTTPLoads 49 | 50 | 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /examples/Aviato/ios/Aviato/main.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import 11 | 12 | #import "AppDelegate.h" 13 | 14 | int main(int argc, char * argv[]) { 15 | @autoreleasepool { 16 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/Aviato/ios/AviatoTests/AviatoTests.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import 11 | #import 12 | 13 | #import "RCTLog.h" 14 | #import "RCTRootView.h" 15 | 16 | #define TIMEOUT_SECONDS 600 17 | #define TEXT_TO_LOOK_FOR @"Welcome to React Native!" 18 | 19 | @interface AviatoTests : XCTestCase 20 | 21 | @end 22 | 23 | @implementation AviatoTests 24 | 25 | - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test 26 | { 27 | if (test(view)) { 28 | return YES; 29 | } 30 | for (UIView *subview in [view subviews]) { 31 | if ([self findSubviewInView:subview matching:test]) { 32 | return YES; 33 | } 34 | } 35 | return NO; 36 | } 37 | 38 | - (void)testRendersWelcomeScreen 39 | { 40 | UIViewController *vc = [[[[UIApplication sharedApplication] delegate] window] rootViewController]; 41 | NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS]; 42 | BOOL foundElement = NO; 43 | 44 | __block NSString *redboxError = nil; 45 | RCTSetLogFunction(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { 46 | if (level >= RCTLogLevelError) { 47 | redboxError = message; 48 | } 49 | }); 50 | 51 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { 52 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 53 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 54 | 55 | foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) { 56 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { 57 | return YES; 58 | } 59 | return NO; 60 | }]; 61 | } 62 | 63 | RCTSetLogFunction(RCTDefaultLogFunction); 64 | 65 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); 66 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); 67 | } 68 | 69 | 70 | @end 71 | -------------------------------------------------------------------------------- /examples/Aviato/ios/AviatoTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /examples/Aviato/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Aviato", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "./node_modules/.bin/react-native start", 7 | "ios": "./node_modules/.bin/react-native run-ios", 8 | "android": "./node_modules/.bin/react-native run-android" 9 | }, 10 | "dependencies": { 11 | "react": "~15.3.1", 12 | "react-native": "0.36.0-rc.1", 13 | "react-native-side-menu": "^0.20.0", 14 | "react-router-native": "file:../../" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /examples/Simple/.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /examples/Simple/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "settings": { 3 | "import/resolver": { 4 | "node": { 5 | "extensions": [".ios.js", ".android.js", ".js"] 6 | } 7 | } 8 | }, 9 | "rules": { 10 | "import/no-unresolved": "off", 11 | "import/prefer-default-export": "off", 12 | "import/extensions": "off", 13 | "react/no-multi-comp": "off", 14 | "react/prop-types": "off" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /examples/Simple/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | 3 | # We fork some components by platform. 4 | .*/*[.]android.js 5 | 6 | # Ignore templates with `@flow` in header 7 | .*/local-cli/generator.* 8 | 9 | # Ignore malformed json 10 | .*/node_modules/y18n/test/.*\.json 11 | 12 | # Ignore the website subdir 13 | /website/.* 14 | 15 | # Ignore BUCK generated dirs 16 | /\.buckd/ 17 | 18 | # Ignore unexpected extra @providesModule 19 | .*/node_modules/commoner/test/source/widget/share.js 20 | 21 | # Ignore duplicate module providers 22 | # For RN Apps installed via npm, "Libraries" folder is inside node_modules/react-native but in the source repo it is in the root 23 | .*/Libraries/react-native/React.js 24 | .*/Libraries/react-native/ReactNative.js 25 | .*/node_modules/jest-runtime/build/__tests__/.* 26 | 27 | [include] 28 | 29 | [libs] 30 | node_modules/react-native/Libraries/react-native/react-native-interface.js 31 | node_modules/react-native/flow 32 | flow/ 33 | 34 | [options] 35 | module.system=haste 36 | 37 | esproposal.class_static_fields=enable 38 | esproposal.class_instance_fields=enable 39 | 40 | experimental.strict_type_args=true 41 | 42 | munge_underscores=true 43 | 44 | module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub' 45 | 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' 46 | 47 | suppress_type=$FlowIssue 48 | suppress_type=$FlowFixMe 49 | suppress_type=$FixMe 50 | 51 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-3]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\) 52 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-3]\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+ 53 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy 54 | 55 | unsafe.enable_getters_and_setters=true 56 | 57 | [version] 58 | ^0.33.0 59 | -------------------------------------------------------------------------------- /examples/Simple/.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | project.xcworkspace 24 | 25 | # Android/IJ 26 | # 27 | *.iml 28 | .idea 29 | .gradle 30 | local.properties 31 | 32 | # node.js 33 | # 34 | node_modules/ 35 | npm-debug.log 36 | 37 | # BUCK 38 | buck-out/ 39 | \.buckd/ 40 | android/app/libs 41 | android/keystores/debug.keystore 42 | -------------------------------------------------------------------------------- /examples/Simple/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /examples/Simple/android/app/BUCK: -------------------------------------------------------------------------------- 1 | import re 2 | 3 | # To learn about Buck see [Docs](https://buckbuild.com/). 4 | # To run your application with Buck: 5 | # - install Buck 6 | # - `npm start` - to start the packager 7 | # - `cd android` 8 | # - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"` 9 | # - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck 10 | # - `buck install -r android/app` - compile, install and run application 11 | # 12 | 13 | lib_deps = [] 14 | for jarfile in glob(['libs/*.jar']): 15 | name = 'jars__' + re.sub(r'^.*/([^/]+)\.jar$', r'\1', jarfile) 16 | lib_deps.append(':' + name) 17 | prebuilt_jar( 18 | name = name, 19 | binary_jar = jarfile, 20 | ) 21 | 22 | for aarfile in glob(['libs/*.aar']): 23 | name = 'aars__' + re.sub(r'^.*/([^/]+)\.aar$', r'\1', aarfile) 24 | lib_deps.append(':' + name) 25 | android_prebuilt_aar( 26 | name = name, 27 | aar = aarfile, 28 | ) 29 | 30 | android_library( 31 | name = 'all-libs', 32 | exported_deps = lib_deps 33 | ) 34 | 35 | android_library( 36 | name = 'app-code', 37 | srcs = glob([ 38 | 'src/main/java/**/*.java', 39 | ]), 40 | deps = [ 41 | ':all-libs', 42 | ':build_config', 43 | ':res', 44 | ], 45 | ) 46 | 47 | android_build_config( 48 | name = 'build_config', 49 | package = 'com.simple', 50 | ) 51 | 52 | android_resource( 53 | name = 'res', 54 | res = 'src/main/res', 55 | package = 'com.simple', 56 | ) 57 | 58 | android_binary( 59 | name = 'app', 60 | package_type = 'debug', 61 | manifest = 'src/main/AndroidManifest.xml', 62 | keystore = '//android/keystores:debug', 63 | deps = [ 64 | ':app-code', 65 | ], 66 | ) 67 | -------------------------------------------------------------------------------- /examples/Simple/android/app/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: "com.android.application" 2 | 3 | import com.android.build.OutputFile 4 | 5 | /** 6 | * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets 7 | * and bundleReleaseJsAndAssets). 8 | * These basically call `react-native bundle` with the correct arguments during the Android build 9 | * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the 10 | * bundle directly from the development server. Below you can see all the possible configurations 11 | * and their defaults. If you decide to add a configuration block, make sure to add it before the 12 | * `apply from: "../../node_modules/react-native/react.gradle"` line. 13 | * 14 | * project.ext.react = [ 15 | * // the name of the generated asset file containing your JS bundle 16 | * bundleAssetName: "index.android.bundle", 17 | * 18 | * // the entry file for bundle generation 19 | * entryFile: "index.android.js", 20 | * 21 | * // whether to bundle JS and assets in debug mode 22 | * bundleInDebug: false, 23 | * 24 | * // whether to bundle JS and assets in release mode 25 | * bundleInRelease: true, 26 | * 27 | * // whether to bundle JS and assets in another build variant (if configured). 28 | * // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants 29 | * // The configuration property can be in the following formats 30 | * // 'bundleIn${productFlavor}${buildType}' 31 | * // 'bundleIn${buildType}' 32 | * // bundleInFreeDebug: true, 33 | * // bundleInPaidRelease: true, 34 | * // bundleInBeta: true, 35 | * 36 | * // the root of your project, i.e. where "package.json" lives 37 | * root: "../../", 38 | * 39 | * // where to put the JS bundle asset in debug mode 40 | * jsBundleDirDebug: "$buildDir/intermediates/assets/debug", 41 | * 42 | * // where to put the JS bundle asset in release mode 43 | * jsBundleDirRelease: "$buildDir/intermediates/assets/release", 44 | * 45 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 46 | * // require('./image.png')), in debug mode 47 | * resourcesDirDebug: "$buildDir/intermediates/res/merged/debug", 48 | * 49 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 50 | * // require('./image.png')), in release mode 51 | * resourcesDirRelease: "$buildDir/intermediates/res/merged/release", 52 | * 53 | * // by default the gradle tasks are skipped if none of the JS files or assets change; this means 54 | * // that we don't look at files in android/ or ios/ to determine whether the tasks are up to 55 | * // date; if you have any other folders that you want to ignore for performance reasons (gradle 56 | * // indexes the entire tree), add them here. Alternatively, if you have JS files in android/ 57 | * // for example, you might want to remove it from here. 58 | * inputExcludes: ["android/**", "ios/**"], 59 | * 60 | * // override which node gets called and with what additional arguments 61 | * nodeExecutableAndArgs: ["node"] 62 | * 63 | * // supply additional arguments to the packager 64 | * extraPackagerArgs: [] 65 | * ] 66 | */ 67 | 68 | apply from: "../../node_modules/react-native/react.gradle" 69 | 70 | /** 71 | * Set this to true to create two separate APKs instead of one: 72 | * - An APK that only works on ARM devices 73 | * - An APK that only works on x86 devices 74 | * The advantage is the size of the APK is reduced by about 4MB. 75 | * Upload all the APKs to the Play Store and people will download 76 | * the correct one based on the CPU architecture of their device. 77 | */ 78 | def enableSeparateBuildPerCPUArchitecture = false 79 | 80 | /** 81 | * Run Proguard to shrink the Java bytecode in release builds. 82 | */ 83 | def enableProguardInReleaseBuilds = false 84 | 85 | android { 86 | compileSdkVersion 23 87 | buildToolsVersion "23.0.1" 88 | 89 | defaultConfig { 90 | applicationId "com.simple" 91 | minSdkVersion 16 92 | targetSdkVersion 22 93 | versionCode 1 94 | versionName "1.0" 95 | ndk { 96 | abiFilters "armeabi-v7a", "x86" 97 | } 98 | } 99 | splits { 100 | abi { 101 | reset() 102 | enable enableSeparateBuildPerCPUArchitecture 103 | universalApk false // If true, also generate a universal APK 104 | include "armeabi-v7a", "x86" 105 | } 106 | } 107 | buildTypes { 108 | release { 109 | minifyEnabled enableProguardInReleaseBuilds 110 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" 111 | } 112 | } 113 | // applicationVariants are e.g. debug, release 114 | applicationVariants.all { variant -> 115 | variant.outputs.each { output -> 116 | // For each separate APK per architecture, set a unique version code as described here: 117 | // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits 118 | def versionCodes = ["armeabi-v7a":1, "x86":2] 119 | def abi = output.getFilter(OutputFile.ABI) 120 | if (abi != null) { // null for the universal-debug, universal-release variants 121 | output.versionCodeOverride = 122 | versionCodes.get(abi) * 1048576 + defaultConfig.versionCode 123 | } 124 | } 125 | } 126 | } 127 | 128 | dependencies { 129 | compile fileTree(dir: "libs", include: ["*.jar"]) 130 | compile "com.android.support:appcompat-v7:23.0.1" 131 | compile "com.facebook.react:react-native:+" // From node_modules 132 | } 133 | 134 | // Run this once to be able to run the application with BUCK 135 | // puts all compile dependencies into folder libs for BUCK to use 136 | task copyDownloadableDepsToLibs(type: Copy) { 137 | from configurations.compile 138 | into 'libs' 139 | } 140 | -------------------------------------------------------------------------------- /examples/Simple/android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | 12 | # If your project uses WebView with JS, uncomment the following 13 | # and specify the fully qualified class name to the JavaScript interface 14 | # class: 15 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 16 | # public *; 17 | #} 18 | 19 | # Disabling obfuscation is useful if you collect stack traces from production crashes 20 | # (unless you are using a system that supports de-obfuscate the stack traces). 21 | -dontobfuscate 22 | 23 | # React Native 24 | 25 | # Keep our interfaces so they can be used by other ProGuard rules. 26 | # See http://sourceforge.net/p/proguard/bugs/466/ 27 | -keep,allowobfuscation @interface com.facebook.proguard.annotations.DoNotStrip 28 | -keep,allowobfuscation @interface com.facebook.proguard.annotations.KeepGettersAndSetters 29 | -keep,allowobfuscation @interface com.facebook.common.internal.DoNotStrip 30 | 31 | # Do not strip any method/class that is annotated with @DoNotStrip 32 | -keep @com.facebook.proguard.annotations.DoNotStrip class * 33 | -keep @com.facebook.common.internal.DoNotStrip class * 34 | -keepclassmembers class * { 35 | @com.facebook.proguard.annotations.DoNotStrip *; 36 | @com.facebook.common.internal.DoNotStrip *; 37 | } 38 | 39 | -keepclassmembers @com.facebook.proguard.annotations.KeepGettersAndSetters class * { 40 | void set*(***); 41 | *** get*(); 42 | } 43 | 44 | -keep class * extends com.facebook.react.bridge.JavaScriptModule { *; } 45 | -keep class * extends com.facebook.react.bridge.NativeModule { *; } 46 | -keepclassmembers,includedescriptorclasses class * { native ; } 47 | -keepclassmembers class * { @com.facebook.react.uimanager.UIProp ; } 48 | -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactProp ; } 49 | -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactPropGroup ; } 50 | 51 | -dontwarn com.facebook.react.** 52 | 53 | # okhttp 54 | 55 | -keepattributes Signature 56 | -keepattributes *Annotation* 57 | -keep class okhttp3.** { *; } 58 | -keep interface okhttp3.** { *; } 59 | -dontwarn okhttp3.** 60 | 61 | # okio 62 | 63 | -keep class sun.misc.Unsafe { *; } 64 | -dontwarn java.nio.file.* 65 | -dontwarn org.codehaus.mojo.animal_sniffer.IgnoreJRERequirement 66 | -dontwarn okio.** 67 | -------------------------------------------------------------------------------- /examples/Simple/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | 12 | 13 | 19 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /examples/Simple/android/app/src/main/java/com/simple/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.simple; 2 | 3 | import com.facebook.react.ReactActivity; 4 | 5 | public class MainActivity extends ReactActivity { 6 | 7 | /** 8 | * Returns the name of the main component registered from JavaScript. 9 | * This is used to schedule rendering of the component. 10 | */ 11 | @Override 12 | protected String getMainComponentName() { 13 | return "Simple"; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /examples/Simple/android/app/src/main/java/com/simple/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.simple; 2 | 3 | import android.app.Application; 4 | import android.util.Log; 5 | 6 | import com.facebook.react.ReactApplication; 7 | import com.facebook.react.ReactInstanceManager; 8 | import com.facebook.react.ReactNativeHost; 9 | import com.facebook.react.ReactPackage; 10 | import com.facebook.react.shell.MainReactPackage; 11 | 12 | import java.util.Arrays; 13 | import java.util.List; 14 | 15 | public class MainApplication extends Application implements ReactApplication { 16 | 17 | private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { 18 | @Override 19 | protected boolean getUseDeveloperSupport() { 20 | return BuildConfig.DEBUG; 21 | } 22 | 23 | @Override 24 | protected List getPackages() { 25 | return Arrays.asList( 26 | new MainReactPackage() 27 | ); 28 | } 29 | }; 30 | 31 | @Override 32 | public ReactNativeHost getReactNativeHost() { 33 | return mReactNativeHost; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /examples/Simple/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jmurzy/react-router-native/db1e194c2a6375f436a3f0d199a6d6387a8ca36c/examples/Simple/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /examples/Simple/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jmurzy/react-router-native/db1e194c2a6375f436a3f0d199a6d6387a8ca36c/examples/Simple/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /examples/Simple/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jmurzy/react-router-native/db1e194c2a6375f436a3f0d199a6d6387a8ca36c/examples/Simple/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /examples/Simple/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jmurzy/react-router-native/db1e194c2a6375f436a3f0d199a6d6387a8ca36c/examples/Simple/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /examples/Simple/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | Simple 3 | 4 | -------------------------------------------------------------------------------- /examples/Simple/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /examples/Simple/android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | repositories { 5 | jcenter() 6 | } 7 | dependencies { 8 | classpath 'com.android.tools.build:gradle:1.3.1' 9 | 10 | // NOTE: Do not place your application dependencies here; they belong 11 | // in the individual module build.gradle files 12 | } 13 | } 14 | 15 | allprojects { 16 | repositories { 17 | mavenLocal() 18 | jcenter() 19 | maven { 20 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 21 | url "$rootDir/../node_modules/react-native/android" 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/Simple/android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx10248m -XX:MaxPermSize=256m 13 | # org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true 19 | 20 | android.useDeprecatedNdk=true 21 | -------------------------------------------------------------------------------- /examples/Simple/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jmurzy/react-router-native/db1e194c2a6375f436a3f0d199a6d6387a8ca36c/examples/Simple/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /examples/Simple/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | zipStoreBase=GRADLE_USER_HOME 4 | zipStorePath=wrapper/dists 5 | distributionUrl=https\://services.gradle.org/distributions/gradle-2.4-all.zip 6 | -------------------------------------------------------------------------------- /examples/Simple/android/gradlew: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | ############################################################################## 4 | ## 5 | ## Gradle start up script for UN*X 6 | ## 7 | ############################################################################## 8 | 9 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 10 | DEFAULT_JVM_OPTS="" 11 | 12 | APP_NAME="Gradle" 13 | APP_BASE_NAME=`basename "$0"` 14 | 15 | # Use the maximum available, or set MAX_FD != -1 to use that value. 16 | MAX_FD="maximum" 17 | 18 | warn ( ) { 19 | echo "$*" 20 | } 21 | 22 | die ( ) { 23 | echo 24 | echo "$*" 25 | echo 26 | exit 1 27 | } 28 | 29 | # OS specific support (must be 'true' or 'false'). 30 | cygwin=false 31 | msys=false 32 | darwin=false 33 | case "`uname`" in 34 | CYGWIN* ) 35 | cygwin=true 36 | ;; 37 | Darwin* ) 38 | darwin=true 39 | ;; 40 | MINGW* ) 41 | msys=true 42 | ;; 43 | esac 44 | 45 | # For Cygwin, ensure paths are in UNIX format before anything is touched. 46 | if $cygwin ; then 47 | [ -n "$JAVA_HOME" ] && JAVA_HOME=`cygpath --unix "$JAVA_HOME"` 48 | fi 49 | 50 | # Attempt to set APP_HOME 51 | # Resolve links: $0 may be a link 52 | PRG="$0" 53 | # Need this for relative symlinks. 54 | while [ -h "$PRG" ] ; do 55 | ls=`ls -ld "$PRG"` 56 | link=`expr "$ls" : '.*-> \(.*\)$'` 57 | if expr "$link" : '/.*' > /dev/null; then 58 | PRG="$link" 59 | else 60 | PRG=`dirname "$PRG"`"/$link" 61 | fi 62 | done 63 | SAVED="`pwd`" 64 | cd "`dirname \"$PRG\"`/" >&- 65 | APP_HOME="`pwd -P`" 66 | cd "$SAVED" >&- 67 | 68 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 69 | 70 | # Determine the Java command to use to start the JVM. 71 | if [ -n "$JAVA_HOME" ] ; then 72 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 73 | # IBM's JDK on AIX uses strange locations for the executables 74 | JAVACMD="$JAVA_HOME/jre/sh/java" 75 | else 76 | JAVACMD="$JAVA_HOME/bin/java" 77 | fi 78 | if [ ! -x "$JAVACMD" ] ; then 79 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 80 | 81 | Please set the JAVA_HOME variable in your environment to match the 82 | location of your Java installation." 83 | fi 84 | else 85 | JAVACMD="java" 86 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 87 | 88 | Please set the JAVA_HOME variable in your environment to match the 89 | location of your Java installation." 90 | fi 91 | 92 | # Increase the maximum file descriptors if we can. 93 | if [ "$cygwin" = "false" -a "$darwin" = "false" ] ; then 94 | MAX_FD_LIMIT=`ulimit -H -n` 95 | if [ $? -eq 0 ] ; then 96 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then 97 | MAX_FD="$MAX_FD_LIMIT" 98 | fi 99 | ulimit -n $MAX_FD 100 | if [ $? -ne 0 ] ; then 101 | warn "Could not set maximum file descriptor limit: $MAX_FD" 102 | fi 103 | else 104 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" 105 | fi 106 | fi 107 | 108 | # For Darwin, add options to specify how the application appears in the dock 109 | if $darwin; then 110 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" 111 | fi 112 | 113 | # For Cygwin, switch paths to Windows format before running java 114 | if $cygwin ; then 115 | APP_HOME=`cygpath --path --mixed "$APP_HOME"` 116 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` 117 | 118 | # We build the pattern for arguments to be converted via cygpath 119 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` 120 | SEP="" 121 | for dir in $ROOTDIRSRAW ; do 122 | ROOTDIRS="$ROOTDIRS$SEP$dir" 123 | SEP="|" 124 | done 125 | OURCYGPATTERN="(^($ROOTDIRS))" 126 | # Add a user-defined pattern to the cygpath arguments 127 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then 128 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" 129 | fi 130 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 131 | i=0 132 | for arg in "$@" ; do 133 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` 134 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option 135 | 136 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition 137 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` 138 | else 139 | eval `echo args$i`="\"$arg\"" 140 | fi 141 | i=$((i+1)) 142 | done 143 | case $i in 144 | (0) set -- ;; 145 | (1) set -- "$args0" ;; 146 | (2) set -- "$args0" "$args1" ;; 147 | (3) set -- "$args0" "$args1" "$args2" ;; 148 | (4) set -- "$args0" "$args1" "$args2" "$args3" ;; 149 | (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; 150 | (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; 151 | (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; 152 | (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; 153 | (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; 154 | esac 155 | fi 156 | 157 | # Split up the JVM_OPTS And GRADLE_OPTS values into an array, following the shell quoting and substitution rules 158 | function splitJvmOpts() { 159 | JVM_OPTS=("$@") 160 | } 161 | eval splitJvmOpts $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS 162 | JVM_OPTS[${#JVM_OPTS[*]}]="-Dorg.gradle.appname=$APP_BASE_NAME" 163 | 164 | exec "$JAVACMD" "${JVM_OPTS[@]}" -classpath "$CLASSPATH" org.gradle.wrapper.GradleWrapperMain "$@" 165 | -------------------------------------------------------------------------------- /examples/Simple/android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @if "%DEBUG%" == "" @echo off 2 | @rem ########################################################################## 3 | @rem 4 | @rem Gradle startup script for Windows 5 | @rem 6 | @rem ########################################################################## 7 | 8 | @rem Set local scope for the variables with windows NT shell 9 | if "%OS%"=="Windows_NT" setlocal 10 | 11 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 12 | set DEFAULT_JVM_OPTS= 13 | 14 | set DIRNAME=%~dp0 15 | if "%DIRNAME%" == "" set DIRNAME=. 16 | set APP_BASE_NAME=%~n0 17 | set APP_HOME=%DIRNAME% 18 | 19 | @rem Find java.exe 20 | if defined JAVA_HOME goto findJavaFromJavaHome 21 | 22 | set JAVA_EXE=java.exe 23 | %JAVA_EXE% -version >NUL 2>&1 24 | if "%ERRORLEVEL%" == "0" goto init 25 | 26 | echo. 27 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 28 | echo. 29 | echo Please set the JAVA_HOME variable in your environment to match the 30 | echo location of your Java installation. 31 | 32 | goto fail 33 | 34 | :findJavaFromJavaHome 35 | set JAVA_HOME=%JAVA_HOME:"=% 36 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 37 | 38 | if exist "%JAVA_EXE%" goto init 39 | 40 | echo. 41 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 42 | echo. 43 | echo Please set the JAVA_HOME variable in your environment to match the 44 | echo location of your Java installation. 45 | 46 | goto fail 47 | 48 | :init 49 | @rem Get command-line arguments, handling Windowz variants 50 | 51 | if not "%OS%" == "Windows_NT" goto win9xME_args 52 | if "%@eval[2+2]" == "4" goto 4NT_args 53 | 54 | :win9xME_args 55 | @rem Slurp the command line arguments. 56 | set CMD_LINE_ARGS= 57 | set _SKIP=2 58 | 59 | :win9xME_args_slurp 60 | if "x%~1" == "x" goto execute 61 | 62 | set CMD_LINE_ARGS=%* 63 | goto execute 64 | 65 | :4NT_args 66 | @rem Get arguments from the 4NT Shell from JP Software 67 | set CMD_LINE_ARGS=%$ 68 | 69 | :execute 70 | @rem Setup the command line 71 | 72 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 73 | 74 | @rem Execute Gradle 75 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS% 76 | 77 | :end 78 | @rem End local scope for the variables with windows NT shell 79 | if "%ERRORLEVEL%"=="0" goto mainEnd 80 | 81 | :fail 82 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 83 | rem the _cmd.exe /c_ return code! 84 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 85 | exit /b 1 86 | 87 | :mainEnd 88 | if "%OS%"=="Windows_NT" endlocal 89 | 90 | :omega 91 | -------------------------------------------------------------------------------- /examples/Simple/android/keystores/BUCK: -------------------------------------------------------------------------------- 1 | keystore( 2 | name = 'debug', 3 | store = 'debug.keystore', 4 | properties = 'debug.keystore.properties', 5 | visibility = [ 6 | 'PUBLIC', 7 | ], 8 | ) 9 | -------------------------------------------------------------------------------- /examples/Simple/android/keystores/debug.keystore.properties: -------------------------------------------------------------------------------- 1 | key.store=debug.keystore 2 | key.alias=androiddebugkey 3 | key.store.password=android 4 | key.alias.password=android 5 | -------------------------------------------------------------------------------- /examples/Simple/android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'Simple' 2 | 3 | include ':app' 4 | -------------------------------------------------------------------------------- /examples/Simple/app/routes.js: -------------------------------------------------------------------------------- 1 | /* @noflow */ 2 | import React from 'react'; 3 | import { 4 | Header, 5 | Link, 6 | nativeHistory, 7 | Route, 8 | Router, 9 | StackRoute, 10 | withRouter, 11 | } from 'react-router-native'; 12 | import { 13 | ScrollView, 14 | StyleSheet, 15 | View, 16 | } from 'react-native'; 17 | 18 | const styles = StyleSheet.create({ 19 | component: { 20 | backgroundColor: '#FFFFFF', 21 | flex: 1, 22 | }, 23 | home: { 24 | backgroundColor: '#FFFFFF', 25 | flexDirection: 'row', 26 | flexWrap: 'wrap', 27 | justifyContent: 'center', 28 | }, 29 | detailCard: { 30 | height: 100, 31 | margin: 20, 32 | width: 100, 33 | }, 34 | }); 35 | 36 | const Master = (props) => ( 37 | 38 | {props.children} 39 | 40 | ); 41 | 42 | const HomeHeader = withRouter((props) => { 43 | const handleRightButtonPress = () => { 44 | props.router.push('/detail/gray'); 45 | }; 46 | 47 | return ( 48 |
55 | ); 56 | }); 57 | 58 | const Home = () => { 59 | const DetailCard = ({ backgroundColor }) => ( 60 | 61 | 62 | 63 | ); 64 | 65 | return ( 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | ); 77 | }; 78 | 79 | const DetailHeader = withRouter((props) => { 80 | const { routeParams } = props; 81 | const title = routeParams.themeColor; 82 | const backgroundColor = routeParams.themeColor; 83 | const colors = ['#EF4E5E', '#D48445', '#AFCCB3', '#F0D73D', '#A176B0']; 84 | 85 | const handleRightButtonPress = () => { 86 | const randomIndex = Math.floor(Math.random() * colors.length); 87 | const randomColor = colors[randomIndex]; 88 | props.router.push(`/detail/${encodeURIComponent(randomColor)}`); 89 | }; 90 | 91 | return ( 92 |
100 | ); 101 | }); 102 | 103 | const Detail = (props) => ( 104 | {props.children} 105 | ); 106 | 107 | const routes = ( 108 | /* Address Bar can be toggled on or off by setting the addressBar prop */ 109 | 110 | 111 | 112 | 113 | 114 | 115 | ); 116 | 117 | export default routes; 118 | -------------------------------------------------------------------------------- /examples/Simple/index.android.js: -------------------------------------------------------------------------------- 1 | import { AppRegistry } from 'react-native'; 2 | import routes from './app/routes'; 3 | 4 | AppRegistry.registerComponent('Simple', () => () => routes); 5 | -------------------------------------------------------------------------------- /examples/Simple/index.ios.js: -------------------------------------------------------------------------------- 1 | import { AppRegistry } from 'react-native'; 2 | import routes from './app/routes'; 3 | 4 | AppRegistry.registerComponent('Simple', () => () => routes); 5 | -------------------------------------------------------------------------------- /examples/Simple/ios/Simple.xcodeproj/xcshareddata/xcschemes/Simple.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 29 | 35 | 36 | 37 | 38 | 39 | 44 | 45 | 47 | 53 | 54 | 55 | 56 | 57 | 63 | 64 | 65 | 66 | 75 | 77 | 83 | 84 | 85 | 86 | 87 | 88 | 94 | 96 | 102 | 103 | 104 | 105 | 107 | 108 | 111 | 112 | 113 | -------------------------------------------------------------------------------- /examples/Simple/ios/Simple/AppDelegate.h: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import 11 | 12 | @interface AppDelegate : UIResponder 13 | 14 | @property (nonatomic, strong) UIWindow *window; 15 | 16 | @end 17 | -------------------------------------------------------------------------------- /examples/Simple/ios/Simple/AppDelegate.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import "AppDelegate.h" 11 | 12 | #import "RCTBundleURLProvider.h" 13 | #import "RCTRootView.h" 14 | 15 | @implementation AppDelegate 16 | 17 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 18 | { 19 | NSURL *jsCodeLocation; 20 | 21 | jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil]; 22 | 23 | RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation 24 | moduleName:@"Simple" 25 | initialProperties:nil 26 | launchOptions:launchOptions]; 27 | rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1]; 28 | 29 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 30 | UIViewController *rootViewController = [UIViewController new]; 31 | rootViewController.view = rootView; 32 | self.window.rootViewController = rootViewController; 33 | [self.window makeKeyAndVisible]; 34 | return YES; 35 | } 36 | 37 | @end 38 | -------------------------------------------------------------------------------- /examples/Simple/ios/Simple/Base.lproj/LaunchScreen.xib: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 21 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /examples/Simple/ios/Simple/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "size" : "29x29", 6 | "scale" : "2x" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "size" : "29x29", 11 | "scale" : "3x" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "size" : "40x40", 16 | "scale" : "2x" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "size" : "40x40", 21 | "scale" : "3x" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "size" : "60x60", 26 | "scale" : "2x" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "size" : "60x60", 31 | "scale" : "3x" 32 | } 33 | ], 34 | "info" : { 35 | "version" : 1, 36 | "author" : "xcode" 37 | } 38 | } -------------------------------------------------------------------------------- /examples/Simple/ios/Simple/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | APPL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | LSRequiresIPhoneOS 24 | 25 | UILaunchStoryboardName 26 | LaunchScreen 27 | UIRequiredDeviceCapabilities 28 | 29 | armv7 30 | 31 | UISupportedInterfaceOrientations 32 | 33 | UIInterfaceOrientationPortrait 34 | UIInterfaceOrientationLandscapeLeft 35 | UIInterfaceOrientationLandscapeRight 36 | 37 | UIViewControllerBasedStatusBarAppearance 38 | 39 | NSLocationWhenInUseUsageDescription 40 | 41 | NSAppTransportSecurity 42 | 43 | 44 | NSExceptionDomains 45 | 46 | localhost 47 | 48 | NSExceptionAllowsInsecureHTTPLoads 49 | 50 | 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /examples/Simple/ios/Simple/main.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import 11 | 12 | #import "AppDelegate.h" 13 | 14 | int main(int argc, char * argv[]) { 15 | @autoreleasepool { 16 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/Simple/ios/SimpleTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /examples/Simple/ios/SimpleTests/SimpleTests.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import 11 | #import 12 | 13 | #import "RCTLog.h" 14 | #import "RCTRootView.h" 15 | 16 | #define TIMEOUT_SECONDS 600 17 | #define TEXT_TO_LOOK_FOR @"Welcome to React Native!" 18 | 19 | @interface SimpleTests : XCTestCase 20 | 21 | @end 22 | 23 | @implementation SimpleTests 24 | 25 | - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test 26 | { 27 | if (test(view)) { 28 | return YES; 29 | } 30 | for (UIView *subview in [view subviews]) { 31 | if ([self findSubviewInView:subview matching:test]) { 32 | return YES; 33 | } 34 | } 35 | return NO; 36 | } 37 | 38 | - (void)testRendersWelcomeScreen 39 | { 40 | UIViewController *vc = [[[[UIApplication sharedApplication] delegate] window] rootViewController]; 41 | NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS]; 42 | BOOL foundElement = NO; 43 | 44 | __block NSString *redboxError = nil; 45 | RCTSetLogFunction(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { 46 | if (level >= RCTLogLevelError) { 47 | redboxError = message; 48 | } 49 | }); 50 | 51 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { 52 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 53 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 54 | 55 | foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) { 56 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { 57 | return YES; 58 | } 59 | return NO; 60 | }]; 61 | } 62 | 63 | RCTSetLogFunction(RCTDefaultLogFunction); 64 | 65 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); 66 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); 67 | } 68 | 69 | 70 | @end 71 | -------------------------------------------------------------------------------- /examples/Simple/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Simple", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "./node_modules/.bin/react-native start", 7 | "ios": "./node_modules/.bin/react-native run-ios", 8 | "android": "./node_modules/.bin/react-native run-android" 9 | }, 10 | "dependencies": { 11 | "react": "~15.3.1", 12 | "react-native": "0.36.0-rc.1", 13 | "react-router-native": "file:../../" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /flow/global.js: -------------------------------------------------------------------------------- 1 | // Temporary project specific declaration until facebook/flow#1967 is fixed 2 | declare function requestAnimationFrame(callback: (timestamp: number) => void): number; 3 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | import gulp from 'gulp'; 2 | import gulpESlint from 'gulp-eslint'; 3 | import gulpMocha from 'gulp-mocha'; 4 | import runSequence from 'run-sequence'; 5 | 6 | const IGNOREDDIRS = ['!**/node_modules/**']; 7 | 8 | const SRCDIR = 'modules'; 9 | const EXAMPLESDIR = 'examples'; 10 | const SPECDIR = 'spec'; 11 | const defaultLoader = require.extensions['.js']; 12 | 13 | function transpilePath(path, babelConfig) { 14 | /* eslint-disable global-require, no-underscore-dangle */ 15 | return () => { 16 | require.extensions['.js'] = (module, filename) => { 17 | if (filename.indexOf(path) < 0) { 18 | defaultLoader(module, filename); 19 | return; 20 | } 21 | 22 | const { code } = require('babel-core').transformFileSync( 23 | filename, 24 | babelConfig, 25 | ); 26 | 27 | module._compile(code, filename); 28 | return; 29 | }; 30 | }; 31 | /* eslint-enable */ 32 | } 33 | 34 | const transpile = { 35 | 'react-router': transpilePath( 36 | 'node_modules/react-router/es6', 37 | { 38 | // TODO use react-router .babelrc 39 | } 40 | ), 41 | }; 42 | 43 | gulp.task('load-require-hooks', (done) => { 44 | /* eslint-disable global-require */ 45 | // Can't mock NavigationExperimental until lelandrichardson/react-native-mock#48 lands in 46 | // react-native-mock 47 | require('react-native-mock/mock'); 48 | /* eslint-enable */ 49 | 50 | // We are using react-router's es6 API via the provided es6 modules. This makes debugging much 51 | // easier compared to using their transpiled counterparts. 52 | transpile['react-router'](); 53 | 54 | done(); 55 | }); 56 | 57 | gulp.task('lint', () => gulp 58 | .src([ 59 | `${SRCDIR}/**/*.js`, 60 | `${SPECDIR}/**/*.js`, 61 | `${EXAMPLESDIR}/**/*.js`, 62 | 'gulpfile.js', 63 | ...IGNOREDDIRS, 64 | ]) 65 | .pipe(gulpESlint()) 66 | .pipe(gulpESlint.format()) 67 | .pipe(gulpESlint.failAfterError()) 68 | ); 69 | 70 | gulp.task('spec', ['load-require-hooks'], () => 71 | gulp.src([ 72 | `${SPECDIR}/**/*.spec.js`, 73 | ]) 74 | .pipe(gulpMocha({ 75 | reporter: 'spec', 76 | ui: 'bdd', 77 | }))); 78 | 79 | gulp.task('copy', () => 80 | gulp.src([ 81 | `${SRCDIR}/**/*.js`, 82 | ]) 83 | .pipe(gulp.dest( 84 | 'examples/Aviato/node_modules/react-router-native/modules' 85 | )) 86 | .pipe(gulp.dest( 87 | 'examples/Simple/node_modules/react-router-native/modules' 88 | )) 89 | ); 90 | 91 | gulp.task('default', done => { 92 | runSequence( 93 | 'spec', 94 | 'lint', 95 | done 96 | ); 97 | }); 98 | 99 | gulp.task('watch', () => { 100 | gulp.watch([ 101 | `${SRCDIR}/**/*`, 102 | `${SPECDIR}/**/*`, 103 | 'gulpfile.js', 104 | ], ['copy', 'default']); 105 | }); 106 | -------------------------------------------------------------------------------- /modules/AddressBar.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import React, { PropTypes, Component } from 'react'; 4 | import warning from 'warning'; 5 | import { View, TextInput, Text, TouchableHighlight, Linking } from 'react-native'; 6 | import Back from './Back'; 7 | import Forward from './Forward'; 8 | import AddressBarHistory from './AddressBarHistory'; 9 | import { BTN_UNDERLAY_COLOR, addressBarStyles as styles } from './styles'; 10 | import type { Snapshot } from './TypeDefinition'; 11 | 12 | type Props = { 13 | location: Object, 14 | show: boolean, 15 | }; 16 | 17 | type DefaultProps = { 18 | show: boolean, 19 | }; 20 | 21 | type Context = { 22 | router: Object, 23 | backwardHistory: Array, 24 | forwardHistory: Array, 25 | }; 26 | 27 | type State = { 28 | href: string, 29 | historyType: boolean | string, 30 | }; 31 | 32 | class AddressBar extends Component { 33 | 34 | static contextTypes = { 35 | router: PropTypes.object.isRequired, 36 | backwardHistory: PropTypes.array.isRequired, 37 | forwardHistory: PropTypes.array.isRequired, 38 | }; 39 | 40 | static propTypes = { 41 | show: PropTypes.bool, 42 | }; 43 | 44 | static defaultProps = { 45 | show: false, 46 | }; 47 | 48 | constructor(props: Props, context: Context) { 49 | super(props, context); 50 | 51 | const { location } = props; 52 | const { router } = context; 53 | 54 | const href = router.createHref(location); 55 | this.state = { href, historyType: false }; 56 | } 57 | 58 | state: State; 59 | 60 | componentWillMount(): void { 61 | (this: any).toggleDropdown = this.toggleDropdown.bind(this); 62 | (this: any).onPressSnapshot = this.onPressSnapshot.bind(this); 63 | (this: any).onSubmit = this.onSubmit.bind(this); 64 | } 65 | 66 | componentWillReceiveProps(nextProps: Props): void { 67 | const { location } = nextProps; 68 | const { router } = this.context; 69 | const href = router.createHref(location); 70 | this.setState({ 71 | href, 72 | }); 73 | } 74 | 75 | onSubmit(to: string): void { 76 | const { router } = this.context; 77 | router.push(to); 78 | } 79 | 80 | onPressSnapshot(offset: number): void { 81 | const { router } = this.context; 82 | this.setState({ 83 | historyType: false, 84 | }); 85 | router.go(offset); 86 | } 87 | 88 | props: Props; 89 | context: Context; 90 | 91 | openDocs(): void { 92 | Linking.openURL('https://github.com/jmurzy/react-router-native/blob/master/docs/README.md') 93 | .catch(err => { 94 | warning( 95 | false, 96 | 'Failed to open URL %s', 97 | err 98 | ); 99 | }); 100 | } 101 | 102 | toggleDropdown(type: boolean | string): void { 103 | this.setState({ 104 | historyType: type, 105 | }); 106 | } 107 | 108 | render(): ?ReactElement { 109 | const { show } = this.props; 110 | 111 | if (!show) { 112 | return null; 113 | } 114 | 115 | const { historyType } = this.state; 116 | 117 | const { backwardHistory, forwardHistory } = this.context; 118 | const noBackwardHistory = backwardHistory.length <= 1; 119 | const noForwardHistory = forwardHistory.length <= 0; 120 | 121 | let backButtonTextStyle; 122 | if (noBackwardHistory) { 123 | backButtonTextStyle = [styles.backBtnText, styles.backBtnTextDisabled]; 124 | } else { 125 | backButtonTextStyle = styles.backBtnText; 126 | } 127 | 128 | let forwardButtonTextStyle; 129 | if (noForwardHistory) { 130 | forwardButtonTextStyle = [styles.forwardBtnText, styles.forwardBtnTextDisabled]; 131 | } else { 132 | forwardButtonTextStyle = styles.forwardBtnText; 133 | } 134 | 135 | let history = []; 136 | 137 | if (historyType === 'backward') { 138 | history = [...backwardHistory]; 139 | // Omit current snapshot 140 | history.pop(); 141 | history = history.reverse(); 142 | } 143 | 144 | if (historyType === 'forward') { 145 | history = forwardHistory; 146 | } 147 | 148 | return ( 149 | 150 | 151 | this.toggleDropdown('backward')} 154 | style={styles.backBtn} 155 | underlayColor={BTN_UNDERLAY_COLOR} 156 | > 157 | {'\u2794'} 158 | 159 | this.toggleDropdown('forward')} 162 | style={styles.forwardBtn} 163 | underlayColor={BTN_UNDERLAY_COLOR} 164 | > 165 | {'\u2794'} 166 | 167 | this.onSubmit(this.state.href)} 171 | style={styles.field} 172 | onChangeText={(href) => this.setState({ href })} 173 | value={this.state.href} 174 | /> 175 | this.openDocs()} 178 | > 179 | Docs 180 | 181 | 182 | this.toggleDropdown(false)} 187 | /> 188 | ); 189 | } 190 | } 191 | 192 | export default AddressBar; 193 | -------------------------------------------------------------------------------- /modules/AddressBarHistory.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import React, { PropTypes, Component } from 'react'; 4 | import { View, ListView, Text, TouchableHighlight, TouchableWithoutFeedback } from 'react-native'; 5 | import { 6 | BTN_UNDERLAY_COLOR, 7 | ADDDRESS_BAR_ROW_HEIGHT, 8 | addressBarHistoryStyles as styles, 9 | } from './styles'; 10 | import type { Snapshot } from './TypeDefinition'; 11 | 12 | const { DataSource } = ListView; 13 | 14 | type Props = { 15 | historyType: boolean | string, 16 | onPressBackdrop: Function, 17 | onPressSnapshot: Function, 18 | history: Array, 19 | }; 20 | 21 | type Context = { 22 | router: Object, 23 | }; 24 | 25 | type State = { 26 | dataSource: DataSource 27 | }; 28 | 29 | class AddressBarHistory extends Component { 30 | 31 | static propTypes = { 32 | historyType: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).isRequired, 33 | onPressBackdrop: PropTypes.func, 34 | onPressSnapshot: PropTypes.func, 35 | history: PropTypes.array, 36 | }; 37 | 38 | static defaultProps = { 39 | historyType: false, 40 | }; 41 | 42 | static contextTypes = { 43 | router: PropTypes.object.isRequired, 44 | }; 45 | 46 | constructor(props: Props, context: Context) { 47 | super(props, context); 48 | 49 | const ds = new DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }); 50 | 51 | const { router } = context; 52 | const { history } = props; 53 | 54 | const paths = history.map(snapshot => router.createPath(snapshot.location)); 55 | 56 | this.state = { 57 | dataSource: ds.cloneWithRows(paths), 58 | }; 59 | } 60 | 61 | state: State; 62 | 63 | componentWillMount(): void { 64 | (this: any).renderRow = this.renderRow.bind(this); 65 | } 66 | 67 | componentWillReceiveProps(nextProps: Props): void { 68 | const { router } = this.context; 69 | const { history } = nextProps; 70 | const ds = this.state.dataSource; 71 | 72 | const paths = history.map(snapshot => router.createPath(snapshot.location)); 73 | 74 | this.setState({ 75 | dataSource: ds.cloneWithRows(paths), 76 | }); 77 | } 78 | 79 | props: Props; 80 | context: Context; 81 | 82 | renderRow(rowData: string, sectionID: string, rowID: string): ReactElement { 83 | const { onPressSnapshot, historyType } = this.props; 84 | 85 | let offset = 0; 86 | 87 | if (historyType === 'backward') { 88 | offset = -Number(rowID) - 1; 89 | } else if (historyType === 'forward') { 90 | offset = Number(rowID) + 1; 91 | } 92 | 93 | return ( 94 | onPressSnapshot(offset)} 97 | > 98 | {rowData} 99 | 100 | 101 | ); 102 | } 103 | 104 | render(): ?ReactElement { 105 | const { historyType, onPressBackdrop, history } = this.props; 106 | 107 | if (!historyType) { 108 | return null; 109 | } 110 | 111 | const rowCount = history.length; 112 | const height = ADDDRESS_BAR_ROW_HEIGHT * (rowCount > 5 ? 5.6 : rowCount); 113 | 114 | return ( 115 | 116 | 117 | 118 | 119 | 120 | 121 | 128 | 129 | 130 | ); 131 | } 132 | } 133 | 134 | export default AddressBarHistory; 135 | -------------------------------------------------------------------------------- /modules/Back.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import React from 'react'; 4 | import Go from './Go'; 5 | 6 | const Pop = (props: any): ReactElement => ( 7 | 8 | ); 9 | 10 | export default Pop; 11 | -------------------------------------------------------------------------------- /modules/Forward.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import React from 'react'; 4 | import Go from './Go'; 5 | 6 | const Forward = (props: any): ReactElement => ( 7 | 8 | ); 9 | 10 | export default Forward; 11 | -------------------------------------------------------------------------------- /modules/Go.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import React, { 4 | PropTypes, 5 | Component, 6 | Element as ReactElement, 7 | } from 'react'; 8 | import { 9 | TouchableHighlight, 10 | } from 'react-native'; 11 | import warning from 'warning'; 12 | 13 | type Props = { 14 | state: ?Object, 15 | onPress: ?Function, 16 | type: string, 17 | }; 18 | 19 | class Go extends Component { 20 | 21 | static propTypes = { 22 | state: PropTypes.object, 23 | onPress: PropTypes.func, 24 | type: PropTypes.string.isRequired, 25 | }; 26 | 27 | static contextTypes = { 28 | router: PropTypes.object, 29 | }; 30 | 31 | componentWillMount(): void { 32 | (this: any).handlePress = this.handlePress.bind(this); 33 | } 34 | 35 | handlePress(event: any): void { 36 | const { onPress } = this.props; 37 | if (onPress) { 38 | onPress(event); 39 | } 40 | 41 | if (event.defaultPrevented !== true) { 42 | const { type } = this.props; 43 | 44 | if (type === 'pop') { 45 | this.context.router.pop(); 46 | } else if (type === 'back') { 47 | this.context.router.goBack(); 48 | } else if (type === 'forward') { 49 | this.context.router.goForward(); 50 | } else { 51 | warning( 52 | false, 53 | 'You should use `` or `` instead.' 54 | ); 55 | } 56 | } 57 | } 58 | 59 | props: Props; 60 | 61 | render(): ReactElement { 62 | return ( 63 | 64 | ); 65 | } 66 | } 67 | 68 | export default Go; 69 | -------------------------------------------------------------------------------- /modules/Header.js: -------------------------------------------------------------------------------- 1 | import React, { 2 | Component, 3 | PropTypes, 4 | } from 'react'; 5 | import { 6 | StyleSheet, 7 | Text, 8 | TouchableHighlight, 9 | } from 'react-native'; 10 | import { 11 | AnimatedHeader, 12 | AnimatedHeaderTitle, 13 | } from './NavigationExperimental'; 14 | 15 | import Pop from './Pop'; 16 | 17 | const styles = StyleSheet.create({ 18 | headerLink: { 19 | alignItems: 'center', 20 | flex: 1, 21 | flexDirection: 'row', 22 | justifyContent: 'center', 23 | }, 24 | buttonText: { 25 | color: '#000000', 26 | fontSize: 14, 27 | margin: 10, 28 | }, 29 | titleText: { 30 | color: '#000000', 31 | }, 32 | }); 33 | 34 | type Props = { 35 | title: ?String, 36 | titleTextStyle: ?Object, 37 | leftButtonText: ?String, 38 | leftButtonTextStyle: ?Object, 39 | rightButtonText: ?String, 40 | rightButtonTextStyle: ?Object, 41 | onRightButtonPress: ?Function, 42 | }; 43 | 44 | type DefaultProps = { 45 | onRightButtonPress: Function, 46 | }; 47 | 48 | class Header extends Component { 49 | 50 | static propTypes = { 51 | title: PropTypes.string, 52 | titleTextStyle: PropTypes.object, 53 | leftButtonText: PropTypes.string, 54 | leftButtonTextStyle: PropTypes.object, 55 | rightButtonText: PropTypes.string, 56 | rightButtonTextStyle: PropTypes.object, 57 | onRightButtonPress: PropTypes.func, 58 | }; 59 | 60 | static defaultProps = { 61 | onRightButtonPress: () => {}, 62 | }; 63 | 64 | componentWillMount() { 65 | this.renderTitleComponent = this.renderTitleComponent.bind(this); 66 | this.renderBackButtonComponent = this.renderBackButtonComponent.bind(this); 67 | this.renderRightComponent = this.renderRightComponent.bind(this); 68 | } 69 | 70 | props: Props; 71 | 72 | renderTitleComponent() { 73 | const { title, titleTextStyle } = this.props; 74 | return ( 75 | 78 | {title} 79 | 80 | ); 81 | } 82 | 83 | renderBackButtonComponent(props) { 84 | if (props.scene.index === 0) { 85 | return null; 86 | } 87 | 88 | const { leftButtonText, leftButtonTextStyle } = this.props; 89 | 90 | if (!leftButtonText) { 91 | return null; 92 | } 93 | 94 | return ( 95 | 99 | 102 | {leftButtonText} 103 | 104 | 105 | ); 106 | } 107 | 108 | renderRightComponent() { 109 | const { 110 | rightButtonText, 111 | rightButtonTextStyle, 112 | onRightButtonPress, 113 | } = this.props; 114 | 115 | if (!rightButtonText) { 116 | return null; 117 | } 118 | 119 | return ( 120 | 125 | 128 | {rightButtonText} 129 | 130 | 131 | ); 132 | } 133 | 134 | render() { 135 | return ( 136 | 142 | ); 143 | } 144 | } 145 | 146 | export default Header; 147 | -------------------------------------------------------------------------------- /modules/IndexLink.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import React from 'react'; 4 | import Link from './Link'; 5 | 6 | const IndexLink = (props: any): ReactElement => ( 7 | /* eslint-disable jsx-a11y/anchor-has-content */ 8 | 9 | /* eslint-enable */ 10 | ); 11 | 12 | export default IndexLink; 13 | -------------------------------------------------------------------------------- /modules/IndexRoute.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import { Component } from 'react'; 4 | import warning from 'warning'; 5 | import invariant from 'invariant'; 6 | import { 7 | createRouteFromReactElement as _createRouteFromReactElement, 8 | RouteTypes, 9 | } from './RouteUtils'; 10 | import { notImplemented, falsy, component } from './PropTypes'; 11 | 12 | const { TABS_ROUTE } = RouteTypes; 13 | 14 | type Props = { 15 | component: ReactClass, 16 | components: ?any, 17 | getComponent: ?any, 18 | getComponents: ?any, 19 | overlayComponent: ?ReactClass, 20 | path: ?any, 21 | }; 22 | 23 | /* eslint-disable react/require-render-return */ 24 | class IndexRoute extends Component { 25 | 26 | static propTypes = { 27 | component, 28 | components: notImplemented, 29 | getComponent: notImplemented, 30 | getComponents: notImplemented, 31 | overlayComponent: component, 32 | path: falsy, 33 | }; 34 | 35 | static createRouteFromReactElement = (element, parentRoute) => { 36 | warning( 37 | parentRoute.routeType !== TABS_ROUTE, 38 | 'An is not allowed for ' 39 | ); 40 | 41 | if (parentRoute) { 42 | /* eslint-disable no-param-reassign */ 43 | parentRoute.indexRoute = _createRouteFromReactElement(element, parentRoute); 44 | /* eslint-enable */ 45 | } else { 46 | warning( 47 | false, 48 | 'An does not make sense at the root of your route config' 49 | ); 50 | } 51 | }; 52 | 53 | props: Props; 54 | 55 | render(): ?ReactElement { 56 | invariant( 57 | false, 58 | ' elements are for router configuration only and should not be rendered' 59 | ); 60 | } 61 | } 62 | /* eslint-enable */ 63 | 64 | export default IndexRoute; 65 | -------------------------------------------------------------------------------- /modules/Link.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import React, { PropTypes, Component } from 'react'; 4 | import { 5 | TouchableHighlight, 6 | } from 'react-native'; 7 | 8 | type Props = { 9 | to: any, 10 | state: ?Object, 11 | activeStyle: ?Object, 12 | onlyActiveOnIndex: ?boolean, 13 | onPress: ?Function, 14 | }; 15 | 16 | type DefaultProps = { 17 | style: Object, 18 | onlyActiveOnIndex: ?boolean, 19 | }; 20 | 21 | class Link extends Component { 22 | 23 | static propTypes = { 24 | to: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired, 25 | state: PropTypes.object, 26 | activeStyle: PropTypes.any, 27 | onlyActiveOnIndex: PropTypes.bool, 28 | onPress: PropTypes.func, 29 | }; 30 | 31 | static defaultProps = { 32 | onlyActiveOnIndex: false, 33 | style: {}, 34 | }; 35 | 36 | static contextTypes = { 37 | router: PropTypes.object, 38 | }; 39 | 40 | componentWillMount(): void { 41 | (this: any).handlePress = this.handlePress.bind(this); 42 | } 43 | 44 | props: Props; 45 | 46 | handlePress(event: any): void { 47 | const { onPress } = this.props; 48 | if (onPress) { 49 | onPress(event); 50 | } 51 | 52 | if (event.defaultPrevented !== true) { 53 | const { to } = this.props; 54 | const { router } = this.context; 55 | 56 | // TODO Use TimerMixin 57 | // docs/performance.html#my-touchablex-view-isn-t-very-responsive 58 | requestAnimationFrame(() => { 59 | router.push(to); 60 | }); 61 | } 62 | } 63 | 64 | render(): ReactElement { 65 | const { to, activeStyle, onlyActiveOnIndex, ...passProps } = this.props; 66 | 67 | const { router } = this.context; 68 | 69 | if (router && to) { 70 | const location = to; 71 | if (activeStyle != null) { 72 | if (router.isActive(location, onlyActiveOnIndex)) { 73 | if (activeStyle) { 74 | passProps.style = [passProps.style, activeStyle]; 75 | } 76 | } 77 | } 78 | } 79 | 80 | return ( 81 | 82 | ); 83 | } 84 | } 85 | 86 | export default Link; 87 | -------------------------------------------------------------------------------- /modules/NavigationExperimental/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | NavigationExperimental, 3 | } from 'react-native'; 4 | 5 | export const { 6 | Header: AnimatedHeader, 7 | } = NavigationExperimental; 8 | 9 | export const { 10 | Title: AnimatedHeaderTitle, 11 | } = AnimatedHeader; 12 | -------------------------------------------------------------------------------- /modules/Pop.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import React from 'react'; 4 | import Go from './Go'; 5 | 6 | const Pop = (props: any): ReactElement => ( 7 | 8 | ); 9 | 10 | export default Pop; 11 | -------------------------------------------------------------------------------- /modules/PropTypes.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import { PropTypes } from 'react'; 4 | 5 | export function notImplemented(props: Object, propName: string, componentName: string): ?Error { 6 | if (props[propName]) { 7 | return new Error(`<${componentName}> "${propName}" is not implemented.`); 8 | } 9 | return null; 10 | } 11 | 12 | export function falsy(props: Object, propName: string, componentName: string): ?Error { 13 | if (props[propName]) { 14 | return new Error(`<${componentName}> should not have a "${propName}" prop.`); 15 | } 16 | return null; 17 | } 18 | 19 | export const component = PropTypes.oneOfType([PropTypes.func, PropTypes.string]); 20 | -------------------------------------------------------------------------------- /modules/Reducer.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import { defaultReducer } from './ReducerUtils'; 4 | import type { EnhancedNavigationRoute, NavigationAction } from './TypeDefinition'; 5 | 6 | export default ( 7 | state: ?EnhancedNavigationRoute, 8 | action: NavigationAction, 9 | ): EnhancedNavigationRoute => { 10 | const { nextNavigationState } = action; 11 | 12 | if (!state) { 13 | return nextNavigationState; 14 | } 15 | 16 | // Root swap 17 | if (state.path !== nextNavigationState.path) { 18 | return nextNavigationState; 19 | } 20 | 21 | return defaultReducer(state, action); 22 | }; 23 | -------------------------------------------------------------------------------- /modules/RootContainer.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import React, { PropTypes, Component, Element as ReactElement } from 'react'; 4 | import { View, BackAndroid } from 'react-native'; 5 | import AddressBar from './AddressBar'; 6 | import type { 7 | EnhancedNavigationRoute, 8 | Location, 9 | PseudoElement, 10 | } from './TypeDefinition'; 11 | 12 | import { ADDDRESS_BAR_HEIGHT, globalStyles as styles } from './styles'; 13 | 14 | type Props = { 15 | navigationTree: PseudoElement, 16 | navigationState: EnhancedNavigationRoute, 17 | location: Location, 18 | addressBar: boolean, 19 | onHardwareBackPress: (router: Object, exit: Function) => boolean, 20 | }; 21 | 22 | type Context = { 23 | router: Object, 24 | }; 25 | 26 | class RootContainer extends Component { 27 | 28 | static propTypes = { 29 | navigationTree: PropTypes.object.isRequired, 30 | navigationState: PropTypes.object.isRequired, 31 | location: PropTypes.object.isRequired, 32 | addressBar: PropTypes.bool, 33 | onHardwareBackPress: PropTypes.func.isRequired, 34 | }; 35 | 36 | static defaultProps = { 37 | addressBar: false, 38 | onHardwareBackPress: (router) => router.pop(), 39 | }; 40 | 41 | static contextTypes = { 42 | router: PropTypes.object, 43 | }; 44 | 45 | componentWillMount(): void { 46 | (this: any).handleHardwareBackPress = this.handleHardwareBackPress.bind(this); 47 | } 48 | 49 | componentDidMount(): void { 50 | BackAndroid.addEventListener('hardwareBackPress', this.handleHardwareBackPress); 51 | } 52 | 53 | componentWillUnmount(): void { 54 | BackAndroid.removeEventListener('hardwareBackPress', this.handleHardwareBackPress); 55 | } 56 | 57 | handleHardwareBackPress(): boolean { 58 | const { 59 | onHardwareBackPress, 60 | } = this.props; 61 | 62 | const { 63 | router, 64 | } = this.context; 65 | 66 | return onHardwareBackPress(router, BackAndroid.exitApp); 67 | } 68 | 69 | context: Context; 70 | props: Props; 71 | 72 | renderNavigation(navigationState: EnhancedNavigationRoute): ?ReactElement { 73 | const { navigationTree } = this.props; 74 | 75 | if (!navigationState) { 76 | return null; 77 | } 78 | 79 | const { routeViewComponent, props: routeViewComponentProps } = navigationTree; 80 | 81 | return React.createElement( 82 | routeViewComponent, 83 | { 84 | ...routeViewComponentProps, 85 | navigationState, 86 | } 87 | ); 88 | } 89 | 90 | render(): ReactElement { 91 | const { navigationState, addressBar: isShown, location } = this.props; 92 | 93 | // TODO react-native does not accept `-reverse` values for `flex-direction`. We need to render 94 | // after navigational components to keep it on top. See 95 | // react-native/pull/6473|7825 96 | let rootStyles; 97 | 98 | if (isShown) { 99 | rootStyles = [styles.wrapper, { marginTop: ADDDRESS_BAR_HEIGHT }]; 100 | } else { 101 | rootStyles = styles.wrapper; 102 | } 103 | 104 | return ( 105 | 106 | {this.renderNavigation(navigationState)} 107 | 108 | 109 | ); 110 | } 111 | } 112 | 113 | export default RootContainer; 114 | -------------------------------------------------------------------------------- /modules/Route.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import { PropTypes, Component } from 'react'; 4 | import invariant from 'invariant'; 5 | import { 6 | createRouteFromReactElement as _createRouteFromReactElement, 7 | RouteTypes, 8 | } from './RouteUtils'; 9 | import { defaultRouteReducer } from './ReducerUtils'; 10 | import { notImplemented, component } from './PropTypes'; 11 | 12 | type Props = { 13 | component: ReactClass, 14 | components: ?any, 15 | getComponent: ?any, 16 | getComponents: ?any, 17 | overlayComponent: ?ReactClass, 18 | path: ?string, 19 | reducer: Function, 20 | routeType: string, 21 | transition: ?string, 22 | onSwipeBack: Function, 23 | onSwipeForward: Function, 24 | }; 25 | 26 | const { ROUTE } = RouteTypes; 27 | 28 | /* eslint-disable react/require-render-return */ 29 | class Route extends Component { 30 | 31 | static createRouteFromReactElement = _createRouteFromReactElement; 32 | 33 | static propTypes = { 34 | component, 35 | components: notImplemented, 36 | getComponent: notImplemented, 37 | getComponents: notImplemented, 38 | overlayComponent: component, 39 | path: PropTypes.string, 40 | reducer: PropTypes.func.isRequired, 41 | routeType: PropTypes.string.isRequired, 42 | transition: PropTypes.string, 43 | onSwipeBack: PropTypes.func, 44 | onSwipeForward: PropTypes.func, 45 | }; 46 | 47 | static defaultProps = { 48 | routeType: ROUTE, 49 | reducer: defaultRouteReducer, 50 | onSwipeBack: (router) => { 51 | router.pop(); 52 | }, 53 | onSwipeForward: () => {}, 54 | }; 55 | 56 | props: Props; 57 | 58 | render() { 59 | invariant( 60 | false, 61 | ' elements are for router configuration only and should not be rendered' 62 | ); 63 | } 64 | } 65 | /* eslint-enable */ 66 | 67 | export default Route; 68 | -------------------------------------------------------------------------------- /modules/RouteUtils.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import warning from 'warning'; 4 | import invariant from 'invariant'; 5 | import { 6 | createRouteFromReactElement as _createRouteFromReactElement, 7 | } from 'react-router/es/RouteUtils'; 8 | import RouteView from './RouteView'; 9 | import StackRouteView from './StackRouteView'; 10 | import TabsRouteView from './TabsRouteView'; 11 | import transitionRegistry from './transitionRegistry'; 12 | import type { 13 | RouteDef, 14 | ElementProvider, 15 | PseudoElement, 16 | } from './TypeDefinition'; 17 | 18 | export const RouteTypes = { 19 | STACK_ROUTE: '', 20 | TABS_ROUTE: '', 21 | ROUTE: '', 22 | }; 23 | 24 | const { STACK_ROUTE, TABS_ROUTE } = RouteTypes; 25 | 26 | export function createRouteFromReactElement( 27 | element: ReactElement, 28 | parentRoute: RouteDef 29 | ): ReactElement { 30 | invariant( 31 | !element.props.transition || transitionRegistry[element.props.transition] !== undefined, 32 | '"%s" is not a valid transition. If you are using a custom transition, make sure to ' + 33 | 'register it with `transitionRegistry`.', 34 | element.props.transition 35 | ); 36 | 37 | warning( 38 | !element.props.overlayComponent || (parentRoute 39 | && (parentRoute.routeType === STACK_ROUTE || parentRoute.routeType === TABS_ROUTE)), 40 | 'overlayComponent does not make sense outside of or .' 41 | ); 42 | 43 | warning( 44 | !parentRoute || parentRoute.routeType !== STACK_ROUTE 45 | || (element.props.routeType !== STACK_ROUTE && element.props.routeType !== TABS_ROUTE), 46 | ' and cannot be nested within .' 47 | ); 48 | 49 | return _createRouteFromReactElement(element); 50 | } 51 | 52 | function createNavigationTreeAtIndex( 53 | createElement: ElementProvider, 54 | routes: Array, 55 | route: RouteDef, 56 | positionInParent: number 57 | ): ?PseudoElement { 58 | const props = {}; 59 | 60 | props.createElement = createElement; 61 | props.path = route.path || `[visual]${positionInParent}`; 62 | props.type = route.routeType; 63 | props.component = route.component; 64 | 65 | if (route.overlayComponent) { 66 | props.overlayComponent = route.overlayComponent; 67 | } 68 | 69 | if (route.childRoutes) { 70 | props.navigationSubtree = route.childRoutes.map( 71 | (r, index) => createNavigationTreeAtIndex(createElement, routes, r, index) 72 | ); 73 | 74 | // index route is given in `routes` but not in `childRoutes` 75 | if (route.indexRoute) { 76 | const indexRoute = route.indexRoute; 77 | const indexRouteProps = {}; 78 | 79 | indexRouteProps.path = '[index]'; 80 | indexRouteProps.type = 'index'; 81 | indexRouteProps.component = indexRoute.component; 82 | indexRouteProps.createElement = createElement; 83 | 84 | if (indexRoute.overlayComponent) { 85 | indexRouteProps.overlayComponent = indexRoute.overlayComponent; 86 | } 87 | 88 | const indexRoutePseudoElement = { 89 | routeViewComponent: RouteView, 90 | props: indexRouteProps, 91 | }; 92 | 93 | props.navigationSubtree.unshift(indexRoutePseudoElement); 94 | } 95 | } 96 | 97 | let pseudoElement; 98 | if (route.routeType === STACK_ROUTE) { 99 | pseudoElement = { routeViewComponent: StackRouteView, props }; 100 | } else if (route.routeType === TABS_ROUTE) { 101 | pseudoElement = { routeViewComponent: TabsRouteView, props }; 102 | } else { 103 | pseudoElement = { routeViewComponent: RouteView, props }; 104 | } 105 | return pseudoElement; 106 | } 107 | 108 | export function createNavigationTree( 109 | createElement: ElementProvider, 110 | routes: Array 111 | ): ?PseudoElement { 112 | const rootRoute = routes && routes.length && routes[0]; 113 | 114 | if (!rootRoute) { 115 | return null; 116 | } 117 | 118 | return createNavigationTreeAtIndex(createElement, routes, rootRoute, 0); 119 | } 120 | -------------------------------------------------------------------------------- /modules/RouteView.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import React, { Component, PropTypes } from 'react'; 4 | import { NavigationExperimental, View } from 'react-native'; 5 | import { warnOutOfSync } from './warningUtil'; 6 | import { globalStyles as styles } from './styles'; 7 | 8 | import type { 9 | EnhancedNavigationRoute, 10 | PseudoElement, 11 | NavigationTransitionProps, 12 | } from './TypeDefinition'; 13 | 14 | const { 15 | Transitioner: NavigationTransitioner, 16 | } = NavigationExperimental; 17 | 18 | type Props = { 19 | path: string, 20 | type: string, 21 | component: ReactClass, 22 | navigationSubtree: ?Array, 23 | navigationState: EnhancedNavigationRoute, 24 | createElement: Function, 25 | }; 26 | 27 | class RouteView extends Component { 28 | 29 | static propTypes = { 30 | path: PropTypes.string.isRequired, 31 | type: PropTypes.string.isRequired, 32 | component: PropTypes.any.isRequired, 33 | navigationSubtree: PropTypes.arrayOf(PropTypes.object), 34 | navigationState: PropTypes.object, 35 | createElement: PropTypes.func.isRequired, 36 | }; 37 | 38 | componentWillMount(): void { 39 | (this: any).renderTransition = this.renderTransition.bind(this); 40 | (this: any).renderScene = this.renderScene.bind(this); 41 | } 42 | 43 | renderScene(props: Object): ?ReactElement { 44 | const { scene } = props; 45 | 46 | const { navigationSubtree } = this.props; 47 | 48 | if (!scene.route || !navigationSubtree) { 49 | return null; 50 | } 51 | 52 | const pseudoElement = navigationSubtree.find( 53 | child => child.props.path === scene.route.path 54 | ); 55 | 56 | if (!pseudoElement) { 57 | warnOutOfSync('Cannot render scene', scene.route.path); 58 | return null; 59 | } 60 | 61 | const key = scene.route.key; 62 | 63 | const { routeViewComponent, props: routeViewComponentProps } = pseudoElement; 64 | 65 | return React.createElement( 66 | routeViewComponent, 67 | { 68 | ...routeViewComponentProps, 69 | key, 70 | navigationState: scene.route, 71 | } 72 | ); 73 | } 74 | 75 | renderTransition(props: NavigationTransitionProps): ReactElement { 76 | const scenes = props.scenes.map( 77 | scene => this.renderScene({ 78 | ...props, 79 | scene, 80 | }) 81 | ); 82 | 83 | return ( 84 | 87 | {scenes} 88 | 89 | ); 90 | } 91 | 92 | render(): ReactElement { 93 | const { 94 | navigationSubtree, 95 | navigationState, 96 | component, 97 | createElement, 98 | } = this.props; 99 | 100 | const { 101 | routes, 102 | params, 103 | routeParams, 104 | location, 105 | } = navigationState; 106 | 107 | // Create NavigationTransitioner for handling nested routes 108 | let transitioner; 109 | if (navigationSubtree && routes && routes.length > 0) { 110 | // react-native/c3714d7ed7c8ee57e005d51147820456ef8cda3e 111 | // FIXME Replace `Transitioner` with `View` to reclaim performance 112 | const transitionerProps = { 113 | style: styles.wrapper, 114 | navigationState, 115 | render: this.renderTransition, 116 | }; 117 | 118 | transitioner = React.createElement(NavigationTransitioner, transitionerProps); 119 | } 120 | 121 | const componentProps = { 122 | params, 123 | routeParams, 124 | location, 125 | children: transitioner, 126 | }; 127 | 128 | return createElement(component, componentProps); 129 | } 130 | } 131 | 132 | export default RouteView; 133 | -------------------------------------------------------------------------------- /modules/RouterContext.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import React, { PropTypes, Component } from 'react'; 4 | import invariant from 'invariant'; 5 | import RootContainer from './RootContainer'; 6 | 7 | import { createNavigationTree } from './RouteUtils'; 8 | 9 | import type { 10 | Snapshot, 11 | RouteDef, 12 | Location, 13 | EnhancedNavigationRoute, 14 | ElementProvider, 15 | } from './TypeDefinition'; 16 | 17 | type Props = { 18 | router: Object, 19 | location: Location, 20 | routes: Array, 21 | params: Object, 22 | components: Array>, 23 | navigationState: EnhancedNavigationRoute, 24 | createElement: ElementProvider, 25 | addressBar: boolean, 26 | 27 | onHardwareBackPress: (router: Object, exit: Function) => boolean, 28 | 29 | backwardHistory: Array, 30 | forwardHistory: Array, 31 | }; 32 | 33 | class RouterContext extends Component { 34 | 35 | static propTypes= { 36 | router: PropTypes.object.isRequired, 37 | location: PropTypes.object.isRequired, 38 | routes: PropTypes.array.isRequired, 39 | params: PropTypes.object.isRequired, 40 | components: PropTypes.array.isRequired, 41 | navigationState: PropTypes.object.isRequired, 42 | createElement: PropTypes.func.isRequired, 43 | addressBar: PropTypes.bool, 44 | 45 | onHardwareBackPress: PropTypes.func, 46 | 47 | backwardHistory: PropTypes.array.isRequired, 48 | forwardHistory: PropTypes.array.isRequired, 49 | }; 50 | 51 | static defaultProps = { 52 | createElement: React.createElement, 53 | }; 54 | 55 | static childContextTypes = { 56 | router: PropTypes.object.isRequired, 57 | backwardHistory: PropTypes.array.isRequired, 58 | forwardHistory: PropTypes.array.isRequired, 59 | }; 60 | 61 | getChildContext(): Object { 62 | const { 63 | router, 64 | backwardHistory, 65 | forwardHistory, 66 | } = this.props; 67 | 68 | return { router, backwardHistory, forwardHistory }; 69 | } 70 | 71 | componentWillMount(): void { 72 | (this: any).createElement = this.createElement.bind(this); 73 | } 74 | 75 | props: Props; 76 | 77 | createElement(component: ReactClass, passProps: any): ?ReactElement { 78 | return component == null ? null : this.props.createElement(component, passProps); 79 | } 80 | 81 | render(): ?ReactElement { 82 | const { 83 | routes, 84 | location, 85 | addressBar, 86 | onHardwareBackPress, 87 | } = this.props; 88 | 89 | const navigationTree = createNavigationTree(this.createElement, routes); 90 | const navigationState = this.props.navigationState; 91 | 92 | let element = null; 93 | 94 | if (navigationTree) { 95 | const passProps = { 96 | addressBar, 97 | navigationTree, 98 | navigationState, 99 | location, 100 | onHardwareBackPress, 101 | }; 102 | 103 | element = React.createElement(RootContainer, passProps); 104 | } 105 | 106 | invariant( 107 | element === null || element === false || React.isValidElement(element), 108 | 'The root route must render a single element' 109 | ); 110 | 111 | return element; 112 | } 113 | } 114 | 115 | export default RouterContext; 116 | -------------------------------------------------------------------------------- /modules/RouterUtils.js: -------------------------------------------------------------------------------- 1 | import { 2 | Actions, 3 | } from 'history'; 4 | import reducer from './Reducer'; 5 | import { 6 | createPartialState, 7 | LOCATION_CHANGE, 8 | } from './ReducerUtils'; 9 | 10 | import type { 11 | EnhancedNavigationRoute, 12 | NavigationAction, 13 | } from './TypeDefinition'; 14 | 15 | const { 16 | REPLACE: HISTORY_REPLACE, 17 | } = Actions; 18 | 19 | /* eslint-disable import/prefer-default-export */ 20 | export function createNavigationState( 21 | navigationState: EnhancedNavigationRoute, 22 | routerState 23 | ): EnhancedNavigationRoute { 24 | /* eslint-enable */ 25 | const { 26 | routes, 27 | location, 28 | params, 29 | } = routerState; 30 | const nextNavigationState = createPartialState(routes, location, params); 31 | const type = LOCATION_CHANGE; 32 | 33 | // TODO Double taps should reset stack 34 | let resetStack = false; 35 | if (location.action === HISTORY_REPLACE) { 36 | resetStack = true; 37 | } 38 | 39 | const action: NavigationAction = { 40 | type, 41 | routes, 42 | location, 43 | params, 44 | nextNavigationState, 45 | resetStack, 46 | }; 47 | 48 | return reducer(navigationState, action); 49 | } 50 | -------------------------------------------------------------------------------- /modules/StackRoute.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import { PropTypes, Component } from 'react'; 4 | import invariant from 'invariant'; 5 | import { 6 | createRouteFromReactElement as _createRouteFromReactElement, 7 | RouteTypes, 8 | } from './RouteUtils'; 9 | import { defaultStackRouteReducer } from './ReducerUtils'; 10 | import { notImplemented, component } from './PropTypes'; 11 | import { HORIZONTAL_CARD_STACK } from './transitionRegistry'; 12 | 13 | type Props = { 14 | component: ReactClass, 15 | components: ?any, 16 | getComponent: ?any, 17 | getComponents: ?any, 18 | overlayComponent: ?ReactClass, 19 | path: string, 20 | reducer: Function, 21 | routeType: string, 22 | transition: string, 23 | }; 24 | 25 | const { STACK_ROUTE } = RouteTypes; 26 | 27 | /* eslint-disable react/require-render-return */ 28 | class StackRoute extends Component { 29 | 30 | static createRouteFromReactElement = _createRouteFromReactElement; 31 | 32 | static propTypes = { 33 | component, 34 | components: notImplemented, 35 | getComponent: notImplemented, 36 | getComponents: notImplemented, 37 | overlayComponent: component, 38 | path: PropTypes.string.isRequired, // StackRoute and TabsRoute cannot be used as no-path routes. 39 | reducer: PropTypes.func.isRequired, 40 | routeType: PropTypes.string.isRequired, 41 | transition: PropTypes.string.isRequired, 42 | }; 43 | 44 | static defaultProps = { 45 | reducer: defaultStackRouteReducer, 46 | routeType: STACK_ROUTE, 47 | transition: HORIZONTAL_CARD_STACK, 48 | }; 49 | 50 | props: Props; 51 | 52 | render() { 53 | invariant( 54 | false, 55 | ' elements are for router configuration only and should not be rendered' 56 | ); 57 | } 58 | } 59 | /* eslint-enable */ 60 | 61 | export default StackRoute; 62 | -------------------------------------------------------------------------------- /modules/TabsRoute.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import { PropTypes, Component } from 'react'; 4 | import invariant from 'invariant'; 5 | import { 6 | createRouteFromReactElement as _createRouteFromReactElement, 7 | RouteTypes, 8 | } from './RouteUtils'; 9 | import { defaultTabsRouteReducer } from './ReducerUtils'; 10 | import { notImplemented, component } from './PropTypes'; 11 | import { NONE } from './transitionRegistry'; 12 | 13 | type Props = { 14 | component: ReactClass, 15 | components: ?any, 16 | getComponent: ?any, 17 | getComponents: ?any, 18 | overlayComponent: ?ReactClass, 19 | path: string, 20 | reducer: Function, 21 | routeType: string, 22 | transition: string, 23 | }; 24 | 25 | const { TABS_ROUTE } = RouteTypes; 26 | 27 | /* eslint-disable react/require-render-return */ 28 | class TabsRoute extends Component { 29 | 30 | static createRouteFromReactElement = _createRouteFromReactElement; 31 | 32 | static propTypes = { 33 | component, 34 | components: notImplemented, 35 | getComponent: notImplemented, 36 | getComponents: notImplemented, 37 | overlayComponent: component, 38 | path: PropTypes.string.isRequired, // StackRoute and TabsRoute cannot be used as no-path routes. 39 | reducer: PropTypes.func.isRequired, 40 | routeType: PropTypes.string.isRequired, 41 | transition: PropTypes.string.isRequired, 42 | }; 43 | 44 | static defaultProps = { 45 | reducer: defaultTabsRouteReducer, 46 | routeType: TABS_ROUTE, 47 | transition: NONE, 48 | }; 49 | 50 | props: Props; 51 | 52 | render() { 53 | invariant( 54 | false, 55 | ' elements are for router configuration only and should not be rendered' 56 | ); 57 | } 58 | } 59 | /* eslint-enable */ 60 | 61 | export default TabsRoute; 62 | -------------------------------------------------------------------------------- /modules/TabsRouteView.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import React, { Component, PropTypes } from 'react'; 4 | import { NavigationExperimental, View } from 'react-native'; 5 | import { warnOutOfSync } from './warningUtil'; 6 | import transitionRegistry from './transitionRegistry'; 7 | import { globalStyles as styles } from './styles'; 8 | import withRouter from './withRouter'; 9 | 10 | import type { 11 | EnhancedNavigationRoute, 12 | PseudoElement, 13 | NavigationTransitionProps, 14 | } from './TypeDefinition'; 15 | 16 | const { 17 | Card: NavigationCard, 18 | Transitioner: NavigationTransitioner, 19 | } = NavigationExperimental; 20 | 21 | type Props = { 22 | path: string, 23 | type: string, 24 | component: ReactClass, 25 | overlayComponent: ?ReactClass, 26 | navigationSubtree: ?Array, 27 | navigationState: EnhancedNavigationRoute, 28 | createElement: Function, 29 | router: Object, 30 | }; 31 | 32 | class TabsRouteView extends Component { 33 | 34 | static propTypes = { 35 | path: PropTypes.string.isRequired, 36 | type: PropTypes.string.isRequired, 37 | component: PropTypes.any.isRequired, 38 | overlayComponent: PropTypes.any, 39 | navigationSubtree: PropTypes.arrayOf(PropTypes.object), 40 | navigationState: PropTypes.object, 41 | createElement: PropTypes.func.isRequired, 42 | router: PropTypes.object.isRequired, 43 | }; 44 | 45 | componentWillMount(): void { 46 | (this: any).renderTransition = this.renderTransition.bind(this); 47 | (this: any).renderScene = this.renderScene.bind(this); 48 | (this: any).renderOverlay = this.renderOverlay.bind(this); 49 | (this: any).renderCardScene = this.renderCardScene.bind(this); 50 | } 51 | 52 | renderOverlay(props: Object): ?ReactElement { 53 | const { scene } = props; 54 | 55 | const { navigationSubtree, createElement } = this.props; 56 | if (!navigationSubtree) { 57 | return null; 58 | } 59 | 60 | const navigationalElement = navigationSubtree.find( 61 | child => child.props.path === scene.route.path 62 | ); 63 | 64 | if (!navigationalElement) { 65 | warnOutOfSync('Cannot render overlay', scene.route.path); 66 | return null; 67 | } 68 | 69 | const overlayComponent = navigationalElement.props.overlayComponent; 70 | if (overlayComponent) { 71 | const { location, params, routeParams } = scene.route; 72 | 73 | const overlayComponentProps = { 74 | ...props, 75 | location, 76 | params, 77 | routeParams, 78 | }; 79 | 80 | return createElement(overlayComponent, overlayComponentProps); 81 | } 82 | 83 | return null; 84 | } 85 | 86 | renderScene(props: Object): ?ReactElement { 87 | const { scene } = props; 88 | 89 | if (!scene.route) { 90 | return null; 91 | } 92 | 93 | const { transition: parentTransition } = props.navigationState; 94 | const { 95 | transition: sceneTransition, 96 | onSwipeBack, 97 | onSwipeForward, 98 | } = scene.route; 99 | 100 | const transition = sceneTransition || parentTransition; 101 | 102 | const { 103 | styleInterpolator, 104 | panResponder, 105 | } = transitionRegistry[transition]; 106 | 107 | const { 108 | router, 109 | } = this.props; 110 | 111 | const viewStyle = styleInterpolator(props); 112 | const panHandlers = panResponder({ 113 | ...props, 114 | onNavigateBack: () => onSwipeBack && onSwipeBack(router), 115 | onNavigateForward: () => onSwipeForward && onSwipeForward(router), 116 | }); 117 | 118 | const navigationCardProps = { 119 | key: scene.route.key, 120 | style: [viewStyle, styles.navigationCard], 121 | panHandlers, 122 | ...props, 123 | renderScene: this.renderCardScene, 124 | }; 125 | 126 | return React.createElement(NavigationCard, navigationCardProps); 127 | } 128 | 129 | renderCardScene(props: Object): ?ReactElement { 130 | const { scene } = props; 131 | 132 | const { navigationSubtree } = this.props; 133 | if (!navigationSubtree) { 134 | return null; 135 | } 136 | 137 | const pseudoElement = navigationSubtree.find( 138 | child => child.props.path === scene.route.path 139 | ); 140 | 141 | if (!pseudoElement) { 142 | warnOutOfSync('Cannot render card', scene.route.path); 143 | return null; 144 | } 145 | 146 | const { routeViewComponent, props: routeViewComponentProps } = pseudoElement; 147 | 148 | return React.createElement( 149 | routeViewComponent, 150 | { 151 | ...routeViewComponentProps, 152 | navigationState: scene.route, 153 | } 154 | ); 155 | } 156 | 157 | renderTransition(props: NavigationTransitionProps): ReactElement { 158 | const overlay = this.renderOverlay({ 159 | ...props, 160 | scene: props.scene, 161 | }); 162 | 163 | const scenes = props.scenes.map( 164 | scene => this.renderScene({ 165 | ...props, 166 | scene, 167 | }) 168 | ); 169 | 170 | return ( 171 | 174 | 177 | {scenes} 178 | 179 | {overlay} 180 | 181 | ); 182 | } 183 | 184 | render(): ReactElement { 185 | const { 186 | navigationSubtree, 187 | navigationState, 188 | component, 189 | createElement, 190 | } = this.props; 191 | 192 | const { 193 | routes, 194 | params, 195 | routeParams, 196 | location, 197 | transition, 198 | } = navigationState; 199 | 200 | const { 201 | configureTransition, 202 | applyAnimation, 203 | } = transitionRegistry[transition]; 204 | 205 | // Create NavigationTransitioner for handling nested routes 206 | let transitioner; 207 | if (navigationSubtree && routes && routes.length > 0) { 208 | const transitionerProps = { 209 | configureTransition, 210 | applyAnimation, 211 | style: styles.wrapper, 212 | navigationState, 213 | render: this.renderTransition, 214 | }; 215 | 216 | transitioner = React.createElement(NavigationTransitioner, transitionerProps); 217 | } 218 | 219 | const componentProps = { 220 | params, 221 | routeParams, 222 | location, 223 | children: transitioner, 224 | }; 225 | 226 | return createElement(component, componentProps); 227 | } 228 | } 229 | 230 | export default withRouter(TabsRouteView); 231 | -------------------------------------------------------------------------------- /modules/TypeDefinition.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | import { Animated } from 'react-native'; 3 | 4 | export type { 5 | NavigationTransitionProps, 6 | NavigationSceneRendererProps, 7 | } from 'react-native/Libraries/NavigationExperimental/NavigationTypeDefinition'; 8 | 9 | export type RouteType = '' | '' | ''; 10 | 11 | export type AnimatedValue = Animated.Value; 12 | 13 | export type Location = { 14 | action: string, 15 | hash: string, 16 | key: string, 17 | pathName: string, 18 | query: Object, 19 | search: string, 20 | state: Object, 21 | }; 22 | 23 | export type EnhancedNavigationRoute = { 24 | key: string, 25 | index: number, 26 | routes: Array, 27 | type: string, 28 | path: string, 29 | location: Location, 30 | params: Object, 31 | routeParams: Object, 32 | transition: ?string, 33 | reducer: Function, 34 | onSwipeBack: ?Function, 35 | onSwipeForward: ?Function, 36 | }; 37 | 38 | export type IndexRouteDef = { 39 | component: Function, 40 | overlayComponent: ?Function, 41 | }; 42 | 43 | export type RouteDef = { 44 | childRoutes: ?Array, 45 | component: Function, 46 | indexRoute: ?IndexRouteDef, 47 | overlayComponent: ?Function, 48 | path: ?string, 49 | routeType: ?RouteType, 50 | transition: ?string, 51 | reducer: Function, 52 | onSwipeBack: ?Function, 53 | onSwipeForward: ?Function, 54 | }; 55 | 56 | export type NoPathRouteDef = { 57 | childRoutes: Array, 58 | component: Function, 59 | overlayComponent: ?Function, 60 | routeType: RouteType, 61 | }; 62 | 63 | export type ElementProvider = (component: ReactClass, props: any) => ?ReactElement; 64 | 65 | export type NavigationAction = { 66 | type: string, 67 | routes: Array, 68 | location: Location, 69 | params: Object, 70 | nextNavigationState: EnhancedNavigationRoute, 71 | } 72 | 73 | export type Snapshot = EnhancedNavigationRoute; 74 | 75 | export type PseudoElement = { 76 | routeViewComponent: Object, 77 | props: Object, 78 | }; 79 | -------------------------------------------------------------------------------- /modules/createMemoryHistory.js: -------------------------------------------------------------------------------- 1 | import useQueries from 'history/lib/useQueries'; 2 | import useBasename from 'history/lib/useBasename'; 3 | import baseCreateMemoryHistory from './history/createMemoryHistory'; 4 | 5 | export default function createMemoryHistory(options) { 6 | // signatures and type checking differ between `useQueries` and 7 | // `createMemoryHistory`, have to create `memoryHistory` first because 8 | // `useQueries` doesn't understand the signature 9 | const memoryHistory = baseCreateMemoryHistory(options); 10 | const createHistory = () => memoryHistory; 11 | const history = useQueries(useBasename(createHistory))(options); 12 | return history; 13 | } 14 | -------------------------------------------------------------------------------- /modules/history/createMemoryHistory.js: -------------------------------------------------------------------------------- 1 | import invariant from 'invariant'; 2 | import warning from 'warning'; 3 | import { createLocation } from 'history/lib/LocationUtils'; 4 | import { createPath, parsePath } from 'history/lib/PathUtils'; 5 | import { POP } from 'history/lib/Actions'; 6 | import createHistory from 'history/lib/createHistory'; 7 | 8 | const createStateStorage = (entries) => 9 | entries 10 | .filter(entry => entry.state) 11 | .reduce((memo, entry) => { 12 | /* eslint-disable no-param-reassign */ 13 | memo[entry.key] = entry.state; 14 | /* eslint-enable */ 15 | return memo; 16 | }, {}); 17 | 18 | const createMemoryHistory = (opts = {}) => { 19 | let options = opts; 20 | 21 | if (Array.isArray(options)) { 22 | options = { entries: options }; 23 | } else if (typeof options === 'string') { 24 | options = { entries: [options] }; 25 | } 26 | 27 | let { entries, current } = options; 28 | 29 | const storage = createStateStorage(entries); 30 | 31 | const saveState = (key, state) => { 32 | storage[key] = state; 33 | }; 34 | 35 | const readState = (key) => storage[key]; 36 | 37 | const getCurrentLocation = () => { 38 | const entry = entries[current]; 39 | const path = createPath(entry); 40 | 41 | let key; 42 | let state; 43 | 44 | if (entry.key) { 45 | key = entry.key; 46 | state = readState(key); 47 | } 48 | 49 | const init = parsePath(path); 50 | 51 | return createLocation({ ...init, state }, undefined, key); 52 | }; 53 | 54 | const canGo = (n) => { 55 | const index = current + n; 56 | return index >= 0 && index < entries.length; 57 | }; 58 | 59 | const go = (n) => { 60 | if (!n) { 61 | return; 62 | } 63 | 64 | if (!canGo(n)) { 65 | warning( 66 | false, 67 | 'Cannot go(%s) there is not enough history', 68 | n 69 | ); 70 | 71 | return; 72 | } 73 | 74 | current += n; 75 | const currentLocation = getCurrentLocation(); 76 | 77 | // Change action to POP 78 | /* eslint-disable no-use-before-define */ 79 | history.transitionTo({ ...currentLocation, action: POP }); 80 | /* eslint-enable */ 81 | }; 82 | 83 | const pushLocation = (location) => { 84 | current += 1; 85 | 86 | if (current < entries.length) { 87 | entries.splice(current); 88 | } 89 | 90 | entries.push(location); 91 | 92 | saveState(location.key, location.state); 93 | }; 94 | 95 | const replaceLocation = (location) => { 96 | entries[current] = location; 97 | saveState(location.key, location.state); 98 | }; 99 | 100 | const history = createHistory({ 101 | ...options, 102 | getCurrentLocation, 103 | pushLocation, 104 | replaceLocation, 105 | go, 106 | }); 107 | 108 | if (typeof entries === 'string') { 109 | entries = [entries]; 110 | } else if (!Array.isArray(entries)) { 111 | entries = ['/']; 112 | } 113 | 114 | entries = entries.map(entry => createLocation(entry)); 115 | 116 | if (current == null) { 117 | current = entries.length - 1; 118 | } else { 119 | invariant( 120 | current >= 0 && current < entries.length, 121 | 'Current index must be >= 0 and < %s, was %s', 122 | entries.length, current 123 | ); 124 | } 125 | 126 | return history; 127 | }; 128 | 129 | export default createMemoryHistory; 130 | -------------------------------------------------------------------------------- /modules/index.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | /* components */ 4 | import Back from './Back'; 5 | import IndexLink from './IndexLink'; 6 | import Link from './Link'; 7 | import Pop from './Pop'; 8 | import Router from './Router'; 9 | import withRouter from './withRouter'; 10 | 11 | /* components (configuration) */ 12 | import IndexRoute from './IndexRoute'; 13 | import Route from './Route'; 14 | import StackRoute from './StackRoute'; 15 | import TabsRoute from './TabsRoute'; 16 | 17 | /* components (NavigationExperimental) */ 18 | import Header from './Header'; 19 | import { 20 | AnimatedHeader, 21 | AnimatedHeaderTitle, 22 | } from './NavigationExperimental'; 23 | 24 | /* utils */ 25 | import { render } from './render'; 26 | import Reducer from './Reducer'; 27 | import RouterContext from './RouterContext'; 28 | import transitionRegistry from './transitionRegistry'; 29 | 30 | /* histories */ 31 | import nativeHistory from './nativeHistory'; 32 | 33 | export { 34 | Back, 35 | IndexLink, 36 | Link, 37 | Pop, 38 | Router, 39 | withRouter, 40 | IndexRoute, 41 | Route, 42 | StackRoute, 43 | TabsRoute, 44 | Header, 45 | AnimatedHeader, 46 | AnimatedHeaderTitle, 47 | Reducer, 48 | render, 49 | RouterContext, 50 | nativeHistory, 51 | transitionRegistry, 52 | }; 53 | -------------------------------------------------------------------------------- /modules/nativeHistory.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | import { Actions } from 'history'; 3 | 4 | import { 5 | canPopActiveStack, 6 | getActiveParentRouteType, 7 | } from './ReducerUtils'; 8 | import createMemoryHistory from './createMemoryHistory'; 9 | import { RouteTypes } from './RouteUtils'; 10 | 11 | const { STACK_ROUTE } = RouteTypes; 12 | 13 | const { 14 | PUSH: HISTORY_PUSH, 15 | REPLACE: HISTORY_REPLACE, 16 | } = Actions; 17 | 18 | let routerState = null; 19 | 20 | const useNavState = (createHistory: Function) => (options = {}) => { 21 | const { 22 | transitionTo: baseTransitionTo, 23 | ...history 24 | } = createHistory(options); 25 | 26 | const pop = (n = -1): boolean => { 27 | if (!routerState) { 28 | return false; 29 | } 30 | 31 | const { 32 | navigationState, 33 | } = routerState; 34 | 35 | if (!n || n > -1) { 36 | return false; 37 | } 38 | 39 | const prevLocation = canPopActiveStack(n, navigationState); 40 | 41 | if (prevLocation) { 42 | // FIXME move `stateKey` management into `history/nativeHistory` 43 | const stateKey = prevLocation.state ? prevLocation.state.stateKey : 0; 44 | const location = history.createLocation(history.createPath(prevLocation), HISTORY_PUSH); 45 | location.state = { stateKey }; 46 | 47 | baseTransitionTo(location); 48 | return true; 49 | } 50 | 51 | return false; 52 | }; 53 | 54 | const transitionTo = (nextLocation) => { 55 | // History API treats HISTORY_PUSH to current path like HISTORY_REPLACE to be consistent with 56 | // browser behavior. (mjackson/history/blob/v2.0.1/modules/createHistory.js#L126) This is not 57 | // reasonable when performing `router.pop()` on . A unique stateKey is needed for 58 | // each `location` to: 59 | // 1. bust the default 'HISTORY_REPLACE' behavior, 60 | // 2. location objects that are passed to reducer during a `pop` needs a stateKey to be able to 61 | // use a previous state for the newly HISTORY_PUSH'ed pointer to an older scene, 62 | // 3. History needs a unique `location.key` for each location entry. So cannot be used as 63 | // stateKey. 64 | const location = nextLocation; 65 | const stateKey = history.createKey(); 66 | location.state = { ...location.state, stateKey }; 67 | 68 | // e.g `transitionTo` is invoked via transition hooks 69 | // TODO Normalize history behavior to remove $routerReplace 70 | if (location.action === HISTORY_REPLACE) { 71 | location.state = { ...location.state, $routerReplace: true }; 72 | } 73 | 74 | if (routerState && location.action === HISTORY_PUSH) { 75 | const { 76 | location: currentLocation, 77 | routes: currentRoutes, 78 | } = routerState; 79 | 80 | const currentPath = history.createPath(currentLocation); 81 | const nextPath = history.createPath(location); 82 | const currentStateKey = currentLocation.state ? currentLocation.state.stateKey : 0; 83 | const nextStateKey = location.state.stateKey; 84 | 85 | if (currentPath === nextPath && currentStateKey !== nextStateKey) { 86 | const activeRouteType = getActiveParentRouteType(currentRoutes); 87 | 88 | if (activeRouteType !== STACK_ROUTE) { 89 | location.action = HISTORY_REPLACE; 90 | } 91 | } 92 | } 93 | 94 | baseTransitionTo(location); 95 | }; 96 | 97 | const push = (input) => 98 | transitionTo(history.createLocation(input, HISTORY_PUSH)); 99 | 100 | const replace = (input) => 101 | transitionTo(history.createLocation(input, HISTORY_REPLACE)); 102 | 103 | const syncRouterState = (state) => { 104 | routerState = state; 105 | }; 106 | 107 | return { 108 | ...history, 109 | transitionTo, 110 | pop, 111 | push, 112 | replace, 113 | syncRouterState, 114 | }; 115 | }; 116 | 117 | const rootEntry = { pathname: '/' }; 118 | const entries = [rootEntry]; 119 | const nativeHistory = useNavState(createMemoryHistory)({ entries }); 120 | 121 | export default nativeHistory; 122 | -------------------------------------------------------------------------------- /modules/render.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import { Component } from 'react'; 4 | import { AppRegistry } from 'react-native'; 5 | 6 | /* eslint-disable import/prefer-default-export */ 7 | export const render = (component: ReactElement, appKey: string = 'App'): void => { 8 | /* eslint-enable */ 9 | AppRegistry.registerComponent(appKey, (): ReactClass => 10 | class extends Component { 11 | render(): ReactElement { 12 | return component; 13 | } 14 | }); 15 | }; 16 | -------------------------------------------------------------------------------- /modules/styles.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import { StyleSheet, Dimensions } from 'react-native'; 4 | 5 | export const BTN_UNDERLAY_COLOR = '#E1E2E1'; 6 | export const ADDDRESS_BAR_HEIGHT = 70; 7 | export const ADDDRESS_BAR_ROW_HEIGHT = 30; 8 | 9 | const { width } = Dimensions.get('window'); 10 | 11 | const { absoluteFillObject } = StyleSheet; 12 | 13 | // Used across all navigational components i.e StackRouteView 14 | const globalStyles = StyleSheet.create({ 15 | wrapper: { 16 | flex: 1, 17 | }, 18 | wrapperReverse: { 19 | flex: 1, 20 | // Header is physically rendered after scenes so that Header won't be 21 | // covered by the shadows of the scenes. 22 | // That said, we'd have use `flexDirection: 'column-reverse'` to move 23 | // Header above the scenes. 24 | flexDirection: 'column-reverse', 25 | }, 26 | navigationCard: { 27 | ...absoluteFillObject, 28 | overflow: 'hidden', 29 | }, 30 | }); 31 | 32 | const addressBarStyles = StyleSheet.create({ 33 | wrapper: { 34 | backgroundColor: 'transparent', 35 | bottom: 0, 36 | left: 0, 37 | position: 'absolute', 38 | right: 0, 39 | top: -ADDDRESS_BAR_HEIGHT, 40 | }, 41 | addressBar: { 42 | alignItems: 'center', 43 | backgroundColor: BTN_UNDERLAY_COLOR, 44 | flexDirection: 'row', 45 | height: ADDDRESS_BAR_HEIGHT, 46 | justifyContent: 'center', 47 | left: 0, 48 | paddingTop: 18, 49 | position: 'absolute', 50 | right: 0, 51 | top: 0, 52 | }, 53 | field: { 54 | alignSelf: 'center', 55 | backgroundColor: '#FFFFFF', 56 | borderColor: '#C1C2C2', 57 | borderRadius: 2, 58 | borderWidth: 1, 59 | flex: 1, 60 | fontSize: 18, 61 | height: 40, 62 | marginLeft: 6, 63 | padding: 4, 64 | }, 65 | forwardBtn: { 66 | alignItems: 'center', 67 | width: 34, 68 | }, 69 | forwardBtnText: { 70 | color: '#585858', 71 | fontSize: 20, 72 | marginTop: 6, 73 | }, 74 | forwardBtnTextDisabled: { 75 | color: '#C1C2C2', 76 | }, 77 | backBtn: { 78 | alignItems: 'center', 79 | marginLeft: 6, 80 | width: 34, 81 | }, 82 | backBtnText: { 83 | color: '#585858', 84 | fontSize: 20, 85 | transform: [{ rotate: '180deg' }], 86 | }, 87 | backBtnTextDisabled: { 88 | color: '#C1C2C2', 89 | }, 90 | docsLink: { 91 | color: '#585858', 92 | fontSize: 16, 93 | textAlign: 'center', 94 | width: 60, 95 | }, 96 | }); 97 | 98 | const addressBarHistoryStyles = StyleSheet.create({ 99 | container: { 100 | ...absoluteFillObject, 101 | }, 102 | backdrop: { 103 | ...absoluteFillObject, 104 | }, 105 | listViewWrapper: { 106 | backgroundColor: '#FFFFFF', 107 | marginBottom: 20, 108 | marginLeft: 4, 109 | marginTop: ADDDRESS_BAR_HEIGHT - 2, 110 | position: 'absolute', 111 | shadowColor: '#929292', 112 | shadowOffset: { width: 0, height: 0 }, 113 | shadowOpacity: 1, 114 | shadowRadius: 2, 115 | width: Math.max(width * 0.60, 180), 116 | }, 117 | listView: { 118 | flex: 1, 119 | }, 120 | listViewContent: { 121 | }, 122 | row: { 123 | height: ADDDRESS_BAR_ROW_HEIGHT, 124 | lineHeight: 24, 125 | paddingLeft: 10, 126 | }, 127 | }); 128 | 129 | export { globalStyles, addressBarStyles, addressBarHistoryStyles }; 130 | -------------------------------------------------------------------------------- /modules/transitionRegistry.js: -------------------------------------------------------------------------------- 1 | import { 2 | Animated, 3 | Easing, 4 | NativeModules, 5 | NavigationExperimental, 6 | Platform, 7 | } from 'react-native'; 8 | import invariant from 'invariant'; 9 | import { warnOnce } from './warningUtil'; 10 | 11 | const { 12 | Card: NavigationCard, 13 | } = NavigationExperimental; 14 | 15 | const { 16 | PagerStyleInterpolator: NavigationPagerStyleInterpolator, 17 | CardStackStyleInterpolator: NavigationCardStackStyleInterpolator, 18 | CardStackPanResponder: NavigationCardStackPanResponder, 19 | } = NavigationCard; 20 | 21 | const transitionRegistry = {}; 22 | 23 | const hasNativeDriver = !!NativeModules.NativeAnimatedModule; 24 | 25 | // FIXME `Animated.setValue` via NativeAnimated for iOS is buggy and causes 26 | // panResponders to fail. 27 | // Also See facebook/react-native#9729 28 | const useNativeDriver = Platform.OS === 'android' ? hasNativeDriver : false; 29 | 30 | const defaultTransitionSpec = { 31 | duration: 250, 32 | easing: Easing.inOut(Easing.ease), 33 | timing: Animated.timing, 34 | useNativeDriver, 35 | }; 36 | 37 | function configureDefaultTransition() { 38 | warnOnce( 39 | Platform.OS === 'ios' || useNativeDriver, 40 | 'Native animated module is not available. You may experience performance issues ' + 41 | 'with transition animations since they will be performed on the JavaScript thread.' 42 | ); 43 | return defaultTransitionSpec; 44 | } 45 | 46 | const noAnimation = (value, config) => ({ 47 | start(callback) { 48 | value.setValue(config.toValue); 49 | 50 | const result = { 51 | finished: true, 52 | }; 53 | 54 | if (callback) { 55 | callback(result); 56 | } 57 | }, 58 | stop: () => { 59 | value.stopAnimation(); 60 | }, 61 | }); 62 | 63 | function configureSkipTransition() { 64 | return { 65 | duration: undefined, 66 | easing: undefined, 67 | timing: noAnimation, 68 | }; 69 | } 70 | 71 | const noPanResponder = () => null; 72 | 73 | export function addHandler( 74 | key: string, 75 | styleInterpolator: Function, 76 | panResponder: ?Function, 77 | configureCustomTransition: ?Function 78 | ): void { 79 | invariant( 80 | styleInterpolator, 81 | 'styleInterpolator is required for %s', 82 | `'${key}'` 83 | ); 84 | 85 | let configureTransition = configureCustomTransition || configureDefaultTransition; 86 | 87 | if (configureCustomTransition === null) { 88 | configureTransition = configureSkipTransition; 89 | } 90 | 91 | transitionRegistry[key] = { 92 | styleInterpolator, 93 | panResponder: panResponder || noPanResponder, 94 | configureTransition, 95 | }; 96 | } 97 | 98 | export const VERTICAL_CARD_STACK = 'vertical-card-stack'; 99 | export const HORIZONTAL_CARD_STACK = 'horizontal-card-stack'; 100 | export const HORIZONTAL_PAGER = 'horizontal-pager'; 101 | export const NONE = 'none'; 102 | 103 | addHandler( 104 | VERTICAL_CARD_STACK, 105 | NavigationCardStackStyleInterpolator.forVertical, 106 | NavigationCardStackPanResponder.forVertical 107 | ); 108 | 109 | addHandler( 110 | HORIZONTAL_CARD_STACK, 111 | NavigationCardStackStyleInterpolator.forHorizontal, 112 | NavigationCardStackPanResponder.forHorizontal, 113 | ); 114 | 115 | addHandler( 116 | HORIZONTAL_PAGER, 117 | NavigationPagerStyleInterpolator.forHorizontal, 118 | ); 119 | 120 | addHandler( 121 | NONE, 122 | NavigationCardStackStyleInterpolator.forHorizontal, 123 | null, 124 | null, 125 | ); 126 | 127 | export default transitionRegistry; 128 | -------------------------------------------------------------------------------- /modules/util.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | /* eslint-disable import/prefer-default-export */ 4 | export function isEmptyObject(object: Object) { 5 | /* eslint-enable */ 6 | for (const p in object) { // eslint-disable-line 7 | if (Object.prototype.hasOwnProperty.call(object, p)) { 8 | return false; 9 | } 10 | } 11 | return true; 12 | } 13 | -------------------------------------------------------------------------------- /modules/warningUtil.js: -------------------------------------------------------------------------------- 1 | import warning from 'warning'; 2 | import invariant from 'invariant'; 3 | 4 | const warned = {}; 5 | 6 | export function warnOutOfSync(context: string, path: string) { 7 | invariant( 8 | false, 9 | 'react-router-native Route configuration is out of sync with router state. %s at `%s`.', 10 | context, 11 | path 12 | ); 13 | } 14 | 15 | export function warnOnce(falseToWarn: boolean, message: string, ...args: Array) { 16 | if (warned[message]) { 17 | return; 18 | } 19 | 20 | warned[message] = true; 21 | warning(falseToWarn, `[react-router-native] ${message}`, ...args); 22 | } 23 | -------------------------------------------------------------------------------- /modules/withRouter.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import React, { PropTypes, Component } from 'react'; 4 | 5 | type Props = {}; 6 | 7 | type Context = { 8 | router: Object, 9 | }; 10 | 11 | export default (WrappedComponent: ReactClass) => ( 12 | class extends Component { 13 | 14 | static contextTypes = { 15 | router: PropTypes.object, 16 | }; 17 | 18 | constructor(props: Props, context: Context) { 19 | super(props); 20 | this.router = context.router; 21 | } 22 | 23 | router: Object; 24 | context: Context; 25 | props: Props; 26 | 27 | render() { 28 | const props = this.props; 29 | 30 | return ( 31 | 32 | ); 33 | } 34 | } 35 | ); 36 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-router-native", 3 | "version": "2.0.0-beta.0", 4 | "description": "A routing library for React Native that strives for sensible API parity with react-router", 5 | "main": "modules/index", 6 | "jsnext:main": "modules/index", 7 | "files": [ 8 | "*.md", 9 | "docs", 10 | "modules" 11 | ], 12 | "author": "Jake Murzy ", 13 | "license": "MIT", 14 | "homepage": "https://github.com/jmurzy/react-router-native", 15 | "tags": [ 16 | "react", 17 | "router", 18 | "native", 19 | "navigation" 20 | ], 21 | "keywords": [ 22 | "react", 23 | "react-router", 24 | "react-native", 25 | "react-router-native", 26 | "react-native-router", 27 | "native", 28 | "routing", 29 | "router", 30 | "navigator", 31 | "navigationexperimental", 32 | "navigation", 33 | "navigatorios", 34 | "ios", 35 | "andorid", 36 | "react-component" 37 | ], 38 | "contributors": [ 39 | { 40 | "name": "Jake Murzy", 41 | "email": "jake@murzy" 42 | } 43 | ], 44 | "engines": { 45 | "node": ">=4.0.0" 46 | }, 47 | "scripts": { 48 | "test": "npm run spec && npm run lint && npm run flow", 49 | "spec": "./node_modules/.bin/babel-node ./node_modules/.bin/gulp spec", 50 | "lint": "./node_modules/.bin/babel-node ./node_modules/.bin/gulp lint", 51 | "flow": "./node_modules/.bin/flow check", 52 | "watch": "./node_modules/.bin/babel-node ./node_modules/.bin/gulp watch" 53 | }, 54 | "repository": { 55 | "type": "git", 56 | "url": "https://github.com/jmurzy/react-router-native.git" 57 | }, 58 | "bugs": { 59 | "url": "https://github.com/jmurzy/react-router-native/issues" 60 | }, 61 | "peerDependencies": { 62 | "react-native": "0.36.0-rc.1" 63 | }, 64 | "dependencies": { 65 | "history": "3.2.1", 66 | "invariant": "^2.2.1", 67 | "react-router": "3.0.0-alpha.3", 68 | "warning": "^3.0.0" 69 | }, 70 | "devDependencies": { 71 | "babel-cli": "^6.10.1", 72 | "babel-core": "^6.8.0", 73 | "babel-eslint": "^7.0.0", 74 | "babel-polyfill": "^6.9.1", 75 | "babel-preset-react-native": "^1.9.0", 76 | "chai": "^3.5.0", 77 | "eslint": "^3.0.1", 78 | "eslint-config-airbnb": "^12.0.0", 79 | "eslint-plugin-flowtype": "^2.3.0", 80 | "eslint-plugin-import": "^2.0.1", 81 | "eslint-plugin-jsx-a11y": "^2.2.1", 82 | "eslint-plugin-react": "^6.2.0", 83 | "flow-bin": "^0.33.0", 84 | "gulp": "^3.9.1", 85 | "gulp-eslint": "^3.0.1", 86 | "gulp-mocha": "^3.0.1", 87 | "react": "~15.3.1", 88 | "react-native": "0.36.0-rc.1", 89 | "react-native-mock": "^0.2.5", 90 | "react-router": "3.0.0-alpha.3", 91 | "rimraf": "^2.5.2", 92 | "run-sequence": "^1.2.2" 93 | } 94 | } 95 | -------------------------------------------------------------------------------- /spec/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "mocha": true 4 | }, 5 | "rules": { 6 | "react/prop-types": 0 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /spec/sanityCheck.spec.js: -------------------------------------------------------------------------------- 1 | import { expect } from 'chai'; 2 | 3 | describe('test', () => { 4 | it('should pass sanity check', () => { 5 | expect(true).to.equal(true); 6 | }); 7 | }); 8 | -------------------------------------------------------------------------------- /spec/util.spec.js: -------------------------------------------------------------------------------- 1 | import { expect } from 'chai'; 2 | import { isEmptyObject } from '../modules/util'; 3 | 4 | describe('utils', () => { 5 | it('isEmptyObject should return true for empty objects', () => { 6 | const isEmpty = isEmptyObject({}); 7 | expect(isEmpty).to.equal(true); 8 | }); 9 | 10 | it('isEmptyObject should return false for non-empty objects', () => { 11 | const isEmpty = isEmptyObject({ key: 'value' }); 12 | expect(isEmpty).to.equal(false); 13 | }); 14 | }); 15 | --------------------------------------------------------------------------------