├── .babelrc.js ├── .circleci └── config.yml ├── .codeclimate.yml ├── .editorconfig ├── .eslintrc.js ├── .github └── ISSUE_TEMPLATE.md ├── .github_changelog_generator ├── .gitignore ├── .npmignore ├── .prettierrc ├── .travis.yml ├── CHANGELOG.md ├── CONTRIBUTING.md ├── HISTORY.md ├── LICENSE ├── README.md ├── README2.md ├── README3.md ├── __tests__ └── scenes.test.js ├── babel.config.js ├── docs ├── API.md ├── CHANGELOG.md ├── MIGRATION.md ├── _config.yml ├── _layouts │ └── default.html ├── assets │ └── css │ │ └── style.scss ├── index.md └── v3 │ ├── API_CONFIGURATION.md │ ├── DETAILED_EXAMPLE.md │ ├── MIGRATION.md │ ├── MINI_TUTORIAL.md │ ├── OTHER_INFO.md │ ├── REDUX_FLUX.md │ └── super_simple.gif ├── examples ├── expo │ ├── .babelrc │ ├── .eslintrc │ ├── .gitignore │ ├── .prettierrc │ ├── .watchmanconfig │ ├── App.js │ ├── __tests__ │ │ └── App-test.js │ ├── app.json │ ├── assets │ │ ├── fonts │ │ │ └── SpaceMono-Regular.ttf │ │ └── images │ │ │ ├── icon.png │ │ │ ├── robot-dev.png │ │ │ ├── robot-prod.png │ │ │ └── splash.png │ ├── components │ │ ├── DrawerContent.js │ │ ├── MenuIcon.js │ │ ├── StyledText.js │ │ ├── TabBarIcon.js │ │ └── __tests__ │ │ │ └── StyledText-test.js │ ├── constants │ │ ├── Colors.js │ │ └── Layout.js │ ├── navigation │ │ └── AppNavigator.js │ ├── package.json │ ├── screens │ │ ├── HomeScreen.js │ │ ├── LinksScreen.js │ │ └── SettingsScreen.js │ └── yarn.lock ├── react-native │ ├── .buckconfig │ ├── .eslintrc.js │ ├── .flowconfig │ ├── .gitattributes │ ├── .gitignore │ ├── .npmignore │ ├── .prettierrc.js │ ├── .watchmanconfig │ ├── App.js │ ├── __tests__ │ │ └── App-test.js │ ├── android │ │ ├── app │ │ │ ├── BUCK │ │ │ ├── build.gradle │ │ │ ├── build_defs.bzl │ │ │ ├── debug.keystore │ │ │ ├── proguard-rules.pro │ │ │ └── src │ │ │ │ ├── debug │ │ │ │ ├── AndroidManifest.xml │ │ │ │ └── java │ │ │ │ │ └── com │ │ │ │ │ └── example │ │ │ │ │ └── ReactNativeFlipper.java │ │ │ │ └── main │ │ │ │ ├── AndroidManifest.xml │ │ │ │ ├── java │ │ │ │ └── com │ │ │ │ │ └── example │ │ │ │ │ ├── MainActivity.java │ │ │ │ │ └── MainApplication.java │ │ │ │ └── res │ │ │ │ ├── mipmap-hdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-mdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xxhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xxxhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ └── values │ │ │ │ ├── strings.xml │ │ │ │ └── styles.xml │ │ ├── build.gradle │ │ ├── gradle.properties │ │ ├── gradle │ │ │ └── wrapper │ │ │ │ ├── gradle-wrapper.jar │ │ │ │ └── gradle-wrapper.properties │ │ ├── gradlew │ │ ├── gradlew.bat │ │ └── settings.gradle │ ├── app.json │ ├── babel.config.js │ ├── components │ │ ├── CustomNavBar.js │ │ ├── CustomNavBar2.js │ │ ├── CustomNavBarView.js │ │ ├── EchoView.js │ │ ├── Error.js │ │ ├── Home.js │ │ ├── Launch.js │ │ ├── Login.js │ │ ├── Login2.js │ │ ├── Login3.js │ │ ├── MessageBar.js │ │ ├── Register.js │ │ ├── TabIcon.js │ │ ├── TabView.js │ │ ├── drawer │ │ │ └── DrawerContent.js │ │ ├── lightbox │ │ │ ├── BaseLightbox.js │ │ │ └── DemoLightbox.js │ │ └── modal │ │ │ ├── BaseModal.js │ │ │ └── ErrorModal.js │ ├── images │ │ ├── back_chevron.png │ │ └── menu_burger.png │ ├── index.js │ ├── ios │ │ ├── Example-tvOS │ │ │ └── Info.plist │ │ ├── Example-tvOSTests │ │ │ └── Info.plist │ │ ├── Example.xcodeproj │ │ │ ├── project.pbxproj │ │ │ └── xcshareddata │ │ │ │ └── xcschemes │ │ │ │ ├── Example-tvOS.xcscheme │ │ │ │ └── Example.xcscheme │ │ ├── Example.xcworkspace │ │ │ ├── contents.xcworkspacedata │ │ │ └── xcshareddata │ │ │ │ └── IDEWorkspaceChecks.plist │ │ ├── Example │ │ │ ├── AppDelegate.h │ │ │ ├── AppDelegate.m │ │ │ ├── Base.lproj │ │ │ │ └── LaunchScreen.xib │ │ │ ├── Images.xcassets │ │ │ │ ├── AppIcon.appiconset │ │ │ │ │ └── Contents.json │ │ │ │ └── Contents.json │ │ │ ├── Info.plist │ │ │ ├── LaunchScreen.storyboard │ │ │ └── main.m │ │ ├── ExampleTests │ │ │ ├── ExampleTests.m │ │ │ └── Info.plist │ │ ├── Podfile │ │ └── Podfile.lock │ ├── metro.config.js │ ├── package.json │ └── yarn.lock └── redux │ ├── .buckconfig │ ├── .flowconfig │ ├── .gitattributes │ ├── .gitignore │ ├── .watchmanconfig │ ├── android │ ├── .project │ ├── .settings │ │ └── org.eclipse.buildship.core.prefs │ ├── app │ │ ├── BUCK │ │ ├── build.gradle │ │ ├── proguard-rules.pro │ │ └── src │ │ │ └── main │ │ │ ├── AndroidManifest.xml │ │ │ ├── java │ │ │ └── com │ │ │ │ └── rnrfreduxsample │ │ │ │ ├── MainActivity.java │ │ │ │ └── MainApplication.java │ │ │ └── res │ │ │ ├── mipmap-hdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-mdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xxhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xxxhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.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.json │ ├── babel.config.js │ ├── index.android.js │ ├── index.ios.js │ ├── ios │ ├── rnrfReduxSample-tvOS │ │ └── Info.plist │ ├── rnrfReduxSample-tvOSTests │ │ └── Info.plist │ ├── rnrfReduxSample.xcodeproj │ │ ├── project.pbxproj │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ ├── rnrfReduxSample-tvOS.xcscheme │ │ │ └── rnrfReduxSample.xcscheme │ ├── rnrfReduxSample │ │ ├── AppDelegate.h │ │ ├── AppDelegate.m │ │ ├── Base.lproj │ │ │ └── LaunchScreen.xib │ │ ├── Images.xcassets │ │ │ ├── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ │ └── Contents.json │ │ ├── Info.plist │ │ └── main.m │ └── rnrfReduxSampleTests │ │ ├── Info.plist │ │ └── rnrfReduxSampleTests.m │ ├── package.json │ ├── readme.md │ ├── src │ ├── a-reducer.js │ ├── app.js │ ├── home.js │ └── page.js │ └── yarn.lock ├── images ├── back_chevron.png └── menu_burger.png ├── index.d.ts ├── package.json ├── packages └── react-native-router-flux-cli │ ├── README.md │ ├── index.js │ ├── package.json │ └── yarn.lock ├── src ├── .watchmanconfig ├── ActionConst.js ├── Drawer.js ├── LegacyTabs.js ├── Lightbox.js ├── LightboxRenderer.js ├── Modal.js ├── NavBar.js ├── Overlay.js ├── OverlayRenderer.js ├── Reducer.js ├── Router.js ├── Scene.js ├── Stack.js ├── State.js ├── Store.js ├── Tabs.js ├── Util.js ├── createStackNavigatorHOC.js ├── createTabNavigatorHOC.js ├── defaultStore.js ├── index.js └── pathParser.js ├── test └── setup.js └── yarn.lock /.babelrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "extends": "./babel.config.js" 3 | }; 4 | -------------------------------------------------------------------------------- /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | jobs: 3 | build: 4 | working_directory: ~/react-native-router-flux 5 | docker: 6 | - image: circleci/node:10 7 | steps: 8 | - checkout 9 | - restore_cache: 10 | key: dependency-cache-{{ checksum "package.json" }} 11 | - run: 12 | name: install-dependencies 13 | command: yarn install --frozen-lockfile 14 | - save_cache: 15 | key: dependency-cache-{{ checksum "package.json" }} 16 | paths: 17 | - ~/.cache/yarn 18 | - run: 19 | name: test 20 | command: yarn test 21 | - run: 22 | name: linter 23 | command: yarn lint 24 | - run: 25 | name: install-dependencies react-native example 26 | command: yarn install --frozen-lockfile 27 | working_directory: ~/react-native-router-flux/examples/react-native 28 | - run: 29 | name: test react-native example 30 | command: yarn test 31 | working_directory: ~/react-native-router-flux/examples/react-native 32 | -------------------------------------------------------------------------------- /.codeclimate.yml: -------------------------------------------------------------------------------- 1 | engines: 2 | eslint: 3 | enabled: true 4 | channel: "eslint-2" 5 | ratings: 6 | paths: 7 | - "**.js" 8 | exclude_paths: 9 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | end_of_line = lf 6 | indent_size = 2 7 | indent_style = space 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: 'airbnb', 3 | plugins: ['react', 'jest'], 4 | env: { 5 | 'jest/globals': true, 6 | }, 7 | parser: 'babel-eslint', 8 | rules: { 9 | 'no-new-func': 'warn', 10 | 'jest/no-disabled-tests': 'warn', 11 | 'jest/no-focused-tests': 'error', 12 | 'jest/no-identical-title': 'error', 13 | 'jest/valid-expect': 'error', 14 | 15 | 'react/forbid-prop-types': 'warn', 16 | 'react/prop-types': 'off', 17 | 'react/require-default-props': 'off', 18 | 'react/no-unused-prop-types': 'off', 19 | 'no-param-reassign': 0, 20 | 'no-console': 0, 21 | 'new-cap': 0, 22 | 'no-underscore-dangle': 0, 23 | 'no-use-before-define': 0, 24 | 'max-len': ['error', 180], 25 | 'import/no-unresolved': [ 26 | 2, 27 | { 28 | ignore: ['^react$', '^react-native$', '^react-native/'], 29 | }, 30 | ], 31 | 'import/no-cycle': 'warn', 32 | 'import/no-self-import': 'warn', 33 | 'react/jsx-filename-extension': [ 34 | 1, 35 | { 36 | extensions: ['.js', '.jsx'], 37 | }, 38 | ], 39 | 'import/no-extraneous-dependencies': [ 40 | 'error', 41 | { 42 | devDependencies: true, 43 | }, 44 | ], 45 | 'no-bitwise': [ 46 | 'error', 47 | { 48 | allow: ['^'], 49 | }, 50 | ], 51 | 'no-restricted-syntax': ['error', 'ForInStatement', 'LabeledStatement', 'WithStatement'], 52 | }, 53 | settings: { 54 | 'import/resolver': { 55 | node: { 56 | extensions: ['.js', '.android.js', '.ios.js'], 57 | }, 58 | }, 59 | node: true, 60 | react: { 61 | version: '16.4.2', 62 | }, 63 | }, 64 | }; 65 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ### Version 2 | Tell us which versions you are using: 3 | 10 | - react-native-router-flux v4.?.? 11 | - react v16.?.? 12 | - react-native v0.?.? 13 | 14 | 30 | 31 | ### Expected behaviour 32 | 33 | 34 | 35 | ### Actual behaviour 36 | 37 | 38 | 39 | ### Steps to reproduce 40 | For non-obvious bugs, please fork this component, modify Example project to reproduce your issue and include link here. 41 | 1. 42 | 2. 43 | 3. 44 | 45 | ### Reproducible Demo 46 | 52 | Please provide a minimized reproducible demonstration of the problem you're reporting. 53 | 54 | Issues that come with minimal repro's are resolved much more quickly than issues where a maintainer has to reproduce themselves. 55 | 56 | 58 | -------------------------------------------------------------------------------- /.github_changelog_generator: -------------------------------------------------------------------------------- 1 | unreleased=true 2 | since-tag=4.0.0-beta.23 3 | exclude-labels=for stack overflow,invalid,wontfix 4 | -------------------------------------------------------------------------------- /.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 | .idea 28 | .gradle 29 | local.properties 30 | 31 | # node.js 32 | # 33 | node_modules/ 34 | *.log 35 | 36 | .vscode/ 37 | jsconfig.json -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | Example/ 2 | ReduxExample/ 3 | .idea/ 4 | examples/ 5 | .babelrc 6 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 180, 3 | "singleQuote": true, 4 | "semi": true, 5 | "bracketSpacing": true, 6 | "trailingComma": "all" 7 | } 8 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "6" 4 | os: 5 | - osx 6 | cache: 7 | - yarn 8 | - directories: 9 | - "$TRAVIS_BUILD_DIR/node_modules" 10 | - "$TRAVIS_BUILD_DIR/Example/node_modules" 11 | notifications: 12 | email: false 13 | branches: 14 | only: 15 | - master 16 | env: 17 | matrix: 18 | - TEST_SUITE=eslint CACHE_NAME=eslint 19 | - TEST_SUITE=lib-test CACHE_NAME=lib-test 20 | - TEST_SUITE=example-jest CACHE_NAME=example-jest 21 | before_install: 22 | - export YARN_GPG=no 23 | install: 24 | - curl -o- -L https://yarnpkg.com/install.sh | bash 25 | - export PATH=$HOME/.yarn/bin:$PATH 26 | - if [ $TEST_SUITE = example-jest ]; then cd Example && yarn && cd ..; fi 27 | - if [ $TEST_SUITE = eslint ] || [ $TEST_SUITE = lib-test ]; then yarn; fi 28 | before_script: 29 | - if [ $TEST_SUITE = example-jest ]; then rm -rf Example/node_modules/react-native-router-flux/node_modules; fi 30 | - if [ $TEST_SUITE = example-jest ]; then rm -rf Example/node_modules/react-native-router-flux/Example; fi 31 | - if [ $TEST_SUITE = example-jest ]; then cp -r src/ Example/node_modules/react-native-router-flux/src/; fi 32 | script: 33 | - if [ $TEST_SUITE = eslint ]; then node node_modules/.bin/eslint index.js src/ _tests__/; fi 34 | - if [ $TEST_SUITE = lib-test ]; then yarn test; fi 35 | - if [ $TEST_SUITE = example-jest ]; then cd Example && yarn run jest && cd ..; fi 36 | before_cache: 37 | - if [ $TEST_SUITE = example-jest ]; then rm -rf Example/node_modules/react-native-router-flux/src; fi 38 | addons: 39 | code_climate: 40 | repo_token: a2bf832968783c93c977e25624e038120a559ffda488f5c76ec1c304e80a9c6e 41 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contribute 2 | 3 | ## Introduction 4 | 5 | First, thank you for considering contributing to react-native-router-flux! It's people like you that make the open source community such a great community! 😊 6 | 7 | We welcome any type of contribution, not only code. You can help with 8 | - **QA**: file bug reports, the more details you can give the better (e.g. screenshots with the console open) 9 | - **Marketing**: writing blog posts, howto's, printing stickers, ... 10 | - **Community**: presenting the project at meetups, organizing a dedicated meetup for the local community, ... 11 | - **Code**: take a look at the [open issues](https://github.com/aksonov/react-native-router-flux/issues?q=is%3Aopen+is%3Aissue). Even if you can't write code, commenting on them, showing that you care about a given issue matters. It helps us triage them. To get started you can also [sign up to triage react-native-router-flux issues on CodeTriage](https://www.codetriage.com/aksonov/react-native-router-flux). 12 | - **Money**: we welcome financial contributions in full transparency on our [open collective](https://opencollective.com/react-native-router-flux). 13 | 14 | ## Your First Contribution 15 | 16 | Working on your first Pull Request? You can learn how from this *free* series, [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github). 17 | 18 | ## Submitting code 19 | 20 | Any code change should be submitted as a pull request. The description should explain what the code does and give steps to execute it. The pull request should also contain tests. 21 | 22 | ## Code review process 23 | 24 | The bigger the pull request, the longer it will take to review and merge. Try to break down large pull requests in smaller chunks that are easier to review and merge. 25 | It is also always helpful to have some context for your pull request. What was the purpose? Why does it matter to you? 26 | 27 | ## Financial contributions 28 | 29 | We also welcome financial contributions in full transparency on our [open collective](https://opencollective.com/react-native-router-flux). 30 | Anyone can file an expense. If the expense makes sense for the development of the community, it will be "merged" in the ledger of our open collective by the core contributors and the person who filed the expense will be reimbursed. 31 | 32 | ## Questions 33 | 34 | If you have any questions, create an [issue](issue) (protip: do a quick search first to see if someone else didn't ask the same question before!). 35 | You can also reach us at hello@react-native-router-flux.opencollective.com. 36 | 37 | ## Credits 38 | 39 | ### Contributors 40 | 41 | Thank you to all the people who have already contributed to react-native-router-flux! 42 | 43 | 44 | 45 | ### Backers 46 | 47 | Thank you to all our backers! [[Become a backer](https://opencollective.com/react-native-router-flux#backer)] 48 | 49 | 50 | 51 | 52 | ### Sponsors 53 | 54 | Thank you to all our sponsors! (please ask your company to also support this open source project by [becoming a sponsor](https://opencollective.com/react-native-router-flux#sponsor)) 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2015-2017 aksonov 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 | -------------------------------------------------------------------------------- /__tests__/scenes.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Text } from 'react-native'; 3 | 4 | // Note: test renderer must be required after react-native. 5 | import renderer from 'react-test-renderer'; 6 | import Router from '../src/Router'; 7 | import Scene from '../src/Scene'; 8 | import NavigationStore from '../src/Store'; 9 | 10 | const B = () => Hello world!; 11 | const router = ( 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | ); 21 | 22 | test('renders correctly', (done) => { 23 | // TODO: fix react-native-gesture-handler error 24 | // renderer.create(router); 25 | // console.log('STATE:', JSON.stringify(navigationStore.state)); 26 | // navigationStore.c({ data: 'abc' }); 27 | // navigationStore.refresh({ data: 'abcde' }); 28 | // console.log('STATE:', JSON.stringify(navigationStore.state)); 29 | // navigationStore.pop(); 30 | // console.log('STATE:', JSON.stringify(navigationStore.state)); 31 | // navigationStore.refresh({ a: 3 }); 32 | // console.log('STATE:', JSON.stringify(navigationStore.state)); 33 | // navigationStore.popTo('NOT_A_REAL_SCENE'); 34 | // console.log('STATE:', JSON.stringify(navigationStore.state)); 35 | done(); 36 | }); 37 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "presets": [ 3 | "babel-preset-react-native" 4 | ], 5 | "plugins": [ 6 | ["@babel/plugin-proposal-decorators", { "legacy": true }] 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /docs/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change log 2 | - 3.26.22 Pass DefaultRenderer props to underlying scene component 3 | - 3.26.21 Added onBack, hideBackImage properties 4 | - 3.26.20 Support for 'modifier' functions inside Refresh actions, like `Actions.refresh({ key: 'drawer', open: value=>!value })` 5 | - 3.26.0 Support for React Native 0.26 6 | - 3.22.20 fix more ESLint errors, fix passing leftButtonStyle property for back button 7 | - 3.22.18 fix some ESLint errors and ignore pop for root scene 8 | - 3.22.17 allow jump & push together - now you could call Actions.tab2_2() (`tab2_2` is next scene after `tab2`) even if `tab2` is not active 9 | - 3.22.16 simplified syntax for sub-states 10 | - 3.22.15 introduces support for different states inside the same screen. 11 | - 3.22.10 simplifies customization of own NavBar. From now you could import built-in NavBar from the component and customize it. You could set it globally to all scenes by setting `navBar` property for `Router` component. 12 | For all other scenes you may pass rightButton, leftButton for custom buttons or rightTitle & onRight, leftTitle & onLeft for text buttons. 13 | -------------------------------------------------------------------------------- /docs/MIGRATION.md: -------------------------------------------------------------------------------- 1 | ## Migrating from 3.x 2 | 3 | * No `component` support for scene containers (that contains children `Scene`) - you have to use custom navigators (`navigator` prop) and possibly `contentComponent` (scenes cannot have both 'component' and 'children') 4 | * No `duration`/`panHandlers` support - you have to implement custom navigator now instead and pass it as ‘navigator’ prop 5 | https://reactnavigation.org/docs/navigators/custom. You could still pass `panHandlers={null}` to disable gestures or `gesturedEnabled={false}` 6 | * No support for partial hiding of tab bar for some tabs because of react navigation bug (react navigation issue): 7 | https://github.com/react-community/react-navigation/issues/1584 8 | * No possibility to skip animation during reset/replace (react navigation issue): 9 | https://github.com/react-community/react-navigation/issues/1493 10 | * `Switch` is removed - you may use onEnter/onExit handlers for more flexible logic. 11 | * Drawer syntax was changed (boolean `drawer` attribute + `contentComponent` for side menu component + `Actions.drawerOpen`/`Actions.drawerClose` to open/close drawer) 12 | * Modal is 'lightbox' attribute for parent Scene now (used for popups, like Error) 13 | * If you have modal animation `modal` for Scene is not working, define separate Scene container with `modal` and put all your modals there, check Example project for details 14 | * No `direction` attribute is supported for custom transitions. For vertical transition add `modal` to parent `Scene`. 15 | * tabBarSelectedItemStyle is not supported. Instead please use React Navigation TabBar params for tabs Scene: `activeTintColor`, `inactiveTintColor`, etc (https://reactnavigation.org/docs/navigators/tab) 16 | * To make multiple pops you could use `Actions.popTo(sceneName)` where sceneName is name of scene you want to see (it should be not container, i.e. scene with `component`) 17 | * No longer exports DefaultRenderer 18 | * Possible other stuff... 19 | 20 | Check Example project for this repository 21 | -------------------------------------------------------------------------------- /docs/_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-minimal 2 | title: React Native Router 3 | description: Simple, minimal routing for React Native 4 | -------------------------------------------------------------------------------- /docs/_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {{ site.title | default: site.github.repository_name }} by {{ site.github.owner_name }} 7 | 8 | 9 | 10 | 13 | 14 | 15 |
16 |
17 |

