From c37ad8a0a924d13f3897bc72fbda52aac76904b6 Mon Sep 17 00:00:00 2001 From: Adam Miskiewicz Date: Thu, 26 Jan 2017 11:49:39 -0800 Subject: [PATCH] Initial public release of React Navigation --- .babelrc | 32 + .eslintrc | 77 + .flowconfig | 55 + .gitignore | 16 + .npmignore | 1 + .watchmanconfig | 1 + LICENSE | 26 + PULL_REQUEST_TEMPLATE.md | 17 + README.md | 42 + circle.yml | 23 + docs/api/navigators/DrawerNavigator.md | 120 + docs/api/navigators/Navigators.md | 21 + docs/api/navigators/StackNavigator.md | 130 + docs/api/navigators/TabNavigator.md | 143 + docs/api/routers/Routers.md | 130 + docs/api/routers/RoutersAPI.md | 101 + docs/api/routers/StackRouter.md | 64 + docs/api/routers/TabRouter.md | 60 + docs/api/views/Transitioner.md | 191 + docs/api/views/Views.md | 17 + .../2017-01-Introducing-React-Navigation.md | 61 + docs/guides/Common-Navigation-Spec.md | 229 + docs/guides/Contributors.md | 79 + docs/guides/Custom-Navigators.md | 110 + docs/guides/Customizing-Navigation.md | 53 + docs/guides/Deep-Linking.md | 107 + docs/guides/Guide-Headers.md | 98 + docs/guides/Guide-Intro.md | 124 + docs/guides/Guide-Nested.md | 72 + docs/guides/Hybrid-Navigation.md | 174 + docs/guides/Redux-Integration.md | 46 + docs/guides/Screen-Nav-Options.md | 57 + docs/guides/Screen-Navigation-Prop.md | 142 + docs/guides/Web-Integration.md | 16 + examples/HelloHybrid/.babelrc | 3 + examples/HelloHybrid/.buckconfig | 6 + examples/HelloHybrid/.flowconfig | 44 + examples/HelloHybrid/.gitattributes | 1 + examples/HelloHybrid/.gitignore | 53 + examples/HelloHybrid/.watchmanconfig | 1 + examples/HelloHybrid/HybridContainer.js | 117 + examples/HelloHybrid/ReadMe.md | 17 + .../HelloHybrid/__tests__/index.android.js | 12 + examples/HelloHybrid/__tests__/index.ios.js | 12 + examples/HelloHybrid/android/app/BUCK | 66 + examples/HelloHybrid/android/app/build.gradle | 139 + .../android/app/proguard-rules.pro | 66 + .../android/app/src/main/AndroidManifest.xml | 31 + .../java/com/hellohybrid/MainActivity.java | 15 + .../java/com/hellohybrid/MainApplication.java | 42 + .../src/main/res/mipmap-hdpi/ic_launcher.png | Bin 0 -> 3418 bytes .../src/main/res/mipmap-mdpi/ic_launcher.png | Bin 0 -> 2206 bytes .../src/main/res/mipmap-xhdpi/ic_launcher.png | Bin 0 -> 4842 bytes .../main/res/mipmap-xxhdpi/ic_launcher.png | Bin 0 -> 7718 bytes .../app/src/main/res/values/strings.xml | 3 + .../app/src/main/res/values/styles.xml | 8 + examples/HelloHybrid/android/build.gradle | 24 + .../HelloHybrid/android/gradle.properties | 20 + .../android/gradle/wrapper/gradle-wrapper.jar | Bin 0 -> 52266 bytes .../gradle/wrapper/gradle-wrapper.properties | 5 + examples/HelloHybrid/android/gradlew | 164 + examples/HelloHybrid/android/gradlew.bat | 90 + examples/HelloHybrid/android/keystores/BUCK | 8 + .../keystores/debug.keystore.properties | 4 + examples/HelloHybrid/android/settings.gradle | 3 + examples/HelloHybrid/index.android.js | 53 + examples/HelloHybrid/index.ios.js | 43 + .../ios/HelloHybrid.xcodeproj/project.pbxproj | 1113 +++ .../xcschemes/HelloHybrid.xcscheme | 129 + .../HelloHybrid/ios/HelloHybrid/AppDelegate.h | 13 + .../HelloHybrid/ios/HelloHybrid/AppDelegate.m | 54 + .../ios/HelloHybrid/AppNavigationDelegate.h | 9 + .../HelloHybrid/Base.lproj/LaunchScreen.xib | 42 + .../ios/HelloHybrid/HomeViewController.h | 12 + .../ios/HelloHybrid/HomeViewController.m | 57 + .../ios/HelloHybrid/HybridNavigationManager.h | 9 + .../ios/HelloHybrid/HybridNavigationManager.m | 42 + .../AppIcon.appiconset/Contents.json | 48 + .../HelloHybrid/ios/HelloHybrid/Info.plist | 54 + .../ios/HelloHybrid/ProfileViewController.h | 12 + .../ios/HelloHybrid/ProfileViewController.m | 70 + .../ios/HelloHybrid/ReactViewController.h | 16 + .../ios/HelloHybrid/ReactViewController.m | 34 + examples/HelloHybrid/ios/HelloHybrid/main.m | 10 + .../ios/HelloHybridTests/HelloHybridTests.m | 62 + .../ios/HelloHybridTests/Info.plist | 24 + examples/HelloHybrid/package.json | 25 + examples/HelloHybrid/screens/Settings.js | 83 + examples/HelloHybrid/screens/Story.js | 59 + examples/HelloHybrid/yarn.lock | 3924 +++++++++++ examples/LinkingExample/.babelrc | 3 + examples/LinkingExample/.buckconfig | 6 + examples/LinkingExample/.flowconfig | 44 + examples/LinkingExample/.gitattributes | 1 + examples/LinkingExample/.gitignore | 53 + examples/LinkingExample/.watchmanconfig | 1 + examples/LinkingExample/App.js | 48 + .../LinkingExample/__tests__/index.android.js | 12 + .../LinkingExample/__tests__/index.ios.js | 12 + examples/LinkingExample/android/app/BUCK | 66 + .../LinkingExample/android/app/build.gradle | 139 + .../android/app/proguard-rules.pro | 66 + .../android/app/src/main/AndroidManifest.xml | 37 + .../java/com/linkingexample/MainActivity.java | 15 + .../com/linkingexample/MainApplication.java | 48 + .../src/main/res/mipmap-hdpi/ic_launcher.png | Bin 0 -> 3418 bytes .../src/main/res/mipmap-mdpi/ic_launcher.png | Bin 0 -> 2206 bytes .../src/main/res/mipmap-xhdpi/ic_launcher.png | Bin 0 -> 4842 bytes .../main/res/mipmap-xxhdpi/ic_launcher.png | Bin 0 -> 7718 bytes .../app/src/main/res/values/strings.xml | 3 + .../app/src/main/res/values/styles.xml | 8 + examples/LinkingExample/android/build.gradle | 24 + .../LinkingExample/android/gradle.properties | 20 + .../android/gradle/wrapper/gradle-wrapper.jar | Bin 0 -> 52266 bytes .../gradle/wrapper/gradle-wrapper.properties | 5 + examples/LinkingExample/android/gradlew | 164 + examples/LinkingExample/android/gradlew.bat | 90 + .../LinkingExample/android/keystores/BUCK | 8 + .../keystores/debug.keystore.properties | 4 + .../LinkingExample/android/settings.gradle | 3 + examples/LinkingExample/index.android.js | 6 + examples/LinkingExample/index.ios.js | 6 + .../LinkingExample.xcodeproj/project.pbxproj | 988 +++ .../xcschemes/LinkingExample.xcscheme | 129 + .../ios/LinkingExample/AppDelegate.h | 16 + .../ios/LinkingExample/AppDelegate.m | 38 + .../Base.lproj/LaunchScreen.xib | 42 + .../AppIcon.appiconset/Contents.json | 38 + .../ios/LinkingExample/Info.plist | 69 + .../LinkingExample/ios/LinkingExample/main.m | 18 + .../ios/LinkingExampleTests/Info.plist | 24 + .../LinkingExampleTests/LinkingExampleTests.m | 70 + examples/LinkingExample/package.json | 22 + examples/NavigationPlayground/.babelrc | 5 + examples/NavigationPlayground/.buckconfig | 6 + examples/NavigationPlayground/.flowconfig | 50 + examples/NavigationPlayground/.gitattributes | 1 + examples/NavigationPlayground/.gitignore | 53 + examples/NavigationPlayground/.watchmanconfig | 1 + examples/NavigationPlayground/ReadMe.md | 17 + .../NavigationPlayground/__exponent/exp.json | 26 + .../__exponent/index.exp.js | 4 + .../__exponent/package.json | 15 + .../__exponent/rn-cli.config.js | 25 + .../__exponent/transformer.js | 113 + .../NavigationPlayground/android/app/BUCK | 66 + .../android/app/build.gradle | 139 + .../android/app/proguard-rules.pro | 66 + .../android/app/src/main/AndroidManifest.xml | 38 + .../app/src/main/assets/fonts/Entypo.ttf | Bin 0 -> 65584 bytes .../app/src/main/assets/fonts/EvilIcons.ttf | Bin 0 -> 13128 bytes .../app/src/main/assets/fonts/FontAwesome.ttf | Bin 0 -> 165548 bytes .../app/src/main/assets/fonts/Foundation.ttf | Bin 0 -> 56976 bytes .../app/src/main/assets/fonts/Ionicons.ttf | Bin 0 -> 143936 bytes .../assets/fonts/MaterialCommunityIcons.ttf | Bin 0 -> 245676 bytes .../src/main/assets/fonts/MaterialIcons.ttf | Bin 0 -> 128180 bytes .../app/src/main/assets/fonts/Octicons.ttf | Bin 0 -> 27428 bytes .../src/main/assets/fonts/SimpleLineIcons.ttf | Bin 0 -> 54056 bytes .../app/src/main/assets/fonts/Zocial.ttf | Bin 0 -> 25552 bytes .../navigationplayground/MainActivity.java | 15 + .../navigationplayground/MainApplication.java | 41 + .../src/main/res/mipmap-hdpi/ic_launcher.png | Bin 0 -> 3418 bytes .../src/main/res/mipmap-mdpi/ic_launcher.png | Bin 0 -> 2206 bytes .../src/main/res/mipmap-xhdpi/ic_launcher.png | Bin 0 -> 4842 bytes .../main/res/mipmap-xxhdpi/ic_launcher.png | Bin 0 -> 7718 bytes .../app/src/main/res/values/strings.xml | 4 + .../app/src/main/res/values/styles.xml | 8 + .../NavigationPlayground/android/build.gradle | 24 + .../android/gradle.properties | 20 + .../android/gradle/wrapper/gradle-wrapper.jar | Bin 0 -> 52266 bytes .../gradle/wrapper/gradle-wrapper.properties | 5 + examples/NavigationPlayground/android/gradlew | 164 + .../NavigationPlayground/android/gradlew.bat | 90 + .../android/keystores/BUCK | 8 + .../keystores/debug.keystore.properties | 4 + .../android/settings.gradle | 3 + examples/NavigationPlayground/index.js | 7 + .../project.pbxproj | 1087 +++ .../xcschemes/NavigationPlayground.xcscheme | 129 + .../ios/NavigationPlayground/AppDelegate.h | 16 + .../ios/NavigationPlayground/AppDelegate.m | 38 + .../Base.lproj/LaunchScreen.xib | 42 + .../AppIcon.appiconset/Contents.json | 48 + .../ios/NavigationPlayground/Info.plist | 81 + .../ios/NavigationPlayground/main.m | 10 + .../ios/NavigationPlaygroundTests/Info.plist | 24 + .../NavigationPlaygroundTests.m | 62 + examples/NavigationPlayground/js/App.js | 132 + examples/NavigationPlayground/js/Banner.js | 46 + .../NavigationPlayground/js/CustomTabs.js | 133 + examples/NavigationPlayground/js/Drawer.js | 93 + .../NavigationPlayground/js/ModalStack.js | 84 + .../NavigationPlayground/js/SampleText.js | 23 + .../NavigationPlayground/js/SimpleStack.js | 86 + .../NavigationPlayground/js/SimpleTabs.js | 145 + .../NavigationPlayground/js/StacksInTabs.js | 143 + .../js/assets/NavLogo.png | Bin 0 -> 30964 bytes examples/NavigationPlayground/package.json | 15 + examples/NavigationPlayground/yarn.lock | 3136 +++++++++ examples/ReduxExample/.babelrc | 3 + examples/ReduxExample/.buckconfig | 6 + examples/ReduxExample/.flowconfig | 44 + examples/ReduxExample/.gitattributes | 1 + examples/ReduxExample/.gitignore | 53 + examples/ReduxExample/.watchmanconfig | 1 + .../ReduxExample/__tests__/index.android.js | 12 + examples/ReduxExample/__tests__/index.ios.js | 12 + examples/ReduxExample/android/app/BUCK | 66 + .../ReduxExample/android/app/build.gradle | 139 + .../android/app/proguard-rules.pro | 66 + .../android/app/src/main/AndroidManifest.xml | 31 + .../java/com/reduxexample/MainActivity.java | 15 + .../com/reduxexample/MainApplication.java | 47 + .../src/main/res/mipmap-hdpi/ic_launcher.png | Bin 0 -> 3418 bytes .../src/main/res/mipmap-mdpi/ic_launcher.png | Bin 0 -> 2206 bytes .../src/main/res/mipmap-xhdpi/ic_launcher.png | Bin 0 -> 4842 bytes .../main/res/mipmap-xxhdpi/ic_launcher.png | Bin 0 -> 7718 bytes .../app/src/main/res/values/strings.xml | 3 + .../app/src/main/res/values/styles.xml | 8 + examples/ReduxExample/android/build.gradle | 24 + .../ReduxExample/android/gradle.properties | 20 + .../android/gradle/wrapper/gradle-wrapper.jar | Bin 0 -> 52266 bytes .../gradle/wrapper/gradle-wrapper.properties | 5 + examples/ReduxExample/android/gradlew | 164 + examples/ReduxExample/android/gradlew.bat | 90 + examples/ReduxExample/android/keystores/BUCK | 8 + .../keystores/debug.keystore.properties | 4 + examples/ReduxExample/android/settings.gradle | 3 + examples/ReduxExample/index.js | 182 + .../ReduxExample.xcodeproj/project.pbxproj | 988 +++ .../xcschemes/ReduxExample.xcscheme | 129 + .../ios/ReduxExample/AppDelegate.h | 8 + .../ios/ReduxExample/AppDelegate.m | 45 + .../ReduxExample/Base.lproj/LaunchScreen.xib | 42 + .../AppIcon.appiconset/Contents.json | 38 + .../ReduxExample/ios/ReduxExample/Info.plist | 54 + examples/ReduxExample/ios/ReduxExample/main.m | 10 + .../ios/ReduxExampleTests/Info.plist | 24 + .../ios/ReduxExampleTests/ReduxExampleTests.m | 62 + examples/ReduxExample/package.json | 25 + examples/ReduxExample/yarn.lock | 3853 ++++++++++ flow-typed/npm/babel-cli_vx.x.x.js | 108 + flow-typed/npm/babel-core_vx.x.x.js | 192 + flow-typed/npm/babel-eslint_vx.x.x.js | 73 + flow-typed/npm/babel-jest_vx.x.x.js | 32 + flow-typed/npm/babel-preset-es2015_vx.x.x.js | 32 + ...babel-preset-react-native-syntax_vx.x.x.js | 33 + .../npm/babel-preset-react-native_vx.x.x.js | 73 + flow-typed/npm/babel-preset-react_vx.x.x.js | 32 + flow-typed/npm/babel-preset-stage-1_vx.x.x.js | 32 + flow-typed/npm/clamp_vx.x.x.js | 38 + flow-typed/npm/eslint-config-airbnb_vx.x.x.js | 73 + .../npm/eslint-plugin-flowtype_vx.x.x.js | 319 + flow-typed/npm/eslint-plugin-import_vx.x.x.js | 326 + .../npm/eslint-plugin-jsx-a11y_vx.x.x.js | 1159 +++ flow-typed/npm/eslint-plugin-react_vx.x.x.js | 479 ++ flow-typed/npm/eslint_vx.x.x.js | 2153 ++++++ flow-typed/npm/flow-bin_v0.x.x.js | 6 + flow-typed/npm/jest_v17.x.x.js | 413 ++ .../npm/react-native-drawer-layout_vx.x.x.js | 39 + .../npm/react-native-viewpager_vx.x.x.js | 88 + package.json | 76 + rn-cli.config.js | 44 + scripts/compile-docs.js | 30 + scripts/deploy-website.sh | 19 + src/PropTypes.js | 114 + src/StateUtils.js | 204 + src/TypeDefinition.js | 420 ++ src/__tests__/NavigationStateUtils-test.js | 158 + src/__tests__/addNavigationHelpers-test.js | 53 + src/addNavigationHelpers.js | 36 + src/createNavigationContainer.js | 167 + src/navigators/DrawerNavigator.js | 71 + src/navigators/StackNavigator.js | 45 + src/navigators/TabNavigator.js | 95 + src/navigators/createNavigator.js | 34 + src/react-navigation.js | 28 + src/react-navigation.web.js | 20 + src/routers/StackRouter.js | 294 + src/routers/TabRouter.js | 250 + src/routers/__tests__/Routers-test.js | 120 + src/routers/__tests__/StackRouter-test.js | 488 ++ src/routers/__tests__/TabRouter-test.js | 358 + .../__tests__/createConfigGetter-test.js | 178 + .../__tests__/validateRouteConfigMap-test.js | 53 + src/routers/createConfigGetter.js | 72 + src/routers/getScreenForRouteName.js | 40 + src/routers/validateRouteConfigMap.js | 59 + src/views/AbstractPanResponder.js | 46 + src/views/AnimatedValueSubscription.js | 19 + src/views/Card.js | 99 + src/views/CardStack.js | 370 + src/views/CardStackPanResponder.js | 269 + src/views/CardStackStyleInterpolator.js | 178 + src/views/Drawer/DrawerNavigatorItems.js | 121 + src/views/Drawer/DrawerScreen.js | 44 + src/views/Drawer/DrawerSidebar.js | 96 + src/views/Drawer/DrawerView.js | 131 + src/views/Header.js | 279 + src/views/HeaderBackButton.js | 52 + src/views/HeaderStyleInterpolator.js | 69 + src/views/HeaderTitle.js | 34 + src/views/PointerEventsContainer.js | 121 + src/views/SceneView.js | 24 + src/views/ScenesReducer.js | 197 + src/views/TabView/TabBarBottom.js | 158 + src/views/TabView/TabBarIcon.js | 92 + src/views/TabView/TabBarTop.js | 134 + src/views/TabView/TabView.js | 202 + src/views/TouchableItem.js | 85 + src/views/TransitionConfigs.js | 97 + src/views/Transitioner.js | 286 + .../__tests__/NavigationScenesReducer-test.js | 283 + src/views/assets/back-icon.png | Bin 0 -> 177 bytes src/views/assets/back-icon@1.5x.android.png | Bin 0 -> 134 bytes src/views/assets/back-icon@1.5x.ios.png | Bin 0 -> 273 bytes src/views/assets/back-icon@1x.android.png | Bin 0 -> 100 bytes src/views/assets/back-icon@1x.ios.png | Bin 0 -> 177 bytes src/views/assets/back-icon@2x.android.png | Bin 0 -> 134 bytes src/views/assets/back-icon@2x.ios.png | Bin 0 -> 303 bytes src/views/assets/back-icon@3x.android.png | Bin 0 -> 167 bytes src/views/assets/back-icon@3x.ios.png | Bin 0 -> 439 bytes src/views/assets/back-icon@4x.android.png | Bin 0 -> 207 bytes src/views/assets/back-icon@4x.ios.png | Bin 0 -> 586 bytes src/withCachedChildNavigation.js | 67 + website/.flowconfig | 36 + website/.gitignore | 15 + website/README.md | 44 + website/config/env.js | 28 + website/config/jest/CSSStub.js | 1 + website/config/jest/FileStub.js | 1 + website/config/paths.js | 64 + website/config/polyfills.js | 14 + website/config/webpack.config.dev.js | 204 + website/config/webpack.config.prod.js | 243 + website/package.json | 109 + website/public/.npmignore | 1 + website/public/_package.json | 12 + website/public/assets/android-stack.gif | Bin 0 -> 147896 bytes website/public/assets/android-tabs.gif | Bin 0 -> 269730 bytes .../assets/examples/bare-project-android.png | Bin 0 -> 75204 bytes .../assets/examples/bare-project-iphone.png | Bin 0 -> 61271 bytes .../assets/examples/basic-header-android.png | Bin 0 -> 41850 bytes .../assets/examples/basic-header-iphone.png | Bin 0 -> 30906 bytes .../examples/first-navigation-android.png | Bin 0 -> 166996 bytes .../examples/first-navigation-iphone.png | Bin 0 -> 86540 bytes .../assets/examples/first-screen-android.png | Bin 0 -> 110965 bytes .../assets/examples/first-screen-iphone.png | Bin 0 -> 99237 bytes .../assets/examples/header-button-android.png | Bin 0 -> 43742 bytes .../assets/examples/header-button-iphone.png | Bin 0 -> 32191 bytes .../examples/header-interaction-android.png | Bin 0 -> 40464 bytes .../examples/header-interaction-iphone.png | Bin 0 -> 47095 bytes .../assets/examples/linking-android.png | Bin 0 -> 209145 bytes .../public/assets/examples/linking-iphone.png | Bin 0 -> 939281 bytes .../public/assets/examples/nested-android.png | Bin 0 -> 206087 bytes .../public/assets/examples/nested-iphone.png | Bin 0 -> 257609 bytes .../assets/examples/simple-tabs-android.png | Bin 0 -> 133859 bytes .../assets/examples/simple-tabs-iphone.png | Bin 0 -> 30987 bytes website/public/assets/iphone-stack.gif | Bin 0 -> 557035 bytes website/public/assets/iphone-tabs.gif | Bin 0 -> 73495 bytes website/public/assets/phone-android.png | Bin 0 -> 202881 bytes website/public/assets/phone-iphone.png | Bin 0 -> 65574 bytes website/public/assets/react-nav-logo.svg | 17 + .../public/assets/react-navigation-thin.svg | 12 + website/public/assets/routers-concept-map.png | Bin 0 -> 224388 bytes website/public/assets/simplestack-ios.gif | Bin 0 -> 117392 bytes website/public/assets/simpletabs-ios.gif | Bin 0 -> 123975 bytes website/public/assets/soaring-bg.jpg | Bin 0 -> 1630203 bytes website/public/assets/xcode-linking.png | Bin 0 -> 114065 bytes website/public/favicon.ico | Bin 0 -> 53760 bytes website/public/index.html | 12 + website/scripts/build.js | 251 + website/scripts/start.js | 268 + website/scripts/test.js | 19 + website/src/App.css | 604 ++ website/src/App.js | 338 + website/src/App.test.js | 8 + website/src/AppFrame.js | 95 + website/src/BrowserAppContainer.js | 91 + website/src/CodeBlock.js | 15 + website/src/Footer.js | 19 + website/src/HomePage.js | 207 + website/src/Link.js | 55 + website/src/MDPage.js | 76 + website/src/PageWithSidebar.js | 118 + website/src/PhoneGraphic.js | 34 + website/src/Server.js | 75 + website/src/index.js | 15 + website/src/prism.css | 149 + website/yarn.lock | 6235 +++++++++++++++++ yarn.lock | 4870 +++++++++++++ 391 files changed, 51942 insertions(+) create mode 100644 .babelrc create mode 100644 .eslintrc create mode 100644 .flowconfig create mode 100644 .gitignore create mode 100644 .npmignore create mode 100644 .watchmanconfig create mode 100644 LICENSE create mode 100644 PULL_REQUEST_TEMPLATE.md create mode 100644 README.md create mode 100644 circle.yml create mode 100644 docs/api/navigators/DrawerNavigator.md create mode 100644 docs/api/navigators/Navigators.md create mode 100644 docs/api/navigators/StackNavigator.md create mode 100644 docs/api/navigators/TabNavigator.md create mode 100644 docs/api/routers/Routers.md create mode 100644 docs/api/routers/RoutersAPI.md create mode 100644 docs/api/routers/StackRouter.md create mode 100644 docs/api/routers/TabRouter.md create mode 100644 docs/api/views/Transitioner.md create mode 100644 docs/api/views/Views.md create mode 100644 docs/blog/2017-01-Introducing-React-Navigation.md create mode 100644 docs/guides/Common-Navigation-Spec.md create mode 100644 docs/guides/Contributors.md create mode 100644 docs/guides/Custom-Navigators.md create mode 100644 docs/guides/Customizing-Navigation.md create mode 100644 docs/guides/Deep-Linking.md create mode 100644 docs/guides/Guide-Headers.md create mode 100644 docs/guides/Guide-Intro.md create mode 100644 docs/guides/Guide-Nested.md create mode 100644 docs/guides/Hybrid-Navigation.md create mode 100644 docs/guides/Redux-Integration.md create mode 100644 docs/guides/Screen-Nav-Options.md create mode 100644 docs/guides/Screen-Navigation-Prop.md create mode 100644 docs/guides/Web-Integration.md create mode 100644 examples/HelloHybrid/.babelrc create mode 100644 examples/HelloHybrid/.buckconfig create mode 100644 examples/HelloHybrid/.flowconfig create mode 100644 examples/HelloHybrid/.gitattributes create mode 100644 examples/HelloHybrid/.gitignore create mode 100644 examples/HelloHybrid/.watchmanconfig create mode 100644 examples/HelloHybrid/HybridContainer.js create mode 100644 examples/HelloHybrid/ReadMe.md create mode 100644 examples/HelloHybrid/__tests__/index.android.js create mode 100644 examples/HelloHybrid/__tests__/index.ios.js create mode 100644 examples/HelloHybrid/android/app/BUCK create mode 100644 examples/HelloHybrid/android/app/build.gradle create mode 100644 examples/HelloHybrid/android/app/proguard-rules.pro create mode 100644 examples/HelloHybrid/android/app/src/main/AndroidManifest.xml create mode 100644 examples/HelloHybrid/android/app/src/main/java/com/hellohybrid/MainActivity.java create mode 100644 examples/HelloHybrid/android/app/src/main/java/com/hellohybrid/MainApplication.java create mode 100644 examples/HelloHybrid/android/app/src/main/res/mipmap-hdpi/ic_launcher.png create mode 100644 examples/HelloHybrid/android/app/src/main/res/mipmap-mdpi/ic_launcher.png create mode 100644 examples/HelloHybrid/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png create mode 100644 examples/HelloHybrid/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png create mode 100644 examples/HelloHybrid/android/app/src/main/res/values/strings.xml create mode 100644 examples/HelloHybrid/android/app/src/main/res/values/styles.xml create mode 100644 examples/HelloHybrid/android/build.gradle create mode 100644 examples/HelloHybrid/android/gradle.properties create mode 100644 examples/HelloHybrid/android/gradle/wrapper/gradle-wrapper.jar create mode 100644 examples/HelloHybrid/android/gradle/wrapper/gradle-wrapper.properties create mode 100755 examples/HelloHybrid/android/gradlew create mode 100644 examples/HelloHybrid/android/gradlew.bat create mode 100644 examples/HelloHybrid/android/keystores/BUCK create mode 100644 examples/HelloHybrid/android/keystores/debug.keystore.properties create mode 100644 examples/HelloHybrid/android/settings.gradle create mode 100644 examples/HelloHybrid/index.android.js create mode 100644 examples/HelloHybrid/index.ios.js create mode 100644 examples/HelloHybrid/ios/HelloHybrid.xcodeproj/project.pbxproj create mode 100644 examples/HelloHybrid/ios/HelloHybrid.xcodeproj/xcshareddata/xcschemes/HelloHybrid.xcscheme create mode 100644 examples/HelloHybrid/ios/HelloHybrid/AppDelegate.h create mode 100644 examples/HelloHybrid/ios/HelloHybrid/AppDelegate.m create mode 100644 examples/HelloHybrid/ios/HelloHybrid/AppNavigationDelegate.h create mode 100644 examples/HelloHybrid/ios/HelloHybrid/Base.lproj/LaunchScreen.xib create mode 100644 examples/HelloHybrid/ios/HelloHybrid/HomeViewController.h create mode 100644 examples/HelloHybrid/ios/HelloHybrid/HomeViewController.m create mode 100644 examples/HelloHybrid/ios/HelloHybrid/HybridNavigationManager.h create mode 100644 examples/HelloHybrid/ios/HelloHybrid/HybridNavigationManager.m create mode 100644 examples/HelloHybrid/ios/HelloHybrid/Images.xcassets/AppIcon.appiconset/Contents.json create mode 100644 examples/HelloHybrid/ios/HelloHybrid/Info.plist create mode 100644 examples/HelloHybrid/ios/HelloHybrid/ProfileViewController.h create mode 100644 examples/HelloHybrid/ios/HelloHybrid/ProfileViewController.m create mode 100644 examples/HelloHybrid/ios/HelloHybrid/ReactViewController.h create mode 100644 examples/HelloHybrid/ios/HelloHybrid/ReactViewController.m create mode 100644 examples/HelloHybrid/ios/HelloHybrid/main.m create mode 100644 examples/HelloHybrid/ios/HelloHybridTests/HelloHybridTests.m create mode 100644 examples/HelloHybrid/ios/HelloHybridTests/Info.plist create mode 100644 examples/HelloHybrid/package.json create mode 100644 examples/HelloHybrid/screens/Settings.js create mode 100644 examples/HelloHybrid/screens/Story.js create mode 100644 examples/HelloHybrid/yarn.lock create mode 100644 examples/LinkingExample/.babelrc create mode 100644 examples/LinkingExample/.buckconfig create mode 100644 examples/LinkingExample/.flowconfig create mode 100644 examples/LinkingExample/.gitattributes create mode 100644 examples/LinkingExample/.gitignore create mode 100644 examples/LinkingExample/.watchmanconfig create mode 100644 examples/LinkingExample/App.js create mode 100644 examples/LinkingExample/__tests__/index.android.js create mode 100644 examples/LinkingExample/__tests__/index.ios.js create mode 100644 examples/LinkingExample/android/app/BUCK create mode 100644 examples/LinkingExample/android/app/build.gradle create mode 100644 examples/LinkingExample/android/app/proguard-rules.pro create mode 100644 examples/LinkingExample/android/app/src/main/AndroidManifest.xml create mode 100644 examples/LinkingExample/android/app/src/main/java/com/linkingexample/MainActivity.java create mode 100644 examples/LinkingExample/android/app/src/main/java/com/linkingexample/MainApplication.java create mode 100644 examples/LinkingExample/android/app/src/main/res/mipmap-hdpi/ic_launcher.png create mode 100644 examples/LinkingExample/android/app/src/main/res/mipmap-mdpi/ic_launcher.png create mode 100644 examples/LinkingExample/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png create mode 100644 examples/LinkingExample/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png create mode 100644 examples/LinkingExample/android/app/src/main/res/values/strings.xml create mode 100644 examples/LinkingExample/android/app/src/main/res/values/styles.xml create mode 100644 examples/LinkingExample/android/build.gradle create mode 100644 examples/LinkingExample/android/gradle.properties create mode 100644 examples/LinkingExample/android/gradle/wrapper/gradle-wrapper.jar create mode 100644 examples/LinkingExample/android/gradle/wrapper/gradle-wrapper.properties create mode 100755 examples/LinkingExample/android/gradlew create mode 100644 examples/LinkingExample/android/gradlew.bat create mode 100644 examples/LinkingExample/android/keystores/BUCK create mode 100644 examples/LinkingExample/android/keystores/debug.keystore.properties create mode 100644 examples/LinkingExample/android/settings.gradle create mode 100644 examples/LinkingExample/index.android.js create mode 100644 examples/LinkingExample/index.ios.js create mode 100644 examples/LinkingExample/ios/LinkingExample.xcodeproj/project.pbxproj create mode 100644 examples/LinkingExample/ios/LinkingExample.xcodeproj/xcshareddata/xcschemes/LinkingExample.xcscheme create mode 100644 examples/LinkingExample/ios/LinkingExample/AppDelegate.h create mode 100644 examples/LinkingExample/ios/LinkingExample/AppDelegate.m create mode 100644 examples/LinkingExample/ios/LinkingExample/Base.lproj/LaunchScreen.xib create mode 100644 examples/LinkingExample/ios/LinkingExample/Images.xcassets/AppIcon.appiconset/Contents.json create mode 100644 examples/LinkingExample/ios/LinkingExample/Info.plist create mode 100644 examples/LinkingExample/ios/LinkingExample/main.m create mode 100644 examples/LinkingExample/ios/LinkingExampleTests/Info.plist create mode 100644 examples/LinkingExample/ios/LinkingExampleTests/LinkingExampleTests.m create mode 100644 examples/LinkingExample/package.json create mode 100644 examples/NavigationPlayground/.babelrc create mode 100644 examples/NavigationPlayground/.buckconfig create mode 100644 examples/NavigationPlayground/.flowconfig create mode 100644 examples/NavigationPlayground/.gitattributes create mode 100644 examples/NavigationPlayground/.gitignore create mode 100644 examples/NavigationPlayground/.watchmanconfig create mode 100644 examples/NavigationPlayground/ReadMe.md create mode 100644 examples/NavigationPlayground/__exponent/exp.json create mode 100644 examples/NavigationPlayground/__exponent/index.exp.js create mode 100644 examples/NavigationPlayground/__exponent/package.json create mode 100644 examples/NavigationPlayground/__exponent/rn-cli.config.js create mode 100644 examples/NavigationPlayground/__exponent/transformer.js create mode 100644 examples/NavigationPlayground/android/app/BUCK create mode 100644 examples/NavigationPlayground/android/app/build.gradle create mode 100644 examples/NavigationPlayground/android/app/proguard-rules.pro create mode 100644 examples/NavigationPlayground/android/app/src/main/AndroidManifest.xml create mode 100644 examples/NavigationPlayground/android/app/src/main/assets/fonts/Entypo.ttf create mode 100644 examples/NavigationPlayground/android/app/src/main/assets/fonts/EvilIcons.ttf create mode 100644 examples/NavigationPlayground/android/app/src/main/assets/fonts/FontAwesome.ttf create mode 100644 examples/NavigationPlayground/android/app/src/main/assets/fonts/Foundation.ttf create mode 100644 examples/NavigationPlayground/android/app/src/main/assets/fonts/Ionicons.ttf create mode 100644 examples/NavigationPlayground/android/app/src/main/assets/fonts/MaterialCommunityIcons.ttf create mode 100644 examples/NavigationPlayground/android/app/src/main/assets/fonts/MaterialIcons.ttf create mode 100644 examples/NavigationPlayground/android/app/src/main/assets/fonts/Octicons.ttf create mode 100644 examples/NavigationPlayground/android/app/src/main/assets/fonts/SimpleLineIcons.ttf create mode 100644 examples/NavigationPlayground/android/app/src/main/assets/fonts/Zocial.ttf create mode 100644 examples/NavigationPlayground/android/app/src/main/java/com/navigationplayground/MainActivity.java create mode 100644 examples/NavigationPlayground/android/app/src/main/java/com/navigationplayground/MainApplication.java create mode 100644 examples/NavigationPlayground/android/app/src/main/res/mipmap-hdpi/ic_launcher.png create mode 100644 examples/NavigationPlayground/android/app/src/main/res/mipmap-mdpi/ic_launcher.png create mode 100644 examples/NavigationPlayground/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png create mode 100644 examples/NavigationPlayground/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png create mode 100644 examples/NavigationPlayground/android/app/src/main/res/values/strings.xml create mode 100644 examples/NavigationPlayground/android/app/src/main/res/values/styles.xml create mode 100644 examples/NavigationPlayground/android/build.gradle create mode 100644 examples/NavigationPlayground/android/gradle.properties create mode 100644 examples/NavigationPlayground/android/gradle/wrapper/gradle-wrapper.jar create mode 100644 examples/NavigationPlayground/android/gradle/wrapper/gradle-wrapper.properties create mode 100755 examples/NavigationPlayground/android/gradlew create mode 100644 examples/NavigationPlayground/android/gradlew.bat create mode 100644 examples/NavigationPlayground/android/keystores/BUCK create mode 100644 examples/NavigationPlayground/android/keystores/debug.keystore.properties create mode 100644 examples/NavigationPlayground/android/settings.gradle create mode 100644 examples/NavigationPlayground/index.js create mode 100644 examples/NavigationPlayground/ios/NavigationPlayground.xcodeproj/project.pbxproj create mode 100644 examples/NavigationPlayground/ios/NavigationPlayground.xcodeproj/xcshareddata/xcschemes/NavigationPlayground.xcscheme create mode 100644 examples/NavigationPlayground/ios/NavigationPlayground/AppDelegate.h create mode 100644 examples/NavigationPlayground/ios/NavigationPlayground/AppDelegate.m create mode 100644 examples/NavigationPlayground/ios/NavigationPlayground/Base.lproj/LaunchScreen.xib create mode 100644 examples/NavigationPlayground/ios/NavigationPlayground/Images.xcassets/AppIcon.appiconset/Contents.json create mode 100644 examples/NavigationPlayground/ios/NavigationPlayground/Info.plist create mode 100644 examples/NavigationPlayground/ios/NavigationPlayground/main.m create mode 100644 examples/NavigationPlayground/ios/NavigationPlaygroundTests/Info.plist create mode 100644 examples/NavigationPlayground/ios/NavigationPlaygroundTests/NavigationPlaygroundTests.m create mode 100644 examples/NavigationPlayground/js/App.js create mode 100644 examples/NavigationPlayground/js/Banner.js create mode 100644 examples/NavigationPlayground/js/CustomTabs.js create mode 100644 examples/NavigationPlayground/js/Drawer.js create mode 100644 examples/NavigationPlayground/js/ModalStack.js create mode 100644 examples/NavigationPlayground/js/SampleText.js create mode 100644 examples/NavigationPlayground/js/SimpleStack.js create mode 100644 examples/NavigationPlayground/js/SimpleTabs.js create mode 100644 examples/NavigationPlayground/js/StacksInTabs.js create mode 100644 examples/NavigationPlayground/js/assets/NavLogo.png create mode 100644 examples/NavigationPlayground/package.json create mode 100644 examples/NavigationPlayground/yarn.lock create mode 100644 examples/ReduxExample/.babelrc create mode 100644 examples/ReduxExample/.buckconfig create mode 100644 examples/ReduxExample/.flowconfig create mode 100644 examples/ReduxExample/.gitattributes create mode 100644 examples/ReduxExample/.gitignore create mode 100644 examples/ReduxExample/.watchmanconfig create mode 100644 examples/ReduxExample/__tests__/index.android.js create mode 100644 examples/ReduxExample/__tests__/index.ios.js create mode 100644 examples/ReduxExample/android/app/BUCK create mode 100644 examples/ReduxExample/android/app/build.gradle create mode 100644 examples/ReduxExample/android/app/proguard-rules.pro create mode 100644 examples/ReduxExample/android/app/src/main/AndroidManifest.xml create mode 100644 examples/ReduxExample/android/app/src/main/java/com/reduxexample/MainActivity.java create mode 100644 examples/ReduxExample/android/app/src/main/java/com/reduxexample/MainApplication.java create mode 100644 examples/ReduxExample/android/app/src/main/res/mipmap-hdpi/ic_launcher.png create mode 100644 examples/ReduxExample/android/app/src/main/res/mipmap-mdpi/ic_launcher.png create mode 100644 examples/ReduxExample/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png create mode 100644 examples/ReduxExample/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png create mode 100644 examples/ReduxExample/android/app/src/main/res/values/strings.xml create mode 100644 examples/ReduxExample/android/app/src/main/res/values/styles.xml create mode 100644 examples/ReduxExample/android/build.gradle create mode 100644 examples/ReduxExample/android/gradle.properties create mode 100644 examples/ReduxExample/android/gradle/wrapper/gradle-wrapper.jar create mode 100644 examples/ReduxExample/android/gradle/wrapper/gradle-wrapper.properties create mode 100755 examples/ReduxExample/android/gradlew create mode 100644 examples/ReduxExample/android/gradlew.bat create mode 100644 examples/ReduxExample/android/keystores/BUCK create mode 100644 examples/ReduxExample/android/keystores/debug.keystore.properties create mode 100644 examples/ReduxExample/android/settings.gradle create mode 100644 examples/ReduxExample/index.js create mode 100644 examples/ReduxExample/ios/ReduxExample.xcodeproj/project.pbxproj create mode 100644 examples/ReduxExample/ios/ReduxExample.xcodeproj/xcshareddata/xcschemes/ReduxExample.xcscheme create mode 100644 examples/ReduxExample/ios/ReduxExample/AppDelegate.h create mode 100644 examples/ReduxExample/ios/ReduxExample/AppDelegate.m create mode 100644 examples/ReduxExample/ios/ReduxExample/Base.lproj/LaunchScreen.xib create mode 100644 examples/ReduxExample/ios/ReduxExample/Images.xcassets/AppIcon.appiconset/Contents.json create mode 100644 examples/ReduxExample/ios/ReduxExample/Info.plist create mode 100644 examples/ReduxExample/ios/ReduxExample/main.m create mode 100644 examples/ReduxExample/ios/ReduxExampleTests/Info.plist create mode 100644 examples/ReduxExample/ios/ReduxExampleTests/ReduxExampleTests.m create mode 100644 examples/ReduxExample/package.json create mode 100644 examples/ReduxExample/yarn.lock create mode 100644 flow-typed/npm/babel-cli_vx.x.x.js create mode 100644 flow-typed/npm/babel-core_vx.x.x.js create mode 100644 flow-typed/npm/babel-eslint_vx.x.x.js create mode 100644 flow-typed/npm/babel-jest_vx.x.x.js create mode 100644 flow-typed/npm/babel-preset-es2015_vx.x.x.js create mode 100644 flow-typed/npm/babel-preset-react-native-syntax_vx.x.x.js create mode 100644 flow-typed/npm/babel-preset-react-native_vx.x.x.js create mode 100644 flow-typed/npm/babel-preset-react_vx.x.x.js create mode 100644 flow-typed/npm/babel-preset-stage-1_vx.x.x.js create mode 100644 flow-typed/npm/clamp_vx.x.x.js create mode 100644 flow-typed/npm/eslint-config-airbnb_vx.x.x.js create mode 100644 flow-typed/npm/eslint-plugin-flowtype_vx.x.x.js create mode 100644 flow-typed/npm/eslint-plugin-import_vx.x.x.js create mode 100644 flow-typed/npm/eslint-plugin-jsx-a11y_vx.x.x.js create mode 100644 flow-typed/npm/eslint-plugin-react_vx.x.x.js create mode 100644 flow-typed/npm/eslint_vx.x.x.js create mode 100644 flow-typed/npm/flow-bin_v0.x.x.js create mode 100644 flow-typed/npm/jest_v17.x.x.js create mode 100644 flow-typed/npm/react-native-drawer-layout_vx.x.x.js create mode 100644 flow-typed/npm/react-native-viewpager_vx.x.x.js create mode 100644 package.json create mode 100644 rn-cli.config.js create mode 100644 scripts/compile-docs.js create mode 100755 scripts/deploy-website.sh create mode 100644 src/PropTypes.js create mode 100644 src/StateUtils.js create mode 100644 src/TypeDefinition.js create mode 100644 src/__tests__/NavigationStateUtils-test.js create mode 100644 src/__tests__/addNavigationHelpers-test.js create mode 100644 src/addNavigationHelpers.js create mode 100644 src/createNavigationContainer.js create mode 100644 src/navigators/DrawerNavigator.js create mode 100644 src/navigators/StackNavigator.js create mode 100644 src/navigators/TabNavigator.js create mode 100644 src/navigators/createNavigator.js create mode 100644 src/react-navigation.js create mode 100644 src/react-navigation.web.js create mode 100644 src/routers/StackRouter.js create mode 100644 src/routers/TabRouter.js create mode 100644 src/routers/__tests__/Routers-test.js create mode 100644 src/routers/__tests__/StackRouter-test.js create mode 100644 src/routers/__tests__/TabRouter-test.js create mode 100644 src/routers/__tests__/createConfigGetter-test.js create mode 100644 src/routers/__tests__/validateRouteConfigMap-test.js create mode 100644 src/routers/createConfigGetter.js create mode 100644 src/routers/getScreenForRouteName.js create mode 100644 src/routers/validateRouteConfigMap.js create mode 100644 src/views/AbstractPanResponder.js create mode 100644 src/views/AnimatedValueSubscription.js create mode 100644 src/views/Card.js create mode 100644 src/views/CardStack.js create mode 100644 src/views/CardStackPanResponder.js create mode 100644 src/views/CardStackStyleInterpolator.js create mode 100644 src/views/Drawer/DrawerNavigatorItems.js create mode 100644 src/views/Drawer/DrawerScreen.js create mode 100644 src/views/Drawer/DrawerSidebar.js create mode 100644 src/views/Drawer/DrawerView.js create mode 100644 src/views/Header.js create mode 100644 src/views/HeaderBackButton.js create mode 100644 src/views/HeaderStyleInterpolator.js create mode 100644 src/views/HeaderTitle.js create mode 100644 src/views/PointerEventsContainer.js create mode 100644 src/views/SceneView.js create mode 100644 src/views/ScenesReducer.js create mode 100644 src/views/TabView/TabBarBottom.js create mode 100644 src/views/TabView/TabBarIcon.js create mode 100644 src/views/TabView/TabBarTop.js create mode 100644 src/views/TabView/TabView.js create mode 100644 src/views/TouchableItem.js create mode 100644 src/views/TransitionConfigs.js create mode 100644 src/views/Transitioner.js create mode 100644 src/views/__tests__/NavigationScenesReducer-test.js create mode 100644 src/views/assets/back-icon.png create mode 100644 src/views/assets/back-icon@1.5x.android.png create mode 100644 src/views/assets/back-icon@1.5x.ios.png create mode 100644 src/views/assets/back-icon@1x.android.png create mode 100644 src/views/assets/back-icon@1x.ios.png create mode 100644 src/views/assets/back-icon@2x.android.png create mode 100644 src/views/assets/back-icon@2x.ios.png create mode 100644 src/views/assets/back-icon@3x.android.png create mode 100644 src/views/assets/back-icon@3x.ios.png create mode 100644 src/views/assets/back-icon@4x.android.png create mode 100644 src/views/assets/back-icon@4x.ios.png create mode 100644 src/withCachedChildNavigation.js create mode 100644 website/.flowconfig create mode 100644 website/.gitignore create mode 100644 website/README.md create mode 100644 website/config/env.js create mode 100644 website/config/jest/CSSStub.js create mode 100644 website/config/jest/FileStub.js create mode 100644 website/config/paths.js create mode 100644 website/config/polyfills.js create mode 100644 website/config/webpack.config.dev.js create mode 100644 website/config/webpack.config.prod.js create mode 100644 website/package.json create mode 100644 website/public/.npmignore create mode 100644 website/public/_package.json create mode 100644 website/public/assets/android-stack.gif create mode 100644 website/public/assets/android-tabs.gif create mode 100644 website/public/assets/examples/bare-project-android.png create mode 100644 website/public/assets/examples/bare-project-iphone.png create mode 100644 website/public/assets/examples/basic-header-android.png create mode 100644 website/public/assets/examples/basic-header-iphone.png create mode 100644 website/public/assets/examples/first-navigation-android.png create mode 100644 website/public/assets/examples/first-navigation-iphone.png create mode 100644 website/public/assets/examples/first-screen-android.png create mode 100644 website/public/assets/examples/first-screen-iphone.png create mode 100644 website/public/assets/examples/header-button-android.png create mode 100644 website/public/assets/examples/header-button-iphone.png create mode 100644 website/public/assets/examples/header-interaction-android.png create mode 100644 website/public/assets/examples/header-interaction-iphone.png create mode 100644 website/public/assets/examples/linking-android.png create mode 100644 website/public/assets/examples/linking-iphone.png create mode 100644 website/public/assets/examples/nested-android.png create mode 100644 website/public/assets/examples/nested-iphone.png create mode 100644 website/public/assets/examples/simple-tabs-android.png create mode 100644 website/public/assets/examples/simple-tabs-iphone.png create mode 100644 website/public/assets/iphone-stack.gif create mode 100644 website/public/assets/iphone-tabs.gif create mode 100644 website/public/assets/phone-android.png create mode 100644 website/public/assets/phone-iphone.png create mode 100644 website/public/assets/react-nav-logo.svg create mode 100644 website/public/assets/react-navigation-thin.svg create mode 100644 website/public/assets/routers-concept-map.png create mode 100644 website/public/assets/simplestack-ios.gif create mode 100644 website/public/assets/simpletabs-ios.gif create mode 100644 website/public/assets/soaring-bg.jpg create mode 100644 website/public/assets/xcode-linking.png create mode 100644 website/public/favicon.ico create mode 100644 website/public/index.html create mode 100644 website/scripts/build.js create mode 100644 website/scripts/start.js create mode 100644 website/scripts/test.js create mode 100644 website/src/App.css create mode 100644 website/src/App.js create mode 100644 website/src/App.test.js create mode 100644 website/src/AppFrame.js create mode 100644 website/src/BrowserAppContainer.js create mode 100644 website/src/CodeBlock.js create mode 100644 website/src/Footer.js create mode 100644 website/src/HomePage.js create mode 100644 website/src/Link.js create mode 100644 website/src/MDPage.js create mode 100644 website/src/PageWithSidebar.js create mode 100644 website/src/PhoneGraphic.js create mode 100644 website/src/Server.js create mode 100644 website/src/index.js create mode 100644 website/src/prism.css create mode 100644 website/yarn.lock create mode 100644 yarn.lock diff --git a/.babelrc b/.babelrc new file mode 100644 index 00000000..e918c96b --- /dev/null +++ b/.babelrc @@ -0,0 +1,32 @@ +{ + "env": { + // For RN example development + "development": { + "presets": ["react-native"], + "plugins": [ + "transform-flow-strip-types", + ], + }, + // For Jest + "test": { + "presets": ["react-native"], + "plugins": [ + "transform-flow-strip-types", + ], + }, + // For publishing to NPM for RN + "publish-rn": { + "presets": ["react-native-syntax"], + "plugins": [ + "transform-flow-strip-types", + ], + }, + // For publishing to NPM for RN + "publish-web": { + "presets": ["es2015", "stage-1", "react"], + "plugins": [ + "transform-flow-strip-types", + ], + }, + }, +} diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 00000000..f6b6bc9a --- /dev/null +++ b/.eslintrc @@ -0,0 +1,77 @@ +{ + "extends": "airbnb", + "parser": "babel-eslint", + "plugins": [ + "flowtype" + ], + "env": { + "jasmine": true + }, + "rules": { + "no-underscore-dangle": 0, + "no-use-before-define": 0, + "no-unused-expressions": 0, + "new-cap": 0, + "no-plusplus": 0, + "no-class-assign": 0, + "no-duplicate-imports": 0, + + "import/extensions": 0, + "import/no-extraneous-dependencies": 0, + "import/no-unresolved": 0, + + "react/jsx-filename-extension": [ + 0, { "extensions": [".js", ".jsx"] } + ], + "react/forbid-prop-types": 0, + "react/sort-comp": 0, + "react/prefer-stateless-function": 0, + + "flowtype/boolean-style": [ + 2, + "boolean" + ], + "flowtype/define-flow-type": 1, + "flowtype/generic-spacing": [ + 2, + "never" + ], + "flowtype/no-weak-types": 1, + "flowtype/require-parameter-type": 2, + "flowtype/require-return-type": [ + 0, + "always", + { + "annotateUndefined": "never" + } + ], + "flowtype/require-valid-file-annotation": 2, + "flowtype/semi": [ + 2, + "always" + ], + "flowtype/space-after-type-colon": [ + 2, + "always" + ], + "flowtype/space-before-generic-bracket": [ + 2, + "never" + ], + "flowtype/space-before-type-colon": [ + 2, + "never" + ], + "flowtype/union-intersection-spacing": [ + 2, + "always" + ], + "flowtype/use-flow-type": 1, + "flowtype/valid-syntax": 1 + }, + "settings": { + "flowtype": { + "onlyFilesWithFlowAnnotation": false + } + } +} diff --git a/.flowconfig b/.flowconfig new file mode 100644 index 00000000..6336698c --- /dev/null +++ b/.flowconfig @@ -0,0 +1,55 @@ +[ignore] +; We fork some components by platform +.*/*[.]android.js + +; Ignore templates for 'react-native init' +.*/local-cli/templates/.* + +; Ignore the website subdir +.*/node_modules/react-native/website/.* + +; Ignore "BUCK" generated dirs +.*/node_modules/react-native/\.buckd/ + +; Ignore unexpected extra "@providesModule" +.*/node_modules/.*/node_modules/fbjs/.* + +; Ignore duplicate module providers +; For RN Apps installed via npm, "Libraries" folder is inside +; "node_modules/react-native" but in the source repo it is in the root +.*/node_modules/react-native/Libraries/react-native/React.js +.*/node_modules/react-native/Libraries/react-native/ReactNative.js + +/lib +/lib-rn +/examples +/website + +[include] + +[libs] +node_modules/react-native/Libraries/react-native/react-native-interface.js +node_modules/react-native/flow/ +flow/ + +[options] +module.system=haste + +experimental.strict_type_args=true + +munge_underscores=true + +module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub' + +suppress_type=$FlowIssue +suppress_type=$FlowFixMe +suppress_type=$FixMe + +suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-7]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\) +suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-7]\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+ +suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy + +unsafe.enable_getters_and_setters=true + +[version] +^0.35.0 diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..2428835b --- /dev/null +++ b/.gitignore @@ -0,0 +1,16 @@ +# VSCode +.vscode/ +jsconfig.json + +# NodeJS +npm-debug.log +node_modules +lib-rn +lib +yarn-error.log + +# OS X +.DS_Store + +# Exponent +.exponent diff --git a/.npmignore b/.npmignore new file mode 100644 index 00000000..b7265688 --- /dev/null +++ b/.npmignore @@ -0,0 +1 @@ +examples \ No newline at end of file diff --git a/.watchmanconfig b/.watchmanconfig new file mode 100644 index 00000000..0967ef42 --- /dev/null +++ b/.watchmanconfig @@ -0,0 +1 @@ +{} diff --git a/LICENSE b/LICENSE new file mode 100644 index 00000000..063ab66b --- /dev/null +++ b/LICENSE @@ -0,0 +1,26 @@ +BSD License + +For React Navigation software + +Copyright (c) 2016-present, React Navigation Contributors. All rights reserved. + +Redistribution and use in source and binary forms, with or without modification, +are permitted provided that the following conditions are met: + + * Redistributions of source code must retain the above copyright notice, this + list of conditions and the following disclaimer. + + * Redistributions in binary form must reproduce the above copyright notice, + this list of conditions and the following disclaimer in the documentation + and/or other materials provided with the distribution. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND +ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED +WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE +DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR +ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES +(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; +LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON +ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS +SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md new file mode 100644 index 00000000..67820a3a --- /dev/null +++ b/PULL_REQUEST_TEMPLATE.md @@ -0,0 +1,17 @@ +Please provide enough information so that others can review your pull request: + +Explain the **motivation** for making this change. What existing problem does the pull request solve? + +Prefer **small pull requests**. These are much easier to review and more likely to get merged. Make sure the PR does only one thing, otherwise split it. + +**Test plan (required)** + +Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes UI. + +Make sure you test on both platforms if your change affects both platforms. + +The code must pass tests and shouldn't add more Flow errors. + +**Code formatting** + +Look around. Match the style of the rest of the codebase. diff --git a/README.md b/README.md new file mode 100644 index 00000000..ca6f52cb --- /dev/null +++ b/README.md @@ -0,0 +1,42 @@ +# React Navigation [![Circle CI](https://circleci.com/gh/reactjs/react-navigation.svg?style=svg&circle-token=296a074544f10b6580652bd283b2c1817154dc20)](https://circleci.com/gh/reactjs/react-navigation) + +*Learn once, navigate anywhere.* + +Browse the docs on [reactnavigation.org](https://navigate:navigate@reactnavigation.org/). (The username/pass is `navigate:navigate`) + +## [Getting started](https://reactnavigation.org/docs/intro/) + +1. Create a new React Native App + ``` + react-native init SimpleApp + cd SimpleApp + ``` + +2. Install the latest version of react-navigation from npm + ``` + yarn add react-navigation + ``` + or + ``` + npm install --save react-navigation + ``` + +3. Run the new app + ``` + react-native run-android # or: + react-native run-ios + ``` + +## Advanced guide + +- [Redux integration](https://reactnavigation.org/docs/guides/redux) +- [Web integration](https://reactnavigation.org/docs/guides/web) +- [Deep linking](https://reactnavigation.org/docs/guides/linking) +- [Contributors guide](https://reactnavigation.org/docs/guides/contributors) + +## React Navigation API + +- [Navigators](https://reactnavigation.org/docs/navigators/) +- [Routers](https://reactnavigation.org/docs/routers/) +- [Views](https://reactnavigation.org/docs/views/) + diff --git a/circle.yml b/circle.yml new file mode 100644 index 00000000..7911679b --- /dev/null +++ b/circle.yml @@ -0,0 +1,23 @@ +machine: + node: + version: 6.1.0 + pre: + - mkdir ~/.yarn-cache +dependencies: + pre: + # Install Yarn + - sudo apt-key adv --fetch-keys http://dl.yarnpkg.com/debian/pubkey.gpg + - echo "deb http://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list + - sudo apt-get update -qq + - sudo apt-get install -y -qq yarn + cache_directories: + - "~/.yarn-cache" + override: + - yarn install + - cd website && yarn install +deployment: + website-prod: + branch: master + commands: + - yarn run build-docs + - ./scripts/deploy-website.sh diff --git a/docs/api/navigators/DrawerNavigator.md b/docs/api/navigators/DrawerNavigator.md new file mode 100644 index 00000000..ef8f3120 --- /dev/null +++ b/docs/api/navigators/DrawerNavigator.md @@ -0,0 +1,120 @@ +# DrawerNavigator + +Used to easily set up a screen with a drawer navigation. + +```js +class MyHomeScreen extends React.Component { + static navigationOptions = { + drawer: () => ({ + label: 'Home', + icon: ({ tintColor }) => ( + + ), + }), + } + + render() { + return ( + +); +``` + + +### The static `router` + +A router object may be statically defined on your component. If defined, it must follow this interface: + +```javascript +type BackAction = {type: 'Back'}; +type URIAction = {type: 'URI', uri: string}; + +interface Router { + getStateForAction(action: (A | BackAction | URIAction), lastState: ?S): ?S; + getActionForURI(uri: string): ?A; +} +``` + +The state and action types of the static router must match the state and action types associated with the navigation prop passed into the component. + +#### router.getStateForAction(action, lastState) + +This function is defined on the static router and is used to define the expected navigation state. + +```javascript +class ScreenWithEditMode extends React.Component { + static router = { + getStateForAction: (action, prevState) => { + return { isEditing: true }; + }, + }; + render() { + // this.props.navigation.state.isEditing === true + ... + } +} +``` + +`getStateForAction` must **always** return a navigation state that can be rendered by the component when passed in as the `navigation.state` prop. + +If null is returned, we are signaling that the previous navigation state has not changed, but the action is handled. This is usually used in cases where the action is being swallowed. + + +#### router.getActionForURI(uri) + +Return an action if a URI can be handled, otherwise return `null` + + + +### Special Actions + +There are two special actions that can be fired into `navigation.dispatch` and can be handled by your `router.getStateForAction`. + +#### Back Action + +This action means the same thing as an Android back button press. + +``` +type BackAction = { type: 'Back' }; +``` + +#### URI Open Action + +Used to request the enclosing app or OS to open a link at a particular URI. If it is a web URI like `http` or `https`, the app may open a WebView to present the page. Or the app may open the URI in a web browser. In some cases, an app may choose to block a URI action or handle it differently. + +``` +type URIAction = { type: 'URI', uri: string }; +``` + + +### Special Navigation State + +The state defined by `router.getStateForAction` can contain special navigation properties that may be relevant to your app. The title and current URI of a component may change over time, and the parent often needs to observe the behavior. + +#### `state.title` + +If the navigation state contains 'title', it will be used as the title for the given component. This is relevant for top-level components on the web to update the browser title, and is relevant in mobile apps where a title is shown in the header. + +#### `state.uri` + +A URI can also be put in `state.uri`, which will signal to the parent how it may be possible to deep link into a similar navigation state. In web apps, this will be used to keep the URI bar in sync with the current navigation state of the app. + + +## Use Cases + +### "Block the Android back button on one screen of my app" + +To block the Android back button: + +``` +class Foo extends React.Component { + static router = { + getStateForAction(action, prevState = {}) { + if (action.type === 'Back') return null; + else return prevState; + }, + }; + render() { + ... +``` + +Because we return null, we signal to our container that the action has been handled but the state does not change. The parent should not handle the back behavior at this point, and nothing should be re-rendered. + +### "Link deeply into one screen of my app" + +``` +class Foo extends React.Component { + static router = { + getStateForAction(action, prevState = {deep: false}) { + if (action.type === 'GoDeep') return { deep: true }; + else return prevState; + }, + getActionForURI(uri) { + if (uri === 'myapp://foo') + return {type: 'Go'}; + else if (uri === 'myapp://foo_deep') + return {type: 'GoDeep'}; + return null; + }, + }; + render() { + // this.props.navigation.state.deep may be true or false + ... +``` + +Based on the state URI we may decide to return an action. If an action is returned, `getStateForAction` is expected to output the correct state for a deep link. + +## Reference Implementations + +A library to that helps easily produce navigation-aware components: https://github.com/reactjs/react-navigation . (Also uses a HOC to provide navigation containers when needed.) + +A simple navigation container: https://gist.github.com/ericvicenti/77d190e2ec408012255937400e34bdb1 + +A web implementation of a navigation container: https://gist.github.com/ericvicenti/55bef95fcd8558029a3bae8483baea6c diff --git a/docs/guides/Contributors.md b/docs/guides/Contributors.md new file mode 100644 index 00000000..656a0f82 --- /dev/null +++ b/docs/guides/Contributors.md @@ -0,0 +1,79 @@ +# Contributors Guide + +## Environment + +React navigation was initially developed on macOS 10.12, with node 7+, and react-native v0.39+. Please open issues when uncovering problems in different environments. + +## Development + +### 0. Basic Install + +``` +git clone git@github.com:reactjs/react-navigation.git +cd react-navigation +npm install +``` + +### 1. Run the native playground + +``` +cd examples/NavigationPlayground +npm install +cd ../.. +npm start + +# In a seperate terminal tab: +npm run run-playground-android +npm run run-playground-ios +``` + +### 2. Run the website + +For development mode and live-reloading: + +``` +cd website +npm install +npm run start +``` + +To run the website in production mode with server rendering: + +``` +npm run prod +``` + +### 3. Run tests, run flow + +``` +jest +flow +``` + +Tests must pass for your changes to be accepted and merged. + +Flow is not yet passing, but your code should be flow checked and we expect that your changes do not introduce any flow errors. + + +### 4. Developing Docs + +The docs are indexed in [App.js](https://github.com/reactjs/react-navigation/blob/master/website/src/App.js), where all the pages are declared alongside the titles. To test the docs, follow the above instructions for running the website. Changing existing markdown files should not require any testing. + +The markdown from the `docs` folder gets generated and dumped into a json file as a part of the build step. To see updated docs appear in the website, re-run the build step by running `npm run build-docs` from the `react-navigation` root folder. + + +## Submitting Contributions + +### New views or unique features + +Often navigation needs are specific to certain apps. If your changes are unique to your app, you may want to fork the view or router that has changed. You can keep the source code in your app, or publish it on npm as a `react-navigation` compatible view or router. + +This library is intended to include highly standard and generic navigation patterns. But it + +### Major Changes + +Before embarking on any major changes, please file an issue describing the suggested change and motivation. We may already have thought about it and we want to make sure we all are on the same page before starting on any big changes. + +### Minor Bugfixes + +Simple bug fixes are welcomed in pull requests! Please check for duplicate PRs before posting. diff --git a/docs/guides/Custom-Navigators.md b/docs/guides/Custom-Navigators.md new file mode 100644 index 00000000..077ff3b3 --- /dev/null +++ b/docs/guides/Custom-Navigators.md @@ -0,0 +1,110 @@ +# Custom Navigators + +A navigator is any React component that has a [router](/docs/routers/) on it. Here is a basic one, which uses the [router's API](/docs/routers/api) to get the active component to render: + +```js +class MyNavigator extends React.Component { + static router = MyRouter; + render() { + const { state, dispatch } = this.props.navigation; + const { routes, index } = state; + + // Figure out what to render based on the navigation state and the router: + const Component = MyRouter.getComponentForState(state); + + // The state of the active child screen can be found at routes[index] + let childNavigation = { dispatch, state: routes[index] }; + // If we want, we can also tinker with the dispatch function here, to limit + // or augment our children's actions + + // Assuming our children want the convenience of calling .navigate() and so on, + // we should call addNavigationHelpers to augment our navigation prop: + childNavigation = addNavigationHelpers(childNavigation); + + return ; + } +} +``` + +## Navigation Prop + +The navigation prop passed down to a navigator only includes `state` and `dispatch`. This is the current state of the navigator, and an event channel to send action requests. + +All navigators are controlled components: they always display what is coming in through `props.navigation.state`, and their only way to change the state is to send actions into `props.navigation.dispatch`. + +Navigators can specify custom behavior to parent navigators by [customizing their router](/docs/routers/). For example, a navigator is able to specify when actions should be blocked by returning null from `router.getStateForAction`. Or a navigator can specify custom URI handling by overriding `router.getActionForPathAndParams` to output a relevant navigation action, and handling that action in `router.getStateForAction`. + +### Navigation State + +The navigation state that is passed into a navigator's `props.navigation.state` has the following structure: + +``` +{ + index: 1, // identifies which route in the routes array is active + routes: [ + { + // Each route needs a name, which routers will use to associate each route + // with a react component + routeName: 'MyRouteName', + + // A unique id for this route, used to keep order in the routes array: + key: 'myroute-123', + + // Routes can have any additional data. The included routers have `params` + ...customRouteData, + }, + ...moreRoutes, + ] +} +``` + +### Navigation Dispatchers + +A navigator can dispatch navigation actions, such as 'Go to a URI', 'Go back'. + +The dispatcher will return `true` if the action was successfully handled, otherwise `false`. + +## Navigation Containers + +The built in navigators can automatically behave like top-level navigators when the navigation prop is missing. This functionality provides a transparent navigation container, which is where the top-level navigation prop comes from. + +When rendering one of the included navigators, the navigation prop is optional. When it is missing, the container steps in and manages its own navigation state. It also handles URLs, external linking, and Android back button integration. + +For the purpose of convenience, the built-in navigators have this ability because behind the scenes they use `createNavigationContainer`. Usually, navigators require a navigation prop in order to function. + +### `containerOptions` + +These options can be used to configure a navigator when it is used at the top level. + +An error will be thrown if a navigator is configured with `containerOptions` and also receives a `navigation` prop, because in that case it would be unclear if the navigator should handle its own state. + +- `URIPrefix` - The prefix of the URIs that the app might handle. This will be used when handling a [deep link](/docs/guides/linking) to extract the path passed to the router. + +## API for building custom navigators + +To help developers implement custom navigators, the following utilities are provided with React Navigation: + +### `createNavigator` + +This utility combines a [router](/docs/routers/) and a [navigation view](/docs/views/) together in a standard way: + +```js +const MyApp = createNavigator(MyRouter)(MyView); +``` + +All this does behind the scenes is: + +```js +const MyApp = ({ navigation }) => ( + +); +MyApp.router = MyRouter; +``` + +### `addNavigationHelpers` + +Takes in a bare navigator navigation prop with `state` and `dispatch`, and augments it with all the various functions in a screen navigation prop, such as `navigation.navigate()` and `navigation.goBack()`. These functions are simply helpers to create the actions and send them into `dispatch`. + +### `createNavigationContainer` + +If you want your navigator to be usable as a top-level component, (without a navigation prop being passed in), you can use `createNavigationContainer`. This utility will make your navigator act like a top-level navigator when the navigation prop is missing. It will manage the app state, and integrate with app-level nav features, like handling incoming and outgoing links, and Android back button behavior. diff --git a/docs/guides/Customizing-Navigation.md b/docs/guides/Customizing-Navigation.md new file mode 100644 index 00000000..725bf879 --- /dev/null +++ b/docs/guides/Customizing-Navigation.md @@ -0,0 +1,53 @@ +## Customizing Navigation Views + +Modify the presentation of navigation, including styles, animations and gestures. + +## Customizing Routers + +Building a custom router allows you to change the navigation logic of your component, manage navigation state, and define behavior for URIs. + + +A router can be defined like this: + +``` +class MyNavigationAwareComponent extends React.Component { + + static router = { + + // Defines the navigation state for a component: + getStateForAction: (action: {type: string}, lastState?: any) => { + const state = lastState = { myMode: 'default' }; + if (action.type === 'MyAction') { + return { myMode: 'action' }; + } else if (action.type === 'Back') { + return { myMode: 'blockBackButton' }; + } else { + return state; + } + }, + + // Defines if a component can handle a particular URI. + // If it does, return an action to be passed to `getStateForAction` + + getActionForURI: (uri: string) => { + if (uri === 'myapp://myAction') { + return { type: 'MyAction' }; + } + return null; + }, + + }; + + render() { + // render something based on this.props.navigation.state + ... + } + + onButtonPress = () => { + this.props.navigation.dispatch({ type: 'MyAction' }); + }; + + ... + +} +``` diff --git a/docs/guides/Deep-Linking.md b/docs/guides/Deep-Linking.md new file mode 100644 index 00000000..396d6ae1 --- /dev/null +++ b/docs/guides/Deep-Linking.md @@ -0,0 +1,107 @@ +# Deep Linking + +In this guide we will set up our app to handle external URIs. Let's start with the SimpleApp that [we created in the getting started guide](/docs/intro). + +In this example, we want a URI like `mychat://chats/Taylor` to open our app and link straight into Taylor's chat page. + +## Configuration + +Previously, we had defined a navigator like this: + +```js +const SimpleApp = StackNavigator({ + Home: { screen: HomeScreen }, + Chat: { screen: ChatScreen }, +}); +``` + +We want paths like `chat/Taylor` to link to a "Chat" screen with the `user` passed as a param. Let's re-configure our chat screen with a `path` that tells the router what relative path to match against, and what params to extract. This path spec would be `chat/:user`. + +```js +const SimpleApp = StackNavigator({ + Home: { screen: HomeScreen }, + Chat: { + screen: ChatScreen, + path: 'chat/:user', + }, +}); +``` + + +### URI Prefix + +Next, let's configure our navigation container to extract the path from the app's incoming URI. When configuring a top-level navigator, we can provide `containerOptions`: + +```js +const SimpleApp = StackNavigator({ + ... +}, { + containerOptions: { + // on Android, the URI prefix typically contains a host in addition to scheme + URIPrefix: Platform.OS == 'android' ? 'mychat://mychat/' : 'mychat://', + }, +}); +``` + +## iOS + +Let's configure the native iOS app to open based on the `mychat://` URI scheme. + +In `SimpleApp/ios/SimpleApp/AppDelegate.m`: + +``` +// Add the header at the top of the file: +#import + +// Add this above the `@end`: +- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url + sourceApplication:(NSString *)sourceApplication annotation:(id)annotation +{ + return [RCTLinkingManager application:application openURL:url + sourceApplication:sourceApplication annotation:annotation]; +} +``` + +In Xcode, open the project at `SimpleApp/ios/SimpleApp.xcodeproj`. Select the project in sidebar and navigate to the info tab. Scroll down to "URL Types" and add one. In the new URL type, set the identifier and the url scheme to your desired url scheme. + +![Xcode project info URL types with mychat added](/assets/xcode-linking.png) + +Now you can press play in Xcode, or re-build on the command line: + +```sh +react-native run-ios +``` + +To test the URI in iOS, open safari and type `mychat://chat/Taylor`. + +## Android + +To configure the external linking in Android, you can create a new intent in the manifest. + +In `SimpleApp/android/app/src/main/AndroidManifest.xml`, add the new `VIEW` type `intent-filter` inside the `MainActivity` entry: + +``` + + + + + + +``` + +Now, re-install the app: + +```sh +react-native run-android +``` + +To test the intent handling in Android, run the following: + +``` +adb shell am start -W -a android.intent.action.VIEW -d "mychat://mychat/chat/Taylor" com.simpleapp +``` + +```phone-example +linking +``` diff --git a/docs/guides/Guide-Headers.md b/docs/guides/Guide-Headers.md new file mode 100644 index 00000000..96598a34 --- /dev/null +++ b/docs/guides/Guide-Headers.md @@ -0,0 +1,98 @@ +# Configuring the Header + +In the previous example, we created a StackNavigator to display severals screens in our app. + + +When navigating to a chat screen, we can specify params for the new route by providing them to the navigate function. In this case we want to provide the name of the person on the chat screen: + +```js +this.props.navigation.navigate('Chat', { user: 'Lucy' }); +``` + +The `user` param can be accessed from the profile screen: + +```js +class ChatScreen extends React.Component { + const { params } = this.props.navigation.state; + render() { + return Chat with {params.user}; + } +} +``` + +### Setting the Header Title + +Next, the header title can be configured to use the screen param: + +```js +class ChatScreen extends React.Component { + static navigationOptions = { + // // Title may be a simple string: + // title: 'Hello', + + // Or the title string may be a function of the navigation prop: + title: ({ navigation }) => `Chat with ${navigation.state.params.user}` + }; + ... +} +``` + +```phone-example +basic-header +``` + + +### Adding a Right Button + +Then we can add a [`header` navigation option](/docs/navigators/navigation-options#Stack-Navigation-Options) that allows us to add a custom right button: + +```js +static navigationOptions = { + header: { + right: + +); +``` + +Inside the infra: + +``` +class InfraScreen extends React.Component { + constructor() { + const {initURI, type} = this.props; + const ScreenView = ScreenRegistry[type].screen; + const router = ScreenView.router; + const deepLinkAction = router.getActionForURI(initURI); + const initAction = deepLinkAction || {type: 'init'} + const nav = router.getStateForAction(initAction); + this.state = { + nav, + }; + HybridNavigationModule.setNavOptions(this.state.nav); + } + componentWillUpdate() { + HybridNavigationModule.setNavOptions(this.state.nav); + } + dispatch = (action) => { + const {type} = this.props; + const ScreenView = ScreenRegistry[type].screen; + const {getStateForAction} = ScreenView.router; + const newNavState = getStateForAction(action, this.state.nav); + if (newNavState !== this.state.nav) { + this.setState({ nav: newNavState }); + return true; + } + if (action.type === 'URI') { + HybridNavigationModule.openURI(action.uri); + return true; + } + if (action.type === 'Back') { + HybridNavigationModule.goBack(); + return true; + } + HybridNavigationModule.openAction(action); + return true; + } + render() { + const {type} = this.props; + const ScreenView = ScreenRegistry[type].screen; + const navigation = { + dispatch: this.dispatch, + state: this.state.nav, + }; + return ; + } +} +``` + +## Setting title + +``` +MarketplaceScreen.router = { + getStateForAction(action, lastState) { + return lastState || {title: 'Marketplace Home'}; + }, +}; +``` +A HOC could be used to make this feel more elegant. + + +## Disabling/Enabling the right button + +``` +const TestScreen = ({ navigation }) => ( + + + Pressed {navigation.state} times + +); +TestScreen.router = { + getStateForAction(action, lastState = {}) { + let state = lastState || { + rightButtonEnabled: true, + rightButtonTitle: 'Tap Me', + pressCount: 0, + }; + if (action.type === 'ToggleMyButtonPressability') { + state = { + ...state, + rightButtonEnabled: !state.rightButtonEnabled, + }; + } else if (action.type === 'RightButtonPress') { + state = { + ...state, + pressCount: state.pressCount + 1, + }; + } + return state; + }, +}; +``` + + +## Before JS starts + +A JSON file could be defined for native to consume before JS spins up: + +``` +{ + "screens": [ + { + "type": "Profile", + "path": "/users/:id?name=:name", + "params": { + "name": "string", + "id": "number" + }, + "title": "%name%' s Profile", + "rightButtonTitle": "Message %name%" + }, + { + ... + } + ] +} +``` + +This seems like a pain to set up, so we can statically analyze our JS and autogenerate this JSON! If the JS in an app changes, there could be a way for JS to report the new routing configuration to native for use on the next cold start. diff --git a/docs/guides/Redux-Integration.md b/docs/guides/Redux-Integration.md new file mode 100644 index 00000000..8b82f468 --- /dev/null +++ b/docs/guides/Redux-Integration.md @@ -0,0 +1,46 @@ +# Redux Integration + +To handle your app's navigation state in redux, you can pass your own `navigation` prop to a navigator. Your navigation prop must provide the current state, as well as access to a dispatcher to handle navigation options. + +With redux, your app's state is defined by a reducer. Each navigation router effectively has a reducer, called `getStateForAction`. The following is a minimal example of how you might use navigators within a redux application: + +``` +const AppNavigator = StackNavigator(AppRouteConfigs); + +const appReducer = combineReducers({ + nav: (state, action) => ( + AppNavigator.router.getStateForAction(action, state) + ), + ... +}); + +@connect(state => { + nav: state.nav, +}) +class AppWithNavigationState extends React.Component { + render() { + return ( + + ); + } +} + +const store = createStore(appReducer); + +class App extends React.Component { + render() { + return ( + + + + ); + } +} +``` + +Now, your navigation state is stored with redux, and you can fire navigation actions using redux. + +When a navigator is given a `navigation` prop, it relinquishes control of the state. So you are now responsible for persisting state, handling deep linking, integrating the back button, etc. \ No newline at end of file diff --git a/docs/guides/Screen-Nav-Options.md b/docs/guides/Screen-Nav-Options.md new file mode 100644 index 00000000..6cf24e1f --- /dev/null +++ b/docs/guides/Screen-Nav-Options.md @@ -0,0 +1,57 @@ + +# Screen Navigation Options + +Each screen can configure several aspects about how it gets presented in parent navigators. + +#### Two Ways to specify each option + +**Static configuration:** Each navigation option can either be directly assigned: + +```js +class MyScreen extends React.Component { + static navigationOptions = { + title: 'Great', + }; + ... +``` + +**Dynamic Configuration** + +Or, each option can be a function that takes the following arguments, and returns the value of the option. + +- `navigation` - the [navigation prop](/docs/intro/navigation-prop) for the screen, with the screen's route at `navigation.state` +- `childRouter` - The child router, if the screen is a navigator + +```js +class ProfileScreen extends React.Component { + static navigationOptions = { + title: (navigation, childRouter) => { + return navigation.state.params.name + "'s Profile!"; + }, + }; + ... +``` + + +#### Generic Navigation Options + +The `title` navigation option is generic between every navigator. It is used to set the title string for a given screen. + +```js +class MyScreen extends React.Component { + static navigationOptions = { + title: 'Great', + }; + ... +``` + +Unlike the other nav options which are only utilized by the navigator view, the title option can be used by the environment to update the title in the browser window or app switcher. + + +## Tab Navigation Options + +Coming Soon + +## Stack Navigation Options + +Coming Soon diff --git a/docs/guides/Screen-Navigation-Prop.md b/docs/guides/Screen-Navigation-Prop.md new file mode 100644 index 00000000..3472ad52 --- /dev/null +++ b/docs/guides/Screen-Navigation-Prop.md @@ -0,0 +1,142 @@ + +# Screen Navigation Prop + +Each screen in your app will recieve a navigation prop, which contains the following: + + +## `navigate` - Link to other screens + +Call this to link to another screen in your app. Takes the following arguments: + +- `routeName` - A destination routeName that has been registered somewhere in the app's router +- `params` - Params to merge into the destination route +- `action` - (advanced) The sub-action to run in the child router, if the screen is a navigator. + +```js +class HomeScreen extends React.Component { + render() { + const {navigate} = this.props.navigation; + + return ( + + This is the home screen of the app +