├── .eslintignore ├── example ├── .watchmanconfig ├── .gitattributes ├── .babelrc ├── android │ ├── app │ │ ├── src │ │ │ └── main │ │ │ │ ├── res │ │ │ │ ├── values │ │ │ │ │ ├── strings.xml │ │ │ │ │ └── styles.xml │ │ │ │ ├── mipmap-hdpi │ │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-mdpi │ │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-xhdpi │ │ │ │ │ └── ic_launcher.png │ │ │ │ └── mipmap-xxhdpi │ │ │ │ │ └── ic_launcher.png │ │ │ │ ├── assets │ │ │ │ └── fonts │ │ │ │ │ ├── Entypo.ttf │ │ │ │ │ ├── Zocial.ttf │ │ │ │ │ ├── EvilIcons.ttf │ │ │ │ │ ├── Ionicons.ttf │ │ │ │ │ ├── Octicons.ttf │ │ │ │ │ ├── FontAwesome.ttf │ │ │ │ │ ├── Foundation.ttf │ │ │ │ │ ├── MaterialIcons.ttf │ │ │ │ │ ├── SimpleLineIcons.ttf │ │ │ │ │ └── MaterialCommunityIcons.ttf │ │ │ │ ├── gen │ │ │ │ └── com │ │ │ │ │ └── yanavigatorexample │ │ │ │ │ ├── R.java │ │ │ │ │ ├── Manifest.java │ │ │ │ │ └── BuildConfig.java │ │ │ │ ├── java │ │ │ │ └── com │ │ │ │ │ └── yanavigatorexample │ │ │ │ │ ├── MainActivity.java │ │ │ │ │ └── MainApplication.java │ │ │ │ └── AndroidManifest.xml │ │ ├── BUCK │ │ ├── proguard-rules.pro │ │ ├── react.gradle │ │ └── build.gradle │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── keystores │ │ ├── debug.keystore.properties │ │ └── BUCK │ ├── settings.gradle │ ├── build.gradle │ ├── gradle.properties │ ├── gradlew.bat │ └── gradlew ├── .buckconfig ├── index.js ├── package.json ├── ios │ ├── YANavigatorExample │ │ ├── AppDelegate.h │ │ ├── main.m │ │ ├── Images.xcassets │ │ │ └── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ ├── AppDelegate.m │ │ ├── Info.plist │ │ └── Base.lproj │ │ │ └── LaunchScreen.xib │ ├── YANavigatorExampleTests │ │ ├── Info.plist │ │ └── YANavigatorExampleTests.m │ ├── YANavigatorExample-tvOSTests │ │ └── Info.plist │ ├── YANavigatorExample-tvOS │ │ └── Info.plist │ └── YANavigatorExample.xcodeproj │ │ └── xcshareddata │ │ └── xcschemes │ │ ├── YANavigatorExample.xcscheme │ │ └── YANavigatorExample-tvOS.xcscheme ├── .gitignore ├── .flowconfig └── example.js ├── .npmignore ├── images ├── ya_navigator_ios.gif └── ya_navigator_android.gif ├── .gitignore ├── FBNavigator ├── README.md ├── LICENSE ├── clamp.js ├── guid.js ├── merge.js ├── mergeInto.js ├── EventSubscription.js ├── flattenStyle.js ├── InteractionMixin.js ├── EmitterSubscription.js ├── Subscribable.js ├── NavigationTreeNode.js ├── NavigationEventEmitter.js ├── EventSubscriptionVendor.js ├── mergeHelpers.js ├── NavigatorNavigationBarStylesAndroid.js ├── NavigatorNavigationBarStylesIOS.js ├── NavigationEvent.js ├── NavigatorNavigationBar.js ├── NavigationContext.js ├── EventEmitter.js └── NavigatorSceneConfigs.js ├── LICENSE ├── package.json ├── utils.js ├── .eslintrc ├── sceneConfig.js ├── Scene.js └── README.md /.eslintignore: -------------------------------------------------------------------------------- 1 | FBNavigator -------------------------------------------------------------------------------- /example/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /example/.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | -------------------------------------------------------------------------------- /example/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-native"] 3 | } 4 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | example 2 | android/build 3 | ios/build 4 | *.iml 5 | images 6 | .eslintrc 7 | .eslintignore -------------------------------------------------------------------------------- /images/ya_navigator_ios.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xxsnakerxx/react-native-ya-navigator/HEAD/images/ya_navigator_ios.gif -------------------------------------------------------------------------------- /images/ya_navigator_android.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xxsnakerxx/react-native-ya-navigator/HEAD/images/ya_navigator_android.gif -------------------------------------------------------------------------------- /example/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | YANavigatorExample 3 | 4 | -------------------------------------------------------------------------------- /example/.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /example/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xxsnakerxx/react-native-ya-navigator/HEAD/example/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /example/android/keystores/debug.keystore.properties: -------------------------------------------------------------------------------- 1 | key.store=debug.keystore 2 | key.alias=androiddebugkey 3 | key.store.password=android 4 | key.alias.password=android 5 | -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/Entypo.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xxsnakerxx/react-native-ya-navigator/HEAD/example/android/app/src/main/assets/fonts/Entypo.ttf -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/Zocial.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xxsnakerxx/react-native-ya-navigator/HEAD/example/android/app/src/main/assets/fonts/Zocial.ttf -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/EvilIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xxsnakerxx/react-native-ya-navigator/HEAD/example/android/app/src/main/assets/fonts/EvilIcons.ttf -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/Ionicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xxsnakerxx/react-native-ya-navigator/HEAD/example/android/app/src/main/assets/fonts/Ionicons.ttf -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/Octicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xxsnakerxx/react-native-ya-navigator/HEAD/example/android/app/src/main/assets/fonts/Octicons.ttf -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/FontAwesome.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xxsnakerxx/react-native-ya-navigator/HEAD/example/android/app/src/main/assets/fonts/FontAwesome.ttf -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/Foundation.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xxsnakerxx/react-native-ya-navigator/HEAD/example/android/app/src/main/assets/fonts/Foundation.ttf -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/MaterialIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xxsnakerxx/react-native-ya-navigator/HEAD/example/android/app/src/main/assets/fonts/MaterialIcons.ttf -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xxsnakerxx/react-native-ya-navigator/HEAD/example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xxsnakerxx/react-native-ya-navigator/HEAD/example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/SimpleLineIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xxsnakerxx/react-native-ya-navigator/HEAD/example/android/app/src/main/assets/fonts/SimpleLineIcons.ttf -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xxsnakerxx/react-native-ya-navigator/HEAD/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xxsnakerxx/react-native-ya-navigator/HEAD/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/MaterialCommunityIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xxsnakerxx/react-native-ya-navigator/HEAD/example/android/app/src/main/assets/fonts/MaterialCommunityIcons.ttf -------------------------------------------------------------------------------- /example/android/keystores/BUCK: -------------------------------------------------------------------------------- 1 | keystore( 2 | name = "debug", 3 | properties = "debug.keystore.properties", 4 | store = "debug.keystore", 5 | visibility = [ 6 | "PUBLIC", 7 | ], 8 | ) 9 | -------------------------------------------------------------------------------- /example/android/app/src/main/gen/com/yanavigatorexample/R.java: -------------------------------------------------------------------------------- 1 | /*___Generated_by_IDEA___*/ 2 | 3 | package com.yanavigatorexample; 4 | 5 | /* This stub is only used by the IDE. It is NOT the R class actually packed into the APK */ 6 | public final class R { 7 | } -------------------------------------------------------------------------------- /example/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /example/android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'YANavigatorExample' 2 | 3 | include ':app' 4 | include ':react-native-vector-icons' 5 | project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android') 6 | -------------------------------------------------------------------------------- /example/android/app/src/main/gen/com/yanavigatorexample/Manifest.java: -------------------------------------------------------------------------------- 1 | /*___Generated_by_IDEA___*/ 2 | 3 | package com.yanavigatorexample; 4 | 5 | /* This stub is only used by the IDE. It is NOT the Manifest class actually packed into the APK */ 6 | public final class Manifest { 7 | } -------------------------------------------------------------------------------- /example/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample React Native App 3 | * https://github.com/facebook/react-native 4 | */ 5 | 6 | import { AppRegistry } from 'react-native'; 7 | import Example from './example'; 8 | 9 | AppRegistry.registerComponent('YANavigatorExample', () => Example); 10 | -------------------------------------------------------------------------------- /example/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | #Wed Mar 15 17:07:22 OMST 2017 2 | distributionBase=GRADLE_USER_HOME 3 | distributionPath=wrapper/dists 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | distributionUrl=https\://services.gradle.org/distributions/gradle-3.3-all.zip 7 | -------------------------------------------------------------------------------- /example/android/app/src/main/gen/com/yanavigatorexample/BuildConfig.java: -------------------------------------------------------------------------------- 1 | /*___Generated_by_IDEA___*/ 2 | 3 | package com.yanavigatorexample; 4 | 5 | /* This stub is only used by the IDE. It is NOT the BuildConfig class actually packed into the APK */ 6 | public final class BuildConfig { 7 | public final static boolean DEBUG = Boolean.parseBoolean(null); 8 | } -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "YANavigatorExample", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "node node_modules/react-native/local-cli/cli.js start" 7 | }, 8 | "dependencies": { 9 | "prop-types": "^15.6.1", 10 | "react": "^16.3.0-alpha.1", 11 | "react-native": "^0.54.0", 12 | "react-native-vector-icons": "^4.5.0", 13 | "react-native-ya-navigator": "file:../" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /.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 | # node.js 26 | # 27 | node_modules/ 28 | npm-debug.log 29 | 30 | # android studio 31 | *.iml 32 | -------------------------------------------------------------------------------- /example/android/app/src/main/java/com/yanavigatorexample/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.yanavigatorexample; 2 | 3 | import com.facebook.react.ReactActivity; 4 | 5 | public class MainActivity extends ReactActivity { 6 | 7 | /** 8 | * Returns the name of the main component registered from JavaScript. 9 | * This is used to schedule rendering of the component. 10 | */ 11 | @Override 12 | protected String getMainComponentName() { 13 | return "YANavigatorExample"; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /example/ios/YANavigatorExample/AppDelegate.h: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import 11 | 12 | @interface AppDelegate : UIResponder 13 | 14 | @property (nonatomic, strong) UIWindow *window; 15 | 16 | @end 17 | -------------------------------------------------------------------------------- /example/ios/YANavigatorExample/main.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import 11 | 12 | #import "AppDelegate.h" 13 | 14 | int main(int argc, char * argv[]) { 15 | @autoreleasepool { 16 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /FBNavigator/README.md: -------------------------------------------------------------------------------- 1 | # React Native Legacy Custom Components 2 | 3 | This is a module for legacy "CustomComponents" to gracefully deprecate. 4 | 5 | ## Navigator 6 | 7 | The navigator component in this module will behave identically as the one in old version of React native, with one exception: 8 | 9 | Latest documentation is available here: http://facebook.github.io/react-native/releases/0.43/docs/navigator.html 10 | 11 | 12 | ### Breaking Changes from react-native 13 | 14 | - Navigator.props.sceneStyle must be a plain object, not a stylesheet! 15 | 16 | (this breaking change is needed to avoid calling React Native's private APIs) -------------------------------------------------------------------------------- /example/android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | repositories { 5 | jcenter() 6 | } 7 | dependencies { 8 | classpath 'com.android.tools.build:gradle:2.2.3' 9 | 10 | // NOTE: Do not place your application dependencies here; they belong 11 | // in the individual module build.gradle files 12 | } 13 | } 14 | 15 | allprojects { 16 | repositories { 17 | mavenLocal() 18 | jcenter() 19 | maven { 20 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 21 | url "$rootDir/../node_modules/react-native/android" 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /example/ios/YANavigatorExample/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "size" : "29x29", 6 | "scale" : "2x" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "size" : "29x29", 11 | "scale" : "3x" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "size" : "40x40", 16 | "scale" : "2x" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "size" : "40x40", 21 | "scale" : "3x" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "size" : "60x60", 26 | "scale" : "2x" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "size" : "60x60", 31 | "scale" : "3x" 32 | } 33 | ], 34 | "info" : { 35 | "version" : 1, 36 | "author" : "xcode" 37 | } 38 | } -------------------------------------------------------------------------------- /example/ios/YANavigatorExampleTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | $(PRODUCT_BUNDLE_IDENTIFIER) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /example/ios/YANavigatorExample-tvOSTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /example/android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx10248m -XX:MaxPermSize=256m 13 | # org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true 19 | 20 | android.useDeprecatedNdk=true 21 | -------------------------------------------------------------------------------- /example/.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/IntelliJ 26 | # 27 | build/ 28 | .idea 29 | .gradle 30 | local.properties 31 | *.iml 32 | 33 | # node.js 34 | # 35 | node_modules/ 36 | npm-debug.log 37 | yarn-error.log 38 | 39 | # BUCK 40 | buck-out/ 41 | \.buckd/ 42 | *.keystore 43 | 44 | # fastlane 45 | # 46 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 47 | # screenshots whenever they are needed. 48 | # For more information about the recommended setup visit: 49 | # https://docs.fastlane.tools/best-practices/source-control/ 50 | 51 | */fastlane/report.xml 52 | */fastlane/Preview.html 53 | */fastlane/screenshots 54 | -------------------------------------------------------------------------------- /example/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 13 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Dmitriy Kolesnikov 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 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-ya-navigator", 3 | "version": "0.10.6", 4 | "description": "Yet another react native navigator component", 5 | "main": "Navigator.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/xxsnakerxx/react-native-ya-navigator.git" 12 | }, 13 | "keywords": [ 14 | "react-native", 15 | "navigator" 16 | ], 17 | "author": "Dmitriy Kolesnikov (https://github.com/xxsnakerxx)", 18 | "license": "MIT", 19 | "bugs": { 20 | "url": "https://github.com/xxsnakerxx/react-native-ya-navigator/issues" 21 | }, 22 | "homepage": "https://github.com/xxsnakerxx/react-native-ya-navigator#readme", 23 | "dependencies": { 24 | "create-react-class": "^15.6.3", 25 | "fbjs": "~0.8.9", 26 | "immutable": "~3.7.6", 27 | "prop-types": "^15.6.1", 28 | "react-timer-mixin": "^0.13.2", 29 | "rebound": "0.0.15" 30 | }, 31 | "devDependencies": { 32 | "babel-eslint": "^8.2.2", 33 | "eslint": "^4.18.2", 34 | "eslint-plugin-react": "^7.7.0", 35 | "eslint-plugin-react-native": "^3.2.1" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /example/android/app/src/main/java/com/yanavigatorexample/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.yanavigatorexample; 2 | 3 | import android.app.Application; 4 | 5 | import com.facebook.react.ReactApplication; 6 | import com.facebook.react.ReactNativeHost; 7 | import com.facebook.react.ReactPackage; 8 | import com.facebook.react.shell.MainReactPackage; 9 | import com.facebook.soloader.SoLoader; 10 | 11 | import java.util.Arrays; 12 | import java.util.List; 13 | 14 | public class MainApplication extends Application implements ReactApplication { 15 | 16 | private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { 17 | @Override 18 | public boolean getUseDeveloperSupport() { 19 | return BuildConfig.DEBUG; 20 | } 21 | 22 | @Override 23 | protected List getPackages() { 24 | return Arrays.asList( 25 | new MainReactPackage() 26 | ); 27 | } 28 | 29 | @Override 30 | protected String getJSMainModuleName() { 31 | return "index"; 32 | } 33 | }; 34 | 35 | @Override 36 | public ReactNativeHost getReactNativeHost() { 37 | return mReactNativeHost; 38 | } 39 | 40 | @Override 41 | public void onCreate() { 42 | super.onCreate(); 43 | SoLoader.init(this, /* native exopackage */ false); 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /FBNavigator/LICENSE: -------------------------------------------------------------------------------- 1 | LICENSE AGREEMENT 2 | 3 | For React Native Custom Components software 4 | 5 | Copyright (c) 2015, Facebook, Inc. All rights reserved. 6 | 7 | Facebook, Inc. (“Facebook”) owns all right, title and interest, including all intellectual property and other proprietary rights, in and to the React Native Custom Components software (the “Software”). Subject to your compliance with these terms, you are hereby granted a non-exclusive, worldwide, royalty-free copyright license to (1) use and copy the Software; and (2) reproduce and distribute the Software as part of your own software (“Your Software”). Facebook reserves all rights not expressly granted to you in this license agreement. 8 | 9 | THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "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 FACEBOOK OR ITS AFFILIATES, OFFICERS, DIRECTORS OR EMPLOYEES 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 THE SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 10 | -------------------------------------------------------------------------------- /example/ios/YANavigatorExample/AppDelegate.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import "AppDelegate.h" 11 | 12 | #import 13 | #import 14 | 15 | @implementation AppDelegate 16 | 17 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 18 | { 19 | NSURL *jsCodeLocation; 20 | 21 | jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; 22 | 23 | RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation 24 | moduleName:@"YANavigatorExample" 25 | initialProperties:nil 26 | launchOptions:launchOptions]; 27 | rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1]; 28 | 29 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 30 | UIViewController *rootViewController = [UIViewController new]; 31 | rootViewController.view = rootView; 32 | self.window.rootViewController = rootViewController; 33 | [self.window makeKeyAndVisible]; 34 | return YES; 35 | } 36 | 37 | @end 38 | -------------------------------------------------------------------------------- /example/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | ; We fork some components by platform 3 | .*/*[.]android.js 4 | 5 | ; Ignore "BUCK" generated dirs 6 | /\.buckd/ 7 | 8 | ; Ignore unexpected extra "@providesModule" 9 | .*/node_modules/.*/node_modules/fbjs/.* 10 | 11 | ; Ignore duplicate module providers 12 | ; For RN Apps installed via npm, "Libraries" folder is inside 13 | ; "node_modules/react-native" but in the source repo it is in the root 14 | .*/Libraries/react-native/React.js 15 | 16 | ; Ignore polyfills 17 | .*/Libraries/polyfills/.* 18 | 19 | ; Ignore metro 20 | .*/node_modules/metro/.* 21 | 22 | [include] 23 | 24 | [libs] 25 | node_modules/react-native/Libraries/react-native/react-native-interface.js 26 | node_modules/react-native/flow/ 27 | node_modules/react-native/flow-github/ 28 | 29 | [options] 30 | emoji=true 31 | 32 | module.system=haste 33 | 34 | munge_underscores=true 35 | 36 | 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' 37 | 38 | module.file_ext=.js 39 | module.file_ext=.jsx 40 | module.file_ext=.json 41 | module.file_ext=.native.js 42 | 43 | suppress_type=$FlowIssue 44 | suppress_type=$FlowFixMe 45 | suppress_type=$FlowFixMeProps 46 | suppress_type=$FlowFixMeState 47 | 48 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\) 49 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+ 50 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy 51 | suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError 52 | 53 | [version] 54 | ^0.65.0 55 | -------------------------------------------------------------------------------- /example/ios/YANavigatorExample-tvOS/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | APPL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | LSRequiresIPhoneOS 24 | 25 | UILaunchStoryboardName 26 | LaunchScreen 27 | UIRequiredDeviceCapabilities 28 | 29 | armv7 30 | 31 | UISupportedInterfaceOrientations 32 | 33 | UIInterfaceOrientationPortrait 34 | UIInterfaceOrientationLandscapeLeft 35 | UIInterfaceOrientationLandscapeRight 36 | 37 | UIViewControllerBasedStatusBarAppearance 38 | 39 | NSLocationWhenInUseUsageDescription 40 | 41 | NSAppTransportSecurity 42 | 43 | 44 | NSExceptionDomains 45 | 46 | localhost 47 | 48 | NSExceptionAllowsInsecureHTTPLoads 49 | 50 | 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /example/android/app/BUCK: -------------------------------------------------------------------------------- 1 | # To learn about Buck see [Docs](https://buckbuild.com/). 2 | # To run your application with Buck: 3 | # - install Buck 4 | # - `npm start` - to start the packager 5 | # - `cd android` 6 | # - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"` 7 | # - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck 8 | # - `buck install -r android/app` - compile, install and run application 9 | # 10 | 11 | lib_deps = [] 12 | 13 | for jarfile in glob(['libs/*.jar']): 14 | name = 'jars__' + jarfile[jarfile.rindex('/') + 1: jarfile.rindex('.jar')] 15 | lib_deps.append(':' + name) 16 | prebuilt_jar( 17 | name = name, 18 | binary_jar = jarfile, 19 | ) 20 | 21 | for aarfile in glob(['libs/*.aar']): 22 | name = 'aars__' + aarfile[aarfile.rindex('/') + 1: aarfile.rindex('.aar')] 23 | lib_deps.append(':' + name) 24 | android_prebuilt_aar( 25 | name = name, 26 | aar = aarfile, 27 | ) 28 | 29 | android_library( 30 | name = "all-libs", 31 | exported_deps = lib_deps, 32 | ) 33 | 34 | android_library( 35 | name = "app-code", 36 | srcs = glob([ 37 | "src/main/java/**/*.java", 38 | ]), 39 | deps = [ 40 | ":all-libs", 41 | ":build_config", 42 | ":res", 43 | ], 44 | ) 45 | 46 | android_build_config( 47 | name = "build_config", 48 | package = "com.yanavigatorexample", 49 | ) 50 | 51 | android_resource( 52 | name = "res", 53 | package = "com.yanavigatorexample", 54 | res = "src/main/res", 55 | ) 56 | 57 | android_binary( 58 | name = "app", 59 | keystore = "//android/keystores:debug", 60 | manifest = "src/main/AndroidManifest.xml", 61 | package_type = "debug", 62 | deps = [ 63 | ":app-code", 64 | ], 65 | ) 66 | -------------------------------------------------------------------------------- /utils.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { 4 | Dimensions, 5 | Platform, 6 | } from 'react-native'; 7 | 8 | const getNavigationDelegate = (component) => (component.wrappedComponent && component.wrappedComponent.navigationDelegate) || 9 | component.navigationDelegate || 10 | (component.type && component.type.navigationDelegate); 11 | 12 | const getOrientation = () => { 13 | const { width, height } = Dimensions.get('window'); 14 | 15 | return height > width ? 'PORTRAIT' : 'LANDSCAPE'; 16 | }; 17 | 18 | const replaceInstanceEventedProps = 19 | (reactElement, eventedProps, events = [], route, navigationContext) => { 20 | eventedProps.forEach((eventedProp) => { 21 | if (React.isValidElement(reactElement) && reactElement.props[eventedProp]) { 22 | const event = reactElement.props[eventedProp](); 23 | 24 | if (typeof event === 'string') { 25 | if (events.indexOf(event) < 0) { 26 | events.push(event); 27 | } 28 | 29 | reactElement = React.cloneElement(reactElement, { 30 | [eventedProp]: (e) => navigationContext.emit(event, { route, e }), 31 | }); 32 | } 33 | } 34 | }); 35 | 36 | return { reactElement, events }; 37 | }; 38 | 39 | 40 | const isIphoneX = () => { 41 | const { width, height } = Dimensions.get('window'); 42 | 43 | return ( 44 | Platform.OS === 'ios' && 45 | !Platform.isPad && 46 | !Platform.isTVOS && 47 | (height === 812 || width === 812) 48 | ); 49 | } 50 | 51 | const getNavigationOption = (route, option) => { 52 | return route && route.component && 53 | getNavigationDelegate(route.component) && 54 | getNavigationDelegate(route.component)[option]; 55 | } 56 | 57 | export { 58 | getNavigationDelegate, 59 | getNavigationOption, 60 | getOrientation, 61 | replaceInstanceEventedProps, 62 | isIphoneX, 63 | }; 64 | -------------------------------------------------------------------------------- /FBNavigator/clamp.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015, Facebook, Inc. All rights reserved. 3 | * 4 | * Facebook, Inc. ("Facebook") owns all right, title and interest, including 5 | * all intellectual property and other proprietary rights, in and to the React 6 | * Native CustomComponents software (the "Software"). Subject to your 7 | * compliance with these terms, you are hereby granted a non-exclusive, 8 | * worldwide, royalty-free copyright license to (1) use and copy the Software; 9 | * and (2) reproduce and distribute the Software as part of your own software 10 | * ("Your Software"). Facebook reserves all rights not expressly granted to 11 | * you in this license agreement. 12 | * 13 | * THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "AS IS" AND ANY EXPRESS 14 | * OR IMPLIED WARRANTIES (INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES 15 | * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE) ARE DISCLAIMED. 16 | * IN NO EVENT SHALL FACEBOOK OR ITS AFFILIATES, OFFICERS, DIRECTORS OR 17 | * EMPLOYEES BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, 18 | * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, 19 | * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; 20 | * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, 21 | * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR 22 | * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THE SOFTWARE, EVEN IF 23 | * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 24 | * 25 | * @typechecks 26 | */ 27 | 'use strict'; 28 | 29 | /** 30 | * @param {number} value 31 | * @param {number} min 32 | * @param {number} max 33 | * @return {number} 34 | */ 35 | function clamp(min, value, max) { 36 | if (value < min) { 37 | return min; 38 | } 39 | if (value > max) { 40 | return max; 41 | } 42 | return value; 43 | } 44 | 45 | module.exports = clamp; 46 | -------------------------------------------------------------------------------- /FBNavigator/guid.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015, Facebook, Inc. All rights reserved. 3 | * 4 | * Facebook, Inc. ("Facebook") owns all right, title and interest, including 5 | * all intellectual property and other proprietary rights, in and to the React 6 | * Native CustomComponents software (the "Software"). Subject to your 7 | * compliance with these terms, you are hereby granted a non-exclusive, 8 | * worldwide, royalty-free copyright license to (1) use and copy the Software; 9 | * and (2) reproduce and distribute the Software as part of your own software 10 | * ("Your Software"). Facebook reserves all rights not expressly granted to 11 | * you in this license agreement. 12 | * 13 | * THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "AS IS" AND ANY EXPRESS 14 | * OR IMPLIED WARRANTIES (INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES 15 | * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE) ARE DISCLAIMED. 16 | * IN NO EVENT SHALL FACEBOOK OR ITS AFFILIATES, OFFICERS, DIRECTORS OR 17 | * EMPLOYEES BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, 18 | * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, 19 | * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; 20 | * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, 21 | * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR 22 | * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THE SOFTWARE, EVEN IF 23 | * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 24 | * 25 | */ 26 | 27 | /* eslint-disable no-bitwise */ 28 | 29 | 'use strict'; 30 | 31 | /** 32 | * Module that provides a function for creating a unique identifier. 33 | * The returned value does not conform to the GUID standard, but should 34 | * be globally unique in the context of the browser. 35 | */ 36 | function guid() { 37 | return 'f' + (Math.random() * (1 << 30)).toString(16).replace('.', ''); 38 | } 39 | 40 | module.exports = guid; 41 | -------------------------------------------------------------------------------- /FBNavigator/merge.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015, Facebook, Inc. All rights reserved. 3 | * 4 | * Facebook, Inc. ("Facebook") owns all right, title and interest, including 5 | * all intellectual property and other proprietary rights, in and to the React 6 | * Native CustomComponents software (the "Software"). Subject to your 7 | * compliance with these terms, you are hereby granted a non-exclusive, 8 | * worldwide, royalty-free copyright license to (1) use and copy the Software; 9 | * and (2) reproduce and distribute the Software as part of your own software 10 | * ("Your Software"). Facebook reserves all rights not expressly granted to 11 | * you in this license agreement. 12 | * 13 | * THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "AS IS" AND ANY EXPRESS 14 | * OR IMPLIED WARRANTIES (INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES 15 | * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE) ARE DISCLAIMED. 16 | * IN NO EVENT SHALL FACEBOOK OR ITS AFFILIATES, OFFICERS, DIRECTORS OR 17 | * EMPLOYEES BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, 18 | * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, 19 | * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; 20 | * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, 21 | * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR 22 | * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THE SOFTWARE, EVEN IF 23 | * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 24 | * 25 | */ 26 | 27 | "use strict"; 28 | 29 | var mergeInto = require('./mergeInto'); 30 | 31 | /** 32 | * Shallow merges two structures into a return value, without mutating either. 33 | * 34 | * @param {?object} one Optional object with properties to merge from. 35 | * @param {?object} two Optional object with properties to merge from. 36 | * @return {object} The shallow extension of one by two. 37 | */ 38 | var merge = function(one, two) { 39 | var result = {}; 40 | mergeInto(result, one); 41 | mergeInto(result, two); 42 | return result; 43 | }; 44 | 45 | module.exports = merge; 46 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | env: { 3 | browser: true, 4 | es6: true, 5 | node: true, 6 | jest: true, 7 | }, 8 | 9 | parserOptions: { 10 | sourceType: "module", 11 | ecmaVersion: 6, 12 | ecmaFeatures: { 13 | jsx: true, 14 | } 15 | }, 16 | 17 | parser: "babel-eslint", 18 | 19 | plugins: [ 20 | "react", 21 | "react-native", 22 | ], 23 | 24 | extends: "eslint:recommended", 25 | 26 | globals: { 27 | __DEV__: true, 28 | }, 29 | 30 | rules: { 31 | quotes: [1, "single", "avoid-escape"], 32 | jsx-quotes: [2, "prefer-single"], 33 | no-constant-condition: 0, 34 | no-extend-native: 0, 35 | no-console: 0, 36 | curly: 0, 37 | no-alert: 0, 38 | no-trailing-spaces: [2, { "skipBlankLines": true }], 39 | comma-dangle: [2, "always-multiline"], 40 | no-unused-expressions: 0, 41 | no-underscore-dangle: 0, 42 | no-dupe-keys: 2, 43 | key-spacing: 2, 44 | no-const-assign: 2, 45 | prefer-const: 2, 46 | object-shorthand: 2, 47 | prefer-spread: 2, 48 | prefer-template: 2, 49 | prefer-arrow-callback: 2, 50 | no-var: 2, 51 | no-extra-bind: 2, 52 | arrow-parens: 2, 53 | arrow-spacing: 2, 54 | brace-style: 2, 55 | array-callback-return: 2, 56 | keyword-spacing: 2, 57 | newline-per-chained-call: [2, { "ignoreChainWithDepth": 4}], 58 | no-new-symbol: 2, 59 | no-self-assign: 2, 60 | no-whitespace-before-property: 2, 61 | "react/no-direct-mutation-state": 2, 62 | "react/prefer-es6-class": 2, 63 | "react/prop-types": [2, { "ignore": ["dispatch", "navigator", "children"] }], 64 | "react/react-in-jsx-scope": 2, 65 | "react/self-closing-comp": 2, 66 | "react/jsx-no-duplicate-props": 2, 67 | "react/jsx-no-undef": 2, 68 | "react/jsx-uses-react": 2, 69 | "react/jsx-uses-vars": 2, 70 | "react/jsx-no-literals": 2, 71 | "react-native/no-unused-styles": 2, 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /example/ios/YANavigatorExample/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleDisplayName 8 | YANavigatorExample 9 | CFBundleExecutable 10 | $(EXECUTABLE_NAME) 11 | CFBundleIdentifier 12 | $(PRODUCT_BUNDLE_IDENTIFIER) 13 | CFBundleInfoDictionaryVersion 14 | 6.0 15 | CFBundleName 16 | $(PRODUCT_NAME) 17 | CFBundlePackageType 18 | APPL 19 | CFBundleShortVersionString 20 | 1.0 21 | CFBundleSignature 22 | ???? 23 | CFBundleVersion 24 | 1 25 | LSRequiresIPhoneOS 26 | 27 | NSAppTransportSecurity 28 | 29 | NSExceptionDomains 30 | 31 | localhost 32 | 33 | NSExceptionAllowsInsecureHTTPLoads 34 | 35 | 36 | 37 | 38 | NSLocationWhenInUseUsageDescription 39 | 40 | UIAppFonts 41 | 42 | Ionicons.ttf 43 | Entypo.ttf 44 | EvilIcons.ttf 45 | FontAwesome.ttf 46 | Foundation.ttf 47 | Ionicons.ttf 48 | MaterialCommunityIcons.ttf 49 | MaterialIcons.ttf 50 | Octicons.ttf 51 | SimpleLineIcons.ttf 52 | Zocial.ttf 53 | 54 | UILaunchStoryboardName 55 | LaunchScreen 56 | UIRequiredDeviceCapabilities 57 | 58 | armv7 59 | 60 | UISupportedInterfaceOrientations 61 | 62 | UIInterfaceOrientationPortrait 63 | UIInterfaceOrientationLandscapeLeft 64 | UIInterfaceOrientationLandscapeRight 65 | 66 | UIViewControllerBasedStatusBarAppearance 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /FBNavigator/mergeInto.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015, Facebook, Inc. All rights reserved. 3 | * 4 | * Facebook, Inc. ("Facebook") owns all right, title and interest, including 5 | * all intellectual property and other proprietary rights, in and to the React 6 | * Native CustomComponents software (the "Software"). Subject to your 7 | * compliance with these terms, you are hereby granted a non-exclusive, 8 | * worldwide, royalty-free copyright license to (1) use and copy the Software; 9 | * and (2) reproduce and distribute the Software as part of your own software 10 | * ("Your Software"). Facebook reserves all rights not expressly granted to 11 | * you in this license agreement. 12 | * 13 | * THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "AS IS" AND ANY EXPRESS 14 | * OR IMPLIED WARRANTIES (INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES 15 | * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE) ARE DISCLAIMED. 16 | * IN NO EVENT SHALL FACEBOOK OR ITS AFFILIATES, OFFICERS, DIRECTORS OR 17 | * EMPLOYEES BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, 18 | * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, 19 | * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; 20 | * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, 21 | * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR 22 | * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THE SOFTWARE, EVEN IF 23 | * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 24 | * 25 | * @typechecks static-only 26 | */ 27 | 28 | "use strict"; 29 | 30 | var mergeHelpers = require('./mergeHelpers'); 31 | 32 | var checkMergeObjectArg = mergeHelpers.checkMergeObjectArg; 33 | var checkMergeIntoObjectArg = mergeHelpers.checkMergeIntoObjectArg; 34 | 35 | /** 36 | * Shallow merges two structures by mutating the first parameter. 37 | * 38 | * @param {object|function} one Object to be merged into. 39 | * @param {?object} two Optional object with properties to merge from. 40 | */ 41 | function mergeInto(one, two) { 42 | checkMergeIntoObjectArg(one); 43 | if (two != null) { 44 | checkMergeObjectArg(two); 45 | for (var key in two) { 46 | if (!two.hasOwnProperty(key)) { 47 | continue; 48 | } 49 | one[key] = two[key]; 50 | } 51 | } 52 | } 53 | 54 | module.exports = mergeInto; 55 | -------------------------------------------------------------------------------- /FBNavigator/EventSubscription.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015, Facebook, Inc. All rights reserved. 3 | * 4 | * Facebook, Inc. ("Facebook") owns all right, title and interest, including 5 | * all intellectual property and other proprietary rights, in and to the React 6 | * Native CustomComponents software (the "Software"). Subject to your 7 | * compliance with these terms, you are hereby granted a non-exclusive, 8 | * worldwide, royalty-free copyright license to (1) use and copy the Software; 9 | * and (2) reproduce and distribute the Software as part of your own software 10 | * ("Your Software"). Facebook reserves all rights not expressly granted to 11 | * you in this license agreement. 12 | * 13 | * THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "AS IS" AND ANY EXPRESS 14 | * OR IMPLIED WARRANTIES (INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES 15 | * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE) ARE DISCLAIMED. 16 | * IN NO EVENT SHALL FACEBOOK OR ITS AFFILIATES, OFFICERS, DIRECTORS OR 17 | * EMPLOYEES BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, 18 | * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, 19 | * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; 20 | * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, 21 | * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR 22 | * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THE SOFTWARE, EVEN IF 23 | * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 24 | * 25 | * @flow 26 | */ 27 | 'use strict'; 28 | 29 | import type EventSubscriptionVendor from './EventSubscriptionVendor'; 30 | 31 | /** 32 | * EventSubscription represents a subscription to a particular event. It can 33 | * remove its own subscription. 34 | */ 35 | class EventSubscription { 36 | 37 | eventType: string; 38 | key: number; 39 | subscriber: EventSubscriptionVendor; 40 | 41 | /** 42 | * @param {EventSubscriptionVendor} subscriber the subscriber that controls 43 | * this subscription. 44 | */ 45 | constructor(subscriber: EventSubscriptionVendor) { 46 | this.subscriber = subscriber; 47 | } 48 | 49 | /** 50 | * Removes this subscription from the subscriber that controls it. 51 | */ 52 | remove() { 53 | this.subscriber.removeSubscription(this); 54 | } 55 | } 56 | 57 | module.exports = EventSubscription; 58 | -------------------------------------------------------------------------------- /example/ios/YANavigatorExampleTests/YANavigatorExampleTests.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import 11 | #import 12 | 13 | #import 14 | #import 15 | 16 | #define TIMEOUT_SECONDS 600 17 | #define TEXT_TO_LOOK_FOR @"Welcome to React Native!" 18 | 19 | @interface YANavigatorExampleTests : XCTestCase 20 | 21 | @end 22 | 23 | @implementation YANavigatorExampleTests 24 | 25 | - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test 26 | { 27 | if (test(view)) { 28 | return YES; 29 | } 30 | for (UIView *subview in [view subviews]) { 31 | if ([self findSubviewInView:subview matching:test]) { 32 | return YES; 33 | } 34 | } 35 | return NO; 36 | } 37 | 38 | - (void)testRendersWelcomeScreen 39 | { 40 | UIViewController *vc = [[[RCTSharedApplication() delegate] window] rootViewController]; 41 | NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS]; 42 | BOOL foundElement = NO; 43 | 44 | __block NSString *redboxError = nil; 45 | RCTSetLogFunction(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { 46 | if (level >= RCTLogLevelError) { 47 | redboxError = message; 48 | } 49 | }); 50 | 51 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { 52 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 53 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 54 | 55 | foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) { 56 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { 57 | return YES; 58 | } 59 | return NO; 60 | }]; 61 | } 62 | 63 | RCTSetLogFunction(RCTDefaultLogFunction); 64 | 65 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); 66 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); 67 | } 68 | 69 | 70 | @end 71 | -------------------------------------------------------------------------------- /sceneConfig.js: -------------------------------------------------------------------------------- 1 | import buildStyleInterpolator from 'react-native/Libraries/Utilities/buildStyleInterpolator'; 2 | 3 | import { 4 | PixelRatio, 5 | Dimensions, 6 | Platform, 7 | } from 'react-native'; 8 | 9 | // eslint-disable-next-line 10 | import FBNavigator from './FBNavigator'; 11 | 12 | let sceneConfig = FBNavigator.SceneConfigs.PushFromRight; 13 | 14 | const outAnimation = { 15 | transformTranslate: { 16 | from: { x: 0, y: 0, z: 0 }, 17 | to: { x: -Math.round(Dimensions.get('window').width * 0.3), y: 0, z: 0 }, 18 | min: 0, 19 | max: 1, 20 | type: 'linear', 21 | extrapolate: true, 22 | round: PixelRatio.get(), 23 | }, 24 | transformScale: { 25 | value: { x: 1, y: 1, z: 1 }, 26 | type: 'constant', 27 | }, 28 | opacity: { 29 | value: 1.0, 30 | type: 'constant', 31 | }, 32 | translateX: { 33 | from: 0, 34 | to: -Math.round(Dimensions.get('window').width * 0.3), 35 | min: 0, 36 | max: 1, 37 | type: 'linear', 38 | extrapolate: true, 39 | round: PixelRatio.get(), 40 | }, 41 | scaleX: { 42 | value: 1, 43 | type: 'constant', 44 | }, 45 | scaleY: { 46 | value: 1, 47 | type: 'constant', 48 | }, 49 | }; 50 | 51 | const intoAnimation = { 52 | opacity: { 53 | value: 1.0, 54 | type: 'constant', 55 | }, 56 | 57 | transformTranslate: { 58 | from: { x: Dimensions.get('window').width, y: 0, z: 0 }, 59 | to: { x: 0, y: 0, z: 0 }, 60 | min: 0, 61 | max: 1, 62 | type: 'linear', 63 | extrapolate: true, 64 | round: PixelRatio.get(), 65 | }, 66 | 67 | translateX: { 68 | from: Dimensions.get('window').width, 69 | to: 0, 70 | min: 0, 71 | max: 1, 72 | type: 'linear', 73 | extrapolate: true, 74 | round: PixelRatio.get(), 75 | }, 76 | 77 | scaleX: { 78 | value: 1, 79 | type: 'constant', 80 | }, 81 | scaleY: { 82 | value: 1, 83 | type: 'constant', 84 | }, 85 | }; 86 | 87 | const CustomPushFromRight = { 88 | ...sceneConfig, 89 | animationInterpolators: { 90 | out: buildStyleInterpolator(outAnimation), 91 | into: buildStyleInterpolator(intoAnimation), 92 | }, 93 | }; 94 | 95 | export { 96 | CustomPushFromRight, 97 | }; 98 | 99 | export default sceneConfig = Platform.OS === 'ios' ? 100 | CustomPushFromRight : 101 | FBNavigator.SceneConfigs.FadeAndroid; 102 | -------------------------------------------------------------------------------- /FBNavigator/flattenStyle.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015, Facebook, Inc. All rights reserved. 3 | * 4 | * Facebook, Inc. ("Facebook") owns all right, title and interest, including 5 | * all intellectual property and other proprietary rights, in and to the React 6 | * Native CustomComponents software (the "Software"). Subject to your 7 | * compliance with these terms, you are hereby granted a non-exclusive, 8 | * worldwide, royalty-free copyright license to (1) use and copy the Software; 9 | * and (2) reproduce and distribute the Software as part of your own software 10 | * ("Your Software"). Facebook reserves all rights not expressly granted to 11 | * you in this license agreement. 12 | * 13 | * THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "AS IS" AND ANY EXPRESS 14 | * OR IMPLIED WARRANTIES (INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES 15 | * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE) ARE DISCLAIMED. 16 | * IN NO EVENT SHALL FACEBOOK OR ITS AFFILIATES, OFFICERS, DIRECTORS OR 17 | * EMPLOYEES BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, 18 | * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, 19 | * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; 20 | * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, 21 | * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR 22 | * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THE SOFTWARE, EVEN IF 23 | * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 24 | * 25 | * @flow 26 | */ 27 | 'use strict'; 28 | 29 | var invariant = require('fbjs/lib/invariant'); 30 | 31 | import type { StyleObj } from 'StyleSheetTypes'; 32 | 33 | function getStyle(style) { 34 | if (style && typeof style === 'number') { 35 | debugger; 36 | invariant(false, "Error when using Navigator from react-native-custom-components. Please provide a raw object to `props.sceneStyle` instead of a StyleSheet reference."); 37 | } 38 | return style; 39 | } 40 | 41 | function flattenStyle(style: ?StyleObj): ?Object { 42 | if (!style) { 43 | return undefined; 44 | } 45 | invariant(style !== true, 'style may be false but not true'); 46 | 47 | if (!Array.isArray(style)) { 48 | return getStyle(style); 49 | } 50 | 51 | var result = {}; 52 | for (var i = 0, styleLength = style.length; i < styleLength; ++i) { 53 | var computedStyle = flattenStyle(style[i]); 54 | if (computedStyle) { 55 | for (var key in computedStyle) { 56 | result[key] = computedStyle[key]; 57 | } 58 | } 59 | } 60 | return result; 61 | } 62 | 63 | module.exports = flattenStyle; -------------------------------------------------------------------------------- /example/android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @if "%DEBUG%" == "" @echo off 2 | @rem ########################################################################## 3 | @rem 4 | @rem Gradle startup script for Windows 5 | @rem 6 | @rem ########################################################################## 7 | 8 | @rem Set local scope for the variables with windows NT shell 9 | if "%OS%"=="Windows_NT" setlocal 10 | 11 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 12 | set DEFAULT_JVM_OPTS= 13 | 14 | set DIRNAME=%~dp0 15 | if "%DIRNAME%" == "" set DIRNAME=. 16 | set APP_BASE_NAME=%~n0 17 | set APP_HOME=%DIRNAME% 18 | 19 | @rem Find java.exe 20 | if defined JAVA_HOME goto findJavaFromJavaHome 21 | 22 | set JAVA_EXE=java.exe 23 | %JAVA_EXE% -version >NUL 2>&1 24 | if "%ERRORLEVEL%" == "0" goto init 25 | 26 | echo. 27 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 28 | echo. 29 | echo Please set the JAVA_HOME variable in your environment to match the 30 | echo location of your Java installation. 31 | 32 | goto fail 33 | 34 | :findJavaFromJavaHome 35 | set JAVA_HOME=%JAVA_HOME:"=% 36 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 37 | 38 | if exist "%JAVA_EXE%" goto init 39 | 40 | echo. 41 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 42 | echo. 43 | echo Please set the JAVA_HOME variable in your environment to match the 44 | echo location of your Java installation. 45 | 46 | goto fail 47 | 48 | :init 49 | @rem Get command-line arguments, handling Windowz variants 50 | 51 | if not "%OS%" == "Windows_NT" goto win9xME_args 52 | if "%@eval[2+2]" == "4" goto 4NT_args 53 | 54 | :win9xME_args 55 | @rem Slurp the command line arguments. 56 | set CMD_LINE_ARGS= 57 | set _SKIP=2 58 | 59 | :win9xME_args_slurp 60 | if "x%~1" == "x" goto execute 61 | 62 | set CMD_LINE_ARGS=%* 63 | goto execute 64 | 65 | :4NT_args 66 | @rem Get arguments from the 4NT Shell from JP Software 67 | set CMD_LINE_ARGS=%$ 68 | 69 | :execute 70 | @rem Setup the command line 71 | 72 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 73 | 74 | @rem Execute Gradle 75 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS% 76 | 77 | :end 78 | @rem End local scope for the variables with windows NT shell 79 | if "%ERRORLEVEL%"=="0" goto mainEnd 80 | 81 | :fail 82 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 83 | rem the _cmd.exe /c_ return code! 84 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 85 | exit /b 1 86 | 87 | :mainEnd 88 | if "%OS%"=="Windows_NT" endlocal 89 | 90 | :omega 91 | -------------------------------------------------------------------------------- /FBNavigator/InteractionMixin.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015, Facebook, Inc. All rights reserved. 3 | * 4 | * Facebook, Inc. ("Facebook") owns all right, title and interest, including 5 | * all intellectual property and other proprietary rights, in and to the React 6 | * Native CustomComponents software (the "Software"). Subject to your 7 | * compliance with these terms, you are hereby granted a non-exclusive, 8 | * worldwide, royalty-free copyright license to (1) use and copy the Software; 9 | * and (2) reproduce and distribute the Software as part of your own software 10 | * ("Your Software"). Facebook reserves all rights not expressly granted to 11 | * you in this license agreement. 12 | * 13 | * THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "AS IS" AND ANY EXPRESS 14 | * OR IMPLIED WARRANTIES (INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES 15 | * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE) ARE DISCLAIMED. 16 | * IN NO EVENT SHALL FACEBOOK OR ITS AFFILIATES, OFFICERS, DIRECTORS OR 17 | * EMPLOYEES BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, 18 | * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, 19 | * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; 20 | * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, 21 | * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR 22 | * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THE SOFTWARE, EVEN IF 23 | * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 24 | * 25 | * @flow 26 | */ 27 | 'use strict'; 28 | 29 | import {InteractionManager} from 'react-native'; 30 | 31 | /** 32 | * This mixin provides safe versions of InteractionManager start/end methods 33 | * that ensures `clearInteractionHandle` is always called 34 | * once per start, even if the component is unmounted. 35 | */ 36 | var InteractionMixin = { 37 | componentWillUnmount: function() { 38 | while (this._interactionMixinHandles.length) { 39 | InteractionManager.clearInteractionHandle( 40 | this._interactionMixinHandles.pop() 41 | ); 42 | } 43 | }, 44 | 45 | _interactionMixinHandles: ([]: Array), 46 | 47 | createInteractionHandle: function() { 48 | var handle = InteractionManager.createInteractionHandle(); 49 | this._interactionMixinHandles.push(handle); 50 | return handle; 51 | }, 52 | 53 | clearInteractionHandle: function(clearHandle: number) { 54 | InteractionManager.clearInteractionHandle(clearHandle); 55 | this._interactionMixinHandles = this._interactionMixinHandles.filter( 56 | handle => handle !== clearHandle 57 | ); 58 | }, 59 | 60 | /** 61 | * Schedule work for after all interactions have completed. 62 | * 63 | * @param {function} callback 64 | */ 65 | runAfterInteractions: function(callback: Function) { 66 | InteractionManager.runAfterInteractions(callback); 67 | }, 68 | }; 69 | 70 | module.exports = InteractionMixin; 71 | -------------------------------------------------------------------------------- /example/android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | 12 | # If your project uses WebView with JS, uncomment the following 13 | # and specify the fully qualified class name to the JavaScript interface 14 | # class: 15 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 16 | # public *; 17 | #} 18 | 19 | # Disabling obfuscation is useful if you collect stack traces from production crashes 20 | # (unless you are using a system that supports de-obfuscate the stack traces). 21 | -dontobfuscate 22 | 23 | # React Native 24 | 25 | # Keep our interfaces so they can be used by other ProGuard rules. 26 | # See http://sourceforge.net/p/proguard/bugs/466/ 27 | -keep,allowobfuscation @interface com.facebook.proguard.annotations.DoNotStrip 28 | -keep,allowobfuscation @interface com.facebook.proguard.annotations.KeepGettersAndSetters 29 | -keep,allowobfuscation @interface com.facebook.common.internal.DoNotStrip 30 | 31 | # Do not strip any method/class that is annotated with @DoNotStrip 32 | -keep @com.facebook.proguard.annotations.DoNotStrip class * 33 | -keep @com.facebook.common.internal.DoNotStrip class * 34 | -keepclassmembers class * { 35 | @com.facebook.proguard.annotations.DoNotStrip *; 36 | @com.facebook.common.internal.DoNotStrip *; 37 | } 38 | 39 | -keepclassmembers @com.facebook.proguard.annotations.KeepGettersAndSetters class * { 40 | void set*(***); 41 | *** get*(); 42 | } 43 | 44 | -keep class * extends com.facebook.react.bridge.JavaScriptModule { *; } 45 | -keep class * extends com.facebook.react.bridge.NativeModule { *; } 46 | -keepclassmembers,includedescriptorclasses class * { native ; } 47 | -keepclassmembers class * { @com.facebook.react.uimanager.UIProp ; } 48 | -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactProp ; } 49 | -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactPropGroup ; } 50 | 51 | -dontwarn com.facebook.react.** 52 | 53 | # TextLayoutBuilder uses a non-public Android constructor within StaticLayout. 54 | # See libs/proxy/src/main/java/com/facebook/fbui/textlayoutbuilder/proxy for details. 55 | -dontwarn android.text.StaticLayout 56 | 57 | # okhttp 58 | 59 | -keepattributes Signature 60 | -keepattributes *Annotation* 61 | -keep class okhttp3.** { *; } 62 | -keep interface okhttp3.** { *; } 63 | -dontwarn okhttp3.** 64 | 65 | # okio 66 | 67 | -keep class sun.misc.Unsafe { *; } 68 | -dontwarn java.nio.file.* 69 | -dontwarn org.codehaus.mojo.animal_sniffer.IgnoreJRERequirement 70 | -dontwarn okio.** 71 | -------------------------------------------------------------------------------- /FBNavigator/EmitterSubscription.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015, Facebook, Inc. All rights reserved. 3 | * 4 | * Facebook, Inc. ("Facebook") owns all right, title and interest, including 5 | * all intellectual property and other proprietary rights, in and to the React 6 | * Native CustomComponents software (the "Software"). Subject to your 7 | * compliance with these terms, you are hereby granted a non-exclusive, 8 | * worldwide, royalty-free copyright license to (1) use and copy the Software; 9 | * and (2) reproduce and distribute the Software as part of your own software 10 | * ("Your Software"). Facebook reserves all rights not expressly granted to 11 | * you in this license agreement. 12 | * 13 | * THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "AS IS" AND ANY EXPRESS 14 | * OR IMPLIED WARRANTIES (INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES 15 | * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE) ARE DISCLAIMED. 16 | * IN NO EVENT SHALL FACEBOOK OR ITS AFFILIATES, OFFICERS, DIRECTORS OR 17 | * EMPLOYEES BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, 18 | * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, 19 | * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; 20 | * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, 21 | * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR 22 | * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THE SOFTWARE, EVEN IF 23 | * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 24 | * 25 | * @noflow 26 | */ 27 | 'use strict'; 28 | 29 | const EventSubscription = require('./EventSubscription'); 30 | 31 | import type EventEmitter from './EventEmitter'; 32 | import type EventSubscriptionVendor from './EventSubscriptionVendor'; 33 | 34 | /** 35 | * EmitterSubscription represents a subscription with listener and context data. 36 | */ 37 | class EmitterSubscription extends EventSubscription { 38 | 39 | emitter: EventEmitter; 40 | listener: Function; 41 | context: ?Object; 42 | 43 | /** 44 | * @param {EventEmitter} emitter - The event emitter that registered this 45 | * subscription 46 | * @param {EventSubscriptionVendor} subscriber - The subscriber that controls 47 | * this subscription 48 | * @param {function} listener - Function to invoke when the specified event is 49 | * emitted 50 | * @param {*} context - Optional context object to use when invoking the 51 | * listener 52 | */ 53 | constructor( 54 | emitter: EventEmitter, 55 | subscriber: EventSubscriptionVendor, 56 | listener: Function, 57 | context: ?Object 58 | ) { 59 | super(subscriber); 60 | this.emitter = emitter; 61 | this.listener = listener; 62 | this.context = context; 63 | } 64 | 65 | /** 66 | * Removes this subscription from the emitter that registered it. 67 | * Note: we're overriding the `remove()` method of EventSubscription here 68 | * but deliberately not calling `super.remove()` as the responsibility 69 | * for removing the subscription lies with the EventEmitter. 70 | */ 71 | remove() { 72 | this.emitter.removeSubscription(this); 73 | } 74 | } 75 | 76 | module.exports = EmitterSubscription; 77 | -------------------------------------------------------------------------------- /FBNavigator/Subscribable.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015, Facebook, Inc. All rights reserved. 3 | * 4 | * Facebook, Inc. ("Facebook") owns all right, title and interest, including 5 | * all intellectual property and other proprietary rights, in and to the React 6 | * Native CustomComponents software (the "Software"). Subject to your 7 | * compliance with these terms, you are hereby granted a non-exclusive, 8 | * worldwide, royalty-free copyright license to (1) use and copy the Software; 9 | * and (2) reproduce and distribute the Software as part of your own software 10 | * ("Your Software"). Facebook reserves all rights not expressly granted to 11 | * you in this license agreement. 12 | * 13 | * THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "AS IS" AND ANY EXPRESS 14 | * OR IMPLIED WARRANTIES (INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES 15 | * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE) ARE DISCLAIMED. 16 | * IN NO EVENT SHALL FACEBOOK OR ITS AFFILIATES, OFFICERS, DIRECTORS OR 17 | * EMPLOYEES BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, 18 | * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, 19 | * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; 20 | * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, 21 | * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR 22 | * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THE SOFTWARE, EVEN IF 23 | * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 24 | * 25 | * @flow 26 | */ 27 | 'use strict'; 28 | 29 | import type EventEmitter from './EventEmitter'; 30 | 31 | /** 32 | * Subscribable provides a mixin for safely subscribing a component to an 33 | * eventEmitter 34 | * 35 | * This will be replaced with the observe interface that will be coming soon to 36 | * React Core 37 | */ 38 | 39 | var Subscribable = {}; 40 | 41 | Subscribable.Mixin = { 42 | 43 | componentWillMount: function() { 44 | this._subscribableSubscriptions = []; 45 | }, 46 | 47 | componentWillUnmount: function() { 48 | this._subscribableSubscriptions.forEach( 49 | (subscription) => subscription.remove() 50 | ); 51 | this._subscribableSubscriptions = null; 52 | }, 53 | 54 | /** 55 | * Special form of calling `addListener` that *guarantees* that a 56 | * subscription *must* be tied to a component instance, and therefore will 57 | * be cleaned up when the component is unmounted. It is impossible to create 58 | * the subscription and pass it in - this method must be the one to create 59 | * the subscription and therefore can guarantee it is retained in a way that 60 | * will be cleaned up. 61 | * 62 | * @param {EventEmitter} eventEmitter emitter to subscribe to. 63 | * @param {string} eventType Type of event to listen to. 64 | * @param {function} listener Function to invoke when event occurs. 65 | * @param {object} context Object to use as listener context. 66 | */ 67 | addListenerOn: function( 68 | eventEmitter: EventEmitter, 69 | eventType: string, 70 | listener: Function, 71 | context: Object 72 | ) { 73 | this._subscribableSubscriptions.push( 74 | eventEmitter.addListener(eventType, listener, context) 75 | ); 76 | } 77 | }; 78 | 79 | module.exports = Subscribable; 80 | -------------------------------------------------------------------------------- /FBNavigator/NavigationTreeNode.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015, Facebook, Inc. All rights reserved. 3 | * 4 | * Facebook, Inc. ("Facebook") owns all right, title and interest, including 5 | * all intellectual property and other proprietary rights, in and to the React 6 | * Native CustomComponents software (the "Software"). Subject to your 7 | * compliance with these terms, you are hereby granted a non-exclusive, 8 | * worldwide, royalty-free copyright license to (1) use and copy the Software; 9 | * and (2) reproduce and distribute the Software as part of your own software 10 | * ("Your Software"). Facebook reserves all rights not expressly granted to 11 | * you in this license agreement. 12 | * 13 | * THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "AS IS" AND ANY EXPRESS 14 | * OR IMPLIED WARRANTIES (INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES 15 | * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE) ARE DISCLAIMED. 16 | * IN NO EVENT SHALL FACEBOOK OR ITS AFFILIATES, OFFICERS, DIRECTORS OR 17 | * EMPLOYEES BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, 18 | * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, 19 | * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; 20 | * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, 21 | * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR 22 | * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THE SOFTWARE, EVEN IF 23 | * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 24 | * 25 | * @flow 26 | */ 27 | 'use strict'; 28 | 29 | var invariant = require('fbjs/lib/invariant'); 30 | var immutable = require('immutable'); 31 | 32 | var {List} = immutable; 33 | 34 | /** 35 | * Utility to build a tree of nodes. 36 | * Note that this tree does not perform cyclic redundancy check 37 | * while appending child node. 38 | */ 39 | class NavigationTreeNode { 40 | __parent: ?NavigationTreeNode; 41 | 42 | _children: List; 43 | 44 | _value: any; 45 | 46 | constructor(value: any) { 47 | this.__parent = null; 48 | this._children = new List(); 49 | this._value = value; 50 | } 51 | 52 | getValue(): any { 53 | return this._value; 54 | } 55 | 56 | getParent(): ?NavigationTreeNode { 57 | return this.__parent; 58 | } 59 | 60 | getChildrenCount(): number { 61 | return this._children.size; 62 | } 63 | 64 | getChildAt(index: number): ?NavigationTreeNode { 65 | return index > -1 && index < this._children.size ? 66 | this._children.get(index) : 67 | null; 68 | } 69 | 70 | appendChild(child: NavigationTreeNode): void { 71 | if (child.__parent) { 72 | child.__parent.removeChild(child); 73 | } 74 | child.__parent = this; 75 | this._children = this._children.push(child); 76 | } 77 | 78 | removeChild(child: NavigationTreeNode): void { 79 | var index = this._children.indexOf(child); 80 | 81 | invariant( 82 | index > -1, 83 | 'The node to be removed is not a child of this node.' 84 | ); 85 | 86 | child.__parent = null; 87 | 88 | this._children = this._children.splice(index, 1); 89 | } 90 | 91 | indexOf(child: NavigationTreeNode): number { 92 | return this._children.indexOf(child); 93 | } 94 | 95 | forEach(callback: Function, context: any): void { 96 | this._children.forEach(callback, context); 97 | } 98 | 99 | map(callback: Function, context: any): Array { 100 | return this._children.map(callback, context).toJS(); 101 | } 102 | 103 | some(callback: Function, context: any): boolean { 104 | return this._children.some(callback, context); 105 | } 106 | } 107 | 108 | 109 | module.exports = NavigationTreeNode; 110 | -------------------------------------------------------------------------------- /FBNavigator/NavigationEventEmitter.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015, Facebook, Inc. All rights reserved. 3 | * 4 | * Facebook, Inc. ("Facebook") owns all right, title and interest, including 5 | * all intellectual property and other proprietary rights, in and to the React 6 | * Native CustomComponents software (the "Software"). Subject to your 7 | * compliance with these terms, you are hereby granted a non-exclusive, 8 | * worldwide, royalty-free copyright license to (1) use and copy the Software; 9 | * and (2) reproduce and distribute the Software as part of your own software 10 | * ("Your Software"). Facebook reserves all rights not expressly granted to 11 | * you in this license agreement. 12 | * 13 | * THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "AS IS" AND ANY EXPRESS 14 | * OR IMPLIED WARRANTIES (INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES 15 | * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE) ARE DISCLAIMED. 16 | * IN NO EVENT SHALL FACEBOOK OR ITS AFFILIATES, OFFICERS, DIRECTORS OR 17 | * EMPLOYEES BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, 18 | * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, 19 | * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; 20 | * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, 21 | * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR 22 | * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THE SOFTWARE, EVEN IF 23 | * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 24 | * 25 | * @flow 26 | */ 27 | 'use strict'; 28 | 29 | var EventEmitter = require('./EventEmitter'); 30 | var NavigationEvent = require('./NavigationEvent'); 31 | 32 | type ExtraInfo = { 33 | defaultPrevented: ?boolean, 34 | eventPhase: ?number, 35 | propagationStopped: ?boolean, 36 | target: ?Object, 37 | }; 38 | 39 | class NavigationEventEmitter extends EventEmitter { 40 | _emitQueue: Array; 41 | _emitting: boolean; 42 | _target: Object; 43 | 44 | constructor(target: Object) { 45 | super(); 46 | this._emitting = false; 47 | this._emitQueue = []; 48 | this._target = target; 49 | } 50 | 51 | emit( 52 | eventType: string, 53 | data: any, 54 | didEmitCallback: ?Function, 55 | extraInfo: ?ExtraInfo 56 | ): void { 57 | if (this._emitting) { 58 | // An event cycle that was previously created hasn't finished yet. 59 | // Put this event cycle into the queue and will finish them later. 60 | var args: any = Array.prototype.slice.call(arguments); 61 | this._emitQueue.push(args); 62 | return; 63 | } 64 | 65 | this._emitting = true; 66 | 67 | var event = NavigationEvent.pool(eventType, this._target, data); 68 | 69 | if (extraInfo) { 70 | if (extraInfo.target) { 71 | event.target = extraInfo.target; 72 | } 73 | 74 | if (extraInfo.eventPhase) { 75 | event.eventPhase = extraInfo.eventPhase; 76 | } 77 | 78 | if (extraInfo.defaultPrevented) { 79 | event.preventDefault(); 80 | } 81 | 82 | if (extraInfo.propagationStopped) { 83 | event.stopPropagation(); 84 | } 85 | } 86 | 87 | // EventEmitter#emit only takes `eventType` as `String`. Casting `eventType` 88 | // to `String` to make @flow happy. 89 | super.emit(String(eventType), event); 90 | 91 | if (typeof didEmitCallback === 'function') { 92 | didEmitCallback.call(this._target, event); 93 | } 94 | event.dispose(); 95 | 96 | this._emitting = false; 97 | 98 | while (this._emitQueue.length) { 99 | var args: any = this._emitQueue.shift(); 100 | this.emit.apply(this, args); 101 | } 102 | } 103 | } 104 | 105 | module.exports = NavigationEventEmitter; 106 | -------------------------------------------------------------------------------- /example/ios/YANavigatorExample/Base.lproj/LaunchScreen.xib: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 21 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /FBNavigator/EventSubscriptionVendor.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015, Facebook, Inc. All rights reserved. 3 | * 4 | * Facebook, Inc. ("Facebook") owns all right, title and interest, including 5 | * all intellectual property and other proprietary rights, in and to the React 6 | * Native CustomComponents software (the "Software"). Subject to your 7 | * compliance with these terms, you are hereby granted a non-exclusive, 8 | * worldwide, royalty-free copyright license to (1) use and copy the Software; 9 | * and (2) reproduce and distribute the Software as part of your own software 10 | * ("Your Software"). Facebook reserves all rights not expressly granted to 11 | * you in this license agreement. 12 | * 13 | * THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "AS IS" AND ANY EXPRESS 14 | * OR IMPLIED WARRANTIES (INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES 15 | * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE) ARE DISCLAIMED. 16 | * IN NO EVENT SHALL FACEBOOK OR ITS AFFILIATES, OFFICERS, DIRECTORS OR 17 | * EMPLOYEES BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, 18 | * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, 19 | * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; 20 | * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, 21 | * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR 22 | * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THE SOFTWARE, EVEN IF 23 | * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 24 | * 25 | * @flow 26 | */ 27 | 'use strict'; 28 | 29 | const invariant = require('fbjs/lib/invariant'); 30 | 31 | import type EventSubscription from './EventSubscription'; 32 | 33 | /** 34 | * EventSubscriptionVendor stores a set of EventSubscriptions that are 35 | * subscribed to a particular event type. 36 | */ 37 | class EventSubscriptionVendor { 38 | 39 | _subscriptionsForType: Object; 40 | _currentSubscription: ?EventSubscription; 41 | 42 | constructor() { 43 | this._subscriptionsForType = {}; 44 | this._currentSubscription = null; 45 | } 46 | 47 | /** 48 | * Adds a subscription keyed by an event type. 49 | * 50 | * @param {string} eventType 51 | * @param {EventSubscription} subscription 52 | */ 53 | addSubscription( 54 | eventType: string, subscription: EventSubscription): EventSubscription { 55 | invariant( 56 | subscription.subscriber === this, 57 | 'The subscriber of the subscription is incorrectly set.'); 58 | if (!this._subscriptionsForType[eventType]) { 59 | this._subscriptionsForType[eventType] = []; 60 | } 61 | const key = this._subscriptionsForType[eventType].length; 62 | this._subscriptionsForType[eventType].push(subscription); 63 | subscription.eventType = eventType; 64 | subscription.key = key; 65 | return subscription; 66 | } 67 | 68 | /** 69 | * Removes a bulk set of the subscriptions. 70 | * 71 | * @param {?string} eventType - Optional name of the event type whose 72 | * registered supscriptions to remove, if null remove all subscriptions. 73 | */ 74 | removeAllSubscriptions(eventType: ?string) { 75 | if (eventType === undefined) { 76 | this._subscriptionsForType = {}; 77 | } else { 78 | delete this._subscriptionsForType[eventType]; 79 | } 80 | } 81 | 82 | /** 83 | * Removes a specific subscription. Instead of calling this function, call 84 | * `subscription.remove()` directly. 85 | * 86 | * @param {object} subscription 87 | */ 88 | removeSubscription(subscription: Object) { 89 | const eventType = subscription.eventType; 90 | const key = subscription.key; 91 | 92 | const subscriptionsForType = this._subscriptionsForType[eventType]; 93 | if (subscriptionsForType) { 94 | delete subscriptionsForType[key]; 95 | } 96 | } 97 | 98 | /** 99 | * Returns the array of subscriptions that are currently registered for the 100 | * given event type. 101 | * 102 | * Note: This array can be potentially sparse as subscriptions are deleted 103 | * from it when they are removed. 104 | * 105 | * TODO: This returns a nullable array. wat? 106 | * 107 | * @param {string} eventType 108 | * @returns {?array} 109 | */ 110 | getSubscriptionsForType(eventType: string): ?[EventSubscription] { 111 | return this._subscriptionsForType[eventType]; 112 | } 113 | } 114 | 115 | module.exports = EventSubscriptionVendor; 116 | -------------------------------------------------------------------------------- /example/android/app/react.gradle: -------------------------------------------------------------------------------- 1 | import org.apache.tools.ant.taskdefs.condition.Os 2 | 3 | def config = project.hasProperty("react") ? project.react : []; 4 | 5 | def bundleAssetName = config.bundleAssetName ?: "index.android.bundle" 6 | def entryFile = config.entryFile ?: "index.android.js" 7 | 8 | // because elvis operator 9 | def elvisFile(thing) { 10 | return thing ? file(thing) : null; 11 | } 12 | 13 | def reactRoot = elvisFile(config.root) ?: file("../../") 14 | def inputExcludes = config.inputExcludes ?: ["android/**", "ios/**"] 15 | 16 | void runBefore(String dependentTaskName, Task task) { 17 | Task dependentTask = tasks.findByPath(dependentTaskName); 18 | if (dependentTask != null) { 19 | dependentTask.dependsOn task 20 | } 21 | } 22 | 23 | gradle.projectsEvaluated { 24 | // Grab all build types and product flavors 25 | def buildTypes = android.buildTypes.collect { type -> type.name } 26 | def productFlavors = android.productFlavors.collect { flavor -> flavor.name } 27 | 28 | // When no product flavors defined, use empty 29 | if (!productFlavors) productFlavors.add('') 30 | 31 | productFlavors.each { productFlavorName -> 32 | buildTypes.each { buildTypeName -> 33 | // Create variant and target names 34 | def targetName = "${productFlavorName.capitalize()}${buildTypeName.capitalize()}" 35 | def targetPath = productFlavorName ? 36 | "${productFlavorName}/${buildTypeName}" : 37 | "${buildTypeName}" 38 | 39 | // React js bundle directories 40 | def jsBundleDirConfigName = "jsBundleDir${targetName}" 41 | def jsBundleDir = elvisFile(config."$jsBundleDirConfigName") ?: 42 | file("$buildDir/intermediates/assets/${targetPath}") 43 | 44 | def resourcesDirConfigName = "resourcesDir${targetName}" 45 | def resourcesDir = elvisFile(config."${resourcesDirConfigName}") ?: 46 | file("$buildDir/intermediates/res/merged/${targetPath}") 47 | def jsBundleFile = file("$jsBundleDir/$bundleAssetName") 48 | 49 | // Bundle task name for variant 50 | def bundleJsAndAssetsTaskName = "bundle${targetName}JsAndAssets" 51 | 52 | def currentBundleTask = tasks.create( 53 | name: bundleJsAndAssetsTaskName, 54 | type: Exec) { 55 | group = "react" 56 | description = "bundle JS and assets for ${targetName}." 57 | 58 | // Create dirs if they are not there (e.g. the "clean" task just ran) 59 | doFirst { 60 | jsBundleDir.mkdirs() 61 | resourcesDir.mkdirs() 62 | } 63 | 64 | // Set up inputs and outputs so gradle can cache the result 65 | inputs.files fileTree(dir: reactRoot, excludes: inputExcludes) 66 | outputs.dir jsBundleDir 67 | outputs.dir resourcesDir 68 | 69 | // Set up the call to the react-native cli 70 | workingDir reactRoot 71 | 72 | // Set up dev mode 73 | def devEnabled = !targetName.toLowerCase().contains("release") 74 | if (Os.isFamily(Os.FAMILY_WINDOWS)) { 75 | commandLine "cmd", "/c", "node", "node_modules/react-native/local-cli/cli.js", "bundle", "--platform", "android", "--dev", "${devEnabled}", 76 | "--entry-file", entryFile, "--bundle-output", jsBundleFile, "--assets-dest", resourcesDir 77 | } else { 78 | commandLine "node", "node_modules/react-native/local-cli/cli.js", "bundle", "--platform", "android", "--dev", "${devEnabled}", 79 | "--entry-file", entryFile, "--bundle-output", jsBundleFile, "--assets-dest", resourcesDir 80 | } 81 | 82 | enabled config."bundleIn${targetName}" || 83 | config."bundleIn${buildTypeName.capitalize()}" ?: 84 | targetName.toLowerCase().contains("release") 85 | } 86 | 87 | // Hook bundle${productFlavor}${buildType}JsAndAssets into the android build process 88 | currentBundleTask.dependsOn("merge${targetName}Resources") 89 | currentBundleTask.dependsOn("merge${targetName}Assets") 90 | 91 | runBefore("processArmeabi-v7a${targetName}Resources", currentBundleTask) 92 | runBefore("processX86${targetName}Resources", currentBundleTask) 93 | runBefore("processUniversal${targetName}Resources", currentBundleTask) 94 | runBefore("process${targetName}Resources", currentBundleTask) 95 | } 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /Scene.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { View, ViewPropTypes } from 'react-native'; 4 | import FBNavigator from './FBNavigator'; 5 | import { isIphoneX } from './utils'; 6 | 7 | export default class Scene extends React.Component { 8 | componentDidMount() { 9 | const { delegate } = this.props; 10 | 11 | if (delegate) { 12 | const navigationDelegate = delegate.constructor.navigationDelegate; 13 | 14 | if (navigationDelegate && navigationDelegate.id) { 15 | const navigationDelegateCopy = Object.assign({}, 16 | delegate.constructor.navigationDelegate); 17 | 18 | const navigationEvents = ['onSceneWillFocus', 'onSceneDidFocus']; 19 | 20 | navigationEvents.forEach((eventName) => 21 | this._addListener(eventName, delegate)); 22 | 23 | if (delegate.onSceneWillFocus) { 24 | delegate.onSceneWillFocus(); 25 | } 26 | 27 | setTimeout(() => { 28 | const events = delegate.constructor.navigationDelegate._events; 29 | navigationDelegateCopy._events = events; 30 | 31 | if (events && events.length) { 32 | this._events = events.slice(); 33 | 34 | this._events.forEach((eventName) => { 35 | this._addListener(eventName, delegate); 36 | }); 37 | } 38 | }, 300); 39 | 40 | const delegateUnmountHandler = delegate.componentWillUnmount; 41 | 42 | Object.defineProperty(delegate, 'componentWillUnmount', { 43 | writable: false, 44 | configurable: true, 45 | enumerable: false, 46 | value: () => { 47 | delegateUnmountHandler && delegateUnmountHandler.bind(delegate)(); 48 | 49 | navigationEvents.forEach((eventName) => 50 | this._removeListener(eventName, delegate)); 51 | 52 | const events = this._events; 53 | 54 | if (events && events.length) { 55 | events.forEach((eventName) => this._removeListener(eventName)); 56 | } 57 | 58 | this._events = null; 59 | 60 | // restore prev state here because we might change it 61 | Object.keys(navigationDelegateCopy).forEach((key) => { 62 | if (navigationDelegate[key]) { 63 | navigationDelegate[key] = navigationDelegateCopy[key]; 64 | } else { 65 | delete navigationDelegate[key]; 66 | } 67 | }); 68 | }, 69 | }); 70 | } 71 | } 72 | } 73 | 74 | componentDidUpdate() { 75 | const { delegate } = this.props; 76 | 77 | if (delegate) { 78 | const navigationDelegate = delegate.constructor.navigationDelegate; 79 | const events = navigationDelegate._events; 80 | 81 | setTimeout(() => { 82 | if (events && events.length) { 83 | events.forEach((eventName) => { 84 | if (!this[`_${eventName}Sub`]) { 85 | this._addListener(eventName, delegate); 86 | } 87 | }); 88 | } 89 | }, 300); 90 | } 91 | } 92 | 93 | _addListener = (eventName, delegate) => { 94 | const navigationContext = delegate.props.navigator.navigationContext; 95 | const delegateId = delegate.constructor.navigationDelegate.id; 96 | 97 | const formatEventName = (eventName) => { 98 | if (eventName === 'onSceneWillFocus') { 99 | return 'willfocus'; 100 | } else if (eventName === 'onSceneDidFocus') { 101 | return 'didfocus'; 102 | } 103 | 104 | return eventName; 105 | }; 106 | 107 | this[`_${eventName}Sub`] = navigationContext.addListener( 108 | formatEventName(eventName), 109 | ({ data: { route, e } }) => { 110 | if (route.component.navigationDelegate && 111 | delegateId === route.component.navigationDelegate.id && 112 | delegate[eventName]) { 113 | delegate[eventName](e); 114 | } 115 | }, 116 | ); 117 | } 118 | 119 | _removeListener = (eventName) => { 120 | this[`_${eventName}Sub`].remove(); 121 | delete this[`_${eventName}Sub`]; 122 | } 123 | 124 | render() { 125 | return ( 126 | 137 | {this.props.children} 138 | 139 | ); 140 | } 141 | 142 | static propTypes = { 143 | style: ViewPropTypes.style, 144 | paddingTop: PropTypes.bool, 145 | delegate: (props, propName) => { 146 | if (props[propName] && !(props[propName] instanceof React.Component)) { 147 | return new Error('Scene delegate should be instance of React.Component'); 148 | } 149 | }, 150 | }; 151 | 152 | static defaultProps = { 153 | paddingTop: true, 154 | }; 155 | 156 | static navBarHeight = FBNavigator.NavigationBar.Styles.General.TotalNavHeight + 157 | (isIphoneX() ? 24 : 0); 158 | } 159 | -------------------------------------------------------------------------------- /FBNavigator/mergeHelpers.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015, Facebook, Inc. All rights reserved. 3 | * 4 | * Facebook, Inc. ("Facebook") owns all right, title and interest, including 5 | * all intellectual property and other proprietary rights, in and to the React 6 | * Native CustomComponents software (the "Software"). Subject to your 7 | * compliance with these terms, you are hereby granted a non-exclusive, 8 | * worldwide, royalty-free copyright license to (1) use and copy the Software; 9 | * and (2) reproduce and distribute the Software as part of your own software 10 | * ("Your Software"). Facebook reserves all rights not expressly granted to 11 | * you in this license agreement. 12 | * 13 | * THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "AS IS" AND ANY EXPRESS 14 | * OR IMPLIED WARRANTIES (INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES 15 | * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE) ARE DISCLAIMED. 16 | * IN NO EVENT SHALL FACEBOOK OR ITS AFFILIATES, OFFICERS, DIRECTORS OR 17 | * EMPLOYEES BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, 18 | * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, 19 | * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; 20 | * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, 21 | * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR 22 | * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THE SOFTWARE, EVEN IF 23 | * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 24 | * 25 | * requiresPolyfills: Array.isArray 26 | */ 27 | 28 | "use strict"; 29 | 30 | var invariant = require('fbjs/lib/invariant'); 31 | var keyMirror = require('fbjs/lib/keyMirror'); 32 | 33 | /** 34 | * Maximum number of levels to traverse. Will catch circular structures. 35 | * @const 36 | */ 37 | var MAX_MERGE_DEPTH = 36; 38 | 39 | /** 40 | * We won't worry about edge cases like new String('x') or new Boolean(true). 41 | * Functions are considered terminals, and arrays are not. 42 | * @param {*} o The item/object/value to test. 43 | * @return {boolean} true iff the argument is a terminal. 44 | */ 45 | var isTerminal = function(o) { 46 | return typeof o !== 'object' || o === null; 47 | }; 48 | 49 | var mergeHelpers = { 50 | 51 | MAX_MERGE_DEPTH: MAX_MERGE_DEPTH, 52 | 53 | isTerminal: isTerminal, 54 | 55 | /** 56 | * Converts null/undefined values into empty object. 57 | * 58 | * @param {?Object=} arg Argument to be normalized (nullable optional) 59 | * @return {!Object} 60 | */ 61 | normalizeMergeArg: function(arg) { 62 | return arg === undefined || arg === null ? {} : arg; 63 | }, 64 | 65 | /** 66 | * If merging Arrays, a merge strategy *must* be supplied. If not, it is 67 | * likely the caller's fault. If this function is ever called with anything 68 | * but `one` and `two` being `Array`s, it is the fault of the merge utilities. 69 | * 70 | * @param {*} one Array to merge into. 71 | * @param {*} two Array to merge from. 72 | */ 73 | checkMergeArrayArgs: function(one, two) { 74 | invariant( 75 | Array.isArray(one) && Array.isArray(two), 76 | 'Tried to merge arrays, instead got %s and %s.', 77 | one, 78 | two 79 | ); 80 | }, 81 | 82 | /** 83 | * @param {*} one Object to merge into. 84 | * @param {*} two Object to merge from. 85 | */ 86 | checkMergeObjectArgs: function(one, two) { 87 | mergeHelpers.checkMergeObjectArg(one); 88 | mergeHelpers.checkMergeObjectArg(two); 89 | }, 90 | 91 | /** 92 | * @param {*} arg 93 | */ 94 | checkMergeObjectArg: function(arg) { 95 | invariant( 96 | !isTerminal(arg) && !Array.isArray(arg), 97 | 'Tried to merge an object, instead got %s.', 98 | arg 99 | ); 100 | }, 101 | 102 | /** 103 | * @param {*} arg 104 | */ 105 | checkMergeIntoObjectArg: function(arg) { 106 | invariant( 107 | (!isTerminal(arg) || typeof arg === 'function') && !Array.isArray(arg), 108 | 'Tried to merge into an object, instead got %s.', 109 | arg 110 | ); 111 | }, 112 | 113 | /** 114 | * Checks that a merge was not given a circular object or an object that had 115 | * too great of depth. 116 | * 117 | * @param {number} Level of recursion to validate against maximum. 118 | */ 119 | checkMergeLevel: function(level) { 120 | invariant( 121 | level < MAX_MERGE_DEPTH, 122 | 'Maximum deep merge depth exceeded. You may be attempting to merge ' + 123 | 'circular structures in an unsupported way.' 124 | ); 125 | }, 126 | 127 | /** 128 | * Checks that the supplied merge strategy is valid. 129 | * 130 | * @param {string} Array merge strategy. 131 | */ 132 | checkArrayStrategy: function(strategy) { 133 | invariant( 134 | strategy === undefined || strategy in mergeHelpers.ArrayStrategies, 135 | 'You must provide an array strategy to deep merge functions to ' + 136 | 'instruct the deep merge how to resolve merging two arrays.' 137 | ); 138 | }, 139 | 140 | /** 141 | * Set of possible behaviors of merge algorithms when encountering two Arrays 142 | * that must be merged together. 143 | * - `clobber`: The left `Array` is ignored. 144 | * - `indexByIndex`: The result is achieved by recursively deep merging at 145 | * each index. (not yet supported.) 146 | */ 147 | ArrayStrategies: keyMirror({ 148 | Clobber: true, 149 | IndexByIndex: true 150 | }) 151 | 152 | }; 153 | 154 | module.exports = mergeHelpers; 155 | -------------------------------------------------------------------------------- /example/ios/YANavigatorExample.xcodeproj/xcshareddata/xcschemes/YANavigatorExample.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 29 | 35 | 36 | 37 | 43 | 49 | 50 | 51 | 52 | 53 | 59 | 60 | 62 | 68 | 69 | 70 | 71 | 72 | 78 | 79 | 80 | 81 | 82 | 83 | 94 | 96 | 102 | 103 | 104 | 105 | 106 | 107 | 113 | 115 | 121 | 122 | 123 | 124 | 126 | 127 | 130 | 131 | 132 | -------------------------------------------------------------------------------- /example/android/gradlew: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | ############################################################################## 4 | ## 5 | ## Gradle start up script for UN*X 6 | ## 7 | ############################################################################## 8 | 9 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 10 | DEFAULT_JVM_OPTS="" 11 | 12 | APP_NAME="Gradle" 13 | APP_BASE_NAME=`basename "$0"` 14 | 15 | # Use the maximum available, or set MAX_FD != -1 to use that value. 16 | MAX_FD="maximum" 17 | 18 | warn ( ) { 19 | echo "$*" 20 | } 21 | 22 | die ( ) { 23 | echo 24 | echo "$*" 25 | echo 26 | exit 1 27 | } 28 | 29 | # OS specific support (must be 'true' or 'false'). 30 | cygwin=false 31 | msys=false 32 | darwin=false 33 | case "`uname`" in 34 | CYGWIN* ) 35 | cygwin=true 36 | ;; 37 | Darwin* ) 38 | darwin=true 39 | ;; 40 | MINGW* ) 41 | msys=true 42 | ;; 43 | esac 44 | 45 | # For Cygwin, ensure paths are in UNIX format before anything is touched. 46 | if $cygwin ; then 47 | [ -n "$JAVA_HOME" ] && JAVA_HOME=`cygpath --unix "$JAVA_HOME"` 48 | fi 49 | 50 | # Attempt to set APP_HOME 51 | # Resolve links: $0 may be a link 52 | PRG="$0" 53 | # Need this for relative symlinks. 54 | while [ -h "$PRG" ] ; do 55 | ls=`ls -ld "$PRG"` 56 | link=`expr "$ls" : '.*-> \(.*\)$'` 57 | if expr "$link" : '/.*' > /dev/null; then 58 | PRG="$link" 59 | else 60 | PRG=`dirname "$PRG"`"/$link" 61 | fi 62 | done 63 | SAVED="`pwd`" 64 | cd "`dirname \"$PRG\"`/" >&- 65 | APP_HOME="`pwd -P`" 66 | cd "$SAVED" >&- 67 | 68 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 69 | 70 | # Determine the Java command to use to start the JVM. 71 | if [ -n "$JAVA_HOME" ] ; then 72 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 73 | # IBM's JDK on AIX uses strange locations for the executables 74 | JAVACMD="$JAVA_HOME/jre/sh/java" 75 | else 76 | JAVACMD="$JAVA_HOME/bin/java" 77 | fi 78 | if [ ! -x "$JAVACMD" ] ; then 79 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 80 | 81 | Please set the JAVA_HOME variable in your environment to match the 82 | location of your Java installation." 83 | fi 84 | else 85 | JAVACMD="java" 86 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 87 | 88 | Please set the JAVA_HOME variable in your environment to match the 89 | location of your Java installation." 90 | fi 91 | 92 | # Increase the maximum file descriptors if we can. 93 | if [ "$cygwin" = "false" -a "$darwin" = "false" ] ; then 94 | MAX_FD_LIMIT=`ulimit -H -n` 95 | if [ $? -eq 0 ] ; then 96 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then 97 | MAX_FD="$MAX_FD_LIMIT" 98 | fi 99 | ulimit -n $MAX_FD 100 | if [ $? -ne 0 ] ; then 101 | warn "Could not set maximum file descriptor limit: $MAX_FD" 102 | fi 103 | else 104 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" 105 | fi 106 | fi 107 | 108 | # For Darwin, add options to specify how the application appears in the dock 109 | if $darwin; then 110 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" 111 | fi 112 | 113 | # For Cygwin, switch paths to Windows format before running java 114 | if $cygwin ; then 115 | APP_HOME=`cygpath --path --mixed "$APP_HOME"` 116 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` 117 | 118 | # We build the pattern for arguments to be converted via cygpath 119 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` 120 | SEP="" 121 | for dir in $ROOTDIRSRAW ; do 122 | ROOTDIRS="$ROOTDIRS$SEP$dir" 123 | SEP="|" 124 | done 125 | OURCYGPATTERN="(^($ROOTDIRS))" 126 | # Add a user-defined pattern to the cygpath arguments 127 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then 128 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" 129 | fi 130 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 131 | i=0 132 | for arg in "$@" ; do 133 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` 134 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option 135 | 136 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition 137 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` 138 | else 139 | eval `echo args$i`="\"$arg\"" 140 | fi 141 | i=$((i+1)) 142 | done 143 | case $i in 144 | (0) set -- ;; 145 | (1) set -- "$args0" ;; 146 | (2) set -- "$args0" "$args1" ;; 147 | (3) set -- "$args0" "$args1" "$args2" ;; 148 | (4) set -- "$args0" "$args1" "$args2" "$args3" ;; 149 | (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; 150 | (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; 151 | (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; 152 | (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; 153 | (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; 154 | esac 155 | fi 156 | 157 | # Split up the JVM_OPTS And GRADLE_OPTS values into an array, following the shell quoting and substitution rules 158 | function splitJvmOpts() { 159 | JVM_OPTS=("$@") 160 | } 161 | eval splitJvmOpts $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS 162 | JVM_OPTS[${#JVM_OPTS[*]}]="-Dorg.gradle.appname=$APP_BASE_NAME" 163 | 164 | exec "$JAVACMD" "${JVM_OPTS[@]}" -classpath "$CLASSPATH" org.gradle.wrapper.GradleWrapperMain "$@" 165 | -------------------------------------------------------------------------------- /example/ios/YANavigatorExample.xcodeproj/xcshareddata/xcschemes/YANavigatorExample-tvOS.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 29 | 35 | 36 | 37 | 43 | 49 | 50 | 51 | 52 | 53 | 59 | 60 | 62 | 68 | 69 | 70 | 71 | 72 | 78 | 79 | 80 | 81 | 82 | 83 | 94 | 96 | 102 | 103 | 104 | 105 | 106 | 107 | 113 | 115 | 121 | 122 | 123 | 124 | 126 | 127 | 130 | 131 | 132 | -------------------------------------------------------------------------------- /FBNavigator/NavigatorNavigationBarStylesAndroid.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015, Facebook, Inc. All rights reserved. 3 | * 4 | * Facebook, Inc. ("Facebook") owns all right, title and interest, including 5 | * all intellectual property and other proprietary rights, in and to the React 6 | * Native CustomComponents software (the "Software"). Subject to your 7 | * compliance with these terms, you are hereby granted a non-exclusive, 8 | * worldwide, royalty-free copyright license to (1) use and copy the Software; 9 | * and (2) reproduce and distribute the Software as part of your own software 10 | * ("Your Software"). Facebook reserves all rights not expressly granted to 11 | * you in this license agreement. 12 | * 13 | * THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "AS IS" AND ANY EXPRESS 14 | * OR IMPLIED WARRANTIES (INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES 15 | * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE) ARE DISCLAIMED. 16 | * IN NO EVENT SHALL FACEBOOK OR ITS AFFILIATES, OFFICERS, DIRECTORS OR 17 | * EMPLOYEES BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, 18 | * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, 19 | * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; 20 | * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, 21 | * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR 22 | * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THE SOFTWARE, EVEN IF 23 | * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 24 | * 25 | */ 26 | 'use strict'; 27 | 28 | var buildStyleInterpolator = require('./buildStyleInterpolator'); 29 | var merge = require('./merge'); 30 | 31 | // Android Material Design 32 | var NAV_BAR_HEIGHT = 56; 33 | var TITLE_LEFT = 72; 34 | var BUTTON_SIZE = 24; 35 | var TOUCH_TARGT_SIZE = 48; 36 | var BUTTON_HORIZONTAL_MARGIN = 16; 37 | 38 | var BUTTON_EFFECTIVE_MARGIN = BUTTON_HORIZONTAL_MARGIN - (TOUCH_TARGT_SIZE - BUTTON_SIZE) / 2; 39 | var NAV_ELEMENT_HEIGHT = NAV_BAR_HEIGHT; 40 | 41 | var BASE_STYLES = { 42 | Title: { 43 | position: 'absolute', 44 | bottom: 0, 45 | left: 0, 46 | right: 0, 47 | alignItems: 'flex-start', 48 | height: NAV_ELEMENT_HEIGHT, 49 | backgroundColor: 'transparent', 50 | marginLeft: TITLE_LEFT, 51 | }, 52 | LeftButton: { 53 | position: 'absolute', 54 | top: 0, 55 | left: BUTTON_EFFECTIVE_MARGIN, 56 | overflow: 'hidden', 57 | height: NAV_ELEMENT_HEIGHT, 58 | backgroundColor: 'transparent', 59 | }, 60 | RightButton: { 61 | position: 'absolute', 62 | top: 0, 63 | right: BUTTON_EFFECTIVE_MARGIN, 64 | overflow: 'hidden', 65 | alignItems: 'flex-end', 66 | height: NAV_ELEMENT_HEIGHT, 67 | backgroundColor: 'transparent', 68 | }, 69 | }; 70 | 71 | // There are 3 stages: left, center, right. All previous navigation 72 | // items are in the left stage. The current navigation item is in the 73 | // center stage. All upcoming navigation items are in the right stage. 74 | // Another way to think of the stages is in terms of transitions. When 75 | // we move forward in the navigation stack, we perform a 76 | // right-to-center transition on the new navigation item and a 77 | // center-to-left transition on the current navigation item. 78 | var Stages = { 79 | Left: { 80 | Title: merge(BASE_STYLES.Title, { opacity: 0 }), 81 | LeftButton: merge(BASE_STYLES.LeftButton, { opacity: 0 }), 82 | RightButton: merge(BASE_STYLES.RightButton, { opacity: 0 }), 83 | }, 84 | Center: { 85 | Title: merge(BASE_STYLES.Title, { opacity: 1 }), 86 | LeftButton: merge(BASE_STYLES.LeftButton, { opacity: 1 }), 87 | RightButton: merge(BASE_STYLES.RightButton, { opacity: 1 }), 88 | }, 89 | Right: { 90 | Title: merge(BASE_STYLES.Title, { opacity: 0 }), 91 | LeftButton: merge(BASE_STYLES.LeftButton, { opacity: 0 }), 92 | RightButton: merge(BASE_STYLES.RightButton, { opacity: 0 }), 93 | }, 94 | }; 95 | 96 | 97 | var opacityRatio = 100; 98 | 99 | function buildSceneInterpolators(startStyles, endStyles) { 100 | return { 101 | Title: buildStyleInterpolator({ 102 | opacity: { 103 | type: 'linear', 104 | from: startStyles.Title.opacity, 105 | to: endStyles.Title.opacity, 106 | min: 0, 107 | max: 1, 108 | }, 109 | left: { 110 | type: 'linear', 111 | from: startStyles.Title.left, 112 | to: endStyles.Title.left, 113 | min: 0, 114 | max: 1, 115 | extrapolate: true, 116 | }, 117 | }), 118 | LeftButton: buildStyleInterpolator({ 119 | opacity: { 120 | type: 'linear', 121 | from: startStyles.LeftButton.opacity, 122 | to: endStyles.LeftButton.opacity, 123 | min: 0, 124 | max: 1, 125 | round: opacityRatio, 126 | }, 127 | left: { 128 | type: 'linear', 129 | from: startStyles.LeftButton.left, 130 | to: endStyles.LeftButton.left, 131 | min: 0, 132 | max: 1, 133 | }, 134 | }), 135 | RightButton: buildStyleInterpolator({ 136 | opacity: { 137 | type: 'linear', 138 | from: startStyles.RightButton.opacity, 139 | to: endStyles.RightButton.opacity, 140 | min: 0, 141 | max: 1, 142 | round: opacityRatio, 143 | }, 144 | left: { 145 | type: 'linear', 146 | from: startStyles.RightButton.left, 147 | to: endStyles.RightButton.left, 148 | min: 0, 149 | max: 1, 150 | extrapolate: true, 151 | }, 152 | }), 153 | }; 154 | } 155 | 156 | var Interpolators = { 157 | // Animating *into* the center stage from the right 158 | RightToCenter: buildSceneInterpolators(Stages.Right, Stages.Center), 159 | // Animating out of the center stage, to the left 160 | CenterToLeft: buildSceneInterpolators(Stages.Center, Stages.Left), 161 | // Both stages (animating *past* the center stage) 162 | RightToLeft: buildSceneInterpolators(Stages.Right, Stages.Left), 163 | }; 164 | 165 | 166 | module.exports = { 167 | General: { 168 | NavBarHeight: NAV_BAR_HEIGHT, 169 | StatusBarHeight: 0, 170 | TotalNavHeight: NAV_BAR_HEIGHT, 171 | }, 172 | Interpolators, 173 | Stages, 174 | }; 175 | -------------------------------------------------------------------------------- /FBNavigator/NavigatorNavigationBarStylesIOS.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015, Facebook, Inc. All rights reserved. 3 | * 4 | * Facebook, Inc. ("Facebook") owns all right, title and interest, including 5 | * all intellectual property and other proprietary rights, in and to the React 6 | * Native CustomComponents software (the "Software"). Subject to your 7 | * compliance with these terms, you are hereby granted a non-exclusive, 8 | * worldwide, royalty-free copyright license to (1) use and copy the Software; 9 | * and (2) reproduce and distribute the Software as part of your own software 10 | * ("Your Software"). Facebook reserves all rights not expressly granted to 11 | * you in this license agreement. 12 | * 13 | * THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "AS IS" AND ANY EXPRESS 14 | * OR IMPLIED WARRANTIES (INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES 15 | * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE) ARE DISCLAIMED. 16 | * IN NO EVENT SHALL FACEBOOK OR ITS AFFILIATES, OFFICERS, DIRECTORS OR 17 | * EMPLOYEES BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, 18 | * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, 19 | * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; 20 | * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, 21 | * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR 22 | * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THE SOFTWARE, EVEN IF 23 | * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 24 | * 25 | */ 26 | 'use strict'; 27 | 28 | import { 29 | Dimensions, 30 | I18nManager, 31 | PixelRatio, 32 | } from 'react-native'; 33 | 34 | var buildStyleInterpolator = require('./buildStyleInterpolator'); 35 | var merge = require('./merge'); 36 | 37 | var SCREEN_WIDTH = Dimensions.get('window').width; 38 | var NAV_BAR_HEIGHT = 44; 39 | var STATUS_BAR_HEIGHT = 20; 40 | var NAV_HEIGHT = NAV_BAR_HEIGHT + STATUS_BAR_HEIGHT; 41 | 42 | var BASE_STYLES = { 43 | Title: { 44 | position: 'absolute', 45 | top: STATUS_BAR_HEIGHT, 46 | left: 0, 47 | right: 0, 48 | alignItems: 'center', 49 | height: NAV_BAR_HEIGHT, 50 | backgroundColor: 'transparent', 51 | }, 52 | LeftButton: { 53 | position: 'absolute', 54 | top: STATUS_BAR_HEIGHT, 55 | left: 0, 56 | overflow: 'hidden', 57 | opacity: 1, 58 | height: NAV_BAR_HEIGHT, 59 | backgroundColor: 'transparent', 60 | }, 61 | RightButton: { 62 | position: 'absolute', 63 | top: STATUS_BAR_HEIGHT, 64 | right: 0, 65 | overflow: 'hidden', 66 | opacity: 1, 67 | alignItems: 'flex-end', 68 | height: NAV_BAR_HEIGHT, 69 | backgroundColor: 'transparent', 70 | }, 71 | }; 72 | 73 | // There are 3 stages: left, center, right. All previous navigation 74 | // items are in the left stage. The current navigation item is in the 75 | // center stage. All upcoming navigation items are in the right stage. 76 | // Another way to think of the stages is in terms of transitions. When 77 | // we move forward in the navigation stack, we perform a 78 | // right-to-center transition on the new navigation item and a 79 | // center-to-left transition on the current navigation item. 80 | var Stages = { 81 | Left: { 82 | Title: merge(BASE_STYLES.Title, { left: -SCREEN_WIDTH / 2, opacity: 0 }), 83 | LeftButton: merge(BASE_STYLES.LeftButton, { left: 0, opacity: 0 }), 84 | RightButton: merge(BASE_STYLES.RightButton, { opacity: 0 }), 85 | }, 86 | Center: { 87 | Title: merge(BASE_STYLES.Title, { left: 0, opacity: 1 }), 88 | LeftButton: merge(BASE_STYLES.LeftButton, { left: 0, opacity: 1 }), 89 | RightButton: merge(BASE_STYLES.RightButton, { opacity: 1 }), 90 | }, 91 | Right: { 92 | Title: merge(BASE_STYLES.Title, { left: SCREEN_WIDTH / 2, opacity: 0 }), 93 | LeftButton: merge(BASE_STYLES.LeftButton, { left: 0, opacity: 0 }), 94 | RightButton: merge(BASE_STYLES.RightButton, { opacity: 0 }), 95 | }, 96 | }; 97 | 98 | 99 | var opacityRatio = 100; 100 | 101 | function buildSceneInterpolators(startStyles, endStyles) { 102 | return { 103 | Title: buildStyleInterpolator({ 104 | opacity: { 105 | type: 'linear', 106 | from: startStyles.Title.opacity, 107 | to: endStyles.Title.opacity, 108 | min: 0, 109 | max: 1, 110 | }, 111 | left: { 112 | type: 'linear', 113 | from: startStyles.Title.left, 114 | to: endStyles.Title.left, 115 | min: 0, 116 | max: 1, 117 | extrapolate: true, 118 | }, 119 | }), 120 | LeftButton: buildStyleInterpolator({ 121 | opacity: { 122 | type: 'linear', 123 | from: startStyles.LeftButton.opacity, 124 | to: endStyles.LeftButton.opacity, 125 | min: 0, 126 | max: 1, 127 | round: opacityRatio, 128 | }, 129 | left: { 130 | type: 'linear', 131 | from: startStyles.LeftButton.left, 132 | to: endStyles.LeftButton.left, 133 | min: 0, 134 | max: 1, 135 | }, 136 | }), 137 | RightButton: buildStyleInterpolator({ 138 | opacity: { 139 | type: 'linear', 140 | from: startStyles.RightButton.opacity, 141 | to: endStyles.RightButton.opacity, 142 | min: 0, 143 | max: 1, 144 | round: opacityRatio, 145 | }, 146 | left: { 147 | type: 'linear', 148 | from: startStyles.RightButton.left, 149 | to: endStyles.RightButton.left, 150 | min: 0, 151 | max: 1, 152 | extrapolate: true, 153 | }, 154 | }), 155 | }; 156 | } 157 | 158 | var Interpolators = { 159 | // Animating *into* the center stage from the right 160 | RightToCenter: buildSceneInterpolators(Stages.Right, Stages.Center), 161 | // Animating out of the center stage, to the left 162 | CenterToLeft: buildSceneInterpolators(Stages.Center, Stages.Left), 163 | // Both stages (animating *past* the center stage) 164 | RightToLeft: buildSceneInterpolators(Stages.Right, Stages.Left), 165 | }; 166 | 167 | 168 | module.exports = { 169 | General: { 170 | NavBarHeight: NAV_BAR_HEIGHT, 171 | StatusBarHeight: STATUS_BAR_HEIGHT, 172 | TotalNavHeight: NAV_HEIGHT, 173 | }, 174 | Interpolators, 175 | Stages, 176 | }; 177 | -------------------------------------------------------------------------------- /example/android/app/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: "com.android.application" 2 | 3 | import com.android.build.OutputFile 4 | 5 | /** 6 | * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets 7 | * and bundleReleaseJsAndAssets). 8 | * These basically call `react-native bundle` with the correct arguments during the Android build 9 | * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the 10 | * bundle directly from the development server. Below you can see all the possible configurations 11 | * and their defaults. If you decide to add a configuration block, make sure to add it before the 12 | * `apply from: "../../node_modules/react-native/react.gradle"` line. 13 | * 14 | * project.ext.react = [ 15 | * // the name of the generated asset file containing your JS bundle 16 | * bundleAssetName: "index.android.bundle", 17 | * 18 | * // the entry file for bundle generation 19 | * entryFile: "index.android.js", 20 | * 21 | * // whether to bundle JS and assets in debug mode 22 | * bundleInDebug: false, 23 | * 24 | * // whether to bundle JS and assets in release mode 25 | * bundleInRelease: true, 26 | * 27 | * // whether to bundle JS and assets in another build variant (if configured). 28 | * // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants 29 | * // The configuration property can be in the following formats 30 | * // 'bundleIn${productFlavor}${buildType}' 31 | * // 'bundleIn${buildType}' 32 | * // bundleInFreeDebug: true, 33 | * // bundleInPaidRelease: true, 34 | * // bundleInBeta: true, 35 | * 36 | * // whether to disable dev mode in custom build variants (by default only disabled in release) 37 | * // for example: to disable dev mode in the staging build type (if configured) 38 | * devDisabledInStaging: true, 39 | * // The configuration property can be in the following formats 40 | * // 'devDisabledIn${productFlavor}${buildType}' 41 | * // 'devDisabledIn${buildType}' 42 | * 43 | * // the root of your project, i.e. where "package.json" lives 44 | * root: "../../", 45 | * 46 | * // where to put the JS bundle asset in debug mode 47 | * jsBundleDirDebug: "$buildDir/intermediates/assets/debug", 48 | * 49 | * // where to put the JS bundle asset in release mode 50 | * jsBundleDirRelease: "$buildDir/intermediates/assets/release", 51 | * 52 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 53 | * // require('./image.png')), in debug mode 54 | * resourcesDirDebug: "$buildDir/intermediates/res/merged/debug", 55 | * 56 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 57 | * // require('./image.png')), in release mode 58 | * resourcesDirRelease: "$buildDir/intermediates/res/merged/release", 59 | * 60 | * // by default the gradle tasks are skipped if none of the JS files or assets change; this means 61 | * // that we don't look at files in android/ or ios/ to determine whether the tasks are up to 62 | * // date; if you have any other folders that you want to ignore for performance reasons (gradle 63 | * // indexes the entire tree), add them here. Alternatively, if you have JS files in android/ 64 | * // for example, you might want to remove it from here. 65 | * inputExcludes: ["android/**", "ios/**"], 66 | * 67 | * // override which node gets called and with what additional arguments 68 | * nodeExecutableAndArgs: ["node"], 69 | * 70 | * // supply additional arguments to the packager 71 | * extraPackagerArgs: [] 72 | * ] 73 | */ 74 | 75 | project.ext.react = [ 76 | entryFile: "index.js" 77 | ] 78 | 79 | apply from: "../../node_modules/react-native/react.gradle" 80 | 81 | /** 82 | * Set this to true to create two separate APKs instead of one: 83 | * - An APK that only works on ARM devices 84 | * - An APK that only works on x86 devices 85 | * The advantage is the size of the APK is reduced by about 4MB. 86 | * Upload all the APKs to the Play Store and people will download 87 | * the correct one based on the CPU architecture of their device. 88 | */ 89 | def enableSeparateBuildPerCPUArchitecture = false 90 | 91 | /** 92 | * Run Proguard to shrink the Java bytecode in release builds. 93 | */ 94 | def enableProguardInReleaseBuilds = false 95 | 96 | android { 97 | compileSdkVersion 25 98 | buildToolsVersion "25.0.3" 99 | 100 | defaultConfig { 101 | applicationId "com.yanavigatorexample" 102 | minSdkVersion 16 103 | targetSdkVersion 25 104 | versionCode 1 105 | versionName "1.0" 106 | ndk { 107 | abiFilters "armeabi-v7a", "x86" 108 | } 109 | } 110 | splits { 111 | abi { 112 | reset() 113 | enable enableSeparateBuildPerCPUArchitecture 114 | universalApk false // If true, also generate a universal APK 115 | include "armeabi-v7a", "x86" 116 | } 117 | } 118 | buildTypes { 119 | release { 120 | minifyEnabled enableProguardInReleaseBuilds 121 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" 122 | } 123 | } 124 | // applicationVariants are e.g. debug, release 125 | applicationVariants.all { variant -> 126 | variant.outputs.each { output -> 127 | // For each separate APK per architecture, set a unique version code as described here: 128 | // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits 129 | def versionCodes = ["armeabi-v7a":1, "x86":2] 130 | def abi = output.getFilter(OutputFile.ABI) 131 | if (abi != null) { // null for the universal-debug, universal-release variants 132 | output.versionCodeOverride = 133 | versionCodes.get(abi) * 1048576 + defaultConfig.versionCode 134 | } 135 | } 136 | } 137 | } 138 | 139 | dependencies { 140 | compile project(':react-native-vector-icons') 141 | compile fileTree(dir: "libs", include: ["*.jar"]) 142 | compile "com.android.support:appcompat-v7:25.3.1" 143 | compile "com.facebook.react:react-native:+" // From node_modules 144 | } 145 | 146 | // Run this once to be able to run the application with BUCK 147 | // puts all compile dependencies into folder libs for BUCK to use 148 | task copyDownloadableDepsToLibs(type: Copy) { 149 | from configurations.compile 150 | into 'libs' 151 | } 152 | -------------------------------------------------------------------------------- /FBNavigator/NavigationEvent.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015, Facebook, Inc. All rights reserved. 3 | * 4 | * Facebook, Inc. ("Facebook") owns all right, title and interest, including 5 | * all intellectual property and other proprietary rights, in and to the React 6 | * Native CustomComponents software (the "Software"). Subject to your 7 | * compliance with these terms, you are hereby granted a non-exclusive, 8 | * worldwide, royalty-free copyright license to (1) use and copy the Software; 9 | * and (2) reproduce and distribute the Software as part of your own software 10 | * ("Your Software"). Facebook reserves all rights not expressly granted to 11 | * you in this license agreement. 12 | * 13 | * THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "AS IS" AND ANY EXPRESS 14 | * OR IMPLIED WARRANTIES (INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES 15 | * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE) ARE DISCLAIMED. 16 | * IN NO EVENT SHALL FACEBOOK OR ITS AFFILIATES, OFFICERS, DIRECTORS OR 17 | * EMPLOYEES BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, 18 | * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, 19 | * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; 20 | * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, 21 | * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR 22 | * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THE SOFTWARE, EVEN IF 23 | * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 24 | * 25 | * @flow 26 | */ 27 | 'use strict'; 28 | 29 | const invariant = require('fbjs/lib/invariant'); 30 | 31 | class NavigationEventPool { 32 | _list: Array; 33 | 34 | constructor() { 35 | this._list = []; 36 | } 37 | 38 | get(type: string, currentTarget: Object, data: any): NavigationEvent { 39 | let event; 40 | if (this._list.length > 0) { 41 | event = this._list.pop(); 42 | event.constructor.call(event, type, currentTarget, data); 43 | } else { 44 | event = new NavigationEvent(type, currentTarget, data); 45 | } 46 | return event; 47 | } 48 | 49 | put(event: NavigationEvent) { 50 | this._list.push(event); 51 | } 52 | } 53 | 54 | const _navigationEventPool = new NavigationEventPool(); 55 | 56 | /** 57 | * The NavigationEvent interface represents any event of the navigation. 58 | * It contains common properties and methods to any event. 59 | * 60 | * == Important Properties == 61 | * 62 | * - target: 63 | * A reference to the navigation context that dispatched the event. It is 64 | * different from event.currentTarget when the event handler is called during 65 | * the bubbling or capturing phase of the event. 66 | * 67 | * - currentTarget: 68 | * Identifies the current target for the event, as the event traverses the 69 | * navigation context tree. It always refers to the navigation context the 70 | * event handler has been attached to as opposed to event.target which 71 | * identifies the navigation context on which the event occurred. 72 | * 73 | * - eventPhase: 74 | * Returns an integer value which specifies the current evaluation phase of 75 | * the event flow; possible values are listed in NavigationEvent phase 76 | * constants below. 77 | */ 78 | class NavigationEvent { 79 | static AT_TARGET: number; 80 | static BUBBLING_PHASE: number; 81 | static CAPTURING_PHASE: number; 82 | static NONE: number; 83 | 84 | _currentTarget: ?Object; 85 | _data: any; 86 | _defaultPrevented: boolean; 87 | _disposed: boolean; 88 | _propagationStopped: boolean; 89 | _type: string; 90 | 91 | target: ?Object; 92 | 93 | // Returns an integer value which specifies the current evaluation phase of 94 | // the event flow. 95 | eventPhase: number; 96 | 97 | static pool(type: string, currentTarget: Object, data: any): NavigationEvent { 98 | return _navigationEventPool.get(type, currentTarget, data); 99 | } 100 | 101 | constructor(type: string, currentTarget: Object, data: any) { 102 | this.target = currentTarget; 103 | this.eventPhase = NavigationEvent.NONE; 104 | 105 | this._type = type; 106 | this._currentTarget = currentTarget; 107 | this._data = data; 108 | this._defaultPrevented = false; 109 | this._disposed = false; 110 | this._propagationStopped = false; 111 | } 112 | 113 | get type(): string { 114 | return this._type; 115 | } 116 | 117 | get currentTarget(): ?Object { 118 | return this._currentTarget; 119 | } 120 | 121 | get data(): any { 122 | return this._data; 123 | } 124 | 125 | get defaultPrevented(): boolean { 126 | return this._defaultPrevented; 127 | } 128 | 129 | preventDefault(): void { 130 | this._defaultPrevented = true; 131 | } 132 | 133 | stopPropagation(): void { 134 | this._propagationStopped = true; 135 | } 136 | 137 | stop(): void { 138 | this.preventDefault(); 139 | this.stopPropagation(); 140 | } 141 | 142 | isPropagationStopped(): boolean { 143 | return this._propagationStopped; 144 | } 145 | 146 | /** 147 | * Dispose the event. 148 | * NavigationEvent shall be disposed after being emitted by 149 | * `NavigationEventEmitter`. 150 | */ 151 | dispose(): void { 152 | invariant(!this._disposed, 'NavigationEvent is already disposed'); 153 | this._disposed = true; 154 | 155 | // Clean up. 156 | this.target = null; 157 | this.eventPhase = NavigationEvent.NONE; 158 | this._type = ''; 159 | this._currentTarget = null; 160 | this._data = null; 161 | this._defaultPrevented = false; 162 | 163 | // Put this back to the pool to reuse the instance. 164 | _navigationEventPool.put(this); 165 | } 166 | } 167 | 168 | /** 169 | * Event phase constants. 170 | * These values describe which phase the event flow is currently being 171 | * evaluated. 172 | */ 173 | 174 | // No event is being processed at this time. 175 | NavigationEvent.NONE = 0; 176 | 177 | // The event is being propagated through the currentTarget's ancestor objects. 178 | NavigationEvent.CAPTURING_PHASE = 1; 179 | 180 | // The event has arrived at the event's currentTarget. Event listeners registered for 181 | // this phase are called at this time. 182 | NavigationEvent.AT_TARGET = 2; 183 | 184 | // The event is propagating back up through the currentTarget's ancestors in reverse 185 | // order, starting with the parent. This is known as bubbling, and occurs only 186 | // if event propagation isn't prevented. Event listeners registered for this 187 | // phase are triggered during this process. 188 | NavigationEvent.BUBBLING_PHASE = 3; 189 | 190 | module.exports = NavigationEvent; 191 | -------------------------------------------------------------------------------- /FBNavigator/NavigatorNavigationBar.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015, Facebook, Inc. All rights reserved. 3 | * 4 | * Facebook, Inc. ("Facebook") owns all right, title and interest, including 5 | * all intellectual property and other proprietary rights, in and to the React 6 | * Native CustomComponents software (the "Software"). Subject to your 7 | * compliance with these terms, you are hereby granted a non-exclusive, 8 | * worldwide, royalty-free copyright license to (1) use and copy the Software; 9 | * and (2) reproduce and distribute the Software as part of your own software 10 | * ("Your Software"). Facebook reserves all rights not expressly granted to 11 | * you in this license agreement. 12 | * 13 | * THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "AS IS" AND ANY EXPRESS 14 | * OR IMPLIED WARRANTIES (INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES 15 | * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE) ARE DISCLAIMED. 16 | * IN NO EVENT SHALL FACEBOOK OR ITS AFFILIATES, OFFICERS, DIRECTORS OR 17 | * EMPLOYEES BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, 18 | * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, 19 | * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; 20 | * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, 21 | * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR 22 | * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THE SOFTWARE, EVEN IF 23 | * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 24 | * 25 | */ 26 | 'use strict'; 27 | 28 | var React = require('react'); 29 | var NavigatorNavigationBarStylesAndroid = require('./NavigatorNavigationBarStylesAndroid'); 30 | var NavigatorNavigationBarStylesIOS = require('./NavigatorNavigationBarStylesIOS'); 31 | import { 32 | Platform, 33 | StyleSheet, 34 | View, 35 | ViewPropTypes, 36 | } from 'react-native'; 37 | var PropTypes = require('prop-types'); 38 | 39 | var guid = require('./guid'); 40 | 41 | var { Map } = require('immutable'); 42 | 43 | var COMPONENT_NAMES = ['Title', 'LeftButton', 'RightButton']; 44 | 45 | var NavigatorNavigationBarStyles = Platform.OS === 'android' ? 46 | NavigatorNavigationBarStylesAndroid : NavigatorNavigationBarStylesIOS; 47 | 48 | var navStatePresentedIndex = function(navState) { 49 | if (navState.presentedIndex !== undefined) { 50 | return navState.presentedIndex; 51 | } 52 | // TODO: rename `observedTopOfStack` to `presentedIndex` in `NavigatorIOS` 53 | return navState.observedTopOfStack; 54 | }; 55 | 56 | class NavigatorNavigationBar extends React.Component { 57 | static propTypes = { 58 | navigator: PropTypes.object, 59 | routeMapper: PropTypes.shape({ 60 | Title: PropTypes.func.isRequired, 61 | LeftButton: PropTypes.func.isRequired, 62 | RightButton: PropTypes.func.isRequired, 63 | }).isRequired, 64 | navState: PropTypes.shape({ 65 | routeStack: PropTypes.arrayOf(PropTypes.object), 66 | presentedIndex: PropTypes.number, 67 | }), 68 | navigationStyles: PropTypes.object, 69 | style: ViewPropTypes.style, 70 | }; 71 | 72 | static Styles = NavigatorNavigationBarStyles; 73 | static StylesAndroid = NavigatorNavigationBarStylesAndroid; 74 | static StylesIOS = NavigatorNavigationBarStylesIOS; 75 | 76 | static defaultProps = { 77 | navigationStyles: NavigatorNavigationBarStyles, 78 | }; 79 | 80 | componentWillMount() { 81 | this._reset(); 82 | } 83 | 84 | /** 85 | * Stop transtion, immediately resets the cached state and re-render the 86 | * whole view. 87 | */ 88 | immediatelyRefresh = () => { 89 | this._reset(); 90 | this.forceUpdate(); 91 | }; 92 | 93 | _reset = () => { 94 | this._key = guid(); 95 | this._reusableProps = {}; 96 | this._components = {}; 97 | this._descriptors = {}; 98 | 99 | COMPONENT_NAMES.forEach(componentName => { 100 | this._components[componentName] = new Map(); 101 | this._descriptors[componentName] = new Map(); 102 | }); 103 | }; 104 | 105 | _getReusableProps = (/*string*/componentName, /*number*/index) => /*object*/ { 106 | var propStack = this._reusableProps[componentName]; 107 | if (!propStack) { 108 | propStack = this._reusableProps[componentName] = []; 109 | } 110 | var props = propStack[index]; 111 | if (!props) { 112 | props = propStack[index] = {style:{}}; 113 | } 114 | return props; 115 | }; 116 | 117 | _updateIndexProgress = ( 118 | /*number*/progress, 119 | /*number*/index, 120 | /*number*/fromIndex, 121 | /*number*/toIndex, 122 | ) => { 123 | var amount = toIndex > fromIndex ? progress : (1 - progress); 124 | var oldDistToCenter = index - fromIndex; 125 | var newDistToCenter = index - toIndex; 126 | var interpolate; 127 | if (oldDistToCenter > 0 && newDistToCenter === 0 || 128 | newDistToCenter > 0 && oldDistToCenter === 0) { 129 | interpolate = this.props.navigationStyles.Interpolators.RightToCenter; 130 | } else if (oldDistToCenter < 0 && newDistToCenter === 0 || 131 | newDistToCenter < 0 && oldDistToCenter === 0) { 132 | interpolate = this.props.navigationStyles.Interpolators.CenterToLeft; 133 | } else if (oldDistToCenter === newDistToCenter) { 134 | interpolate = this.props.navigationStyles.Interpolators.RightToCenter; 135 | } else { 136 | interpolate = this.props.navigationStyles.Interpolators.RightToLeft; 137 | } 138 | 139 | COMPONENT_NAMES.forEach(function (componentName) { 140 | var component = this._components[componentName].get(this.props.navState.routeStack[index]); 141 | var props = this._getReusableProps(componentName, index); 142 | if (component && interpolate[componentName](props.style, amount)) { 143 | props.pointerEvents = props.style.opacity === 0 ? 'none' : 'box-none'; 144 | component.setNativeProps(props); 145 | } 146 | }, this); 147 | }; 148 | 149 | updateProgress = (/*number*/progress, /*number*/fromIndex, /*number*/toIndex) => { 150 | var max = Math.max(fromIndex, toIndex); 151 | var min = Math.min(fromIndex, toIndex); 152 | for (var index = min; index <= max; index++) { 153 | this._updateIndexProgress(progress, index, fromIndex, toIndex); 154 | } 155 | }; 156 | 157 | render() { 158 | var navBarStyle = { 159 | height: this.props.navigationStyles.General.TotalNavHeight, 160 | }; 161 | var navState = this.props.navState; 162 | var components = navState.routeStack.map((route, index) => 163 | COMPONENT_NAMES.map(componentName => 164 | this._getComponent(componentName, route, index) 165 | ) 166 | ); 167 | 168 | return ( 169 | 172 | {components} 173 | 174 | ); 175 | } 176 | 177 | _getComponent = (/*string*/componentName, /*object*/route, /*number*/index) => /*?Object*/ { 178 | if (this._descriptors[componentName].includes(route)) { 179 | return this._descriptors[componentName].get(route); 180 | } 181 | 182 | var rendered = null; 183 | 184 | var content = this.props.routeMapper[componentName]( 185 | this.props.navState.routeStack[index], 186 | this.props.navigator, 187 | index, 188 | this.props.navState 189 | ); 190 | if (!content) { 191 | return null; 192 | } 193 | 194 | var componentIsActive = index === navStatePresentedIndex(this.props.navState); 195 | var initialStage = componentIsActive ? 196 | this.props.navigationStyles.Stages.Center : 197 | this.props.navigationStyles.Stages.Left; 198 | rendered = ( 199 | { 201 | this._components[componentName] = this._components[componentName].set(route, ref); 202 | }} 203 | pointerEvents={componentIsActive ? 'box-none' : 'none'} 204 | style={initialStage[componentName]}> 205 | {content} 206 | 207 | ); 208 | 209 | this._descriptors[componentName] = this._descriptors[componentName].set(route, rendered); 210 | return rendered; 211 | }; 212 | } 213 | 214 | 215 | var styles = StyleSheet.create({ 216 | navBarContainer: { 217 | position: 'absolute', 218 | top: 0, 219 | left: 0, 220 | right: 0, 221 | backgroundColor: 'transparent', 222 | }, 223 | }); 224 | 225 | module.exports = NavigatorNavigationBar; 226 | -------------------------------------------------------------------------------- /FBNavigator/NavigationContext.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015, Facebook, Inc. All rights reserved. 3 | * 4 | * Facebook, Inc. ("Facebook") owns all right, title and interest, including 5 | * all intellectual property and other proprietary rights, in and to the React 6 | * Native CustomComponents software (the "Software"). Subject to your 7 | * compliance with these terms, you are hereby granted a non-exclusive, 8 | * worldwide, royalty-free copyright license to (1) use and copy the Software; 9 | * and (2) reproduce and distribute the Software as part of your own software 10 | * ("Your Software"). Facebook reserves all rights not expressly granted to 11 | * you in this license agreement. 12 | * 13 | * THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "AS IS" AND ANY EXPRESS 14 | * OR IMPLIED WARRANTIES (INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES 15 | * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE) ARE DISCLAIMED. 16 | * IN NO EVENT SHALL FACEBOOK OR ITS AFFILIATES, OFFICERS, DIRECTORS OR 17 | * EMPLOYEES BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, 18 | * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, 19 | * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; 20 | * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, 21 | * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR 22 | * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THE SOFTWARE, EVEN IF 23 | * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 24 | * 25 | * @noflow 26 | */ 27 | 'use strict'; 28 | 29 | var NavigationEvent = require('./NavigationEvent'); 30 | var NavigationEventEmitter = require('./NavigationEventEmitter'); 31 | var NavigationTreeNode = require('./NavigationTreeNode'); 32 | 33 | var emptyFunction = require('fbjs/lib/emptyFunction'); 34 | var invariant = require('fbjs/lib/invariant'); 35 | 36 | import type EventSubscription from 'EventSubscription'; 37 | 38 | var { 39 | AT_TARGET, 40 | BUBBLING_PHASE, 41 | CAPTURING_PHASE, 42 | } = NavigationEvent; 43 | 44 | // Event types that do not support event bubbling, capturing and 45 | // reconciliation API (e.g event.preventDefault(), event.stopPropagation()). 46 | var LegacyEventTypes = new Set([ 47 | 'willfocus', 48 | 'didfocus', 49 | ]); 50 | 51 | /** 52 | * Class that contains the info and methods for app navigation. 53 | */ 54 | class NavigationContext { 55 | __node: NavigationTreeNode; 56 | _bubbleEventEmitter: ?NavigationEventEmitter; 57 | _captureEventEmitter: ?NavigationEventEmitter; 58 | _currentRoute: any; 59 | _emitCounter: number; 60 | _emitQueue: Array; 61 | 62 | constructor() { 63 | this._bubbleEventEmitter = new NavigationEventEmitter(this); 64 | this._captureEventEmitter = new NavigationEventEmitter(this); 65 | this._currentRoute = null; 66 | 67 | // Sets the protected property `__node`. 68 | this.__node = new NavigationTreeNode(this); 69 | 70 | this._emitCounter = 0; 71 | this._emitQueue = []; 72 | 73 | this.addListener('willfocus', this._onFocus); 74 | this.addListener('didfocus', this._onFocus); 75 | } 76 | 77 | /* $FlowFixMe - get/set properties not yet supported */ 78 | get parent(): ?NavigationContext { 79 | var parent = this.__node.getParent(); 80 | return parent ? parent.getValue() : null; 81 | } 82 | 83 | /* $FlowFixMe - get/set properties not yet supported */ 84 | get top(): ?NavigationContext { 85 | var result = null; 86 | var parentNode = this.__node.getParent(); 87 | while (parentNode) { 88 | result = parentNode.getValue(); 89 | parentNode = parentNode.getParent(); 90 | } 91 | return result; 92 | } 93 | 94 | /* $FlowFixMe - get/set properties not yet supported */ 95 | get currentRoute(): any { 96 | return this._currentRoute; 97 | } 98 | 99 | appendChild(childContext: NavigationContext): void { 100 | this.__node.appendChild(childContext.__node); 101 | } 102 | 103 | addListener( 104 | eventType: string, 105 | listener: Function, 106 | useCapture: ?boolean 107 | ): EventSubscription { 108 | if (LegacyEventTypes.has(eventType)) { 109 | useCapture = false; 110 | } 111 | 112 | var emitter = useCapture ? 113 | this._captureEventEmitter : 114 | this._bubbleEventEmitter; 115 | 116 | if (emitter) { 117 | return emitter.addListener(eventType, listener, this); 118 | } else { 119 | return {remove: emptyFunction}; 120 | } 121 | } 122 | 123 | emit(eventType: String, data: any, didEmitCallback: ?Function): void { 124 | if (this._emitCounter > 0) { 125 | // An event cycle that was previously created hasn't finished yet. 126 | // Put this event cycle into the queue and will finish them later. 127 | var args: any = Array.prototype.slice.call(arguments); 128 | this._emitQueue.push(args); 129 | return; 130 | } 131 | 132 | this._emitCounter++; 133 | 134 | if (LegacyEventTypes.has(eventType)) { 135 | // Legacy events does not support event bubbling and reconciliation. 136 | this.__emit( 137 | eventType, 138 | data, 139 | null, 140 | { 141 | defaultPrevented: false, 142 | eventPhase: AT_TARGET, 143 | propagationStopped: true, 144 | target: this, 145 | } 146 | ); 147 | } else { 148 | var targets = [this]; 149 | var parentTarget = this.parent; 150 | while (parentTarget) { 151 | targets.unshift(parentTarget); 152 | parentTarget = parentTarget.parent; 153 | } 154 | 155 | var propagationStopped = false; 156 | var defaultPrevented = false; 157 | var callback = (event) => { 158 | propagationStopped = propagationStopped || event.isPropagationStopped(); 159 | defaultPrevented = defaultPrevented || event.defaultPrevented; 160 | }; 161 | 162 | // Capture phase 163 | targets.some((currentTarget) => { 164 | if (propagationStopped) { 165 | return true; 166 | } 167 | 168 | var extraInfo = { 169 | defaultPrevented, 170 | eventPhase: CAPTURING_PHASE, 171 | propagationStopped, 172 | target: this, 173 | }; 174 | 175 | currentTarget.__emit(eventType, data, callback, extraInfo); 176 | }, this); 177 | 178 | // bubble phase 179 | targets.reverse().some((currentTarget) => { 180 | if (propagationStopped) { 181 | return true; 182 | } 183 | var extraInfo = { 184 | defaultPrevented, 185 | eventPhase: BUBBLING_PHASE, 186 | propagationStopped, 187 | target: this, 188 | }; 189 | currentTarget.__emit(eventType, data, callback, extraInfo); 190 | }, this); 191 | } 192 | 193 | if (didEmitCallback) { 194 | var event = NavigationEvent.pool(eventType, this, data); 195 | propagationStopped && event.stopPropagation(); 196 | defaultPrevented && event.preventDefault(); 197 | didEmitCallback.call(this, event); 198 | event.dispose(); 199 | } 200 | 201 | this._emitCounter--; 202 | while (this._emitQueue.length) { 203 | var args: any = this._emitQueue.shift(); 204 | this.emit.apply(this, args); 205 | } 206 | } 207 | 208 | dispose(): void { 209 | // clean up everything. 210 | this._bubbleEventEmitter && this._bubbleEventEmitter.removeAllListeners(); 211 | this._captureEventEmitter && this._captureEventEmitter.removeAllListeners(); 212 | this._bubbleEventEmitter = null; 213 | this._captureEventEmitter = null; 214 | this._currentRoute = null; 215 | } 216 | 217 | // This method `__method` is protected. 218 | __emit( 219 | eventType: String, 220 | data: any, 221 | didEmitCallback: ?Function, 222 | extraInfo: Object, 223 | ): void { 224 | var emitter; 225 | switch (extraInfo.eventPhase) { 226 | case CAPTURING_PHASE: // phase = 1 227 | emitter = this._captureEventEmitter; 228 | break; 229 | 230 | case AT_TARGET: // phase = 2 231 | emitter = this._bubbleEventEmitter; 232 | break; 233 | 234 | case BUBBLING_PHASE: // phase = 3 235 | emitter = this._bubbleEventEmitter; 236 | break; 237 | 238 | default: 239 | invariant(false, 'invalid event phase %s', extraInfo.eventPhase); 240 | } 241 | 242 | if (extraInfo.target === this) { 243 | // phase = 2 244 | extraInfo.eventPhase = AT_TARGET; 245 | } 246 | 247 | if (emitter) { 248 | emitter.emit( 249 | eventType, 250 | data, 251 | didEmitCallback, 252 | extraInfo 253 | ); 254 | } 255 | } 256 | 257 | _onFocus(event: NavigationEvent): void { 258 | invariant( 259 | event.data && event.data.hasOwnProperty('route'), 260 | 'event type "%s" should provide route', 261 | event.type 262 | ); 263 | 264 | this._currentRoute = event.data.route; 265 | } 266 | } 267 | 268 | module.exports = NavigationContext; 269 | -------------------------------------------------------------------------------- /FBNavigator/EventEmitter.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015, Facebook, Inc. All rights reserved. 3 | * 4 | * Facebook, Inc. ("Facebook") owns all right, title and interest, including 5 | * all intellectual property and other proprietary rights, in and to the React 6 | * Native CustomComponents software (the "Software"). Subject to your 7 | * compliance with these terms, you are hereby granted a non-exclusive, 8 | * worldwide, royalty-free copyright license to (1) use and copy the Software; 9 | * and (2) reproduce and distribute the Software as part of your own software 10 | * ("Your Software"). Facebook reserves all rights not expressly granted to 11 | * you in this license agreement. 12 | * 13 | * THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "AS IS" AND ANY EXPRESS 14 | * OR IMPLIED WARRANTIES (INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES 15 | * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE) ARE DISCLAIMED. 16 | * IN NO EVENT SHALL FACEBOOK OR ITS AFFILIATES, OFFICERS, DIRECTORS OR 17 | * EMPLOYEES BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, 18 | * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, 19 | * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; 20 | * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, 21 | * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR 22 | * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THE SOFTWARE, EVEN IF 23 | * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 24 | * 25 | * @noflow 26 | * @typecheck 27 | */ 28 | 'use strict'; 29 | 30 | const EmitterSubscription = require('./EmitterSubscription'); 31 | const EventSubscriptionVendor = require('./EventSubscriptionVendor'); 32 | 33 | const emptyFunction = require('fbjs/lib/emptyFunction'); 34 | const invariant = require('fbjs/lib/invariant'); 35 | 36 | /** 37 | * @class EventEmitter 38 | * @description 39 | * An EventEmitter is responsible for managing a set of listeners and publishing 40 | * events to them when it is told that such events happened. In addition to the 41 | * data for the given event it also sends a event control object which allows 42 | * the listeners/handlers to prevent the default behavior of the given event. 43 | * 44 | * The emitter is designed to be generic enough to support all the different 45 | * contexts in which one might want to emit events. It is a simple multicast 46 | * mechanism on top of which extra functionality can be composed. For example, a 47 | * more advanced emitter may use an EventHolder and EventFactory. 48 | */ 49 | class EventEmitter { 50 | 51 | _subscriber: EventSubscriptionVendor; 52 | _currentSubscription: ?EmitterSubscription; 53 | 54 | /** 55 | * @constructor 56 | * 57 | * @param {EventSubscriptionVendor} subscriber - Optional subscriber instance 58 | * to use. If omitted, a new subscriber will be created for the emitter. 59 | */ 60 | constructor(subscriber: ?EventSubscriptionVendor) { 61 | this._subscriber = subscriber || new EventSubscriptionVendor(); 62 | } 63 | 64 | /** 65 | * Adds a listener to be invoked when events of the specified type are 66 | * emitted. An optional calling context may be provided. The data arguments 67 | * emitted will be passed to the listener function. 68 | * 69 | * TODO: Annotate the listener arg's type. This is tricky because listeners 70 | * can be invoked with varargs. 71 | * 72 | * @param {string} eventType - Name of the event to listen to 73 | * @param {function} listener - Function to invoke when the specified event is 74 | * emitted 75 | * @param {*} context - Optional context object to use when invoking the 76 | * listener 77 | */ 78 | addListener( 79 | eventType: string, listener: Function, context: ?Object): EmitterSubscription { 80 | 81 | return (this._subscriber.addSubscription( 82 | eventType, 83 | new EmitterSubscription(this, this._subscriber, listener, context) 84 | ) : any); 85 | } 86 | 87 | /** 88 | * Similar to addListener, except that the listener is removed after it is 89 | * invoked once. 90 | * 91 | * @param {string} eventType - Name of the event to listen to 92 | * @param {function} listener - Function to invoke only once when the 93 | * specified event is emitted 94 | * @param {*} context - Optional context object to use when invoking the 95 | * listener 96 | */ 97 | once(eventType: string, listener: Function, context: ?Object): EmitterSubscription { 98 | return this.addListener(eventType, (...args) => { 99 | this.removeCurrentListener(); 100 | listener.apply(context, args); 101 | }); 102 | } 103 | 104 | /** 105 | * Removes all of the registered listeners, including those registered as 106 | * listener maps. 107 | * 108 | * @param {?string} eventType - Optional name of the event whose registered 109 | * listeners to remove 110 | */ 111 | removeAllListeners(eventType: ?string) { 112 | this._subscriber.removeAllSubscriptions(eventType); 113 | } 114 | 115 | /** 116 | * Provides an API that can be called during an eventing cycle to remove the 117 | * last listener that was invoked. This allows a developer to provide an event 118 | * object that can remove the listener (or listener map) during the 119 | * invocation. 120 | * 121 | * If it is called when not inside of an emitting cycle it will throw. 122 | * 123 | * @throws {Error} When called not during an eventing cycle 124 | * 125 | * @example 126 | * var subscription = emitter.addListenerMap({ 127 | * someEvent: function(data, event) { 128 | * console.log(data); 129 | * emitter.removeCurrentListener(); 130 | * } 131 | * }); 132 | * 133 | * emitter.emit('someEvent', 'abc'); // logs 'abc' 134 | * emitter.emit('someEvent', 'def'); // does not log anything 135 | */ 136 | removeCurrentListener() { 137 | invariant( 138 | !!this._currentSubscription, 139 | 'Not in an emitting cycle; there is no current subscription' 140 | ); 141 | this.removeSubscription(this._currentSubscription); 142 | } 143 | 144 | /** 145 | * Removes a specific subscription. Called by the `remove()` method of the 146 | * subscription itself to ensure any necessary cleanup is performed. 147 | */ 148 | removeSubscription(subscription: EmitterSubscription) { 149 | invariant( 150 | subscription.emitter === this, 151 | 'Subscription does not belong to this emitter.' 152 | ); 153 | this._subscriber.removeSubscription(subscription); 154 | } 155 | 156 | /** 157 | * Returns an array of listeners that are currently registered for the given 158 | * event. 159 | * 160 | * @param {string} eventType - Name of the event to query 161 | * @returns {array} 162 | */ 163 | listeners(eventType: string): [EmitterSubscription] { 164 | const subscriptions: ?[EmitterSubscription] = (this._subscriber.getSubscriptionsForType(eventType): any); 165 | return subscriptions 166 | ? subscriptions.filter(emptyFunction.thatReturnsTrue).map( 167 | function(subscription) { 168 | return subscription.listener; 169 | }) 170 | : []; 171 | } 172 | 173 | /** 174 | * Emits an event of the given type with the given data. All handlers of that 175 | * particular type will be notified. 176 | * 177 | * @param {string} eventType - Name of the event to emit 178 | * @param {...*} Arbitrary arguments to be passed to each registered listener 179 | * 180 | * @example 181 | * emitter.addListener('someEvent', function(message) { 182 | * console.log(message); 183 | * }); 184 | * 185 | * emitter.emit('someEvent', 'abc'); // logs 'abc' 186 | */ 187 | emit(eventType: string) { 188 | const subscriptions: ?[EmitterSubscription] = (this._subscriber.getSubscriptionsForType(eventType): any); 189 | if (subscriptions) { 190 | for (let i = 0, l = subscriptions.length; i < l; i++) { 191 | const subscription = subscriptions[i]; 192 | 193 | // The subscription may have been removed during this event loop. 194 | if (subscription) { 195 | this._currentSubscription = subscription; 196 | subscription.listener.apply( 197 | subscription.context, 198 | Array.prototype.slice.call(arguments, 1) 199 | ); 200 | } 201 | } 202 | this._currentSubscription = null; 203 | } 204 | } 205 | 206 | /** 207 | * Removes the given listener for event of specific type. 208 | * 209 | * @param {string} eventType - Name of the event to emit 210 | * @param {function} listener - Function to invoke when the specified event is 211 | * emitted 212 | * 213 | * @example 214 | * emitter.removeListener('someEvent', function(message) { 215 | * console.log(message); 216 | * }); // removes the listener if already registered 217 | * 218 | */ 219 | removeListener(eventType: String, listener) { 220 | const subscriptions: ?[EmitterSubscription] = (this._subscriber.getSubscriptionsForType(eventType): any); 221 | if (subscriptions) { 222 | for (let i = 0, l = subscriptions.length; i < l; i++) { 223 | const subscription = subscriptions[i]; 224 | 225 | // The subscription may have been removed during this event loop. 226 | // its listener matches the listener in method parameters 227 | if (subscription && subscription.listener === listener) { 228 | subscription.remove(); 229 | } 230 | } 231 | } 232 | } 233 | } 234 | 235 | module.exports = EventEmitter; 236 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # The project is not maintained any more!!! 2 | 3 | # React Native Yet Another Navigator 4 | 5 | ![preview_ios](images/ya_navigator_ios.gif) 6 | ![preview_android](images/ya_navigator_android.gif) 7 | 8 | ## Table of contents 9 | - [Main goals](#main-goals) 10 | - [Dependencies](#dependencies) 11 | - [Installation](#installation) 12 | - [Usage](#usage) 13 | - [Contributing](#contributing) 14 | - [Copyright and license](#copyright-and-license) 15 | 16 | ## Main goals 17 | - the scene can handle navigation bar items events 18 | - the scene can change navigation bar items dynamically 19 | - the scene can show/hide navigation bar dynamically 20 | - the scene itself defines a configuration of the navigation bar 21 | 22 | ## Dependencies 23 | - React Native >= `0.25.1` 24 | - [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons#readme) 25 | 26 | ## Installation 27 | 28 | First of all, this component uses awesome [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons#readme), so you need to install it (it's simple)... 29 | 30 | then, 31 | 32 | ```javascript 33 | npm install react-native-ya-navigator --save 34 | ``` 35 | 36 | ## Usage 37 | 38 | ### YANavigator component 39 | 40 | ```javascript 41 | import YANavigator from 'react-native-ya-navigator'; 42 | 43 | class App extends React.Component { 44 | render() { 45 | return ( 46 | 54 | ) 55 | } 56 | } 57 | ``` 58 | 59 | #### YANavigator [propTypes](https://github.com/xxsnakerxx/react-native-ya-navigator/blob/master/Navigator.js#L436): 60 | - `style` 61 | - `navBarStyle` 62 | - `sceneStyle` 63 | - `initialRoute` 64 | - `initialRouteStack` 65 | - `defaultSceneConfig` (default value is __Navigator.SceneConfigs.PushFromRight__ for `iOS` 66 | and __Navigator.SceneConfigs.FadeAndroid__ for `Android`). 67 | - `useNavigationBar` (useful if you want to render your navBar component on each scene ([ToolbarAndroid](https://facebook.github.io/react-native/docs/toolbarandroid.html#content) for example) instead of the embedded navBar) 68 | - `navBarUnderlay` (the view that will be rendered under all navBar items ([react-native-blur](https://github.com/react-native-fellowship/react-native-blur) for example)) 69 | - `navBarBackBtn` 70 | - `icon` 71 | - `iconWidth` (if you provide custom icon, set this for properly title animations on iOS) 72 | - `textStyle` 73 | - `eachSceneProps` (these props will be passed to each scene, for example, if you are using YANavigator inside tabs, you can to pass 'selected' prop to each scene, so each scene can decide should it updated via shouldComponentUpdate if it was hidden) 74 | - `customEventedProps` (you can pass here array of prop names that you need for link your custom components rendered in navigation bar) 75 | - `navBarFixedHeight` (use this to set custom fixed nav bar height) 76 | - `navBarCrossPlatformUI` (this prop means that title on android will be in center) 77 | 78 | Also `YANavigator` class has static property `navBarHeight` (you can use it in your styles) 79 | 80 | ### Navigation bar configuration in a scene 81 | 82 | Your scene component should define `static` property `navigationDelegate` 83 | 84 | ```javascript 85 | class MyScene extends React.Component { 86 | render() { 87 | return {this.props.children} 88 | } 89 | 90 | static navigationDelegate = { 91 | /** 92 | * if you want to listen nav bar items press events 93 | * you must to provide id key 94 | * @type {Something unique} 95 | */ 96 | id: 'myScene', 97 | sceneConfig: myCustomSceneConfig, 98 | /** 99 | * false by default 100 | * @type {bool} 101 | */ 102 | navBarIsHidden: true|false, 103 | /** 104 | * @type {String} 105 | */ 106 | navBarBackgroundColor: 'red', 107 | /** 108 | * @param {object} props [route props] 109 | * @return {Class|JSX} 110 | */ 111 | renderTitle(props) { 112 | return MyTitleComponent 113 | // or 114 | return 115 | }, 116 | /** 117 | * @param {object} props [route props] 118 | * @return {Class|JSX} 119 | */ 120 | renderNavBarLeftPart(props) { 121 | return MyButtonComponent 122 | // or 123 | return 124 | }, 125 | /** 126 | * @param {object} props [route props] 127 | * @return {Class|JSX} 128 | */ 129 | renderNavBarRightPart(props) { 130 | return MyButtonComponent 131 | // or 132 | return 133 | }, 134 | /** 135 | * will be called first on back android button press 136 | * @param {object} navigator [navigator instance] 137 | */ 138 | onAndroidBackPress(navigator) { 139 | navigator.popToPop(); 140 | } 141 | /** 142 | * If it's true, 'onNavBarBackBtnPress' method will be called on backBtnPress instead 143 | * of navigator.pop() 144 | * false by default 145 | * @type {bool} 146 | */ 147 | overrideBackBtnPress: true|false, 148 | /** 149 | * Tint color of backBtn (applies to icon and text) 150 | * @type {String} 151 | */ 152 | navBarBackBtnColor: 'white', 153 | } 154 | } 155 | ``` 156 | 157 | ### Listening navigation bar items events 158 | 159 | You should wrap your scene component with `YANavigator.Scene` component and set __this__ to `delegate` prop. 160 | __Don't forget to define `id` in the `navigationDelegate`__ 161 | 162 | ```javascript 163 | class MyScene extends React.Component { 164 | render() { 165 | return ( 166 | 168 | {this.props.children} 169 | 170 | ) 171 | } 172 | ``` 173 | 174 | Also `YANavigator.Scene` has `style` prop and `paddingTop` (if it's true(__default value__) then scene will have top padding equals height of the navigation bar, also you can use `YANavigator.navBarHeight` in your styles) 175 | 176 | And one more thing... ;-) 177 | 178 | You can listen when a scene will lose focus via route prop `onSceneWillBlur` 179 | 180 | ```javascript 181 | ... 182 | onLinkPress = (link) => { 183 | tabBar.hide(), 184 | 185 | this.props.navigator.push({ 186 | component: Browser, 187 | props: { 188 | url: link, 189 | /** 190 | * @param {Boolean} true means the scene was popped, false means a new scene was pushed 191 | */ 192 | onSceneWillBlur: (isBack) => tabBar.show(), 193 | }, 194 | }) 195 | } 196 | ... 197 | ``` 198 | 199 | ### How to handle navigation bar items events? 200 | 201 | There are a few simple rules 202 | 203 | - if you pass as navBar item just a `class`, it should have `propTypes` with prop that you want to listen, then you should define method that will be called (`onNavBarTitlePress`, `onNavBarLeftPartPress`, `onNavBarRightPartPress`, `onNavBarTitleChange`, `onNavBarTitleValueChange`, etc...) 204 | - if you pass as navBar item `JSX`, then props that you want to listen should return just a string - __name of the delegate method that will be called__ 205 | - currently supported props `onPress`, `onChange`, `onValueChange`, `onSelection`, `onBlur`, `onFocus`, `onSelectionChange`, `onSubmitEditing` 206 | 207 | ```javascript 208 | class MyNavBarTitle extends React.Component { 209 | render() { 210 | return ( 211 | 212 | {'Default Text'} 213 | 214 | ) 215 | } 216 | 217 | static propTypes = { 218 | onPress: React.PropTypes.func, // required 219 | } 220 | } 221 | 222 | class MyScene extends React.Component { 223 | onNavBarTitlePress(e) { 224 | // press event 225 | console.log(e) 226 | } 227 | 228 | onFirstBtnPress(e) { 229 | alert('Right side - first btn press'); 230 | } 231 | 232 | onSecondBtnPress(e) { 233 | alert('Right side - second btn press'); 234 | } 235 | 236 | onSceneWillFocus() { 237 | console.log('Scene will focus'); 238 | } 239 | 240 | onSceneDidFocus() { 241 | console.log('Scene did focus'); 242 | } 243 | 244 | render() { 245 | return ( 246 | 248 | {this.props.children} 249 | 250 | ) 251 | } 252 | 253 | static navigationDelegate = { 254 | id: 'myScene', 255 | renderTitle() { 256 | return MyNavBarTitle; 257 | }, 258 | renderNavBarLeftPart() { 259 | return ( 260 | 261 | 'onFirstBtnPress'}> 262 | {'1'} 263 | 264 | 'onSecondBtnPress'}> 265 | {'2'} 266 | 267 | 268 | ) 269 | } 270 | } 271 | ``` 272 | 273 | ### How to change navigation bar items dynamically? 274 | 275 | There are two options: 276 | 277 | 1. Each scene can access to navBar items via `ref` and modify its state using standard `setState` method, or can call other methods provided by your component. 278 | 279 | __ref__ generated from the template 280 | 281 | ```javascript 282 | const ref = `${navigationDelegate.id || `${navigator.state.presentedIndex + 1}_scene`}_leftPart|rightPart|title`; 283 | 284 | // usage 285 | this.props.navigator.navBarParts['navDelegateId_rightPart'].doSmth() 286 | // or if navigationDelegate id is not defined 287 | this.props.navigator.navBarParts['1_scene_rightPart'].doSmth() 288 | ``` 289 | 290 | ​ 291 | 292 | 2. If you want re-render your navBar component with new props or just re-render use the template 293 | 294 | ```javascript 295 | YourComponentClass.navigationDelegate.renderTitle = () => // return component here with the new props 296 | 297 | this.props.navigator.forceUpdateNavBar(); 298 | ``` 299 | 300 | Also NavBar component has some helpful methods 301 | - `show`('fade'|'slide') __default behavior is `fade`__ 302 | - `hide`('fade'|'slide') __default behavior is `fade`__ 303 | 304 | ```javascript 305 | this.props.navigator.showNavBar('slide'); 306 | this.props.navigator.hideNavBar('fade'); 307 | ``` 308 | 309 | ```javascript 310 | class MyNavBarTitle extends React.Component { 311 | constructor(props) { 312 | super(props) 313 | 314 | this.state = { 315 | text: props.text 316 | } 317 | } 318 | render() { 319 | return ( 320 | 321 | {this.state.text} 322 | 323 | ) 324 | } 325 | 326 | static propTypes = { 327 | onPress: React.PropTypes.func, 328 | text: React.PropTypes.string, 329 | } 330 | 331 | static defualtProps = { 332 | text: 'Default Text', 333 | } 334 | } 335 | 336 | class MyScene extends React.Component { 337 | onBtnPress() { 338 | MyScene.navigationDelegate.renderTitle = () => 339 | MyScene.navigationDelegate.renderNavBarRightPart = () => ( 340 | 'onBtnPress'}> 341 | {'Updated btn'} 342 | 343 | ); 344 | 345 | this.props.navigator.forceUpdateNavBar(); 346 | } 347 | 348 | onNavBarTitlePress() { 349 | this.props.navigator.navBarParts.myScene_title.setState({ 350 | text: 'Other title', 351 | }) 352 | } 353 | 354 | render() { 355 | return ( 356 | 358 | {this.props.children} 359 | 360 | ) 361 | } 362 | 363 | static navigationDelegate = { 364 | id: 'myScene', 365 | renderTitle() { 366 | return MyNavBarTitle; 367 | }, 368 | renderNavBarRightPart() { 369 | return ( 370 | 'onBtnPress'}> 371 | {'Btn'} 372 | 373 | ) 374 | } 375 | } 376 | ``` 377 | 378 | #### Feel free to go to [example](example) and explore it for more details 379 | 380 | ## Contributing 381 | 382 | Just submit a pull request! 383 | 384 | ## Copyright and license 385 | 386 | Code and documentation copyright 2015 Dmitriy Kolesnikov. Code released under the [MIT license](LICENSE). 387 | -------------------------------------------------------------------------------- /example/example.js: -------------------------------------------------------------------------------- 1 | import YANavigator from 'react-native-ya-navigator'; 2 | 3 | import React from 'react'; 4 | import PropTypes from 'prop-types'; 5 | 6 | import { 7 | StyleSheet, 8 | Text, 9 | View, 10 | StatusBar, 11 | ActivityIndicator, 12 | ScrollView, 13 | TouchableOpacity, 14 | Image, 15 | Animated, 16 | Platform, 17 | } from 'react-native'; 18 | 19 | const { FBNavigator } = YANavigator; 20 | 21 | export default class YANavigatorExample extends React.Component { 22 | render() { 23 | return ( 24 | 37 | ); 38 | } 39 | } 40 | 41 | class View1NavBarLeftBtn extends React.Component { 42 | render() { 43 | return ( 44 | 46 | 50 | {'Left btn'} 51 | 52 | 53 | ) 54 | } 55 | 56 | static propTypes = { 57 | onPress: PropTypes.func, 58 | } 59 | } 60 | 61 | class View1 extends React.Component { 62 | onNavBarLeftPartPress() { 63 | alert('Left side - btn press'); 64 | } 65 | 66 | onFirstBtnPress() { 67 | alert('Right side - first btn press'); 68 | } 69 | 70 | onSecondBtnPress() { 71 | alert('Right side - second btn press'); 72 | } 73 | 74 | render() { 75 | return ( 76 | 79 | 83 | 87 | 88 | {'IS AWESOME!!!'} 89 | 90 | this.props.navigator.push({ 93 | component: View2, 94 | props: { 95 | leftBtnText: 'Back', 96 | rightBtnText: 'Do smth', 97 | }, 98 | })}> 99 | {'Push next view'} 100 | 101 | 102 | ) 103 | } 104 | 105 | static navigationDelegate = { 106 | id: 'view1', 107 | renderTitle() { 108 | return ( 109 | 110 | 111 | {'Title'} 112 | 113 | 114 | ) 115 | }, 116 | renderNavBarLeftPart() { 117 | return View1NavBarLeftBtn; 118 | }, 119 | renderNavBarRightPart() { 120 | return ( 121 | 122 | 'onFirstBtnPress'}> 123 | {'1'} 124 | 125 | 'onSecondBtnPress'}> 126 | {'2'} 127 | 128 | 129 | ) 130 | }, 131 | backBtnText: 'Title', 132 | } 133 | } 134 | 135 | class View2NavBarTitle extends React.Component { 136 | constructor(props) { 137 | super(props); 138 | 139 | this.state = { 140 | text: props.text, 141 | } 142 | } 143 | 144 | render() { 145 | return ( 146 | 147 | {this.state.text} 148 | 149 | ) 150 | } 151 | 152 | static propTypes = { 153 | text: PropTypes.string, 154 | onPress: PropTypes.func, 155 | } 156 | 157 | static defaultProps = { 158 | text: 'Press me!', 159 | } 160 | } 161 | 162 | class View2NavBarRightBtn extends React.Component { 163 | constructor(props) { 164 | super(props); 165 | 166 | this.state = { 167 | fetching: props.fetching, 168 | } 169 | } 170 | 171 | render() { 172 | return ( 173 | 174 | {this.state.fetching ? 175 | : 176 | {this.props.text} 177 | } 178 | 179 | ) 180 | } 181 | 182 | static propTypes = { 183 | fetching: PropTypes.bool, 184 | text: PropTypes.string, 185 | onPress: PropTypes.func, 186 | } 187 | 188 | static defaultProps = { 189 | fetching: false, 190 | } 191 | } 192 | 193 | class View2 extends React.Component { 194 | constructor(props) { 195 | super(props); 196 | 197 | this.state = { 198 | titlePressCount: 0, 199 | fetching: false, 200 | } 201 | } 202 | 203 | onNavBarTitlePress() { 204 | if (!this.state.fetching) { 205 | this.setState({ 206 | titlePressCount: this.state.titlePressCount + 1, 207 | }, () => { 208 | this.props.navigator.navBarParts.view2_title.setState({ 209 | text: `Pressed ${this.state.titlePressCount} time${this.state.titlePressCount > 1 ? 's' : ''}`, 210 | }) 211 | }) 212 | } 213 | } 214 | 215 | onNavBarRightBtnPress() { 216 | alert(this.state.fetching ? 217 | 'Fetching...' : 218 | 'Right btn press handled from scene component!!!'); 219 | } 220 | 221 | render() { 222 | return ( 223 | 226 | 230 | 231 | {'View 2'} 232 | 233 | {this.state.titlePressCount > 0 ? 234 | 235 | {`(Handled press on title ${this.state.titlePressCount} time${this.state.titlePressCount > 1 ? 's' : ''})`} 236 | : 237 | null 238 | } 239 | { 242 | this.setState({ 243 | fetching: !this.state.fetching, 244 | }, () => { 245 | this.props.navigator.navBarParts.view2_rightPart 246 | .setState({ 247 | fetching: this.state.fetching, 248 | }); 249 | 250 | this.props.navigator.navBarParts.view2_title 251 | .setState({ 252 | text: this.state.fetching ? 253 | 'Fetching...' : 254 | this.state.titlePressCount ? 255 | `Pressed ${this.state.titlePressCount} time${this.state.titlePressCount > 1 ? 's' : ''}` : 256 | 'Press me!', 257 | }); 258 | }); 259 | }}> 260 | {`${this.state.fetching ? 'Stop' : 'Start'} fake fetching something`} 261 | 262 | { 265 | View2.navigationDelegate.renderTitle = () => ( 266 | 'onNavBarTitlePress'} 269 | /> 270 | ); 271 | 272 | this.props.navigator.forceUpdateNavBar(); 273 | 274 | this.props.navigator.push({ 275 | component: View3, 276 | }); 277 | }} 278 | > 279 | {'Push view without NavBar'} 280 | 281 | 282 | ) 283 | } 284 | 285 | static navigationDelegate = { 286 | id: 'view2', 287 | renderTitle() { 288 | return View2NavBarTitle; 289 | }, 290 | renderNavBarRightPart(props) { 291 | return ( 292 | 'onNavBarRightBtnPress'}/> 295 | ) 296 | }, 297 | navBarBackgroundColor: '#000', 298 | } 299 | } 300 | 301 | class View3 extends React.Component { 302 | render() { 303 | return ( 304 | 308 | 312 | {'View 3'} 313 | this.props.navigator.pop()}>{'Get back'} 316 | { 319 | this.props.navigator.push({ 320 | component: View4, 321 | }) 322 | }}> 323 | {'Push next view'} 324 | 325 | 326 | ) 327 | } 328 | 329 | static navigationDelegate = { 330 | id: 'view3', 331 | navBarIsHidden: true, 332 | backBtnText: 'Back!', 333 | sceneConfig: Platform.OS === 'ios' && FBNavigator.SceneConfigs.FloatFromBottom, 334 | } 335 | } 336 | 337 | class View4NavBarLogo extends React.Component { 338 | constructor(props) { 339 | super(props); 340 | 341 | this.state = { 342 | angle: new Animated.Value(0), 343 | } 344 | } 345 | 346 | animate = () => { 347 | Animated.timing(this.state.angle, { 348 | toValue: this.state.angle.__getValue() ? 0 : 720, 349 | duration: 2000, 350 | }).start(); 351 | } 352 | 353 | render() { 354 | return ( 355 | 368 | ) 369 | } 370 | } 371 | 372 | class View4 extends React.Component { 373 | render() { 374 | return ( 375 | 378 | 382 | {'View 4'} 383 | { 386 | this.props.navigator.push({ 387 | component: View5, 388 | }) 389 | }}> 390 | {'Push next view'} 391 | 392 | { 395 | this.props.navigator.navBarParts.view4_title.animate(); 396 | }}> 397 | {'Animate logo'} 398 | 399 | { 402 | this.props.navigator.hideNavBar(); 403 | }}> 404 | {'Hide nav bar'} 405 | 406 | { 409 | this.props.navigator.showNavBar(); 410 | }}> 411 | {'Show nav bar'} 412 | 413 | { 416 | this.props.navigator.hideNavBar('slide'); 417 | }}> 418 | {'Hide nav bar - slide'} 419 | 420 | { 423 | this.props.navigator.showNavBar('slide'); 424 | }}> 425 | {'Show nav bar - slide'} 426 | 427 | 428 | ) 429 | } 430 | 431 | static navigationDelegate = { 432 | id: 'view4', 433 | navBarBackgroundColor: 'red', 434 | renderTitle() { 435 | return View4NavBarLogo 436 | }, 437 | renderNavBarRightPart() { 438 | return ( 439 | 444 | 445 | {'Absolutely Any VIEW'} 446 | 447 | 448 | ) 449 | }, 450 | } 451 | } 452 | 453 | class View5 extends React.Component { 454 | onResetBtnPress() { 455 | this.props.navigator.immediatelyResetRouteStack([ 456 | { 457 | component: View1, 458 | }, 459 | ]) 460 | } 461 | 462 | render() { 463 | return ( 464 | 468 | 472 | 476 | 477 | {'Scroll me!'} 478 | { 481 | this.props.navigator.popToTop() 482 | }}> 483 | {'Go to first view'} 484 | 485 | 486 | 487 | 488 | ) 489 | } 490 | 491 | static navigationDelegate = { 492 | id: 'view5', 493 | navBarBackgroundColor: 'rgba(0, 0, 0, 0.2)', 494 | renderNavBarLeftPart() { 495 | return () 496 | }, 497 | renderTitle() { 498 | return ( 499 | 500 | 501 | {'Underlay support'} 502 | 503 | 504 | ) 505 | }, 506 | renderNavBarRightPart() { 507 | return ( 508 | 'onResetBtnPress'}> 509 | {'Reset stack'} 510 | 511 | ) 512 | }, 513 | onAndroidBackPress(navigator) { 514 | navigator.popToTop(); 515 | }, 516 | } 517 | } 518 | 519 | const styles = StyleSheet.create({ 520 | container: { 521 | flex: 1, 522 | justifyContent: 'center', 523 | alignItems: 'center', 524 | backgroundColor: '#F5FCFF', 525 | }, 526 | welcome: { 527 | fontSize: 20, 528 | fontWeight: '700', 529 | textAlign: 'center', 530 | margin: 10, 531 | }, 532 | text: { 533 | fontSize: 17, 534 | textAlign: 'center', 535 | color: '#333333', 536 | marginBottom: 15, 537 | }, 538 | }); 539 | -------------------------------------------------------------------------------- /FBNavigator/NavigatorSceneConfigs.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015, Facebook, Inc. All rights reserved. 3 | * 4 | * Facebook, Inc. ("Facebook") owns all right, title and interest, including 5 | * all intellectual property and other proprietary rights, in and to the React 6 | * Native CustomComponents software (the "Software"). Subject to your 7 | * compliance with these terms, you are hereby granted a non-exclusive, 8 | * worldwide, royalty-free copyright license to (1) use and copy the Software; 9 | * and (2) reproduce and distribute the Software as part of your own software 10 | * ("Your Software"). Facebook reserves all rights not expressly granted to 11 | * you in this license agreement. 12 | * 13 | * THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "AS IS" AND ANY EXPRESS 14 | * OR IMPLIED WARRANTIES (INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES 15 | * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE) ARE DISCLAIMED. 16 | * IN NO EVENT SHALL FACEBOOK OR ITS AFFILIATES, OFFICERS, DIRECTORS OR 17 | * EMPLOYEES BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, 18 | * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, 19 | * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; 20 | * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, 21 | * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR 22 | * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THE SOFTWARE, EVEN IF 23 | * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 24 | * 25 | */ 26 | 'use strict'; 27 | 28 | import { 29 | Dimensions, 30 | I18nManager, 31 | PixelRatio, 32 | } from 'react-native'; 33 | 34 | var buildStyleInterpolator = require('./buildStyleInterpolator'); 35 | 36 | var IS_RTL = I18nManager.isRTL; 37 | 38 | var SCREEN_WIDTH = Dimensions.get('window').width; 39 | var SCREEN_HEIGHT = Dimensions.get('window').height; 40 | var PIXEL_RATIO = PixelRatio.get(); 41 | 42 | var ToTheLeftIOS = { 43 | transformTranslate: { 44 | from: {x: 0, y: 0, z: 0}, 45 | to: {x: -SCREEN_WIDTH * 0.3, y: 0, z: 0}, 46 | min: 0, 47 | max: 1, 48 | type: 'linear', 49 | extrapolate: true, 50 | round: PIXEL_RATIO, 51 | }, 52 | opacity: { 53 | value: 1.0, 54 | type: 'constant', 55 | }, 56 | }; 57 | 58 | var ToTheRightIOS = { 59 | ...ToTheLeftIOS, 60 | transformTranslate: { 61 | from: {x: 0, y: 0, z: 0}, 62 | to: {x: SCREEN_WIDTH * 0.3, y: 0, z: 0}, 63 | }, 64 | }; 65 | 66 | var FadeToTheLeft = { 67 | // Rotate *requires* you to break out each individual component of 68 | // rotation (x, y, z, w) 69 | transformTranslate: { 70 | from: {x: 0, y: 0, z: 0}, 71 | to: {x: -Math.round(SCREEN_WIDTH * 0.3), y: 0, z: 0}, 72 | min: 0, 73 | max: 1, 74 | type: 'linear', 75 | extrapolate: true, 76 | round: PIXEL_RATIO, 77 | }, 78 | // Uncomment to try rotation: 79 | // Quick guide to reasoning about rotations: 80 | // http://www.opengl-tutorial.org/intermediate-tutorials/tutorial-17-quaternions/#Quaternions 81 | // transformRotateRadians: { 82 | // from: {x: 0, y: 0, z: 0, w: 1}, 83 | // to: {x: 0, y: 0, z: -0.47, w: 0.87}, 84 | // min: 0, 85 | // max: 1, 86 | // type: 'linear', 87 | // extrapolate: true 88 | // }, 89 | transformScale: { 90 | from: {x: 1, y: 1, z: 1}, 91 | to: {x: 0.95, y: 0.95, z: 1}, 92 | min: 0, 93 | max: 1, 94 | type: 'linear', 95 | extrapolate: true 96 | }, 97 | opacity: { 98 | from: 1, 99 | to: 0.3, 100 | min: 0, 101 | max: 1, 102 | type: 'linear', 103 | extrapolate: false, 104 | round: 100, 105 | }, 106 | translateX: { 107 | from: 0, 108 | to: -Math.round(SCREEN_WIDTH * 0.3), 109 | min: 0, 110 | max: 1, 111 | type: 'linear', 112 | extrapolate: true, 113 | round: PIXEL_RATIO, 114 | }, 115 | scaleX: { 116 | from: 1, 117 | to: 0.95, 118 | min: 0, 119 | max: 1, 120 | type: 'linear', 121 | extrapolate: true 122 | }, 123 | scaleY: { 124 | from: 1, 125 | to: 0.95, 126 | min: 0, 127 | max: 1, 128 | type: 'linear', 129 | extrapolate: true 130 | }, 131 | }; 132 | 133 | var FadeToTheRight = { 134 | ...FadeToTheLeft, 135 | transformTranslate: { 136 | from: {x: 0, y: 0, z: 0}, 137 | to: {x: Math.round(SCREEN_WIDTH * 0.3), y: 0, z: 0}, 138 | }, 139 | translateX: { 140 | from: 0, 141 | to: Math.round(SCREEN_WIDTH * 0.3), 142 | }, 143 | }; 144 | 145 | var FadeIn = { 146 | opacity: { 147 | from: 0, 148 | to: 1, 149 | min: 0.5, 150 | max: 1, 151 | type: 'linear', 152 | extrapolate: false, 153 | round: 100, 154 | }, 155 | }; 156 | 157 | var FadeOut = { 158 | opacity: { 159 | from: 1, 160 | to: 0, 161 | min: 0, 162 | max: 0.5, 163 | type: 'linear', 164 | extrapolate: false, 165 | round: 100, 166 | }, 167 | }; 168 | 169 | var ToTheLeft = { 170 | transformTranslate: { 171 | from: {x: 0, y: 0, z: 0}, 172 | to: {x: -SCREEN_WIDTH, y: 0, z: 0}, 173 | min: 0, 174 | max: 1, 175 | type: 'linear', 176 | extrapolate: true, 177 | round: PIXEL_RATIO, 178 | }, 179 | opacity: { 180 | value: 1.0, 181 | type: 'constant', 182 | }, 183 | 184 | translateX: { 185 | from: 0, 186 | to: -SCREEN_WIDTH, 187 | min: 0, 188 | max: 1, 189 | type: 'linear', 190 | extrapolate: true, 191 | round: PIXEL_RATIO, 192 | }, 193 | }; 194 | 195 | var ToTheRight = { 196 | transformTranslate: { 197 | from: {x: 0, y: 0, z: 0}, 198 | to: {x: SCREEN_WIDTH, y: 0, z: 0}, 199 | min: 0, 200 | max: 1, 201 | type: 'linear', 202 | extrapolate: true, 203 | round: PIXEL_RATIO, 204 | }, 205 | opacity: { 206 | value: 1.0, 207 | type: 'constant', 208 | }, 209 | 210 | translateX: { 211 | from: 0, 212 | to: SCREEN_WIDTH, 213 | min: 0, 214 | max: 1, 215 | type: 'linear', 216 | extrapolate: true, 217 | round: PIXEL_RATIO, 218 | }, 219 | }; 220 | 221 | var ToTheUp = { 222 | transformTranslate: { 223 | from: {x: 0, y: 0, z: 0}, 224 | to: {x: 0, y: -SCREEN_HEIGHT, z: 0}, 225 | min: 0, 226 | max: 1, 227 | type: 'linear', 228 | extrapolate: true, 229 | round: PIXEL_RATIO, 230 | }, 231 | opacity: { 232 | value: 1.0, 233 | type: 'constant', 234 | }, 235 | translateY: { 236 | from: 0, 237 | to: -SCREEN_HEIGHT, 238 | min: 0, 239 | max: 1, 240 | type: 'linear', 241 | extrapolate: true, 242 | round: PIXEL_RATIO, 243 | }, 244 | }; 245 | 246 | var ToTheDown = { 247 | transformTranslate: { 248 | from: {x: 0, y: 0, z: 0}, 249 | to: {x: 0, y: SCREEN_HEIGHT, z: 0}, 250 | min: 0, 251 | max: 1, 252 | type: 'linear', 253 | extrapolate: true, 254 | round: PIXEL_RATIO, 255 | }, 256 | opacity: { 257 | value: 1.0, 258 | type: 'constant', 259 | }, 260 | translateY: { 261 | from: 0, 262 | to: SCREEN_HEIGHT, 263 | min: 0, 264 | max: 1, 265 | type: 'linear', 266 | extrapolate: true, 267 | round: PIXEL_RATIO, 268 | }, 269 | }; 270 | 271 | var FromTheRight = { 272 | opacity: { 273 | value: 1.0, 274 | type: 'constant', 275 | }, 276 | 277 | transformTranslate: { 278 | from: {x: SCREEN_WIDTH, y: 0, z: 0}, 279 | to: {x: 0, y: 0, z: 0}, 280 | min: 0, 281 | max: 1, 282 | type: 'linear', 283 | extrapolate: true, 284 | round: PIXEL_RATIO, 285 | }, 286 | 287 | translateX: { 288 | from: SCREEN_WIDTH, 289 | to: 0, 290 | min: 0, 291 | max: 1, 292 | type: 'linear', 293 | extrapolate: true, 294 | round: PIXEL_RATIO, 295 | }, 296 | 297 | scaleX: { 298 | value: 1, 299 | type: 'constant', 300 | }, 301 | scaleY: { 302 | value: 1, 303 | type: 'constant', 304 | }, 305 | }; 306 | 307 | var FromTheLeft = { 308 | ...FromTheRight, 309 | transformTranslate: { 310 | from: {x: -SCREEN_WIDTH, y: 0, z: 0}, 311 | to: {x: 0, y: 0, z: 0}, 312 | min: 0, 313 | max: 1, 314 | type: 'linear', 315 | extrapolate: true, 316 | round: PIXEL_RATIO, 317 | }, 318 | translateX: { 319 | from: -SCREEN_WIDTH, 320 | to: 0, 321 | min: 0, 322 | max: 1, 323 | type: 'linear', 324 | extrapolate: true, 325 | round: PIXEL_RATIO, 326 | }, 327 | }; 328 | 329 | var FromTheDown = { 330 | ...FromTheRight, 331 | transformTranslate: { 332 | from: {y: SCREEN_HEIGHT, x: 0, z: 0}, 333 | to: {x: 0, y: 0, z: 0}, 334 | min: 0, 335 | max: 1, 336 | type: 'linear', 337 | extrapolate: true, 338 | round: PIXEL_RATIO, 339 | }, 340 | translateY: { 341 | from: SCREEN_HEIGHT, 342 | to: 0, 343 | min: 0, 344 | max: 1, 345 | type: 'linear', 346 | extrapolate: true, 347 | round: PIXEL_RATIO, 348 | }, 349 | }; 350 | 351 | var FromTheTop = { 352 | ...FromTheRight, 353 | transformTranslate: { 354 | from: {y: -SCREEN_HEIGHT, x: 0, z: 0}, 355 | to: {x: 0, y: 0, z: 0}, 356 | min: 0, 357 | max: 1, 358 | type: 'linear', 359 | extrapolate: true, 360 | round: PIXEL_RATIO, 361 | }, 362 | translateY: { 363 | from: -SCREEN_HEIGHT, 364 | to: 0, 365 | min: 0, 366 | max: 1, 367 | type: 'linear', 368 | extrapolate: true, 369 | round: PIXEL_RATIO, 370 | }, 371 | }; 372 | 373 | var ToTheBack = { 374 | // Rotate *requires* you to break out each individual component of 375 | // rotation (x, y, z, w) 376 | transformTranslate: { 377 | from: {x: 0, y: 0, z: 0}, 378 | to: {x: 0, y: 0, z: 0}, 379 | min: 0, 380 | max: 1, 381 | type: 'linear', 382 | extrapolate: true, 383 | round: PIXEL_RATIO, 384 | }, 385 | transformScale: { 386 | from: {x: 1, y: 1, z: 1}, 387 | to: {x: 0.95, y: 0.95, z: 1}, 388 | min: 0, 389 | max: 1, 390 | type: 'linear', 391 | extrapolate: true 392 | }, 393 | opacity: { 394 | from: 1, 395 | to: 0.3, 396 | min: 0, 397 | max: 1, 398 | type: 'linear', 399 | extrapolate: false, 400 | round: 100, 401 | }, 402 | scaleX: { 403 | from: 1, 404 | to: 0.95, 405 | min: 0, 406 | max: 1, 407 | type: 'linear', 408 | extrapolate: true 409 | }, 410 | scaleY: { 411 | from: 1, 412 | to: 0.95, 413 | min: 0, 414 | max: 1, 415 | type: 'linear', 416 | extrapolate: true 417 | }, 418 | }; 419 | 420 | var FromTheFront = { 421 | opacity: { 422 | value: 1.0, 423 | type: 'constant', 424 | }, 425 | 426 | transformTranslate: { 427 | from: {x: 0, y: SCREEN_HEIGHT, z: 0}, 428 | to: {x: 0, y: 0, z: 0}, 429 | min: 0, 430 | max: 1, 431 | type: 'linear', 432 | extrapolate: true, 433 | round: PIXEL_RATIO, 434 | }, 435 | translateY: { 436 | from: SCREEN_HEIGHT, 437 | to: 0, 438 | min: 0, 439 | max: 1, 440 | type: 'linear', 441 | extrapolate: true, 442 | round: PIXEL_RATIO, 443 | }, 444 | scaleX: { 445 | value: 1, 446 | type: 'constant', 447 | }, 448 | scaleY: { 449 | value: 1, 450 | type: 'constant', 451 | }, 452 | }; 453 | 454 | var ToTheBackAndroid = { 455 | opacity: { 456 | value: 1, 457 | type: 'constant', 458 | }, 459 | }; 460 | 461 | var FromTheFrontAndroid = { 462 | opacity: { 463 | from: 0, 464 | to: 1, 465 | min: 0.5, 466 | max: 1, 467 | type: 'linear', 468 | extrapolate: false, 469 | round: 100, 470 | }, 471 | transformTranslate: { 472 | from: {x: 0, y: 100, z: 0}, 473 | to: {x: 0, y: 0, z: 0}, 474 | min: 0, 475 | max: 1, 476 | type: 'linear', 477 | extrapolate: true, 478 | round: PIXEL_RATIO, 479 | }, 480 | translateY: { 481 | from: 100, 482 | to: 0, 483 | min: 0, 484 | max: 1, 485 | type: 'linear', 486 | extrapolate: true, 487 | round: PIXEL_RATIO, 488 | }, 489 | }; 490 | 491 | var BaseOverswipeConfig = { 492 | frictionConstant: 1, 493 | frictionByDistance: 1.5, 494 | }; 495 | 496 | var BaseLeftToRightGesture = { 497 | 498 | // If the gesture can end and restart during one continuous touch 499 | isDetachable: false, 500 | 501 | // How far the swipe must drag to start transitioning 502 | gestureDetectMovement: 2, 503 | 504 | // Amplitude of release velocity that is considered still 505 | notMoving: 0.3, 506 | 507 | // Fraction of directional move required. 508 | directionRatio: 0.66, 509 | 510 | // Velocity to transition with when the gesture release was "not moving" 511 | snapVelocity: 2, 512 | 513 | // Region that can trigger swipe. iOS default is 30px from the left edge 514 | edgeHitWidth: 30, 515 | 516 | // Ratio of gesture completion when non-velocity release will cause action 517 | stillCompletionRatio: 3 / 5, 518 | 519 | fullDistance: SCREEN_WIDTH, 520 | 521 | direction: 'left-to-right', 522 | 523 | }; 524 | 525 | var BaseRightToLeftGesture = { 526 | ...BaseLeftToRightGesture, 527 | direction: 'right-to-left', 528 | }; 529 | 530 | var BaseDownUpGesture = { 531 | ...BaseLeftToRightGesture, 532 | fullDistance: SCREEN_HEIGHT, 533 | direction: 'bottom-to-top', 534 | }; 535 | 536 | var BaseUpDownGesture = { 537 | ...BaseLeftToRightGesture, 538 | fullDistance: SCREEN_HEIGHT, 539 | direction: 'top-to-bottom', 540 | }; 541 | 542 | // For RTL experiment, we need to swap all the Left and Right gesture and animation. 543 | // So we create a direction mapping for both LTR and RTL, and change left/right to start/end. 544 | let directionMapping = { 545 | ToTheStartIOS: ToTheLeftIOS, 546 | ToTheEndIOS: ToTheRightIOS, 547 | FadeToTheStart: FadeToTheLeft, 548 | FadeToTheEnd: FadeToTheRight, 549 | ToTheStart: ToTheLeft, 550 | ToTheEnd: ToTheRight, 551 | FromTheStart: FromTheLeft, 552 | FromTheEnd: FromTheRight, 553 | BaseStartToEndGesture: BaseLeftToRightGesture, 554 | BaseEndToStartGesture: BaseRightToLeftGesture, 555 | }; 556 | 557 | if (IS_RTL) { 558 | directionMapping = { 559 | ToTheStartIOS: ToTheRightIOS, 560 | ToTheEndIOS: ToTheLeftIOS, 561 | FadeToTheStart: FadeToTheRight, 562 | FadeToTheEnd: FadeToTheLeft, 563 | ToTheStart: ToTheRight, 564 | ToTheEnd: ToTheLeft, 565 | FromTheStart: FromTheRight, 566 | FromTheEnd: FromTheLeft, 567 | BaseStartToEndGesture: BaseRightToLeftGesture, 568 | BaseEndToStartGesture: BaseLeftToRightGesture, 569 | }; 570 | } 571 | 572 | var BaseConfig = { 573 | // A list of all gestures that are enabled on this scene 574 | gestures: { 575 | pop: directionMapping.BaseStartToEndGesture, 576 | }, 577 | 578 | // Rebound spring parameters when transitioning FROM this scene 579 | springFriction: 26, 580 | springTension: 200, 581 | 582 | // Velocity to start at when transitioning without gesture 583 | defaultTransitionVelocity: 1.5, 584 | 585 | // Animation interpolators for horizontal transitioning: 586 | animationInterpolators: { 587 | into: buildStyleInterpolator(directionMapping.FromTheEnd), 588 | out: buildStyleInterpolator(directionMapping.FadeToTheStart), 589 | }, 590 | }; 591 | 592 | var NavigatorSceneConfigs = { 593 | PushFromRight: { 594 | ...BaseConfig, 595 | animationInterpolators: { 596 | into: buildStyleInterpolator(directionMapping.FromTheEnd), 597 | out: buildStyleInterpolator(directionMapping.ToTheStartIOS), 598 | }, 599 | }, 600 | PushFromLeft: { 601 | ...BaseConfig, 602 | animationInterpolators: { 603 | into: buildStyleInterpolator(directionMapping.FromTheStart), 604 | out: buildStyleInterpolator(directionMapping.ToTheEndIOS), 605 | }, 606 | }, 607 | FloatFromRight: { 608 | ...BaseConfig, 609 | // We will want to customize this soon 610 | }, 611 | FloatFromLeft: { 612 | ...BaseConfig, 613 | gestures: { 614 | pop: directionMapping.BaseEndToStartGesture, 615 | }, 616 | animationInterpolators: { 617 | into: buildStyleInterpolator(directionMapping.FromTheStart), 618 | out: buildStyleInterpolator(directionMapping.FadeToTheEnd), 619 | }, 620 | }, 621 | FloatFromBottom: { 622 | ...BaseConfig, 623 | gestures: { 624 | pop: { 625 | ...directionMapping.BaseStartToEndGesture, 626 | edgeHitWidth: 150, 627 | direction: 'top-to-bottom', 628 | fullDistance: SCREEN_HEIGHT, 629 | } 630 | }, 631 | animationInterpolators: { 632 | into: buildStyleInterpolator(FromTheFront), 633 | out: buildStyleInterpolator(ToTheBack), 634 | }, 635 | }, 636 | FloatFromBottomAndroid: { 637 | ...BaseConfig, 638 | gestures: null, 639 | defaultTransitionVelocity: 3, 640 | springFriction: 20, 641 | animationInterpolators: { 642 | into: buildStyleInterpolator(FromTheFrontAndroid), 643 | out: buildStyleInterpolator(ToTheBackAndroid), 644 | }, 645 | }, 646 | FadeAndroid: { 647 | ...BaseConfig, 648 | gestures: null, 649 | animationInterpolators: { 650 | into: buildStyleInterpolator(FadeIn), 651 | out: buildStyleInterpolator(FadeOut), 652 | }, 653 | }, 654 | SwipeFromLeft: { 655 | ...BaseConfig, 656 | gestures: { 657 | jumpBack: { 658 | ...directionMapping.BaseEndToStartGesture, 659 | overswipe: BaseOverswipeConfig, 660 | edgeHitWidth: null, 661 | isDetachable: true, 662 | }, 663 | jumpForward: { 664 | ...directionMapping.BaseStartToEndGesture, 665 | overswipe: BaseOverswipeConfig, 666 | edgeHitWidth: null, 667 | isDetachable: true, 668 | }, 669 | }, 670 | animationInterpolators: { 671 | into: buildStyleInterpolator(directionMapping.FromTheStart), 672 | out: buildStyleInterpolator(directionMapping.ToTheEnd), 673 | }, 674 | }, 675 | HorizontalSwipeJump: { 676 | ...BaseConfig, 677 | gestures: { 678 | jumpBack: { 679 | ...directionMapping.BaseStartToEndGesture, 680 | overswipe: BaseOverswipeConfig, 681 | edgeHitWidth: null, 682 | isDetachable: true, 683 | }, 684 | jumpForward: { 685 | ...directionMapping.BaseEndToStartGesture, 686 | overswipe: BaseOverswipeConfig, 687 | edgeHitWidth: null, 688 | isDetachable: true, 689 | }, 690 | }, 691 | animationInterpolators: { 692 | into: buildStyleInterpolator(directionMapping.FromTheEnd), 693 | out: buildStyleInterpolator(directionMapping.ToTheStart), 694 | }, 695 | }, 696 | HorizontalSwipeJumpFromRight: { 697 | ...BaseConfig, 698 | gestures: { 699 | jumpBack: { 700 | ...directionMapping.BaseEndToStartGesture, 701 | overswipe: BaseOverswipeConfig, 702 | edgeHitWidth: null, 703 | isDetachable: true, 704 | }, 705 | jumpForward: { 706 | ...directionMapping.BaseStartToEndGesture, 707 | overswipe: BaseOverswipeConfig, 708 | edgeHitWidth: null, 709 | isDetachable: true, 710 | }, 711 | pop: directionMapping.BaseEndToStartGesture, 712 | }, 713 | animationInterpolators: { 714 | into: buildStyleInterpolator(directionMapping.FromTheStart), 715 | out: buildStyleInterpolator(directionMapping.FadeToTheEnd), 716 | }, 717 | }, 718 | HorizontalSwipeJumpFromLeft: { 719 | ...BaseConfig, 720 | gestures: { 721 | jumpBack: { 722 | ...directionMapping.BaseEndToStartGesture, 723 | overswipe: BaseOverswipeConfig, 724 | edgeHitWidth: null, 725 | isDetachable: true, 726 | }, 727 | jumpForward: { 728 | ...directionMapping.BaseStartToEndGesture, 729 | overswipe: BaseOverswipeConfig, 730 | edgeHitWidth: null, 731 | isDetachable: true, 732 | }, 733 | pop: directionMapping.BaseEndToStartGesture, 734 | }, 735 | animationInterpolators: { 736 | into: buildStyleInterpolator(directionMapping.FromTheStart), 737 | out: buildStyleInterpolator(directionMapping.ToTheEnd), 738 | }, 739 | }, 740 | VerticalUpSwipeJump: { 741 | ...BaseConfig, 742 | gestures: { 743 | jumpBack: { 744 | ...BaseUpDownGesture, 745 | overswipe: BaseOverswipeConfig, 746 | edgeHitWidth: null, 747 | isDetachable: true, 748 | }, 749 | jumpForward: { 750 | ...BaseDownUpGesture, 751 | overswipe: BaseOverswipeConfig, 752 | edgeHitWidth: null, 753 | isDetachable: true, 754 | }, 755 | }, 756 | animationInterpolators: { 757 | into: buildStyleInterpolator(FromTheDown), 758 | out: buildStyleInterpolator(ToTheUp), 759 | }, 760 | }, 761 | VerticalDownSwipeJump: { 762 | ...BaseConfig, 763 | gestures: { 764 | jumpBack: { 765 | ...BaseDownUpGesture, 766 | overswipe: BaseOverswipeConfig, 767 | edgeHitWidth: null, 768 | isDetachable: true, 769 | }, 770 | jumpForward: { 771 | ...BaseUpDownGesture, 772 | overswipe: BaseOverswipeConfig, 773 | edgeHitWidth: null, 774 | isDetachable: true, 775 | }, 776 | }, 777 | animationInterpolators: { 778 | into: buildStyleInterpolator(FromTheTop), 779 | out: buildStyleInterpolator(ToTheDown), 780 | }, 781 | }, 782 | }; 783 | 784 | module.exports = NavigatorSceneConfigs; 785 | --------------------------------------------------------------------------------