{{ site.title | default: site.github.repository_name }}

18 |

{{ site.description | default: site.github.project_tagline }}

19 | 20 | {% if site.github.is_project_page %} 21 |

View the Project on GitHub {{ github_name }}

22 | {% endif %} 23 | 24 | {% if site.github.is_user_page %} 25 |

View My GitHub Profile

26 | {% endif %} 27 | 28 | {% if site.show_downloads %} 29 | 34 | {% endif %} 35 |
36 |
37 | 38 | {{ content }} 39 | 40 |
41 | 47 |
48 | 49 | 50 | 51 | {% if site.google_analytics %} 52 | 75 | {% endif %} 76 | 77 | 78 | -------------------------------------------------------------------------------- /docs/assets/css/style.scss: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 | 4 | @import "{{ site.theme }}"; 5 | -------------------------------------------------------------------------------- /docs/index.md: -------------------------------------------------------------------------------- 1 | # Simple React Native Routing 2 | 3 | #### WARNING: react-native-router-flux v4 is in beta. Go [here](https://github.com/aksonov/react-native-router-flux/tree/3.39.1) for v3. 4 | 5 | ___ 6 | 7 | Define all your routes in one place... 8 | 9 | ```js 10 | class App extends React.Component { 11 | render() { 12 | return ( 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | ); 21 | } 22 | } 23 | ``` 24 | 25 | ...and navigate from scene to scene with a simple, powerful API 26 | 27 | ```js 28 | // login.js 29 | 30 | // navigate to 'home' as defined in your top-level router 31 | Actions.home(PARAMS) 32 | 33 | // go back (i.e. pop the current screen off the nav stack) 34 | Actions.pop() 35 | 36 | // refresh the current Scene with the specified props 37 | Actions.refresh({param1: 'hello', param2: 'world'}) 38 | ``` 39 | 40 | 41 | ## Try the example app 42 | 43 | ![rnrf](https://user-images.githubusercontent.com/3681859/27937441-ef61d932-626b-11e7-885f-1db7dc74b32e.gif) 44 | 45 | ```bash 46 | # Get the code 47 | git clone git@github.com:aksonov/react-native-router-flux.git` 48 | cd react-native-router-flux/Example 49 | 50 | # Install dependencies 51 | yarn 52 | 53 | # Run it 54 | react-native run-ios 55 | ``` 56 | 57 | ## v4 Features 58 | * Based on latest [React Navigation](https://reactnavigation.org) API 59 | * Separate navigation logic from presentation. You may change now navigation state directly from your business logic code - stores/reducers/etc. navigationStore 60 | * Built-in state machine (former Switch replacement) - each ‘scene’ has onEnter/onExit handlers. 61 | MobX-powered, all used scenes are wrapped as 'observer' automatically. You may subscribe to navigationStore (former Actions), observe current navigation state, etc. If you are using Redux, skip this. 62 | * Flexible nav bar customization, that is not allowed by react navigation right now: 63 | https://github.com/react-community/react-navigation/issues/779 64 | * Drawer support (react 65 | * 'Lightbox' support (used by popups like Error alert within Example project) 66 | 67 | ## Breaking changes (compared to v3): 68 | * No duration/panHandlers support - you have to implement custom navigator now instead and pass it as ‘navigator’ prop: 69 | https://reactnavigation.org/docs/navigators/custom 70 | * No support for partial hiding of tab bar for some tabs because of react navigation bug: 71 | https://github.com/react-community/react-navigation/issues/1584 72 | * No possibility to skip animation during reset/replace: 73 | https://github.com/react-community/react-navigation/issues/1493 74 | * `Switch` is removed - you may use onEnter/onExit handlers for more flexible logic. 75 | * `getSceneStyle` is removed (no needed in v4). 76 | * Custom reducer (`createReducer` prop for Router) - Redux actions now are passed from React Navigation (‘Navigation/BACK’, ‘Navigation/NAVIGATE’, etc.) 77 | * Drawer is 'drawer' attribute Scene 78 | * Modal is 'modal' attribute for Scene 79 | * No flux 'focus' actions - use onEnter/onExit handlers instead. 80 | * Possible other stuff. 81 | 82 | ## Migrating from v3 83 | Coming soon 84 | -------------------------------------------------------------------------------- /docs/v3/DETAILED_EXAMPLE.md: -------------------------------------------------------------------------------- 1 | ## Detailed Example 2 | 3 | for latest example code, please see [Example](https://github.com/aksonov/react-native-router-flux/blob/master/Example/Example.js) 4 | 5 | ![launch](https://cloud.githubusercontent.com/assets/1321329/11692367/7337cfe2-9e9f-11e5-8515-e8b7a9f230ec.gif) 6 | 7 | ```jsx 8 | import React, {AppRegistry, Navigator, StyleSheet, Text, View} from 'react-native' 9 | import Launch from './components/Launch' 10 | import Register from './components/Register' 11 | import Login from './components/Login' 12 | import Login2 from './components/Login2' 13 | import { Scene, Router, TabBar, Modal, Schema, Actions, Reducer, ActionConst } from 'react-native-router-flux' 14 | import Error from './components/Error' 15 | import Home from './components/Home' 16 | import TabView from './components/TabView' 17 | 18 | class TabIcon extends React.Component { 19 | render(){ 20 | return ( 21 | {this.props.title} 22 | ); 23 | } 24 | } 25 | 26 | const reducerCreate = params=>{ 27 | const defaultReducer = Reducer(params); 28 | return (state, action)=>{ 29 | console.log("ACTION:", action); 30 | return defaultReducer(state, action); 31 | } 32 | }; 33 | 34 | export default class Example extends React.Component { 35 | render() { 36 | return 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | alert("Right button")} rightTitle="Right" /> 50 | 51 | 52 | 53 | alert("Left button!")} leftTitle="Left"/> 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | ; 64 | } 65 | } 66 | 67 | ``` 68 | 69 | components/Launch.js (initial screen) 70 | 71 | ```jsx 72 | import React, {View, Text, StyleSheet, TouchableHighlight} from 'react-native' 73 | import Button from 'react-native-button' 74 | import {Actions} from 'react-native-router-flux' 75 | 76 | class Launch extends React.Component { 77 | render(){ 78 | return ( 79 | 80 | Launch page 81 | 82 | 83 | 84 | 85 | 86 | 87 | ); 88 | } 89 | } 90 | 91 | var styles = StyleSheet.create({ 92 | container: { 93 | flex: 1, 94 | justifyContent: 'center', 95 | alignItems: 'center', 96 | backgroundColor: 'transparent', 97 | } 98 | }); 99 | 100 | module.exports = Launch; 101 | ``` 102 | -------------------------------------------------------------------------------- /docs/v3/MIGRATION.md: -------------------------------------------------------------------------------- 1 | # Migrating from 2.x 2 | 3 | ## Breaking changes comparing with 2.x version: 4 | - React Native 0.26 is required 5 | - `Router` is root container now and should not be nested. For nested scenes you should use `Scene` element 6 | - `Route` became `Scene`, now unique `key` attribute is required for each scene (it was `name` attribute before) 7 | - Define all your scenes on top-level, not within `Router` as before (see Example) 8 | - No `Schema` element is supported for now (for simplicity), maybe later it could be added 9 | - No ActionSheet support 10 | - Custom scene renderers are used instead of 'custom' types (like 'modal'), so 'modal' scenes are pushed as usual, but custom renderer will render them as popup. No `dismiss`, just usual `pop` to close such popups. 11 | - No old navigator.sceneConfig support (instead the component uses React Native NavigationAnimatedView for better transitions) 12 | - No onPush/onPop/etc handlers because they are not needed now. If navigation state is changed, container will be re-rendered with changed navigationState property, see `Modal` as Example. 13 | - No header/footer properties are supported for Scene currently - you may include them into Scene component. 14 | -------------------------------------------------------------------------------- /docs/v3/MINI_TUTORIAL.md: -------------------------------------------------------------------------------- 1 | # Mini-Tutorial 2 | 3 | ![super_simple.gif](super_simple.gif) 4 | 5 | In this super simple example, we will just have three files: 6 | 7 | 1. Your root index file: `index.js` 8 | 2. The first page that is loaded automatically: `PageOne.js` 9 | 3. A second page you can navigate to: `PageTwo.js` 10 | 11 | ### index.js 12 | ```jsx 13 | import React, { Component } from 'react'; 14 | import { Router, Scene } from 'react-native-router-flux'; 15 | 16 | import PageOne from './PageOne'; 17 | import PageTwo from './PageTwo'; 18 | 19 | export default class App extends Component { 20 | render() { 21 | return ( 22 | 23 | 24 | 25 | 26 | 27 | 28 | ) 29 | } 30 | } 31 | ``` 32 | 33 | In `react-native-router-flux`, each route (or page) is called a ``. Conventionally, your Scenes should be wrapped inside a root Scene before being finally wrapped inside a `` component that is returned in the `render()` function. 34 | 35 | At the very minimum, each `` component should have the following props: 36 | 37 | - **key**: A unique string that can be used to refer to the particular scene. 38 | - **component**: The component to be rendered for that `Scene` or page. 39 | - **title**: The string to be displayed in the nav bar at the top of the screen. 40 | 41 | Note that the first scene we wish to load has the prop `initial={true}` to indicate that it's the scene that should be initially rendered. 42 | 43 | ## From Page to Page 44 | 45 | ### PageOne.js 46 | ```jsx 47 | import React, { Component } from 'react'; 48 | import { View, Text } from 'react-native'; 49 | import { Actions } from 'react-native-router-flux'; 50 | 51 | export default class PageOne extends Component { 52 | render() { 53 | return ( 54 | 55 | This is PageOne! 56 | 57 | ) 58 | } 59 | } 60 | ``` 61 | 62 | To navigate from one route to another, an `Action` must be called. This takes the form of: 63 | 64 | ``` 65 | Actions.SCENE_KEY(PARAMS) 66 | ``` 67 | 68 | Where `SCENE_KEY` must match the `key` prop defined in one of the Scenes of the `Router` component in the root file. And `PARAMS` refers to a javascript object that will be passed into the resulting scene as props (more on this later). 69 | 70 | Since the PageTwo component has the key of `pageTwo`, all we need to do is to pass in the function `Actions.pageTwo` into the `` component so that it executes the page transition when the text is pressed. 71 | 72 | ## Passing Information 73 | 74 | Now let's try to extend our example so that we can pass data from `PageOne` to `PageTwo`. 75 | 76 | In `PageOne.js`, instead of simply passing in `Actions.pageTwo`, we can replace it with `Actions.pageTwo({text: 'Hello World!'})`. In this case, we need to wrap the Action call inside a function to prevent it from executing when this component is rendered. As a result, the render function inside `PageOne.js` should look like this: 77 | 78 | ```jsx 79 | render() { 80 | const goToPageTwo = () => Actions.pageTwo({text: 'Hello World!'}); 81 | return ( 82 | 83 | This is PageOne! 84 | 85 | ) 86 | } 87 | ``` 88 | 89 | And in `PageTwo.js`, we can use the data being passed in by adding an additional `` component below the existing one like so: 90 | 91 | ```jsx 92 | render() { 93 | return ( 94 | 95 | This is PageTwo! 96 | {this.props.text} 97 | 98 | ) 99 | } 100 | ``` 101 | 102 | Now, if we navigate to the PageTwo Scene as before, we should see: 103 | 104 | ``` 105 | This is PageTwo! 106 | Hello World! 107 | ``` 108 | 109 | ## Going Forward (or backwards?) 110 | 111 | That pretty much concludes this mini-tutorial, we've covered most of the basics here. There are a lot of things you can do to customize `react-native-router-flux`, this is only the beginning. 112 | 113 | For example, you may want to programmatically go back to the previous Scene. The included navbar already allows you to do this by pressing on the arrow icon at the upper left corner. But you can also call this function at any point in your app for the same effect: 114 | 115 | ```js 116 | Actions.pop() 117 | ``` 118 | 119 | And should you ever want to refresh the same Scene with new props, you can use: 120 | 121 | ```js 122 | Actions.refresh(PARAMS) 123 | ``` 124 | 125 | Don't be afraid to explore the docs, you'll be surprised at how much you're able to customize with `react-native-router-flux`! 126 | -------------------------------------------------------------------------------- /docs/v3/super_simple.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aksonov/react-native-router-flux/b6e8e71aaa5301740724ebbc7bf3dbad5fda0696/docs/v3/super_simple.gif -------------------------------------------------------------------------------- /examples/expo/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["babel-preset-expo"], 3 | "env": { 4 | "development": { 5 | "plugins": ["transform-react-jsx-source"] 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /examples/expo/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "universe/native" 3 | } 4 | -------------------------------------------------------------------------------- /examples/expo/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/**/* 2 | .expo/**/* 3 | -------------------------------------------------------------------------------- /examples/expo/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 100, 3 | "tabWidth": 2, 4 | "singleQuote": true, 5 | "jsxBracketSameLine": true, 6 | "trailingComma": "es5" 7 | } 8 | -------------------------------------------------------------------------------- /examples/expo/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /examples/expo/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Platform, StatusBar, StyleSheet, View } from 'react-native'; 3 | import { AppLoading, Asset, Font, Icon } from 'expo'; 4 | import AppNavigator from './navigation/AppNavigator'; 5 | 6 | export default class App extends React.Component { 7 | state = { 8 | isLoadingComplete: false, 9 | }; 10 | 11 | render() { 12 | if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) { 13 | return ( 14 | 19 | ); 20 | } else { 21 | return ( 22 | 23 | {Platform.OS === 'ios' && } 24 | 25 | 26 | ); 27 | } 28 | } 29 | 30 | _loadResourcesAsync = async () => { 31 | return Promise.all([ 32 | Asset.loadAsync([ 33 | require('./assets/images/robot-dev.png'), 34 | require('./assets/images/robot-prod.png'), 35 | ]), 36 | Font.loadAsync({ 37 | // This is the font that we are using for our tab bar 38 | ...Icon.Ionicons.font, 39 | // We include SpaceMono because we use it in HomeScreen.js. Feel free 40 | // to remove this if you are not using it in your app 41 | 'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'), 42 | }), 43 | ]); 44 | }; 45 | 46 | _handleLoadingError = error => { 47 | // In this case, you might want to report the error to your error 48 | // reporting service, for example Sentry 49 | console.warn(error); 50 | }; 51 | 52 | _handleFinishLoading = () => { 53 | this.setState({ isLoadingComplete: true }); 54 | }; 55 | } 56 | 57 | const styles = StyleSheet.create({ 58 | container: { 59 | flex: 1, 60 | backgroundColor: '#fff', 61 | }, 62 | }); 63 | -------------------------------------------------------------------------------- /examples/expo/__tests__/App-test.js: -------------------------------------------------------------------------------- 1 | import 'react-native'; 2 | import React from 'react'; 3 | import renderer from 'react-test-renderer'; 4 | import NavigationTestUtils from 'react-navigation/NavigationTestUtils'; 5 | import App from '../App'; 6 | 7 | describe('App snapshot', () => { 8 | jest.useFakeTimers(); 9 | beforeEach(() => { 10 | NavigationTestUtils.resetInternalState(); 11 | }); 12 | 13 | it('renders the loading screen', async () => { 14 | const tree = renderer.create().toJSON(); 15 | expect(tree).toMatchSnapshot(); 16 | }); 17 | 18 | it('renders the root without loading screen', async () => { 19 | const tree = renderer.create().toJSON(); 20 | expect(tree).toMatchSnapshot(); 21 | }); 22 | }); 23 | -------------------------------------------------------------------------------- /examples/expo/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "ExpoExample", 4 | "description": "A very interesting project.", 5 | "slug": "ExpoExample", 6 | "privacy": "public", 7 | "sdkVersion": "30.0.0", 8 | "platforms": ["ios", "android"], 9 | "version": "1.0.0", 10 | "orientation": "portrait", 11 | "icon": "./assets/images/icon.png", 12 | "splash": { 13 | "image": "./assets/images/splash.png", 14 | "resizeMode": "contain", 15 | "backgroundColor": "#ffffff" 16 | }, 17 | "updates": { 18 | "fallbackToCacheTimeout": 0 19 | }, 20 | "assetBundlePatterns": [ 21 | "**/*" 22 | ], 23 | "ios": { 24 | "supportsTablet": true 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/expo/assets/fonts/SpaceMono-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aksonov/react-native-router-flux/b6e8e71aaa5301740724ebbc7bf3dbad5fda0696/examples/expo/assets/fonts/SpaceMono-Regular.ttf -------------------------------------------------------------------------------- /examples/expo/assets/images/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aksonov/react-native-router-flux/b6e8e71aaa5301740724ebbc7bf3dbad5fda0696/examples/expo/assets/images/icon.png -------------------------------------------------------------------------------- /examples/expo/assets/images/robot-dev.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aksonov/react-native-router-flux/b6e8e71aaa5301740724ebbc7bf3dbad5fda0696/examples/expo/assets/images/robot-dev.png -------------------------------------------------------------------------------- /examples/expo/assets/images/robot-prod.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aksonov/react-native-router-flux/b6e8e71aaa5301740724ebbc7bf3dbad5fda0696/examples/expo/assets/images/robot-prod.png -------------------------------------------------------------------------------- /examples/expo/assets/images/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aksonov/react-native-router-flux/b6e8e71aaa5301740724ebbc7bf3dbad5fda0696/examples/expo/assets/images/splash.png -------------------------------------------------------------------------------- /examples/expo/components/DrawerContent.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { StyleSheet, Text, View, ViewPropTypes } from 'react-native'; 4 | import Button from 'react-native-button'; 5 | import { Actions } from 'react-native-router-flux'; 6 | 7 | const styles = StyleSheet.create({ 8 | container: { 9 | flex: 1, 10 | justifyContent: 'center', 11 | alignItems: 'center', 12 | backgroundColor: 'transparent', 13 | borderWidth: 2, 14 | borderColor: 'red', 15 | }, 16 | }); 17 | 18 | class DrawerContent extends React.Component { 19 | static propTypes = { 20 | name: PropTypes.string, 21 | sceneStyle: ViewPropTypes.style, 22 | title: PropTypes.string, 23 | }; 24 | 25 | static contextTypes = { 26 | drawer: PropTypes.object, 27 | }; 28 | 29 | render() { 30 | return ( 31 | 32 | 33 | 34 | 35 | 36 | 37 | ); 38 | } 39 | } 40 | 41 | export default DrawerContent; 42 | -------------------------------------------------------------------------------- /examples/expo/components/MenuIcon.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Icon } from 'expo'; 3 | 4 | export default class MenuIcon extends React.Component { 5 | render() { 6 | return ; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /examples/expo/components/StyledText.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Text } from 'react-native'; 3 | 4 | export class MonoText extends React.Component { 5 | render() { 6 | return ; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /examples/expo/components/TabBarIcon.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Icon } from 'expo'; 3 | 4 | import Colors from '../constants/Colors'; 5 | 6 | export default class TabBarIcon extends React.Component { 7 | render() { 8 | return ( 9 | 15 | ); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /examples/expo/components/__tests__/StyledText-test.js: -------------------------------------------------------------------------------- 1 | import 'react-native'; 2 | import React from 'react'; 3 | import { MonoText } from '../StyledText'; 4 | import renderer from 'react-test-renderer'; 5 | 6 | it('renders correctly', () => { 7 | const tree = renderer.create(Snapshot test!).toJSON(); 8 | 9 | expect(tree).toMatchSnapshot(); 10 | }); 11 | -------------------------------------------------------------------------------- /examples/expo/constants/Colors.js: -------------------------------------------------------------------------------- 1 | const tintColor = '#2f95dc'; 2 | 3 | export default { 4 | tintColor, 5 | tabIconDefault: '#ccc', 6 | tabIconSelected: tintColor, 7 | tabBar: '#fefefe', 8 | errorBackground: 'red', 9 | errorText: '#fff', 10 | warningBackground: '#EAEB5E', 11 | warningText: '#666804', 12 | noticeBackground: tintColor, 13 | noticeText: '#fff', 14 | }; 15 | -------------------------------------------------------------------------------- /examples/expo/constants/Layout.js: -------------------------------------------------------------------------------- 1 | import { Dimensions } from 'react-native'; 2 | 3 | const { width, height } = Dimensions.get('window'); 4 | 5 | export default { 6 | window: { 7 | width, 8 | height, 9 | }, 10 | isSmallDevice: width < 375, 11 | }; 12 | -------------------------------------------------------------------------------- /examples/expo/navigation/AppNavigator.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Platform, StyleSheet, Text, View } from 'react-native'; 3 | import { StackViewStyleInterpolator } from 'react-navigation-stack'; 4 | import { 5 | Scene, 6 | Router, 7 | Actions, 8 | Reducer, 9 | ActionConst, 10 | Overlay, 11 | Tabs, 12 | Modal, 13 | Drawer, 14 | Stack, 15 | Lightbox, 16 | } from 'react-native-router-flux'; 17 | import TabBarIcon from '../components/TabBarIcon'; 18 | import MenuIcon from '../components/MenuIcon'; 19 | import DrawerContent from '../components/DrawerContent'; 20 | import HomeScreen from '../screens/HomeScreen'; 21 | import LinksScreen from '../screens/LinksScreen'; 22 | import SettingsScreen from '../screens/SettingsScreen'; 23 | 24 | const styles = StyleSheet.create({ 25 | container: { 26 | flex: 1, 27 | backgroundColor: 'transparent', 28 | justifyContent: 'center', 29 | alignItems: 'center', 30 | }, 31 | tabBarStyle: { 32 | backgroundColor: '#eee', 33 | }, 34 | tabBarSelectedItemStyle: { 35 | backgroundColor: '#ddd', 36 | }, 37 | }); 38 | 39 | const reducerCreate = params => { 40 | const defaultReducer = new Reducer(params); 41 | return (state, action) => { 42 | console.log('reducer: ACTION:', action); 43 | return defaultReducer(state, action); 44 | }; 45 | }; 46 | 47 | const stateHandler = (prevState, newState, action) => { 48 | console.log('onStateChange: ACTION:', action); 49 | }; 50 | 51 | const getSceneStyle = () => ({ 52 | backgroundColor: '#F5FCFF', 53 | shadowOpacity: 1, 54 | shadowRadius: 3, 55 | }); 56 | 57 | // on Android, the URI prefix typically contains a host in addition to scheme 58 | const prefix = Platform.OS === 'android' ? 'mychat://mychat/' : 'mychat://'; 59 | 60 | const transitionConfig = () => ({ 61 | screenInterpolator: 62 | StackViewStyleInterpolator.forFadeFromBottomAndroid, 63 | }); 64 | 65 | const AppNavigator = () => ( 66 | 71 | 72 | 73 | 74 | 75 | 76 | { 80 | console.log('Drawer closed'); 81 | }} 82 | onEnter={() => { 83 | console.log('Drawer opened'); 84 | }} 85 | contentComponent={DrawerContent} 86 | drawerIcon={MenuIcon} 87 | drawerWidth={300}> 88 | 89 | { 93 | console.log('Back to initial and also print this'); 94 | }} 95 | swipeEnabled 96 | tabBarStyle={styles.tabBarStyle} 97 | activeBackgroundColor="white" 98 | inactiveBackgroundColor="rgba(255, 0, 0, 0.5)"> 99 | 106 | 113 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | ); 129 | 130 | export default AppNavigator; 131 | -------------------------------------------------------------------------------- /examples/expo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-new-project", 3 | "main": "node_modules/expo/AppEntry.js", 4 | "private": true, 5 | "scripts": { 6 | "start": "expo start", 7 | "dev:start": "yarn dev && yarn start", 8 | "android": "expo start --android", 9 | "ios": "expo start --ios", 10 | "dev:ios": "yarn dev && yarn ios", 11 | "dev:android": "yarn dev && yarn android", 12 | "dev": "cp ../../src/* node_modules/react-native-router-flux/src/", 13 | "eject": "expo eject", 14 | "lint": "yarn run eslint **/*.js", 15 | "fix": "yarn run eslint **/*.js --fix", 16 | "test": "node ./node_modules/jest/bin/jest.js --watchAll", 17 | "postinstall": "./node_modules/.bin/rnrf dedup" 18 | }, 19 | "jest": { 20 | "preset": "jest-expo" 21 | }, 22 | "dependencies": { 23 | "@expo/samples": "2.1.1", 24 | "expo": "^30.0.1", 25 | "react": "16.3.1", 26 | "react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz", 27 | "react-native-button": "~2.3.0", 28 | "react-native-router-flux": "file:../..", 29 | "react-native-router-flux-cli": "file:../../packages/react-native-router-flux-cli", 30 | "react-navigation": "~2.14.2", 31 | "react-navigation-stack": "^0.4.0" 32 | }, 33 | "devDependencies": { 34 | "@babel/core": "7.1.0", 35 | "babel-core": "^7.0.0-0", 36 | "eslint": "^5.6.0", 37 | "eslint-config-universe": "^2.0.0-alpha.0", 38 | "jest-expo": "^30.0.0", 39 | "prettier": "^1.14.2", 40 | "react-native-debugger-open": "^0.3.17" 41 | }, 42 | "eslintConfig": { 43 | "extends": [ 44 | "universe/node", 45 | "universe/native" 46 | ] 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /examples/expo/screens/LinksScreen.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ScrollView, StyleSheet } from 'react-native'; 3 | import { ExpoLinksView } from '@expo/samples'; 4 | 5 | export default class LinksScreen extends React.Component { 6 | static navigationOptions = { 7 | title: 'Links', 8 | }; 9 | 10 | render() { 11 | return ( 12 | 13 | {/* Go ahead and delete ExpoLinksView and replace it with your 14 | * content, we just wanted to provide you with some helpful links */} 15 | 16 | 17 | ); 18 | } 19 | } 20 | 21 | const styles = StyleSheet.create({ 22 | container: { 23 | flex: 1, 24 | paddingTop: 15, 25 | backgroundColor: '#fff', 26 | }, 27 | }); 28 | -------------------------------------------------------------------------------- /examples/expo/screens/SettingsScreen.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ExpoConfigView } from '@expo/samples'; 3 | 4 | export default class SettingsScreen extends React.Component { 5 | static navigationOptions = { 6 | title: 'app.json', 7 | }; 8 | 9 | render() { 10 | /* Go ahead and delete ExpoConfigView and replace it with your 11 | * content, we just wanted to give you a quick view of your config */ 12 | return ; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /examples/react-native/.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /examples/react-native/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: '@react-native-community', 4 | }; 5 | -------------------------------------------------------------------------------- /examples/react-native/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | ; We fork some components by platform 3 | .*/*[.]android.js 4 | 5 | ; Ignore "BUCK" generated dirs 6 | /\.buckd/ 7 | 8 | ; Ignore polyfills 9 | node_modules/react-native/Libraries/polyfills/.* 10 | 11 | ; These should not be required directly 12 | ; require from fbjs/lib instead: require('fbjs/lib/warning') 13 | node_modules/warning/.* 14 | 15 | ; Flow doesn't support platforms 16 | .*/Libraries/Utilities/LoadingView.js 17 | 18 | [untyped] 19 | .*/node_modules/@react-native-community/cli/.*/.* 20 | 21 | [include] 22 | 23 | [libs] 24 | node_modules/react-native/Libraries/react-native/react-native-interface.js 25 | node_modules/react-native/flow/ 26 | 27 | [options] 28 | emoji=true 29 | 30 | esproposal.optional_chaining=enable 31 | esproposal.nullish_coalescing=enable 32 | 33 | module.file_ext=.js 34 | module.file_ext=.json 35 | module.file_ext=.ios.js 36 | 37 | munge_underscores=true 38 | 39 | module.name_mapper='^react-native$' -> '/node_modules/react-native/Libraries/react-native/react-native-implementation' 40 | module.name_mapper='^react-native/\(.*\)$' -> '/node_modules/react-native/\1' 41 | 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\)$' -> '/node_modules/react-native/Libraries/Image/RelativeImageStub' 42 | 43 | suppress_type=$FlowIssue 44 | suppress_type=$FlowFixMe 45 | suppress_type=$FlowFixMeProps 46 | suppress_type=$FlowFixMeState 47 | 48 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\) 49 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)?:? #[0-9]+ 50 | suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError 51 | 52 | [lints] 53 | sketchy-null-number=warn 54 | sketchy-null-mixed=warn 55 | sketchy-number=warn 56 | untyped-type-import=warn 57 | nonstrict-import=warn 58 | deprecated-type=warn 59 | unsafe-getters-setters=warn 60 | inexact-spread=warn 61 | unnecessary-invariant=warn 62 | signature-verification-failure=warn 63 | deprecated-utility=error 64 | 65 | [strict] 66 | deprecated-type 67 | nonstrict-import 68 | sketchy-null 69 | unclear-type 70 | unsafe-getters-setters 71 | untyped-import 72 | untyped-type-import 73 | 74 | [version] 75 | ^0.105.0 76 | -------------------------------------------------------------------------------- /examples/react-native/.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | -------------------------------------------------------------------------------- /examples/react-native/.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 | 24 | # Android/IntelliJ 25 | # 26 | build/ 27 | .idea 28 | .gradle 29 | local.properties 30 | *.iml 31 | 32 | # node.js 33 | # 34 | node_modules/ 35 | npm-debug.log 36 | yarn-error.log 37 | 38 | # BUCK 39 | buck-out/ 40 | \.buckd/ 41 | *.keystore 42 | !debug.keystore 43 | 44 | # fastlane 45 | # 46 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 47 | # screenshots whenever they are needed. 48 | # For more information about the recommended setup visit: 49 | # https://docs.fastlane.tools/best-practices/source-control/ 50 | 51 | */fastlane/report.xml 52 | */fastlane/Preview.html 53 | */fastlane/screenshots 54 | 55 | # Bundle artifact 56 | *.jsbundle 57 | 58 | # CocoaPods 59 | /ios/Pods/ 60 | -------------------------------------------------------------------------------- /examples/react-native/.npmignore: -------------------------------------------------------------------------------- 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 | 24 | # node.js 25 | # 26 | node_modules/ 27 | npm-debug.log 28 | -------------------------------------------------------------------------------- /examples/react-native/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | bracketSpacing: false, 3 | jsxBracketSameLine: true, 4 | singleQuote: true, 5 | trailingComma: 'all', 6 | }; 7 | -------------------------------------------------------------------------------- /examples/react-native/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /examples/react-native/__tests__/App-test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import 'react-native'; 6 | import React from 'react'; 7 | import App from '../App'; 8 | 9 | // Note: test renderer must be required after react-native. 10 | import renderer from 'react-test-renderer'; 11 | 12 | it('renders correctly', () => { 13 | renderer.create(); 14 | }); 15 | -------------------------------------------------------------------------------- /examples/react-native/android/app/BUCK: -------------------------------------------------------------------------------- 1 | # To learn about Buck see [Docs](https://buckbuild.com/). 2 | # To run your application with Buck: 3 | # - install Buck 4 | # - `npm start` - to start the packager 5 | # - `cd android` 6 | # - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"` 7 | # - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck 8 | # - `buck install -r android/app` - compile, install and run application 9 | # 10 | 11 | load(":build_defs.bzl", "create_aar_targets", "create_jar_targets") 12 | 13 | lib_deps = [] 14 | 15 | create_aar_targets(glob(["libs/*.aar"])) 16 | 17 | create_jar_targets(glob(["libs/*.jar"])) 18 | 19 | android_library( 20 | name = "all-libs", 21 | exported_deps = lib_deps, 22 | ) 23 | 24 | android_library( 25 | name = "app-code", 26 | srcs = glob([ 27 | "src/main/java/**/*.java", 28 | ]), 29 | deps = [ 30 | ":all-libs", 31 | ":build_config", 32 | ":res", 33 | ], 34 | ) 35 | 36 | android_build_config( 37 | name = "build_config", 38 | package = "com.example", 39 | ) 40 | 41 | android_resource( 42 | name = "res", 43 | package = "com.example", 44 | res = "src/main/res", 45 | ) 46 | 47 | android_binary( 48 | name = "app", 49 | keystore = "//android/keystores:debug", 50 | manifest = "src/main/AndroidManifest.xml", 51 | package_type = "debug", 52 | deps = [ 53 | ":app-code", 54 | ], 55 | ) 56 | -------------------------------------------------------------------------------- /examples/react-native/android/app/build_defs.bzl: -------------------------------------------------------------------------------- 1 | """Helper definitions to glob .aar and .jar targets""" 2 | 3 | def create_aar_targets(aarfiles): 4 | for aarfile in aarfiles: 5 | name = "aars__" + aarfile[aarfile.rindex("/") + 1:aarfile.rindex(".aar")] 6 | lib_deps.append(":" + name) 7 | android_prebuilt_aar( 8 | name = name, 9 | aar = aarfile, 10 | ) 11 | 12 | def create_jar_targets(jarfiles): 13 | for jarfile in jarfiles: 14 | name = "jars__" + jarfile[jarfile.rindex("/") + 1:jarfile.rindex(".jar")] 15 | lib_deps.append(":" + name) 16 | prebuilt_jar( 17 | name = name, 18 | binary_jar = jarfile, 19 | ) 20 | -------------------------------------------------------------------------------- /examples/react-native/android/app/debug.keystore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aksonov/react-native-router-flux/b6e8e71aaa5301740724ebbc7bf3dbad5fda0696/examples/react-native/android/app/debug.keystore -------------------------------------------------------------------------------- /examples/react-native/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 | -------------------------------------------------------------------------------- /examples/react-native/android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /examples/react-native/android/app/src/debug/java/com/example/ReactNativeFlipper.java: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | *

