├── .babelrc ├── .bookignore ├── .eslintignore ├── .eslintrc ├── .flowconfig ├── .gitignore ├── .npmignore ├── .npmrc ├── .travis.yml ├── .watchmanconfig ├── CHANGELOG.md ├── CONTRIBUTING.md ├── GLOSSARY.md ├── Gemfile ├── Gemfile.lock ├── LICENSE ├── README.md ├── SUMMARY.md ├── assets ├── install_remove_libs_1.png ├── install_remove_libs_2.png └── install_swift_syntax.png ├── book.json ├── build.gradle ├── docs ├── FAQ.md ├── GLOSSARY.md ├── README.md ├── api │ ├── README.md │ ├── navigator-config.md │ ├── navigator-shared-element-group.md │ ├── navigator-shared-element.md │ ├── navigator-spacer.md │ ├── navigator-tab-bar.md │ ├── navigator-tab.md │ └── navigator │ │ ├── README.md │ │ ├── dismiss.md │ │ ├── pop.md │ │ ├── present.md │ │ ├── push.md │ │ └── registerScreen.md ├── guides │ ├── README.md │ ├── basic-usage.md │ ├── custom-navigation-implementations.md │ ├── deep-linking.md │ ├── integrating-with-existing-apps.md │ ├── platform-differences.md │ ├── project-structure.md │ ├── shared-element-transitions.md │ └── tabs.md ├── implementations │ ├── DefaultImplementation.md │ └── README.md ├── installation.md ├── roadmap.md └── types │ └── NavigationResult.md ├── example ├── .buckconfig ├── .flowconfig ├── .gitattributes ├── android │ ├── .idea │ │ └── codeStyleSettings.xml │ ├── app │ │ ├── BUCK │ │ ├── build.gradle │ │ ├── proguard-rules.pro │ │ └── src │ │ │ └── main │ │ │ ├── AndroidManifest.xml │ │ │ ├── gen │ │ │ └── com │ │ │ │ └── example │ │ │ │ ├── BuildConfig.java │ │ │ │ ├── Manifest.java │ │ │ │ └── R.java │ │ │ ├── ic_launcher-web.png │ │ │ ├── java │ │ │ └── com │ │ │ │ └── airbnb │ │ │ │ └── android │ │ │ │ └── react │ │ │ │ └── navigation │ │ │ │ └── example │ │ │ │ ├── MainActivity.java │ │ │ │ ├── MainApplication.java │ │ │ │ ├── MainFragment.java │ │ │ │ └── NativeFragment.java │ │ │ └── res │ │ │ ├── drawable │ │ │ ├── ic_create_black_48dp.png │ │ │ ├── ic_menu_black_24dp.png │ │ │ ├── ic_settings_black_48dp.png │ │ │ ├── launcher_icon.png │ │ │ ├── legacy_image.png │ │ │ ├── n2_ic_am_tv.xml │ │ │ ├── n2_ic_am_twentyfourhourcheckin.xml │ │ │ ├── n2_ic_am_washer.xml │ │ │ ├── n2_ic_am_wifi.xml │ │ │ ├── n2_ic_arrow_back_black.xml │ │ │ └── n2_ic_arrow_back_white.xml │ │ │ ├── layout │ │ │ ├── activity_example.xml │ │ │ ├── activity_main.xml │ │ │ ├── fragment_main.xml │ │ │ └── fragment_native.xml │ │ │ ├── mipmap-hdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-mdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xhdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xxhdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xxxhdpi │ │ │ └── ic_launcher.png │ │ │ └── values │ │ │ ├── colors.xml │ │ │ ├── dimens.xml │ │ │ ├── strings.xml │ │ │ └── styles.xml │ ├── gradle.properties │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── gradlew │ └── gradlew.bat ├── components │ ├── BaseRow.js │ ├── ImageRow.js │ ├── LoremHeader.js │ ├── LoremImage.js │ ├── LoremParagraph.js │ ├── PlatformTouchableHighlight.js │ ├── Row.js │ └── Screen.js ├── icons │ ├── alarm.png │ ├── alarm@2x.png │ ├── alarm@3x.png │ ├── backup.png │ ├── backup@2x.png │ ├── backup@3x.png │ ├── chat.png │ ├── chat@2x.png │ ├── chat@3x.png │ ├── chevron_right.png │ ├── chevron_right@2x.png │ ├── chevron_right@3x.png │ ├── close.png │ ├── close@2x.png │ ├── close@3x.png │ ├── faces.png │ ├── faces@2x.png │ ├── faces@3x.png │ ├── filter.png │ ├── filter@2x.png │ ├── filter@3x.png │ ├── home.png │ ├── home@2x.png │ ├── home@3x.png │ ├── settings.png │ ├── settings@2x.png │ └── settings@3x.png ├── index.js ├── ios │ ├── Podfile │ ├── Podfile.lock │ ├── bundler │ ├── fuzzy_match │ ├── native-navigation.xcodeproj │ │ ├── project.pbxproj │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ └── native-navigation.xcscheme │ ├── native-navigation.xcworkspace │ │ └── contents.xcworkspacedata │ ├── native-navigation │ │ ├── AppDelegate.swift │ │ ├── Base.lproj │ │ │ └── LaunchScreen.xib │ │ ├── Images.xcassets │ │ │ ├── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ │ ├── Contents.json │ │ │ └── NavBarButtonPlus.imageset │ │ │ │ ├── Contents.json │ │ │ │ └── NavBarButtonPlus@3x.png │ │ ├── Info.plist │ │ └── ViewController.swift │ ├── pod │ ├── sandbox-pod │ └── xcodeproj ├── screens │ ├── NavigationBar.js │ ├── NavigationExampleScreen.js │ ├── SharedElementFromScreen.js │ ├── SharedElementToScreen.js │ └── TabScreen.js └── util │ ├── platformTouchable.js │ ├── theme.js │ └── titleForId.js ├── gradle └── wrapper │ ├── gradle-wrapper.jar │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat ├── index.js ├── lib ├── android │ ├── .idea │ │ └── codeStyleSettings.xml │ ├── build.gradle │ ├── gradle-maven-push.gradle │ ├── gradle.properties │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── gradlew │ ├── gradlew.bat │ └── src │ │ └── main │ │ ├── AndroidManifest.xml │ │ ├── gen │ │ └── com │ │ │ └── airbnb │ │ │ └── android │ │ │ ├── BuildConfig.java │ │ │ ├── Manifest.java │ │ │ └── R.java │ │ ├── java │ │ └── com │ │ │ └── airbnb │ │ │ └── android │ │ │ └── react │ │ │ └── navigation │ │ │ ├── ActivityUtils.java │ │ │ ├── AndroidVersion.java │ │ │ ├── AutoSharedElementCallback.java │ │ │ ├── BackStack.java │ │ │ ├── BundleBuilder.java │ │ │ ├── ConversionUtil.java │ │ │ ├── DefaultNavigationImplementation.java │ │ │ ├── ExtendableBundleBuilder.java │ │ │ ├── FragmentSharedElementTransition.java │ │ │ ├── JacksonUtils.java │ │ │ ├── NativeNavigationPackage.java │ │ │ ├── NavigationImplementation.java │ │ │ ├── NavigatorModule.java │ │ │ ├── ReactActivity.java │ │ │ ├── ReactAwareActivity.java │ │ │ ├── ReactAwareActivityFacade.java │ │ │ ├── ReactBottomNavigation.java │ │ │ ├── ReactExposedActivityParams.java │ │ │ ├── ReactExposedActivityParamsConstants.java │ │ │ ├── ReactInterface.java │ │ │ ├── ReactInterfaceManager.java │ │ │ ├── ReactNativeActivity.java │ │ │ ├── ReactNativeFragment.java │ │ │ ├── ReactNativeFragmentViewGroup.java │ │ │ ├── ReactNativeIntents.java │ │ │ ├── ReactNativeTabActivity.java │ │ │ ├── ReactNativeUtils.java │ │ │ ├── ReactNavigationCoordinator.java │ │ │ ├── ReactScreenMode.java │ │ │ ├── ReactToolbar.java │ │ │ ├── ScreenCoordinator.java │ │ │ ├── ScreenCoordinatorComponent.java │ │ │ ├── ScreenCoordinatorLayout.java │ │ │ ├── SharedElementGroupManager.java │ │ │ ├── SharedElementViewManager.java │ │ │ ├── SimpleTransitionListener.java │ │ │ ├── TabBarView.java │ │ │ ├── TabBarViewManager.java │ │ │ ├── TabCoordinator.java │ │ │ ├── TabView.java │ │ │ ├── TabViewManager.java │ │ │ ├── TransitionName.java │ │ │ └── ViewUtils.java │ │ └── res │ │ ├── anim │ │ ├── delay.xml │ │ ├── fade_in.xml │ │ ├── fade_out.xml │ │ ├── slide_down.xml │ │ ├── slide_in_left.xml │ │ ├── slide_in_right.xml │ │ ├── slide_out_left.xml │ │ ├── slide_out_right.xml │ │ └── slide_up.xml │ │ ├── layout │ │ ├── activity_react_native.xml │ │ ├── activity_tab_2.xml │ │ ├── fragment_react_native.xml │ │ ├── menu_item_view.xml │ │ ├── react_root_view.xml │ │ └── tab_react_native.xml │ │ └── values │ │ ├── colors.xml │ │ ├── ids.xml │ │ └── styles.xml ├── ios │ └── native-navigation │ │ ├── Dictionary+FunctionalExtensions.swift │ │ ├── NativeNavigationBridge.m │ │ ├── ReactNavigation.swift │ │ ├── ReactNavigationCoordinator.swift │ │ ├── ReactNavigationImplementation.swift │ │ ├── ReactSharedElementAnimation.swift │ │ ├── ReactSharedElementTransition.swift │ │ ├── ReactTabBarController.swift │ │ ├── ReactViewController.swift │ │ ├── ReactViewControllerProtocol.swift │ │ ├── SharedElementGroupManager.swift │ │ ├── SharedElementGroupManagerBridge.m │ │ ├── SharedElementManager.swift │ │ ├── SharedElementManagerBridge.m │ │ ├── SharedElementTransitionController.swift │ │ ├── TabBarViewManager.swift │ │ ├── TabBarViewManagerBridge.m │ │ ├── TabViewManager.swift │ │ ├── TabViewMangerBridge.m │ │ ├── TransitionAnimation.swift │ │ ├── UIBarButtonItem+addAction.swift │ │ ├── UIView+Snapshot.swift │ │ └── UIViewController+TopMostViewController.swift └── js │ ├── Config.js │ ├── EventEmitter.js │ ├── Navigator.js │ ├── NavigatorModule.js │ ├── SharedElement.js │ ├── SharedElementGroup.js │ ├── Spacer.js │ ├── Tab.js │ ├── TabBar.js │ ├── index.js │ ├── navBar.js │ ├── navigatorEmitter.js │ ├── shallowEquals.js │ └── utils.js ├── native-navigation.podspec ├── package.json ├── postinstall.sh ├── rn-cli.config.js └── settings.gradle /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-native"], 3 | "plugins": [ 4 | [ 5 | "module-resolver", 6 | { 7 | "alias": { 8 | "native-navigation": "./" 9 | }, 10 | "cwd": "babelrc" 11 | } 12 | ] 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /.bookignore: -------------------------------------------------------------------------------- 1 | lib/ 2 | gradle/ 3 | gen/ 4 | example/ 5 | build/ 6 | .gradle/ 7 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | build 3 | _book 4 | gradle 5 | lib/android 6 | lib/ios 7 | example/android 8 | example/ios 9 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "extends": "airbnb", 4 | "globals": { 5 | "__DEV__": true 6 | }, 7 | "plugins": [ 8 | "prefer-object-spread" 9 | ], 10 | "rules": { 11 | "no-console": 0, 12 | "prefer-template": 0, 13 | "global-require": 0, 14 | "no-use-before-define": 0, 15 | "prefer-object-spread/prefer-object-spread": 2, 16 | "react/prefer-stateless-function": 0, 17 | "react/jsx-filename-extension": 0, 18 | "react/sort-comp": 0, 19 | "import/no-extraneous-dependencies": 0, 20 | "import/no-unresolved": [2, { "ignore": ["^native-navigation$"] }] 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | 3 | # We fork some components by platform. 4 | .*/*.web.js 5 | .*/*.android.js 6 | 7 | # Some modules have their own node_modules with overlap 8 | .*/node_modules/node-haste/.* 9 | 10 | # Ugh 11 | .*/node_modules/babel.* 12 | .*/node_modules/babylon.* 13 | .*/node_modules/invariant.* 14 | 15 | # Ignore react and fbjs where there are overlaps, but don't ignore 16 | # anything that react-native relies on 17 | .*/node_modules/fbjs-haste/.*/__tests__/.* 18 | .*/node_modules/fbjs-haste/__forks__/Map.js 19 | .*/node_modules/fbjs-haste/__forks__/Promise.js 20 | .*/node_modules/fbjs-haste/__forks__/fetch.js 21 | .*/node_modules/fbjs-haste/core/ExecutionEnvironment.js 22 | .*/node_modules/fbjs-haste/core/isEmpty.js 23 | .*/node_modules/fbjs-haste/crypto/crc32.js 24 | .*/node_modules/fbjs-haste/stubs/ErrorUtils.js 25 | .*/node_modules/react-haste/React.js 26 | .*/node_modules/react-haste/renderers/dom/ReactDOM.js 27 | .*/node_modules/react-haste/renderers/shared/event/eventPlugins/ResponderEventPlugin.js 28 | 29 | # Ignore commoner tests 30 | .*/node_modules/commoner/test/.* 31 | 32 | # See https://github.com/facebook/flow/issues/442 33 | .*/react-tools/node_modules/commoner/lib/reader.js 34 | 35 | # Ignore jest 36 | .*/node_modules/jest-cli/.* 37 | 38 | # Ignore Website 39 | .*/website/.* 40 | 41 | [include] 42 | 43 | [libs] 44 | node_modules/react-native/Libraries/react-native/react-native-interface.js 45 | 46 | [options] 47 | module.system=haste 48 | 49 | munge_underscores=true 50 | 51 | module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub' 52 | module.name_mapper='^[./a-zA-Z0-9$_-]+\.png$' -> 'RelativeImageStub' 53 | 54 | suppress_type=$FlowIssue 55 | suppress_type=$FlowFixMe 56 | suppress_type=$FixMe 57 | 58 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(1[0-8]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\) 59 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(1[0-8]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)? #[0-9]+ 60 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy 61 | 62 | [version] 63 | 0.18.1 64 | -------------------------------------------------------------------------------- /.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 | *.iml 29 | .gradle 30 | local.properties 31 | 32 | # node.js 33 | # 34 | node_modules/* 35 | npm-debug.log 36 | 37 | # BUCK 38 | buck-out/ 39 | \.buckd/ 40 | android/app/libs 41 | *.keystore 42 | 43 | # Gitbook generated files 44 | _book 45 | 46 | Pods/ 47 | 48 | .vscode 49 | .bundle/ 50 | 51 | # Only apps should have lockfiles 52 | yarn.lock 53 | npm-shrinkwrap.json 54 | package-lock.json 55 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # babel configuration 20 | .babelrc 21 | 22 | # node-waf configuration 23 | .lock-wscript 24 | 25 | # Compiled binary addons (http://nodejs.org/api/addons.html) 26 | build/Release 27 | 28 | # Dependency directory 29 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 30 | node_modules 31 | 32 | # Jetbrains IDEs 33 | .idea 34 | 35 | #/build # commented out intentionally, since this is the meat of the package. 36 | _book 37 | 38 | # Example Project 39 | 40 | example 41 | rn-cli.config.js 42 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | package-lock=false 2 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | 3 | node_js: 4 | - "6" 5 | 6 | script: npm run ci 7 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | ## 0.2.1 (Apr 17, 2017) 4 | 5 | ## Patches 6 | 7 | - Set an id to container view in ReactActivity [(#93)](https://github.com/airbnb/native-navigation/pull/93) 8 | 9 | ## 0.2.0 (Apr 17, 2017) 10 | 11 | ## New Features 12 | 13 | - Cleanup warnings, implement some tab/tabbar props [(#74)](https://github.com/airbnb/native-navigation/pull/74) 14 | 15 | - Translucent fragments [(#69)](https://github.com/airbnb/native-navigation/pull/69) 16 | 17 | - Use the same container for all Fragments [(#50)](https://github.com/airbnb/native-navigation/pull/50) 18 | 19 | - Encapsulate a back stack in a data class [(#47)](https://github.com/airbnb/native-navigation/pull/47) 20 | 21 | 22 | ## Patches 23 | 24 | - Make android button ordering consistent with iOS [(#91)](https://github.com/airbnb/native-navigation/pull/91) 25 | 26 | - Use correct event prefix on android [(#89)](https://github.com/airbnb/native-navigation/pull/89) 27 | 28 | - Use gradle provided RN instead of specific version [(#88)](https://github.com/airbnb/native-navigation/pull/88) 29 | 30 | - Updated the ColorStateList for Tab Bars containing less then 4 tabs [(#71)](https://github.com/airbnb/native-navigation/pull/71) 31 | 32 | - De-register onReactContextInitialized listener after first run [(#58)](https://github.com/airbnb/native-navigation/pull/58) 33 | 34 | - Remove clown town dispatch asyncs [(#39)](https://github.com/airbnb/native-navigation/pull/39) 35 | 36 | 37 | ## 0.1.0 (Mar 13, 2017) 38 | 39 | - Official Release! 40 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing Guide 2 | 3 | Contributions are welcome and are greatly appreciated! Every little bit helps, and credit will 4 | always be given. 5 | 6 | 7 | ## Setting up your environment 8 | 9 | After forking to your own github org, do the following steps to get started: 10 | 11 | ```bash 12 | # clone your fork to your local machine 13 | git clone https://github.com/airbnb/native-navigation.git 14 | 15 | # step into local repo 16 | cd native-navigation 17 | 18 | # install dependencies 19 | npm install 20 | ``` 21 | 22 | ### Developing on Android 23 | 24 | ```bash 25 | # run packager for development 26 | npm start 27 | 28 | # in a separate window, you can run the example app with: 29 | npm run run:android 30 | ``` 31 | 32 | ### Developing on iOS 33 | 34 | ```bash 35 | # run packager for development 36 | npm start 37 | 38 | # in a separate window, you can run the example app with: 39 | npm run run:ios 40 | ``` 41 | 42 | ### Style & Linting 43 | 44 | This codebase adheres to the [Airbnb Styleguide](https://github.com/airbnb/javascript) and is 45 | enforced using [ESLint](http://eslint.org/). 46 | 47 | It is recommended that you install an eslint plugin for your editor of choice when working on this 48 | codebase, however you can always check to see if the source code is compliant by running: 49 | 50 | ```bash 51 | npm run lint 52 | ``` 53 | 54 | 55 | ### Building Docs 56 | 57 | Building the docs locally is extremely simple. First execute the following command: 58 | 59 | ```bash 60 | npm run docs:watch 61 | ``` 62 | 63 | After this, you can open up your browser to the specified port (usually http://localhost:4000 ) 64 | 65 | The browser will automatically refresh when there are changes to any of the source files. 66 | 67 | 68 | ## Pull Request Guidelines 69 | 70 | Before you submit a pull request from your forked repo, check that it meets these guidelines: 71 | 72 | 1. If the pull request adds functionality, the docs should be updated as part of the same PR. 73 | 1. If the pull request adds functionality, code in the example app that demonstrates the new functionality should be updated as part of the same PR. 74 | 1. If the pull request adds functionality, the PR description should include motivation and use cases for the feature. 75 | 1. If the pull request fixes a bug, an explanation including what the bug was, and how to reproduce it should be included in the PR description. 76 | 1. Please rebase and resolve all conflicts before submitting. 77 | -------------------------------------------------------------------------------- /GLOSSARY.md: -------------------------------------------------------------------------------- 1 | ./docs/GLOSSARY.md -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | ruby '2.4.0' 3 | gem 'cocoapods', '1.2.0' 4 | -------------------------------------------------------------------------------- /Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: https://rubygems.org/ 3 | specs: 4 | CFPropertyList (2.3.5) 5 | activesupport (4.2.8) 6 | i18n (~> 0.7) 7 | minitest (~> 5.1) 8 | thread_safe (~> 0.3, >= 0.3.4) 9 | tzinfo (~> 1.1) 10 | claide (1.0.1) 11 | cocoapods (1.2.0) 12 | activesupport (>= 4.0.2, < 5) 13 | claide (>= 1.0.1, < 2.0) 14 | cocoapods-core (= 1.2.0) 15 | cocoapods-deintegrate (>= 1.0.1, < 2.0) 16 | cocoapods-downloader (>= 1.1.3, < 2.0) 17 | cocoapods-plugins (>= 1.0.0, < 2.0) 18 | cocoapods-search (>= 1.0.0, < 2.0) 19 | cocoapods-stats (>= 1.0.0, < 2.0) 20 | cocoapods-trunk (>= 1.1.2, < 2.0) 21 | cocoapods-try (>= 1.1.0, < 2.0) 22 | colored (~> 1.2) 23 | escape (~> 0.0.4) 24 | fourflusher (~> 2.0.1) 25 | gh_inspector (~> 1.0) 26 | molinillo (~> 0.5.5) 27 | nap (~> 1.0) 28 | ruby-macho (~> 0.2.5) 29 | xcodeproj (>= 1.4.1, < 2.0) 30 | cocoapods-core (1.2.0) 31 | activesupport (>= 4.0.2, < 5) 32 | fuzzy_match (~> 2.0.4) 33 | nap (~> 1.0) 34 | cocoapods-deintegrate (1.0.1) 35 | cocoapods-downloader (1.1.3) 36 | cocoapods-plugins (1.0.0) 37 | nap 38 | cocoapods-search (1.0.0) 39 | cocoapods-stats (1.0.0) 40 | cocoapods-trunk (1.1.2) 41 | nap (>= 0.8, < 2.0) 42 | netrc (= 0.7.8) 43 | cocoapods-try (1.1.0) 44 | colored (1.2) 45 | escape (0.0.4) 46 | fourflusher (2.0.1) 47 | fuzzy_match (2.0.4) 48 | gh_inspector (1.0.3) 49 | i18n (0.8.1) 50 | minitest (5.10.1) 51 | molinillo (0.5.7) 52 | nanaimo (0.2.3) 53 | nap (1.1.0) 54 | netrc (0.7.8) 55 | ruby-macho (0.2.6) 56 | thread_safe (0.3.6) 57 | tzinfo (1.2.2) 58 | thread_safe (~> 0.1) 59 | xcodeproj (1.4.2) 60 | CFPropertyList (~> 2.3.3) 61 | activesupport (>= 3) 62 | claide (>= 1.0.1, < 2.0) 63 | colored (~> 1.2) 64 | nanaimo (~> 0.2.3) 65 | 66 | PLATFORMS 67 | ruby 68 | 69 | DEPENDENCIES 70 | cocoapods (= 1.2.0) 71 | 72 | RUBY VERSION 73 | ruby 2.2.4p230 74 | 75 | BUNDLED WITH 76 | 1.14.6 77 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 Airbnb 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 | -------------------------------------------------------------------------------- /SUMMARY.md: -------------------------------------------------------------------------------- 1 | ./docs/README.md -------------------------------------------------------------------------------- /assets/install_remove_libs_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/airbnb/native-navigation/9cf50bf9b751b40778f473f3b19fcfe2c4d40599/assets/install_remove_libs_1.png -------------------------------------------------------------------------------- /assets/install_remove_libs_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/airbnb/native-navigation/9cf50bf9b751b40778f473f3b19fcfe2c4d40599/assets/install_remove_libs_2.png -------------------------------------------------------------------------------- /assets/install_swift_syntax.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/airbnb/native-navigation/9cf50bf9b751b40778f473f3b19fcfe2c4d40599/assets/install_swift_syntax.png -------------------------------------------------------------------------------- /book.json: -------------------------------------------------------------------------------- 1 | { 2 | "gitbook": "3.2.2", 3 | "title": "Native Navigation", 4 | "description": "Native Navigation for React Native", 5 | "structure": { 6 | "glossary": "GLOSSARY.md" 7 | }, 8 | "plugins": [ 9 | "edit-link", 10 | "prism", 11 | "-highlight", 12 | "github", 13 | "anchorjs", 14 | "-search" 15 | ], 16 | "pluginsConfig": { 17 | "edit-link": { 18 | "base": "https://github.com/airbnb/native-navigation/tree/master", 19 | "label": "Edit This Page" 20 | }, 21 | "github": { 22 | "url": "https://github.com/airbnb/native-navigation/" 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | repositories { 5 | jcenter() 6 | } 7 | dependencies { 8 | classpath 'com.android.tools.build:gradle:2.3.0' 9 | } 10 | } 11 | 12 | allprojects { 13 | repositories { 14 | mavenLocal() 15 | jcenter() 16 | maven { 17 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 18 | url "$rootDir/node_modules/react-native/android" 19 | } 20 | } 21 | } 22 | 23 | task clean(type: Delete) { 24 | delete rootProject.buildDir 25 | } 26 | -------------------------------------------------------------------------------- /docs/FAQ.md: -------------------------------------------------------------------------------- 1 | # Frequently Asked Questions 2 | 3 | ## Is Native Navigation used in the public Airbnb app? 4 | 5 | Not yet. This repository started out as a direct rewrite of the Navigation infrastructure we 6 | currently use in our public app. It started out very coupled to our own Navigation components, and 7 | we are currently attempting to replace our current navigation infrastructure with this library 8 | using a [custom implementation](/docs/guides/custom-navigation-implementations.md). We consider 9 | this one of our criteria in our [Roadmap to 1.0](/docs/roadmap.md), and will not consider the 10 | library to be "production ready" until we ourselves are using it in production. 11 | 12 | 13 | ## I want to use React Native in my app, but we have custom Navigation. Can this library work for me? 14 | 15 | Maybe. We have explicitly designed this library to be extensible so that apps with existing infrastructure 16 | that's *not* in React Native can integrate with our library and have their React Native screens and 17 | "Native" screens use the same navigation components. This is precisely why we built the library for 18 | Airbnb in the first place. With that said, we can't guarantee that this library will integrate 19 | seamlessly with yours. If you are having any trouble with this, please file an issue. We are still 20 | learning what points of extensibility are needed. See our 21 | [custom implementation guide](/docs/guides/custom-navigation-implementations.md) for more info. 22 | 23 | 24 | ## Why is Native Navigation written in Swift? 25 | 26 | Native Navigation is written using Swift because Airbnb is written with Swift, and we are likely 27 | not going to change that any time soon. This makes integrating with React Native slightly more 28 | difficult, but we are hoping that this will get better over time. 29 | 30 | -------------------------------------------------------------------------------- /docs/GLOSSARY.md: -------------------------------------------------------------------------------- 1 | # Thunk 2 | 3 | Description about term 4 | 5 | 6 | # Screen 7 | 8 | what is a screen 9 | 10 | 11 | # Screen Identifier 12 | 13 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | ## Table of Contents 2 | 3 | * [Introduction](/README.md) 4 | * [Installation](/docs/installation.md) 5 | * [Roadmap to 1.0](/docs/roadmap.md) 6 | * [Guides](/docs/guides/README.md) 7 | * [Integrating with existing apps](/docs/guides/integrating-with-existing-apps.md) 8 | * [Custom Navigation Implementations](/docs/guides/custom-navigation-implementations.md) 9 | * [Tabs](/docs/guides/tabs.md) 10 | * [Deep Linking](/docs/guides/deep-linking.md) 11 | * [Project Structure](/docs/guides/project-structure.md) 12 | * [Shared Element Transitions](/docs/guides/shared-element-transitions.md) 13 | * [API Documentation](/docs/api/README.md) 14 | * [Navigator](/docs/api/navigator/README.md) 15 | * [Navigator.registerScreen](/docs/api/navigator/registerScreen.md) 16 | * [Navigator.push](/docs/api/navigator/push.md) 17 | * [Navigator.present](/docs/api/navigator/present.md) 18 | * [Navigator.pop](/docs/api/navigator/pop.md) 19 | * [Navigator.dismiss](/docs/api/navigator/dismiss.md) 20 | * [Config](/docs/api/navigator-config.md) 21 | * [Spacer](/docs/api/navigator-spacer.md) 22 | * [Tab](/docs/api/navigator-tab.md) 23 | * [TabBar](/docs/api/navigator-tab-bar.md) 24 | * [SharedElement](/docs/api/navigator-shared-element.md) 25 | * [SharedElementGroup](/docs/api/navigator-shared-element-group.md) 26 | * [Implementations](/docs/implementations/README.md) 27 | * [DefaultImplementations](/docs/implementations/DefaultImplementation.md) 28 | * [Change Log](/CHANGELOG.md) 29 | * [FAQ](/docs/FAQ.md) 30 | * [Contributing Guide](/CONTRIBUTING.md) 31 | -------------------------------------------------------------------------------- /docs/api/README.md: -------------------------------------------------------------------------------- 1 | # API Reference 2 | 3 | 4 | ```js 5 | import Navigator from 'native-navigation'; 6 | ``` 7 | 8 | 9 | ### `Navigator` 10 | 11 | [View Documentation](/docs/api/navigator.md) 12 | 13 | ### `` 14 | 15 | [View Documentation](/docs/api/navigator-config.md) 16 | 17 | ### `` 18 | 19 | [View Documentation](/docs/api/navigator-spacer.md) 20 | 21 | ### `` 22 | 23 | [View Documentation](/docs/api/navigator-tab-bat.md) 24 | 25 | ### `` 26 | 27 | [View Documentation](/docs/api/navigator-tab.md) 28 | 29 | ### `` 30 | 31 | [View Documentation](/docs/api/navigator-shared-element.md) 32 | 33 | ### `` 34 | 35 | [View Documentation](/docs/api/navigator-shared-element-group.md) 36 | -------------------------------------------------------------------------------- /docs/api/navigator-shared-element-group.md: -------------------------------------------------------------------------------- 1 | # `` 2 | 3 | 4 | ## Props 5 | 6 | #### `id: number | string` 7 | 8 | 9 | ## Example Usage 10 | 11 | ```jsx 12 | import React from 'react'; 13 | import { Image } from 'react-native'; 14 | import { SharedElement } from 'native-navigation'; 15 | 16 | export default class UserImage extends React.Component { 17 | render() { 18 | const { user } = this.props; 19 | return ( 20 | 25 | 29 | 30 | ); 31 | } 32 | } 33 | ``` 34 | 35 | 36 | ## Related Guides 37 | 38 | - [Shared Element Transitions](/docs/guides/shared-element-transitions.md) 39 | 40 | 41 | ## Related pages 42 | 43 | - [`SharedElement` API Reference](/docs/api/navigator-shared-element.md) 44 | -------------------------------------------------------------------------------- /docs/api/navigator-shared-element.md: -------------------------------------------------------------------------------- 1 | # `` 2 | 3 | 4 | ## Props 5 | 6 | #### `type: string` 7 | 8 | #### `typeId: number | string` 9 | 10 | #### `subType: string` 11 | 12 | #### `subTypeId: number | string` 13 | 14 | 15 | ## Example Usage 16 | 17 | ```jsx 18 | import React from 'react'; 19 | import { Image } from 'react-native'; 20 | import { SharedElement } from 'native-navigation'; 21 | 22 | export default class UserImage extends React.Component { 23 | render() { 24 | const { user } = this.props; 25 | return ( 26 | 31 | 35 | 36 | ); 37 | } 38 | } 39 | ``` 40 | 41 | 42 | ## Related Guides 43 | 44 | - [Shared Element Transitions](/docs/guides/shared-element-transitions.md) 45 | 46 | 47 | ## Related pages 48 | 49 | - [`SharedElementGroup` API Reference](/docs/api/navigator-shared-element-group.md) 50 | -------------------------------------------------------------------------------- /docs/api/navigator-spacer.md: -------------------------------------------------------------------------------- 1 | # `` 2 | 3 | The `Spacer` component is intended to be used in order to properly pad content to never be rendered 4 | under the navigation bar. 5 | 6 | This component automatically sizes itself and changes height when the navigation bar changes height. 7 | 8 | 9 | ## Props 10 | 11 | #### `animated: boolean` 12 | 13 | Whether or not you want this view's height to animate when the size of the navigation bar changes. 14 | 15 | Default is `false`. 16 | 17 | 18 | ## Example Usage 19 | 20 | ```jsx 21 | import React from 'react'; 22 | import { ScrollView, View, Text } from 'react-native'; 23 | import { Spacer } from 'native-navigation'; 24 | 25 | export default class Screen extends React.Component { 26 | render() { 27 | return ( 28 | 29 | 30 | {/* This view will be the exact height of the Navigation Bar */} 31 | 32 | 33 | {/* This content will be rendered below the navigation bar */} 34 | 35 | Hello World 36 | 37 | 38 | ) 39 | } 40 | } 41 | ``` 42 | -------------------------------------------------------------------------------- /docs/api/navigator-tab-bar.md: -------------------------------------------------------------------------------- 1 | # `` 2 | 3 | 4 | ## Props 5 | 6 | _The `TabBar` component does not have any non-implementation props_ 7 | 8 | 9 | ## Implementation Props 10 | 11 | The following props are defined on the tab bar as a part of the [DefaultImplementation](/docs/implementations/DefaultImplementation.md): 12 | 13 | #### `enabled: boolean` 14 | 15 | #### `backgroundColor: Color` 16 | 17 | #### `backgroundImage: Image` 18 | 19 | #### `shadowImage: Image` 20 | 21 | #### `selectionIndicatorImage: Image` 22 | 23 | #### `elevation: number` 24 | 25 | #### `translucent: boolean` 26 | 27 | #### `tintColor: Color` 28 | 29 | #### `barTintColor: Color` 30 | 31 | #### `itemIconColor: Color` 32 | 33 | #### `itemIconActiveColor: Color` 34 | 35 | #### `itemIconSelectedColor: Color` 36 | 37 | #### `itemIconDisabledColor: Color` 38 | 39 | #### `itemTextColor: Color` 40 | 41 | #### `itemTextActiveColor: Color` 42 | 43 | #### `itemTextSelectedColor: Color` 44 | 45 | #### `itemTextDisabledColor: Color` 46 | 47 | 48 | ## Example Usage 49 | 50 | ```jsx 51 | 52 | ``` 53 | 54 | ## Related Pages 55 | 56 | - [`Tab` API Reference](/docs/api/navigator-tab.md) 57 | 58 | 59 | ## Related Guides 60 | 61 | - [Tabs](/docs/guides/tabs.md) 62 | -------------------------------------------------------------------------------- /docs/api/navigator-tab.md: -------------------------------------------------------------------------------- 1 | # `` 2 | 3 | The `Spacer` component is intended to be used in order to properly pad content to never be rendered 4 | under the navigation bar. 5 | 6 | This component automatically sizes itself and changes height when the navigation bar changes height. 7 | 8 | 9 | ## Props 10 | 11 | #### `route: string` (required) 12 | 13 | #### `props: Object` 14 | 15 | 16 | ## Implementation Props 17 | 18 | The following props are defined on tab as a part of the [DefaultImplementation](/docs/implementations/DefaultImplementation.md): 19 | 20 | #### `enabled: boolean` 21 | 22 | #### `image: Image` 23 | 24 | #### `selectedImage: Image` 25 | 26 | #### `title: string` 27 | 28 | #### `titleFontSize: number` 29 | 30 | #### `titleFontColor: Color` 31 | 32 | #### `titleFontName: string` 33 | 34 | #### `badgeValue: number` 35 | 36 | #### `badgeColor: Color` 37 | 38 | #### `badgeFontSize: number` 39 | 40 | #### `badgeFontColor: Color` 41 | 42 | #### `badgeFontName: string` 43 | 44 | 45 | ## Example Usage 46 | 47 | ```jsx 48 | 49 | ``` 50 | 51 | ## Related Pages 52 | 53 | - [`TabBar` API Reference](/docs/api/navigator-tab-bar.md) 54 | 55 | ## Related Guides 56 | 57 | - [Tabs](/docs/guides/tabs.md) 58 | -------------------------------------------------------------------------------- /docs/api/navigator/README.md: -------------------------------------------------------------------------------- 1 | # Navigator: API Reference 2 | 3 | 4 | ## Methods 5 | 6 | ### `registerScreen(screenName, getScreen[, options])` 7 | 8 | [View Documentation](/docs/api/navigator/registerScreen.md) 9 | 10 | 11 | ### `push(screenName[, props, options]): Promise` 12 | 13 | [View Documentation](/docs/api/navigator/push.md) 14 | 15 | 16 | ### `present(screenName[, props, options]): Promise` 17 | 18 | [View Documentation](/docs/api/navigator/present.md) 19 | 20 | 21 | ### `pop([payload])` 22 | 23 | [View Documentation](/docs/api/navigator/pop.md) 24 | 25 | 26 | ### `dismiss([payload])` 27 | 28 | [View Documentation](/docs/api/navigator/dismiss.md) 29 | 30 | 31 | ## Components 32 | 33 | ### `Config` 34 | 35 | [View Documentation](/docs/api/navigator-config.md) 36 | 37 | ### `Spacer` 38 | 39 | [View Documentation](/docs/api/navigator-spacer.md) 40 | 41 | ### `TabBar` 42 | 43 | [View Documentation](/docs/api/navigator-tab-bat.md) 44 | 45 | ### `Tab` 46 | 47 | [View Documentation](/docs/api/navigator-tab.md) 48 | 49 | ### `SharedElement` 50 | 51 | [View Documentation](/docs/api/navigator-shared-element.md) 52 | 53 | ### `SharedElementGroup` 54 | 55 | [View Documentation](/docs/api/navigator-shared-element-group.md) 56 | -------------------------------------------------------------------------------- /docs/api/navigator/dismiss.md: -------------------------------------------------------------------------------- 1 | # `dismiss([payload])` 2 | 3 | ## Arguments 4 | 5 | 1. `payload` (`Object`): An optional payload to pass back to the presenting screen. This is what 6 | the promise returned from `present(...)` will resolve with. 7 | 8 | ## Example Usage 9 | 10 | ```js 11 | import Navigator from 'native-navigation'; 12 | 13 | Navigator.dismiss(); 14 | ``` 15 | 16 | 17 | ## Related Guides 18 | 19 | - [Basic Usage](/docs/guides/basic-usage.md) 20 | -------------------------------------------------------------------------------- /docs/api/navigator/pop.md: -------------------------------------------------------------------------------- 1 | # `pop()` 2 | 3 | 4 | 5 | ## Example Usage 6 | 7 | ```js 8 | import Navigator from 'native-navigation'; 9 | 10 | Navigator.pop(); 11 | ``` 12 | 13 | 14 | ## Related Guides 15 | 16 | - [Basic Usage](/docs/guides/basic-usage.md) 17 | -------------------------------------------------------------------------------- /docs/api/navigator/present.md: -------------------------------------------------------------------------------- 1 | # `present(screenName[, props, options])` 2 | 3 | ## Arguments 4 | 5 | 1. `screenName` (`string`): The screen identifier of the screen to be pushed. 6 | 2. `props` (`Object`): Props to be passed into the presented screen. 7 | 3. `options` (`Object`): Options for the navigation transition: 8 | - `options.transitionGroup` (`string`): The shared element group ID to use for the shared element 9 | transition 10 | - `options.modalPresentationStyle` (`string`, iOS only): The presentation style to use when presenting 11 | the view modally. Either `fullScreen` (default), `pageSheet`, `formSheet`, `currentContext`, `custom`, 12 | `overFullScreen`, `overCurrentContext`, `popover` or `none`. 13 | 14 | ## Returns 15 | 16 | (`Promise`): A promise that resolves when the presented screen gets dismissed. 17 | 18 | ## Example Usage 19 | 20 | 21 | ```js 22 | import React from 'react'; 23 | 24 | import Navigator from 'native-navigation'; 25 | 26 | class Foo extends React.Component { 27 | constructor(props) { 28 | super(props); 29 | this.state = { 30 | registered: false, 31 | }; 32 | this.onPress = this.onPress.bind(this); 33 | } 34 | onPress() { 35 | return Navigator 36 | .present('Register', { source: 'Foo' }) 37 | .then(({ code }) => this.setState({ registered: code === Navigator.RESULT_OK })); 38 | } 39 | render() { 40 | return ( 41 | 42 | {!registered && ( 43 |