This source code is licensed under the MIT license found in the LICENSE file in the root 5 | * directory of this source tree. 6 | */ 7 | package com.example; 8 | 9 | import android.content.Context; 10 | import com.facebook.flipper.android.AndroidFlipperClient; 11 | import com.facebook.flipper.android.utils.FlipperUtils; 12 | import com.facebook.flipper.core.FlipperClient; 13 | import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin; 14 | import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin; 15 | import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin; 16 | import com.facebook.flipper.plugins.inspector.DescriptorMapping; 17 | import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin; 18 | import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor; 19 | import com.facebook.flipper.plugins.network.NetworkFlipperPlugin; 20 | import com.facebook.flipper.plugins.react.ReactFlipperPlugin; 21 | import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin; 22 | import com.facebook.react.ReactInstanceManager; 23 | import com.facebook.react.bridge.ReactContext; 24 | import com.facebook.react.modules.network.NetworkingModule; 25 | import okhttp3.OkHttpClient; 26 | 27 | public class ReactNativeFlipper { 28 | public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) { 29 | if (FlipperUtils.shouldEnableFlipper(context)) { 30 | final FlipperClient client = AndroidFlipperClient.getInstance(context); 31 | 32 | client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults())); 33 | client.addPlugin(new ReactFlipperPlugin()); 34 | client.addPlugin(new DatabasesFlipperPlugin(context)); 35 | client.addPlugin(new SharedPreferencesFlipperPlugin(context)); 36 | client.addPlugin(CrashReporterPlugin.getInstance()); 37 | 38 | NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin(); 39 | NetworkingModule.setCustomClientBuilder( 40 | new NetworkingModule.CustomClientBuilder() { 41 | @Override 42 | public void apply(OkHttpClient.Builder builder) { 43 | builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); 44 | } 45 | }); 46 | client.addPlugin(networkFlipperPlugin); 47 | client.start(); 48 | 49 | // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized 50 | // Hence we run if after all native modules have been initialized 51 | ReactContext reactContext = reactInstanceManager.getCurrentReactContext(); 52 | if (reactContext == null) { 53 | reactInstanceManager.addReactInstanceEventListener( 54 | new ReactInstanceManager.ReactInstanceEventListener() { 55 | @Override 56 | public void onReactContextInitialized(ReactContext reactContext) { 57 | reactInstanceManager.removeReactInstanceEventListener(this); 58 | reactContext.runOnNativeModulesQueueThread( 59 | new Runnable() { 60 | @Override 61 | public void run() { 62 | client.addPlugin(new FrescoFlipperPlugin()); 63 | } 64 | }); 65 | } 66 | }); 67 | } else { 68 | client.addPlugin(new FrescoFlipperPlugin()); 69 | } 70 | } 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /examples/react-native/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 13 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /examples/react-native/android/app/src/main/java/com/example/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.example; 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. This is used to schedule 9 | * rendering of the component. 10 | */ 11 | @Override 12 | protected String getMainComponentName() { 13 | return "Example"; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /examples/react-native/android/app/src/main/java/com/example/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.example; 2 | 3 | import android.app.Application; 4 | import android.content.Context; 5 | import com.facebook.react.PackageList; 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.soloader.SoLoader; 11 | import java.lang.reflect.InvocationTargetException; 12 | import java.util.List; 13 | 14 | public class MainApplication extends Application implements ReactApplication { 15 | 16 | private final ReactNativeHost mReactNativeHost = 17 | new ReactNativeHost(this) { 18 | @Override 19 | public boolean getUseDeveloperSupport() { 20 | return BuildConfig.DEBUG; 21 | } 22 | 23 | @Override 24 | protected List getPackages() { 25 | @SuppressWarnings("UnnecessaryLocalVariable") 26 | List packages = new PackageList(this).getPackages(); 27 | // Packages that cannot be autolinked yet can be added manually here, for example: 28 | // packages.add(new MyReactNativePackage()); 29 | return packages; 30 | } 31 | 32 | @Override 33 | protected String getJSMainModuleName() { 34 | return "index"; 35 | } 36 | }; 37 | 38 | @Override 39 | public ReactNativeHost getReactNativeHost() { 40 | return mReactNativeHost; 41 | } 42 | 43 | @Override 44 | public void onCreate() { 45 | super.onCreate(); 46 | SoLoader.init(this, /* native exopackage */ false); 47 | initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); 48 | } 49 | 50 | /** 51 | * Loads Flipper in React Native templates. Call this in the onCreate method with something like 52 | * initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); 53 | * 54 | * @param context 55 | * @param reactInstanceManager 56 | */ 57 | private static void initializeFlipper( 58 | Context context, ReactInstanceManager reactInstanceManager) { 59 | if (BuildConfig.DEBUG) { 60 | try { 61 | /* 62 | We use reflection here to pick up the class that initializes Flipper, 63 | since Flipper library is not available in release mode 64 | */ 65 | Class aClass = Class.forName("com.example.ReactNativeFlipper"); 66 | aClass 67 | .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class) 68 | .invoke(null, context, reactInstanceManager); 69 | } catch (ClassNotFoundException e) { 70 | e.printStackTrace(); 71 | } catch (NoSuchMethodException e) { 72 | e.printStackTrace(); 73 | } catch (IllegalAccessException e) { 74 | e.printStackTrace(); 75 | } catch (InvocationTargetException e) { 76 | e.printStackTrace(); 77 | } 78 | } 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /examples/react-native/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aksonov/react-native-router-flux/b6e8e71aaa5301740724ebbc7bf3dbad5fda0696/examples/react-native/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /examples/react-native/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aksonov/react-native-router-flux/b6e8e71aaa5301740724ebbc7bf3dbad5fda0696/examples/react-native/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /examples/react-native/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aksonov/react-native-router-flux/b6e8e71aaa5301740724ebbc7bf3dbad5fda0696/examples/react-native/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /examples/react-native/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aksonov/react-native-router-flux/b6e8e71aaa5301740724ebbc7bf3dbad5fda0696/examples/react-native/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /examples/react-native/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aksonov/react-native-router-flux/b6e8e71aaa5301740724ebbc7bf3dbad5fda0696/examples/react-native/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /examples/react-native/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aksonov/react-native-router-flux/b6e8e71aaa5301740724ebbc7bf3dbad5fda0696/examples/react-native/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /examples/react-native/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aksonov/react-native-router-flux/b6e8e71aaa5301740724ebbc7bf3dbad5fda0696/examples/react-native/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /examples/react-native/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aksonov/react-native-router-flux/b6e8e71aaa5301740724ebbc7bf3dbad5fda0696/examples/react-native/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /examples/react-native/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aksonov/react-native-router-flux/b6e8e71aaa5301740724ebbc7bf3dbad5fda0696/examples/react-native/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /examples/react-native/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aksonov/react-native-router-flux/b6e8e71aaa5301740724ebbc7bf3dbad5fda0696/examples/react-native/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /examples/react-native/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | Example 3 | 4 | -------------------------------------------------------------------------------- /examples/react-native/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /examples/react-native/android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | ext { 5 | buildToolsVersion = "29.0.2" 6 | minSdkVersion = 16 7 | compileSdkVersion = 29 8 | targetSdkVersion = 29 9 | } 10 | repositories { 11 | google() 12 | jcenter() 13 | } 14 | dependencies { 15 | classpath("com.android.tools.build:gradle:3.5.3") 16 | // NOTE: Do not place your application dependencies here; they belong 17 | // in the individual module build.gradle files 18 | } 19 | } 20 | 21 | allprojects { 22 | repositories { 23 | mavenLocal() 24 | maven { 25 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 26 | url("$rootDir/../node_modules/react-native/android") 27 | } 28 | maven { 29 | // Android JSC is installed from npm 30 | url("$rootDir/../node_modules/jsc-android/dist") 31 | } 32 | 33 | google() 34 | jcenter() 35 | maven { url 'https://www.jitpack.io' } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /examples/react-native/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 | # AndroidX package structure to make it clearer which packages are bundled with the 21 | # Android operating system, and which are packaged with your app's APK 22 | # https://developer.android.com/topic/libraries/support-library/androidx-rn 23 | android.useAndroidX=true 24 | # Automatically convert third-party libraries to use AndroidX 25 | android.enableJetifier=true 26 | 27 | # Version of flipper SDK to use with React Native 28 | FLIPPER_VERSION=0.37.0 29 | -------------------------------------------------------------------------------- /examples/react-native/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aksonov/react-native-router-flux/b6e8e71aaa5301740724ebbc7bf3dbad5fda0696/examples/react-native/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /examples/react-native/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-6.2-all.zip 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | -------------------------------------------------------------------------------- /examples/react-native/android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @rem 2 | @rem Copyright 2015 the original author or authors. 3 | @rem 4 | @rem Licensed under the Apache License, Version 2.0 (the "License"); 5 | @rem you may not use this file except in compliance with the License. 6 | @rem You may obtain a copy of the License at 7 | @rem 8 | @rem https://www.apache.org/licenses/LICENSE-2.0 9 | @rem 10 | @rem Unless required by applicable law or agreed to in writing, software 11 | @rem distributed under the License is distributed on an "AS IS" BASIS, 12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | @rem See the License for the specific language governing permissions and 14 | @rem limitations under the License. 15 | @rem 16 | 17 | @if "%DEBUG%" == "" @echo off 18 | @rem ########################################################################## 19 | @rem 20 | @rem Gradle startup script for Windows 21 | @rem 22 | @rem ########################################################################## 23 | 24 | @rem Set local scope for the variables with windows NT shell 25 | if "%OS%"=="Windows_NT" setlocal 26 | 27 | set DIRNAME=%~dp0 28 | if "%DIRNAME%" == "" set DIRNAME=. 29 | set APP_BASE_NAME=%~n0 30 | set APP_HOME=%DIRNAME% 31 | 32 | @rem Resolve any "." and ".." in APP_HOME to make it shorter. 33 | for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi 34 | 35 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 36 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m" 37 | 38 | @rem Find java.exe 39 | if defined JAVA_HOME goto findJavaFromJavaHome 40 | 41 | set JAVA_EXE=java.exe 42 | %JAVA_EXE% -version >NUL 2>&1 43 | if "%ERRORLEVEL%" == "0" goto init 44 | 45 | echo. 46 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 47 | echo. 48 | echo Please set the JAVA_HOME variable in your environment to match the 49 | echo location of your Java installation. 50 | 51 | goto fail 52 | 53 | :findJavaFromJavaHome 54 | set JAVA_HOME=%JAVA_HOME:"=% 55 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 56 | 57 | if exist "%JAVA_EXE%" goto init 58 | 59 | echo. 60 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 61 | echo. 62 | echo Please set the JAVA_HOME variable in your environment to match the 63 | echo location of your Java installation. 64 | 65 | goto fail 66 | 67 | :init 68 | @rem Get command-line arguments, handling Windows variants 69 | 70 | if not "%OS%" == "Windows_NT" goto win9xME_args 71 | 72 | :win9xME_args 73 | @rem Slurp the command line arguments. 74 | set CMD_LINE_ARGS= 75 | set _SKIP=2 76 | 77 | :win9xME_args_slurp 78 | if "x%~1" == "x" goto execute 79 | 80 | set CMD_LINE_ARGS=%* 81 | 82 | :execute 83 | @rem Setup the command line 84 | 85 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 86 | 87 | @rem Execute Gradle 88 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS% 89 | 90 | :end 91 | @rem End local scope for the variables with windows NT shell 92 | if "%ERRORLEVEL%"=="0" goto mainEnd 93 | 94 | :fail 95 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 96 | rem the _cmd.exe /c_ return code! 97 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 98 | exit /b 1 99 | 100 | :mainEnd 101 | if "%OS%"=="Windows_NT" endlocal 102 | 103 | :omega 104 | -------------------------------------------------------------------------------- /examples/react-native/android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'Example' 2 | apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) 3 | include ':app' 4 | -------------------------------------------------------------------------------- /examples/react-native/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Example", 3 | "displayName": "Example" 4 | } 5 | -------------------------------------------------------------------------------- /examples/react-native/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /examples/react-native/components/CustomNavBar.js: -------------------------------------------------------------------------------- 1 | import { 2 | Image, 3 | Platform, 4 | StyleSheet, 5 | Text, 6 | TouchableOpacity, 7 | View, 8 | } from 'react-native'; 9 | import React from 'react'; 10 | import {Actions} from 'react-native-router-flux'; 11 | 12 | const styles = StyleSheet.create({ 13 | container: { 14 | height: Platform.OS === 'ios' ? 64 : 54, 15 | flexDirection: 'row', 16 | paddingTop: 20, 17 | }, 18 | navBarItem: { 19 | flex: 1, 20 | justifyContent: 'center', 21 | }, 22 | }); 23 | 24 | export default class CustomNavBar extends React.Component { 25 | // constructor(props) { 26 | // super(props) 27 | // } 28 | 29 | _renderLeft() { 30 | if (Actions.currentScene === 'customNavBar1') { 31 | return ( 32 | console.log('Hamburger button pressed')} 34 | style={[styles.navBarItem, {paddingLeft: 10}]}> 35 | 43 | 44 | ); 45 | } 46 | return ( 47 | 50 | 55 | 56 | ); 57 | } 58 | 59 | _renderMiddle() { 60 | return ( 61 | 62 | {this.props.title} 63 | 64 | ); 65 | } 66 | 67 | _renderRight() { 68 | return ( 69 | 74 | console.log('Share')} 76 | style={{paddingRight: 10}}> 77 | 85 | 86 | console.log('Search')} 88 | style={{paddingRight: 10}}> 89 | 97 | 98 | 99 | ); 100 | } 101 | 102 | render() { 103 | let dynamicStyle = {}; 104 | if (Actions.currentScene === 'customNavBar1') { 105 | dynamicStyle = {backgroundColor: 'red'}; 106 | } else { 107 | dynamicStyle = {backgroundColor: 'yellow'}; 108 | } 109 | 110 | return ( 111 | 112 | {this._renderLeft()} 113 | {this._renderMiddle()} 114 | {this._renderRight()} 115 | 116 | ); 117 | } 118 | } 119 | -------------------------------------------------------------------------------- /examples/react-native/components/CustomNavBar2.js: -------------------------------------------------------------------------------- 1 | import { 2 | Image, 3 | Platform, 4 | StyleSheet, 5 | Text, 6 | TouchableOpacity, 7 | View, 8 | } from 'react-native'; 9 | import React from 'react'; 10 | import {Actions} from 'react-native-router-flux'; 11 | 12 | const styles = StyleSheet.create({ 13 | container: { 14 | height: Platform.OS === 'ios' ? 64 : 54, 15 | flexDirection: 'row', 16 | paddingTop: 20, 17 | backgroundColor: 'green', 18 | }, 19 | navBarItem: { 20 | flex: 1, 21 | justifyContent: 'center', 22 | }, 23 | }); 24 | 25 | export default class CustomNavBar extends React.Component { 26 | // constructor(props) { 27 | // super(props) 28 | // } 29 | 30 | _renderLeft() { 31 | return ( 32 | 35 | 40 | 41 | ); 42 | } 43 | 44 | _renderMiddle() { 45 | return ( 46 | 47 | {this.props.title} 48 | 49 | ); 50 | } 51 | 52 | render() { 53 | return ( 54 | 55 | {this._renderLeft()} 56 | {this._renderMiddle()} 57 | 58 | ); 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /examples/react-native/components/CustomNavBarView.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import {StyleSheet, View, ViewPropTypes} from 'react-native'; 4 | import Button from 'react-native-button'; 5 | import {Actions} from 'react-native-router-flux'; 6 | 7 | const propTypes = { 8 | name: PropTypes.string, 9 | sceneStyle: ViewPropTypes.style, 10 | title: PropTypes.string, 11 | }; 12 | 13 | const styles = StyleSheet.create({ 14 | container: { 15 | flex: 1, 16 | justifyContent: 'center', 17 | alignItems: 'center', 18 | backgroundColor: 'transparent', 19 | borderWidth: 2, 20 | borderColor: 'red', 21 | }, 22 | }); 23 | 24 | class TabView extends React.Component { 25 | render() { 26 | return ( 27 | 28 | 29 | 30 | 36 | 42 | 48 | 54 | 55 | ); 56 | } 57 | } 58 | TabView.propTypes = propTypes; 59 | 60 | export default TabView; 61 | -------------------------------------------------------------------------------- /examples/react-native/components/EchoView.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {View, Text, StyleSheet} from 'react-native'; 3 | import Button from 'react-native-button'; 4 | import {Actions} from 'react-native-router-flux'; 5 | 6 | const styles = StyleSheet.create({ 7 | container: { 8 | flex: 1, 9 | justifyContent: 'center', 10 | alignItems: 'center', 11 | backgroundColor: '#F5FCFF', 12 | borderWidth: 2, 13 | borderColor: 'red', 14 | }, 15 | instructions: { 16 | textAlign: 'center', 17 | color: '#333333', 18 | marginBottom: 5, 19 | }, 20 | smaller: { 21 | marginBottom: 5, 22 | fontSize: 12, 23 | }, 24 | }); 25 | 26 | export default class extends React.Component { 27 | onEnter() { 28 | console.log('EchoView onEnter'); 29 | } 30 | 31 | render() { 32 | return ( 33 | 34 | routeName: {this.props.name} 35 | 36 | 37 | ); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /examples/react-native/components/Error.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {View, Text, StyleSheet, Animated, Dimensions} from 'react-native'; 3 | import Button from 'react-native-button'; 4 | import {Actions} from 'react-native-router-flux'; 5 | 6 | const {height: deviceHeight} = Dimensions.get('window'); 7 | 8 | const styles = StyleSheet.create({ 9 | container: { 10 | position: 'absolute', 11 | top: 0, 12 | bottom: 0, 13 | left: 0, 14 | right: 0, 15 | backgroundColor: 'transparent', 16 | justifyContent: 'center', 17 | alignItems: 'center', 18 | }, 19 | }); 20 | 21 | export default class extends React.Component { 22 | constructor(props) { 23 | super(props); 24 | 25 | this.state = { 26 | offset: new Animated.Value(-deviceHeight), 27 | }; 28 | } 29 | 30 | componentDidMount() { 31 | Animated.timing(this.state.offset, { 32 | duration: 150, 33 | toValue: 0, 34 | }).start(); 35 | } 36 | 37 | closeModal() { 38 | Animated.timing(this.state.offset, { 39 | duration: 150, 40 | toValue: -deviceHeight, 41 | }).start(Actions.pop); 42 | } 43 | 44 | render() { 45 | return ( 46 | 52 | 60 | {this.props.data} 61 | 62 | 63 | 64 | ); 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /examples/react-native/components/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {View, Text, StyleSheet} from 'react-native'; 3 | import Button from 'react-native-button'; 4 | import {Actions} from 'react-native-router-flux'; 5 | 6 | const styles = StyleSheet.create({ 7 | container: { 8 | flex: 1, 9 | justifyContent: 'center', 10 | alignItems: 'center', 11 | backgroundColor: '#F5FCFF', 12 | }, 13 | welcome: { 14 | fontSize: 20, 15 | textAlign: 'center', 16 | margin: 10, 17 | }, 18 | instructions: { 19 | textAlign: 'center', 20 | color: '#333333', 21 | marginBottom: 5, 22 | }, 23 | }); 24 | 25 | class Home extends React.Component { 26 | render() { 27 | return ( 28 | 29 | Replace screen 30 | Prop from dynamic method: {this.props.homeProp} 31 | 32 | 33 | ); 34 | } 35 | } 36 | 37 | module.exports = Home; 38 | -------------------------------------------------------------------------------- /examples/react-native/components/Launch.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {View, Text, StyleSheet, Button} from 'react-native'; 3 | import {Actions} from 'react-native-router-flux'; 4 | import {MessageBarManager} from 'react-native-message-bar'; 5 | 6 | const styles = StyleSheet.create({ 7 | container: { 8 | flex: 1, 9 | justifyContent: 'center', 10 | alignItems: 'center', 11 | backgroundColor: 'transparent', 12 | }, 13 | }); 14 | 15 | class Launch extends React.Component { 16 | render() { 17 | return ( 18 | 19 | Welcome 20 | 49 | 55 | 56 | 57 | ); 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /examples/react-native/components/Login2.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {View, Text, StyleSheet} from 'react-native'; 3 | import Button from 'react-native-button'; 4 | import {Actions} from 'react-native-router-flux'; 5 | 6 | const styles = StyleSheet.create({ 7 | container: { 8 | flex: 1, 9 | justifyContent: 'center', 10 | alignItems: 'center', 11 | backgroundColor: '#F5FCFF', 12 | }, 13 | }); 14 | 15 | export default class extends React.Component { 16 | render() { 17 | const title = this.props.title || 'No Title'; 18 | const data = this.props.data || 'No Data'; 19 | return ( 20 | 21 | Login page 2 22 | Title: {title} 23 | Data: {data} 24 | 30 | 31 | ); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /examples/react-native/components/Login3.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {View, Text, StyleSheet} from 'react-native'; 3 | import Button from 'react-native-button'; 4 | import {Actions} from 'react-native-router-flux'; 5 | 6 | const styles = StyleSheet.create({ 7 | container: { 8 | flex: 1, 9 | justifyContent: 'center', 10 | alignItems: 'center', 11 | backgroundColor: '#F5FCFF', 12 | }, 13 | }); 14 | 15 | const popToRoot = () => { 16 | Actions.popTo('launch'); 17 | }; 18 | 19 | const popToLogin1 = () => { 20 | Actions.popTo('loginModal'); 21 | }; 22 | 23 | const popToLogin2 = () => { 24 | Actions.popTo('loginModal2'); 25 | }; 26 | 27 | const popAndRefresh = () => { 28 | Actions.pop({ 29 | refresh: {data: 'Data after pop', title: 'title after pop'}, 30 | key: null, 31 | }); 32 | }; 33 | 34 | export default class extends React.Component { 35 | render() { 36 | const title = this.props.title || 'No Title'; 37 | const data = this.props.data || 'No Data'; 38 | return ( 39 | 40 | Login page 3 41 | Title: {title} 42 | Data: {data} 43 | 44 | 45 | 46 | 47 | 48 | 49 | ); 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /examples/react-native/components/MessageBar.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {MessageBar, MessageBarManager} from 'react-native-message-bar'; 3 | 4 | export default class extends React.Component { 5 | componentDidMount() { 6 | // Register the alert located on this master page 7 | // This MessageBar will be accessible from the current (same) component, and from its child component 8 | // The MessageBar is then declared only once, in your main component. 9 | MessageBarManager.registerMessageBar(this.refs.alert); 10 | } 11 | 12 | componentWillUnmount() { 13 | // Remove the alert located on this master page from the manager 14 | MessageBarManager.unregisterMessageBar(); 15 | } 16 | 17 | render() { 18 | return ; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /examples/react-native/components/Register.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {View, Text, StyleSheet} from 'react-native'; 3 | import Button from 'react-native-button'; 4 | import {Actions} from 'react-native-router-flux'; 5 | 6 | const styles = StyleSheet.create({ 7 | container: { 8 | flex: 1, 9 | justifyContent: 'center', 10 | alignItems: 'center', 11 | backgroundColor: '#F5FCFF', 12 | }, 13 | }); 14 | 15 | const Register = () => ( 16 | 17 | Register page 18 | 19 | 22 | 23 | 24 | ); 25 | 26 | export default Register; 27 | -------------------------------------------------------------------------------- /examples/react-native/components/TabIcon.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import {Text} from 'react-native'; 4 | 5 | const propTypes = { 6 | focused: PropTypes.bool, 7 | title: PropTypes.string, 8 | }; 9 | 10 | const defaultProps = { 11 | focused: false, 12 | title: '', 13 | }; 14 | 15 | const TabIcon = props => ( 16 | {props.title} 17 | ); 18 | 19 | TabIcon.propTypes = propTypes; 20 | TabIcon.defaultProps = defaultProps; 21 | 22 | export default TabIcon; 23 | -------------------------------------------------------------------------------- /examples/react-native/components/TabView.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import {StyleSheet, Text, View, ViewPropTypes} from 'react-native'; 4 | import Button from 'react-native-button'; 5 | import {Actions} from 'react-native-router-flux'; 6 | 7 | const propTypes = { 8 | name: PropTypes.string.isRequired, 9 | data: PropTypes.string, 10 | sceneStyle: ViewPropTypes.style, 11 | title: PropTypes.string.isRequired, 12 | }; 13 | 14 | const defaultProps = { 15 | sceneStyle: null, 16 | }; 17 | 18 | const styles = StyleSheet.create({ 19 | container: { 20 | flex: 1, 21 | justifyContent: 'center', 22 | alignItems: 'center', 23 | backgroundColor: 'transparent', 24 | borderWidth: 2, 25 | borderColor: 'red', 26 | }, 27 | }); 28 | 29 | class TabView extends React.Component { 30 | state = {hideNavBar: false, hideTabBar: false}; 31 | 32 | toggleNavBar = () => { 33 | this.setState( 34 | prevState => ({hideNavBar: !prevState.hideNavBar}), 35 | () => Actions.refresh({hideNavBar: this.state.hideNavBar}), 36 | ); 37 | }; 38 | 39 | toggleTabBar = () => { 40 | this.setState( 41 | prevState => ({hideTabBar: !prevState.hideTabBar}), 42 | () => { 43 | Actions.refresh( 44 | { 45 | hideTabBar: this.state.hideTabBar, 46 | }, 47 | 'tab_2', 48 | ); 49 | }, 50 | ); 51 | }; 52 | 53 | render() { 54 | return ( 55 | 56 | 57 | Tab title: 58 | {this.props.title} name: 59 | {this.props.name} 60 | 61 | Tab data: {this.props.data} 62 | {this.props.name === 'tab_1_1' && ( 63 | 66 | )} 67 | {this.props.name === 'tab_2_1' && ( 68 | 71 | )} 72 | 73 | 79 | 85 | 91 | 97 | 103 | 109 | 115 | 121 | {this.props.name === 'tab_2_1' && ( 122 | 123 | )} 124 | 125 | ); 126 | } 127 | } 128 | TabView.propTypes = propTypes; 129 | TabView.defaultProps = defaultProps; 130 | 131 | export default TabView; 132 | -------------------------------------------------------------------------------- /examples/react-native/components/drawer/DrawerContent.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import {StyleSheet, Text, View, ViewPropTypes} from 'react-native'; 4 | import Button from 'react-native-button'; 5 | import {Actions} from 'react-native-router-flux'; 6 | 7 | const styles = StyleSheet.create({ 8 | container: { 9 | flex: 1, 10 | justifyContent: 'center', 11 | alignItems: 'center', 12 | backgroundColor: 'transparent', 13 | borderWidth: 2, 14 | borderColor: 'red', 15 | }, 16 | }); 17 | 18 | class DrawerContent extends React.Component { 19 | static propTypes = { 20 | name: PropTypes.string, 21 | sceneStyle: ViewPropTypes.style, 22 | title: PropTypes.string, 23 | }; 24 | 25 | static contextTypes = { 26 | drawer: PropTypes.object, 27 | }; 28 | 29 | render() { 30 | return ( 31 | 32 | {/* Drawer Content 33 | */} 34 | Title: {this.props.title} 35 | {this.props.name === 'tab_1_1' && ( 36 | 37 | )} 38 | {this.props.name === 'tab_2_1' && ( 39 | 40 | )} 41 | 42 | 43 | 44 | 45 | 46 | 52 | 53 | 54 | 55 | ); 56 | } 57 | } 58 | 59 | export default DrawerContent; 60 | -------------------------------------------------------------------------------- /examples/react-native/components/lightbox/BaseLightbox.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import {View, StyleSheet, Animated, Dimensions, Button} from 'react-native'; 4 | import {Actions} from 'react-native-router-flux'; 5 | 6 | const {height: deviceHeight, width: deviceWidth} = Dimensions.get('window'); 7 | 8 | export default class BaseLightbox extends Component { 9 | static propTypes = { 10 | children: PropTypes.any, 11 | horizontalPercent: PropTypes.number, 12 | verticalPercent: PropTypes.number, 13 | }; 14 | 15 | constructor(props) { 16 | super(props); 17 | 18 | this.state = { 19 | opacity: new Animated.Value(0), 20 | }; 21 | } 22 | 23 | componentDidMount() { 24 | Animated.timing(this.state.opacity, { 25 | duration: 500, 26 | toValue: 1, 27 | }).start(); 28 | } 29 | 30 | closeModal = () => { 31 | Animated.timing(this.state.opacity, { 32 | duration: 500, 33 | toValue: 0, 34 | }).start(Actions.pop); 35 | }; 36 | 37 | _renderLightBox = () => { 38 | const {children, horizontalPercent = 1, verticalPercent = 1} = this.props; 39 | const height = verticalPercent 40 | ? deviceHeight * verticalPercent 41 | : deviceHeight; 42 | const width = horizontalPercent 43 | ? deviceWidth * horizontalPercent 44 | : deviceWidth; 45 | return ( 46 | 54 | {children} 55 |