├── .gitignore ├── README.md ├── RNTouchThroughView.podspec ├── android ├── build.gradle ├── gradle.properties ├── gradle │ └── wrapper │ │ ├── gradle-wrapper.jar │ │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat ├── settings.gradle └── src │ └── main │ ├── AndroidManifest.xml │ └── java │ └── com │ └── rome2rio │ └── android │ └── reactnativetouchthroughview │ ├── TouchThroughTouchHandler.java │ ├── TouchThroughTouchHandlerInterface.java │ ├── TouchThroughTouchHandlerListener.java │ ├── TouchThroughView.java │ ├── TouchThroughViewManager.java │ ├── TouchThroughViewPackage.java │ ├── TouchThroughWrapper.java │ └── TouchThroughWrapperManager.java ├── components ├── TouchThroughView.js └── TouchThroughWrapper.js ├── example-react-native-navigation ├── README.md ├── android │ ├── .project │ ├── .settings │ │ └── org.eclipse.buildship.core.prefs │ ├── app │ │ ├── .classpath │ │ ├── .project │ │ ├── .settings │ │ │ └── org.eclipse.buildship.core.prefs │ │ ├── build.gradle │ │ ├── proguard-rules.pro │ │ └── src │ │ │ └── main │ │ │ ├── AndroidManifest.xml │ │ │ ├── ic_launcher-web.png │ │ │ ├── java │ │ │ └── com │ │ │ │ └── example │ │ │ │ ├── MainActivity.java │ │ │ │ ├── MainApplication.java │ │ │ │ └── TouchThroughActivity.java │ │ │ └── res │ │ │ ├── mipmap-hdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-mdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xhdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xxhdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xxxhdpi │ │ │ └── ic_launcher.png │ │ │ └── values │ │ │ └── strings.xml │ ├── build.gradle │ ├── gradle.properties │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── gradlew │ ├── gradlew.bat │ └── settings.gradle ├── img │ ├── beach.jpg │ ├── colors.png │ ├── delete@1x.png │ ├── delete@2x.png │ ├── edit@1x.png │ ├── edit@2x.png │ ├── gyro_header.jpg │ ├── heroes │ │ ├── bouny_hunter.png │ │ ├── earthspirit.png │ │ ├── oracle.png │ │ ├── skywrath_mage.png │ │ └── templar_assasin.png │ ├── list@1.5x.android.png │ ├── list@1x.png │ ├── list@2x.android.png │ ├── list@3x.android.png │ ├── list@4x.android.png │ ├── masonry │ │ ├── 158xD4xbeh.jpeg │ │ ├── 37r6Cqp1B8.jpeg │ │ ├── 5Gi8kova3k.jpeg │ │ ├── 61mpAVRV73.jpeg │ │ ├── A4g0lZ33Z8.jpeg │ │ ├── AdGXmD1CH6.jpeg │ │ ├── Cfw87359UT.jpeg │ │ ├── N30E32431C.jpeg │ │ ├── a848dHxA4e.jpeg │ │ ├── j51Pva1P8L.jpeg │ │ ├── kVN0FryOZk.jpeg │ │ ├── pqgylg80SD.jpeg │ │ ├── rVOcz7rd0z.jpeg │ │ ├── ri90ueind7.jpeg │ │ ├── v8KLi2f0Tr.jpeg │ │ └── xU42hx19BB.jpeg │ ├── navicon_add@2x.android.png │ ├── navicon_add@2x.ios.png │ ├── navicon_add@3x.android.png │ ├── navicon_edit@2x.png │ ├── navicon_menu@2x.png │ ├── one@1.5x.android.png │ ├── one@1x.android.png │ ├── one@2x.ios.png │ ├── one@3x.android.png │ ├── one@4x.android.png │ ├── one_selected@2x.png │ ├── swap@1x.png │ ├── swap@2x.png │ ├── three@2x.png │ ├── three_selected@2x.png │ ├── transform@1x.png │ ├── transform@2x.png │ ├── two@2x.png │ └── two_selected@2x.png ├── index.js ├── ios │ ├── example.xcodeproj │ │ ├── project.pbxproj │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ ├── example.xcscheme │ │ │ └── example_release.xcscheme │ ├── example │ │ ├── AppDelegate.h │ │ ├── AppDelegate.m │ │ ├── Base.lproj │ │ │ └── LaunchScreen.xib │ │ ├── Images.xcassets │ │ │ └── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ ├── Info.plist │ │ └── main.m │ └── exampleTests │ │ ├── Info.plist │ │ └── exampleTests.m ├── package.json ├── scripts │ └── postinstall.js ├── src │ ├── app.js │ ├── components │ │ └── Row.js │ └── screens │ │ ├── Actions.js │ │ ├── NavigationTypes.js │ │ ├── Transitions.js │ │ ├── index.js │ │ ├── transitions │ │ ├── CollapsingHeader.js │ │ ├── SharedElementTransitions.js │ │ └── sharedElementTransitions │ │ │ ├── Cards │ │ │ ├── Cards.js │ │ │ └── Info.js │ │ │ ├── Masonry │ │ │ ├── Item.js │ │ │ ├── Masonry.js │ │ │ └── images.js │ │ │ └── Profiles │ │ │ ├── Profiles.js │ │ │ └── data.js │ │ └── types │ │ ├── CustomButtonScreen.js │ │ ├── CustomTopBar.js │ │ ├── CustomTopBarScreen.js │ │ ├── Drawer.js │ │ ├── DummyScreen.js │ │ ├── LightBox.js │ │ ├── ListScreen.js │ │ ├── Modal.js │ │ ├── Notification.js │ │ ├── Push.js │ │ ├── TopTabs.js │ │ └── tabs │ │ ├── TabOne.js │ │ └── TabTwo.js ├── test │ └── e2e │ │ ├── init.js │ │ ├── mocha.opts │ │ └── sanity.test.js └── yarn.lock ├── example ├── ReactNativeTouchThroughViewExample.js └── album.jpg ├── index.js ├── ios ├── R2RTouchThroughView.h ├── R2RTouchThroughView.m ├── R2RTouchThroughViewManager.h ├── R2RTouchThroughViewManager.m ├── R2RTouchThroughWrapper.h ├── R2RTouchThroughWrapper.m ├── R2RTouchThroughWrapperManager.h ├── R2RTouchThroughWrapperManager.m └── ReactNativeTouchThroughView.xcodeproj │ ├── project.pbxproj │ ├── project.xcworkspace │ ├── contents.xcworkspacedata │ └── xcuserdata │ │ └── work.xcuserdatad │ │ └── UserInterfaceState.xcuserstate │ └── xcuserdata │ └── work.xcuserdatad │ └── xcschemes │ ├── ReactNativeTouchThroughView.xcscheme │ └── xcschememanagement.plist └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | # Xcode 2 | # 3 | build/ 4 | *.pbxuser 5 | !default.pbxuser 6 | *.mode1v3 7 | !default.mode1v3 8 | *.mode2v3 9 | !default.mode2v3 10 | *.perspectivev3 11 | !default.perspectivev3 12 | xcuserdata 13 | *.xccheckout 14 | *.moved-aside 15 | DerivedData 16 | *.hmap 17 | *.ipa 18 | *.xcuserstate 19 | project.xcworkspace 20 | 21 | # Android/IJ 22 | # 23 | .idea 24 | *.iml 25 | .gradle 26 | local.properties 27 | android/build 28 | **/.DS_Store 29 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-native-touch-through-view [![npm version](https://img.shields.io/npm/v/react-native-touch-through-view.svg?style=flat)](https://www.npmjs.com/package/react-native-touch-through-view) 2 | 3 | React Native Touch Through View is a simple component library that allows for 4 | scroll views and table views to scroll over interactable content without poor 5 | performing size and bounds animations. 6 | 7 | You can achieve Spotify or Apple maps style drawer effects with the full 8 | performance of UIScrollView and without laggy onScroll events. 9 | 10 | ![Spotify style](http://i.imgur.com/5LaZvUQ.gif) 11 | ![Maps style](http://i.imgur.com/sfFI5CA.gif) 12 | 13 | Built to solve issues like 14 | 15 | ## Installation 16 | Simply use `react-native link react-native-touch-through-view` to add the library 17 | to your project. 18 | 19 | ## How to use it 20 | 1. Import the library `import { TouchThroughView, TouchThroughWrapper } from 'react-native-touch-through-view';` 21 | 1. Wrap your ListView or ScrollView in the `` element. 22 | 1. Add `` elements wherever you want the users touch to be passed through to the view behind. You can style these views just like any other view and put them anywhere in the view you want. 23 | 24 | eg. 25 | ```javascript 26 | // Markup for listview with a touch through header. 27 | 28 | } 32 | renderRow={(rowData) => { 33 | return ( 34 | 35 | {rowData} 36 | 37 | ) 38 | }}> 39 | 40 | 41 | ``` 42 | 43 | Have a look at the demo in the example directory if you need more help. 44 | 45 | ## Android Installation 46 | For Android you have to do the normal react-native link. Also you have to change MainActivity inside you project. See example below 47 | 48 | ```java 49 | package com.reactnativetouchthroughviewexample; 50 | 51 | import com.facebook.react.ReactActivity; 52 | import android.view.MotionEvent; 53 | import com.rome2rio.android.reactnativetouchthroughview.TouchThroughTouchHandlerInterface; 54 | import com.rome2rio.android.reactnativetouchthroughview.TouchThroughTouchHandler; 55 | 56 | public class MainActivity extends ReactActivity implements TouchThroughTouchHandlerInterface { 57 | 58 | private TouchThroughTouchHandler touchThroughTouchHandler = new TouchThroughTouchHandler(); 59 | 60 | /** 61 | * Returns the name of the main component registered from JavaScript. 62 | * This is used to schedule rendering of the component. 63 | */ 64 | @Override 65 | protected String getMainComponentName() { 66 | return "reactnativetouchthroughviewexample"; 67 | } 68 | 69 | public TouchThroughTouchHandler getTouchThroughTouchHandler() { 70 | return touchThroughTouchHandler; 71 | } 72 | 73 | @Override 74 | public boolean dispatchTouchEvent(MotionEvent ev) { 75 | touchThroughTouchHandler.handleTouchEvent(ev); 76 | 77 | return super.dispatchTouchEvent(ev); 78 | } 79 | } 80 | 81 | ``` 82 | 83 | ## Credits 84 | Brought to you by the team at [Rome2rio](https://www.rome2rio.com). Find out how to join our team at 85 | -------------------------------------------------------------------------------- /RNTouchThroughView.podspec: -------------------------------------------------------------------------------- 1 | require 'json' 2 | package = JSON.parse(File.read('package.json')) 3 | 4 | Pod::Spec.new do |s| 5 | s.name = "RNTouchThroughView" 6 | s.version = package["version"] 7 | s.summary = package["description"] 8 | s.requires_arc = true 9 | s.license = package["license"] 10 | s.homepage = 'n/a' 11 | s.authors = { package["author"] => package["repository"]["url"] } 12 | s.source = { :git => package["repository"]["url"] } 13 | s.source_files = ['ios/*.{h,m}'] 14 | s.platform = :ios, "8.0" 15 | s.dependency 'React' 16 | end 17 | -------------------------------------------------------------------------------- /android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | apply plugin: 'com.android.library' 3 | 4 | def DEFAULT_COMPILE_SDK_VERSION = 23 5 | def DEFAULT_BUILD_TOOLS_VERSION = "23.0.3" 6 | def DEFAULT_TARGET_SDK_VERSION = 23 7 | 8 | buildscript { 9 | repositories { 10 | google() 11 | jcenter() 12 | } 13 | dependencies { 14 | classpath 'com.android.tools.build:gradle:2.1.0' 15 | 16 | // NOTE: Do not place your application dependencies here; they belong 17 | // in the individual module build.gradle files 18 | } 19 | } 20 | 21 | allprojects { 22 | repositories { 23 | google() 24 | mavenLocal() 25 | jcenter() 26 | maven { 27 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 28 | url "$projectDir/../../node_modules/react-native/android" 29 | } 30 | } 31 | } 32 | 33 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 34 | 35 | 36 | android { 37 | compileSdkVersion project.hasProperty('compileSdkVersion') ? project.compileSdkVersion : DEFAULT_COMPILE_SDK_VERSION 38 | buildToolsVersion project.hasProperty('buildToolsVersion') ? project.buildToolsVersion : DEFAULT_BUILD_TOOLS_VERSION 39 | 40 | defaultConfig { 41 | minSdkVersion 16 42 | targetSdkVersion project.hasProperty('targetSdkVersion') ? project.targetSdkVersion : DEFAULT_TARGET_SDK_VERSION 43 | } 44 | 45 | lintOptions { 46 | disable 'InvalidPackage' 47 | } 48 | } 49 | 50 | dependencies { 51 | compile "com.facebook.react:react-native:+" 52 | } 53 | -------------------------------------------------------------------------------- /android/gradle.properties: -------------------------------------------------------------------------------- 1 | VERSION_CODE=2 2 | VERSION_NAME=0.1.2 3 | GROUP=com.rome2rio.android 4 | 5 | POM_NAME=ReactNative Touch Through View component library 6 | POM_ARTIFACT_ID=react-native-touch-through-view 7 | -------------------------------------------------------------------------------- /android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | #Mon Mar 06 12:27:15 AEDT 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-2.10-all.zip 7 | -------------------------------------------------------------------------------- /android/gradlew: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | ############################################################################## 4 | ## 5 | ## Gradle start up script for UN*X 6 | ## 7 | ############################################################################## 8 | 9 | # Attempt to set APP_HOME 10 | # Resolve links: $0 may be a link 11 | PRG="$0" 12 | # Need this for relative symlinks. 13 | while [ -h "$PRG" ] ; do 14 | ls=`ls -ld "$PRG"` 15 | link=`expr "$ls" : '.*-> \(.*\)$'` 16 | if expr "$link" : '/.*' > /dev/null; then 17 | PRG="$link" 18 | else 19 | PRG=`dirname "$PRG"`"/$link" 20 | fi 21 | done 22 | SAVED="`pwd`" 23 | cd "`dirname \"$PRG\"`/" >/dev/null 24 | APP_HOME="`pwd -P`" 25 | cd "$SAVED" >/dev/null 26 | 27 | APP_NAME="Gradle" 28 | APP_BASE_NAME=`basename "$0"` 29 | 30 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 31 | DEFAULT_JVM_OPTS="" 32 | 33 | # Use the maximum available, or set MAX_FD != -1 to use that value. 34 | MAX_FD="maximum" 35 | 36 | warn ( ) { 37 | echo "$*" 38 | } 39 | 40 | die ( ) { 41 | echo 42 | echo "$*" 43 | echo 44 | exit 1 45 | } 46 | 47 | # OS specific support (must be 'true' or 'false'). 48 | cygwin=false 49 | msys=false 50 | darwin=false 51 | nonstop=false 52 | case "`uname`" in 53 | CYGWIN* ) 54 | cygwin=true 55 | ;; 56 | Darwin* ) 57 | darwin=true 58 | ;; 59 | MINGW* ) 60 | msys=true 61 | ;; 62 | NONSTOP* ) 63 | nonstop=true 64 | ;; 65 | esac 66 | 67 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 68 | 69 | # Determine the Java command to use to start the JVM. 70 | if [ -n "$JAVA_HOME" ] ; then 71 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 72 | # IBM's JDK on AIX uses strange locations for the executables 73 | JAVACMD="$JAVA_HOME/jre/sh/java" 74 | else 75 | JAVACMD="$JAVA_HOME/bin/java" 76 | fi 77 | if [ ! -x "$JAVACMD" ] ; then 78 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 79 | 80 | Please set the JAVA_HOME variable in your environment to match the 81 | location of your Java installation." 82 | fi 83 | else 84 | JAVACMD="java" 85 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 86 | 87 | Please set the JAVA_HOME variable in your environment to match the 88 | location of your Java installation." 89 | fi 90 | 91 | # Increase the maximum file descriptors if we can. 92 | if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then 93 | MAX_FD_LIMIT=`ulimit -H -n` 94 | if [ $? -eq 0 ] ; then 95 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then 96 | MAX_FD="$MAX_FD_LIMIT" 97 | fi 98 | ulimit -n $MAX_FD 99 | if [ $? -ne 0 ] ; then 100 | warn "Could not set maximum file descriptor limit: $MAX_FD" 101 | fi 102 | else 103 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" 104 | fi 105 | fi 106 | 107 | # For Darwin, add options to specify how the application appears in the dock 108 | if $darwin; then 109 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" 110 | fi 111 | 112 | # For Cygwin, switch paths to Windows format before running java 113 | if $cygwin ; then 114 | APP_HOME=`cygpath --path --mixed "$APP_HOME"` 115 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` 116 | JAVACMD=`cygpath --unix "$JAVACMD"` 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 | # Escape application args 158 | save ( ) { 159 | for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done 160 | echo " " 161 | } 162 | APP_ARGS=$(save "$@") 163 | 164 | # Collect all arguments for the java command, following the shell quoting and substitution rules 165 | eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS" 166 | 167 | # by default we should be in the correct project dir, but when run from Finder on Mac, the cwd is wrong 168 | if [ "$(uname)" = "Darwin" ] && [ "$HOME" = "$PWD" ]; then 169 | cd "$(dirname "$0")" 170 | fi 171 | 172 | exec "$JAVACMD" "$@" 173 | -------------------------------------------------------------------------------- /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 | set DIRNAME=%~dp0 12 | if "%DIRNAME%" == "" set DIRNAME=. 13 | set APP_BASE_NAME=%~n0 14 | set APP_HOME=%DIRNAME% 15 | 16 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 17 | set DEFAULT_JVM_OPTS= 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 Windows variants 50 | 51 | if not "%OS%" == "Windows_NT" goto win9xME_args 52 | 53 | :win9xME_args 54 | @rem Slurp the command line arguments. 55 | set CMD_LINE_ARGS= 56 | set _SKIP=2 57 | 58 | :win9xME_args_slurp 59 | if "x%~1" == "x" goto execute 60 | 61 | set CMD_LINE_ARGS=%* 62 | 63 | :execute 64 | @rem Setup the command line 65 | 66 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 67 | 68 | @rem Execute Gradle 69 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS% 70 | 71 | :end 72 | @rem End local scope for the variables with windows NT shell 73 | if "%ERRORLEVEL%"=="0" goto mainEnd 74 | 75 | :fail 76 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 77 | rem the _cmd.exe /c_ return code! 78 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 79 | exit /b 1 80 | 81 | :mainEnd 82 | if "%OS%"=="Windows_NT" endlocal 83 | 84 | :omega 85 | -------------------------------------------------------------------------------- /android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'ReactNativeTouchThroughView' 2 | 3 | include ':app' -------------------------------------------------------------------------------- /android/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | -------------------------------------------------------------------------------- /android/src/main/java/com/rome2rio/android/reactnativetouchthroughview/TouchThroughTouchHandler.java: -------------------------------------------------------------------------------- 1 | package com.rome2rio.android.reactnativetouchthroughview; 2 | 3 | import android.view.MotionEvent; 4 | 5 | import java.util.ArrayList; 6 | import java.util.List; 7 | 8 | public class TouchThroughTouchHandler { 9 | 10 | private List listeners = new ArrayList(); 11 | 12 | public void addListener(TouchThroughTouchHandlerListener listener) { 13 | listeners.add(listener); 14 | } 15 | 16 | public void removeListener(TouchThroughTouchHandlerListener listener) { 17 | listeners.remove(listener); 18 | } 19 | 20 | public void handleTouchEvent(MotionEvent ev) { 21 | for (TouchThroughTouchHandlerListener listener : listeners) { 22 | listener.handleTouch(ev); 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /android/src/main/java/com/rome2rio/android/reactnativetouchthroughview/TouchThroughTouchHandlerInterface.java: -------------------------------------------------------------------------------- 1 | package com.rome2rio.android.reactnativetouchthroughview; 2 | 3 | import android.view.MotionEvent; 4 | 5 | public interface TouchThroughTouchHandlerInterface { 6 | public TouchThroughTouchHandler getTouchThroughTouchHandler(); 7 | } 8 | -------------------------------------------------------------------------------- /android/src/main/java/com/rome2rio/android/reactnativetouchthroughview/TouchThroughTouchHandlerListener.java: -------------------------------------------------------------------------------- 1 | package com.rome2rio.android.reactnativetouchthroughview; 2 | 3 | import android.view.MotionEvent; 4 | 5 | public abstract class TouchThroughTouchHandlerListener { 6 | abstract void handleTouch(MotionEvent ev); 7 | } 8 | -------------------------------------------------------------------------------- /android/src/main/java/com/rome2rio/android/reactnativetouchthroughview/TouchThroughView.java: -------------------------------------------------------------------------------- 1 | package com.rome2rio.android.reactnativetouchthroughview; 2 | 3 | import android.view.MotionEvent; 4 | import android.content.Context; 5 | 6 | import com.facebook.react.views.view.ReactViewGroup; 7 | 8 | public class TouchThroughView extends ReactViewGroup { 9 | public TouchThroughView(Context context) { 10 | super(context); 11 | } 12 | 13 | @Override 14 | public boolean onInterceptTouchEvent(MotionEvent event) { 15 | return true; 16 | } 17 | 18 | @Override 19 | public boolean onTouchEvent(MotionEvent event) { 20 | return true; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /android/src/main/java/com/rome2rio/android/reactnativetouchthroughview/TouchThroughViewManager.java: -------------------------------------------------------------------------------- 1 | package com.rome2rio.android.reactnativetouchthroughview; 2 | 3 | import com.facebook.react.uimanager.ThemedReactContext; 4 | import com.facebook.react.uimanager.ViewGroupManager; 5 | 6 | public class TouchThroughViewManager 7 | extends ViewGroupManager { 8 | 9 | public static final String REACT_CLASS = "R2RTouchThroughView"; 10 | 11 | @Override 12 | public String getName() { 13 | return REACT_CLASS; 14 | } 15 | 16 | @Override 17 | protected TouchThroughView createViewInstance( 18 | ThemedReactContext reactContext) { 19 | return new TouchThroughView(reactContext); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /android/src/main/java/com/rome2rio/android/reactnativetouchthroughview/TouchThroughViewPackage.java: -------------------------------------------------------------------------------- 1 | package com.rome2rio.android.reactnativetouchthroughview; 2 | 3 | import android.app.Activity; 4 | 5 | import com.facebook.react.ReactPackage; 6 | import com.facebook.react.bridge.JavaScriptModule; 7 | import com.facebook.react.bridge.NativeModule; 8 | import com.facebook.react.bridge.ReactApplicationContext; 9 | import com.facebook.react.uimanager.ViewManager; 10 | 11 | import java.util.Arrays; 12 | import java.util.Collections; 13 | import java.util.List; 14 | 15 | public class TouchThroughViewPackage implements ReactPackage { 16 | public TouchThroughViewPackage(Activity activity) { 17 | } // backwards compatability 18 | 19 | public TouchThroughViewPackage() { 20 | } 21 | 22 | @Override 23 | public List createNativeModules(ReactApplicationContext reactContext) { 24 | return Collections.emptyList(); 25 | } 26 | 27 | public List> createJSModules() { 28 | return Collections.emptyList(); 29 | } 30 | 31 | @Override 32 | public List createViewManagers(ReactApplicationContext reactContext) { 33 | TouchThroughViewManager touchThroughViewManager = new TouchThroughViewManager(); 34 | TouchThroughWrapperManager touchThroughWrapperManager = new TouchThroughWrapperManager(); 35 | 36 | return Arrays.asList(touchThroughViewManager, touchThroughWrapperManager); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /android/src/main/java/com/rome2rio/android/reactnativetouchthroughview/TouchThroughWrapper.java: -------------------------------------------------------------------------------- 1 | package com.rome2rio.android.reactnativetouchthroughview; 2 | 3 | import com.facebook.react.views.view.ReactViewGroup; 4 | import com.facebook.react.touch.ReactHitSlopView; 5 | import com.facebook.react.bridge.ReactContext; 6 | 7 | import android.app.Activity; 8 | import android.content.Context; 9 | import android.util.Log; 10 | import android.view.MotionEvent; 11 | import android.view.View; 12 | import android.graphics.Rect; 13 | import android.view.ViewGroup; 14 | 15 | public class TouchThroughWrapper extends ReactViewGroup implements ReactHitSlopView { 16 | private boolean lastTouchWasNotValid = false; 17 | private final ViewGroup viewGroup = this; 18 | private TouchThroughTouchHandler handler; 19 | 20 | public TouchThroughWrapper(ReactContext context) { 21 | super(context); 22 | if (context == null) { 23 | return; 24 | } 25 | Activity activity = context.getCurrentActivity(); 26 | if (activity == null) { 27 | return; 28 | } 29 | if (activity instanceof TouchThroughTouchHandlerInterface) { 30 | TouchThroughTouchHandlerInterface handlerInterface = (TouchThroughTouchHandlerInterface) activity; 31 | handler = handlerInterface.getTouchThroughTouchHandler(); 32 | } else { 33 | throw new RuntimeException("TouchThroughTouchHandlerInterface was not set on app activity"); 34 | } 35 | } 36 | 37 | @Override 38 | public boolean onInterceptTouchEvent(MotionEvent event) { 39 | return lastTouchWasNotValid; 40 | } 41 | 42 | private TouchThroughTouchHandlerListener listener = new TouchThroughTouchHandlerListener() { 43 | @Override 44 | void handleTouch(MotionEvent ev) { 45 | if (ev.getAction() == MotionEvent.ACTION_DOWN) { 46 | lastTouchWasNotValid = isTouchingTouchThroughView(viewGroup, (int) ev.getX(), (int) ev.getY()); 47 | } 48 | } 49 | }; 50 | public void addActivityListener() { 51 | if(handler != null) { 52 | handler.addListener(listener); 53 | } 54 | } 55 | 56 | public void removeActivityListener() { 57 | if(handler != null) { 58 | handler.removeListener(listener); 59 | } 60 | } 61 | 62 | // Recursively find out if an absolute x/y position is hitting a child view and stop event 63 | // propagation if a hit is found. 64 | private boolean isTouchingTouchThroughView(ViewGroup viewgroup, int x, int y) { 65 | boolean isTouchingTouchThroughView = false; 66 | 67 | for (int i = 0; i < viewgroup.getChildCount(); i++) { 68 | View child = viewgroup.getChildAt(i); 69 | 70 | boolean isViewGroup = child instanceof ViewGroup; 71 | boolean isTouchThroughView = child instanceof TouchThroughView; 72 | 73 | if (isTouchThroughView) { 74 | Rect bounds = new Rect(); 75 | isTouchingTouchThroughView = child.getGlobalVisibleRect(bounds) && bounds.contains(x, y); 76 | /* 77 | int[] location = new int[2]; 78 | int[] thisLocation = new int[2]; 79 | 80 | 81 | //child.getLocationOnScreen(location); 82 | this.getLocationOnScreen(thisLocation); 83 | 84 | int childX = location[0] - thisLocation[0]; 85 | int childY = location[1] - thisLocation[1]; 86 | 87 | //Rect bounds = new Rect(childX, childY, childX + child.getWidth(), childY + child.getHeight()); 88 | 89 | isTouchingTouchThroughView = bounds.contains(x, y); 90 | */ 91 | } else if (isViewGroup) { 92 | isTouchingTouchThroughView = this.isTouchingTouchThroughView((ViewGroup) child, x, y); 93 | } 94 | 95 | if (isTouchingTouchThroughView) { 96 | break; 97 | } 98 | } 99 | 100 | return isTouchingTouchThroughView; 101 | } 102 | 103 | @Override 104 | public boolean onTouchEvent(MotionEvent event) { 105 | // Pass through touch events to layer behind. 106 | return false; 107 | } 108 | 109 | //If the touch was not on the list make the slop rect small so react-native dont use this view as responder 110 | public Rect getHitSlopRect() { 111 | if (lastTouchWasNotValid) { 112 | return new Rect(-1000, -1000, -1000, -1000); 113 | } 114 | return new Rect(0, 0, 0, 0); 115 | } 116 | } -------------------------------------------------------------------------------- /android/src/main/java/com/rome2rio/android/reactnativetouchthroughview/TouchThroughWrapperManager.java: -------------------------------------------------------------------------------- 1 | package com.rome2rio.android.reactnativetouchthroughview; 2 | 3 | import com.facebook.react.uimanager.ThemedReactContext; 4 | import com.facebook.react.uimanager.ViewGroupManager; 5 | 6 | 7 | public class TouchThroughWrapperManager 8 | extends ViewGroupManager { 9 | 10 | public static final String REACT_CLASS = "R2RTouchThroughWrapper"; 11 | 12 | @Override 13 | public String getName() { 14 | return REACT_CLASS; 15 | } 16 | 17 | @Override 18 | public TouchThroughWrapper createViewInstance(ThemedReactContext context) { 19 | TouchThroughWrapper view = new TouchThroughWrapper(context); 20 | view.addActivityListener(); 21 | return view; 22 | } 23 | 24 | @Override 25 | public void onDropViewInstance(TouchThroughWrapper view) { 26 | view.removeActivityListener(); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /components/TouchThroughView.js: -------------------------------------------------------------------------------- 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 | * @providesModule TouchThroughScrollView 10 | * @flow 11 | */ 12 | import React, {Component, PropTypes} from 'react'; 13 | import {View, requireNativeComponent} from 'react-native'; 14 | 15 | export default class TouchThroughView extends Component { 16 | render() { 17 | return ; 18 | } 19 | }; 20 | 21 | TouchThroughView.propTypes = { 22 | ...View.propTypes, 23 | }; 24 | 25 | const R2RTouchThroughView = requireNativeComponent('R2RTouchThroughView', TouchThroughView); 26 | -------------------------------------------------------------------------------- /components/TouchThroughWrapper.js: -------------------------------------------------------------------------------- 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 | * @providesModule TouchThroughScrollView 10 | * @flow 11 | */ 12 | import React, {Component} from 'react'; 13 | import PropTypes from 'prop-types'; 14 | import {View, requireNativeComponent} from 'react-native'; 15 | 16 | export default class TouchThroughWrapper extends Component { 17 | render() { 18 | return ; 19 | } 20 | }; 21 | 22 | TouchThroughWrapper.propTypes = { 23 | ...View.propTypes, 24 | }; 25 | 26 | const R2RTouchThroughWrapper = requireNativeComponent('R2RTouchThroughWrapper', TouchThroughWrapper); 27 | -------------------------------------------------------------------------------- /example-react-native-navigation/README.md: -------------------------------------------------------------------------------- 1 | # Example for react-native-navigation 2 | 3 | This example is copied from https://github.com/wix/react-native-navigation/tree/master/example 4 | 5 | It shows how to implement react-native-navigation for android 6 | 7 | ## Javascript 8 | 9 | An example for the javascript part is under the "Push" section and in the file: src/screens/types/Push.js 10 | 11 | ## Android 12 | 13 | ### Implementation Details 14 | 15 | Use TouchThroughActivity from `android/app/src/main/java/com/example/TouchThroughActivity.java` as implementation for the `TouchThroughTouchHandlerInterface` interface 16 | 17 | Add `` to `AndroidManifest.xml` 18 | 19 | Override `startActivity` in NavigationApplication 20 | 21 | ```java 22 | @Override 23 | public void startActivity(Intent intent) { 24 | intent.setClass(NavigationApplication.instance, TouchThroughActivity.class); 25 | 26 | super.startActivity(intent); 27 | } 28 | ``` -------------------------------------------------------------------------------- /example-react-native-navigation/android/.project: -------------------------------------------------------------------------------- 1 | 2 | 3 | example 4 | Project example created by Buildship. 5 | 6 | 7 | 8 | 9 | org.eclipse.buildship.core.gradleprojectbuilder 10 | 11 | 12 | 13 | 14 | 15 | org.eclipse.buildship.core.gradleprojectnature 16 | 17 | 18 | -------------------------------------------------------------------------------- /example-react-native-navigation/android/.settings/org.eclipse.buildship.core.prefs: -------------------------------------------------------------------------------- 1 | #Thu Apr 05 19:51:51 CEST 2018 2 | connection.project.dir= 3 | -------------------------------------------------------------------------------- /example-react-native-navigation/android/app/.classpath: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /example-react-native-navigation/android/app/.project: -------------------------------------------------------------------------------- 1 | 2 | 3 | app 4 | Project app created by Buildship. 5 | 6 | 7 | 8 | 9 | org.eclipse.jdt.core.javabuilder 10 | 11 | 12 | 13 | 14 | org.eclipse.buildship.core.gradleprojectbuilder 15 | 16 | 17 | 18 | 19 | 20 | org.eclipse.jdt.core.javanature 21 | org.eclipse.buildship.core.gradleprojectnature 22 | 23 | 24 | -------------------------------------------------------------------------------- /example-react-native-navigation/android/app/.settings/org.eclipse.buildship.core.prefs: -------------------------------------------------------------------------------- 1 | #Thu Apr 05 19:51:51 CEST 2018 2 | connection.project.dir=.. 3 | -------------------------------------------------------------------------------- /example-react-native-navigation/android/app/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: "com.android.application" 2 | 3 | import com.android.build.OutputFile 4 | apply from: "../../node_modules/react-native/react.gradle" 5 | 6 | /** 7 | * Set this to true to create two separate APKs instead of one: 8 | * - An APK that only works on ARM devices 9 | * - An APK that only works on x86 devices 10 | * The advantage is the size of the APK is reduced by about 4MB. 11 | * Upload all the APKs to the Play Store and people will download 12 | * the correct one based on the CPU architecture of their device. 13 | */ 14 | def enableSeparateBuildPerCPUArchitecture = false 15 | 16 | /** 17 | * Run Proguard to shrink the Java bytecode in release builds. 18 | */ 19 | def enableProguardInReleaseBuilds = false 20 | 21 | android { 22 | compileSdkVersion 25 23 | buildToolsVersion '26.0.2' 24 | 25 | defaultConfig { 26 | applicationId "com.example" 27 | minSdkVersion 16 28 | targetSdkVersion 23 29 | versionCode 1 30 | versionName "1.0" 31 | ndk { 32 | abiFilters "armeabi-v7a", "x86" 33 | } 34 | } 35 | splits { 36 | abi { 37 | reset() 38 | enable enableSeparateBuildPerCPUArchitecture 39 | universalApk false // If true, also generate a universal APK 40 | include "armeabi-v7a", "x86" 41 | } 42 | } 43 | buildTypes { 44 | release { 45 | minifyEnabled enableProguardInReleaseBuilds 46 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" 47 | } 48 | } 49 | // applicationVariants are e.g. debug, release 50 | applicationVariants.all { variant -> 51 | variant.outputs.each { output -> 52 | // For each separate APK per architecture, set a unique version code as described here: 53 | // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits 54 | def versionCodes = ["armeabi-v7a": 1, "x86": 2] 55 | def abi = output.getFilter(OutputFile.ABI) 56 | if (abi != null) { // null for the universal-debug, universal-release variants 57 | output.versionCodeOverride = 58 | versionCodes.get(abi) * 1048576 + defaultConfig.versionCode 59 | } 60 | } 61 | } 62 | } 63 | 64 | dependencies { 65 | compile fileTree(dir: 'libs', include: ['*.jar']) 66 | compile 'com.facebook.react:react-native:+' 67 | compile project(':react-native-navigation') 68 | compile project(':react-native-touch-through-view') 69 | } 70 | -------------------------------------------------------------------------------- /example-react-native-navigation/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 | 30 | # Do not strip any method/class that is annotated with @DoNotStrip 31 | -keep @com.facebook.proguard.annotations.DoNotStrip class * 32 | -keepclassmembers class * { 33 | @com.facebook.proguard.annotations.DoNotStrip *; 34 | } 35 | 36 | -keepclassmembers @com.facebook.proguard.annotations.KeepGettersAndSetters class * { 37 | void set*(***); 38 | *** withOrder*(); 39 | } 40 | 41 | -keep class * extends com.facebook.react.bridge.JavaScriptModule { *; } 42 | -keep class * extends com.facebook.react.bridge.NativeModule { *; } 43 | -keepclassmembers,includedescriptorclasses class * { native ; } 44 | -keepclassmembers class * { @com.facebook.react.uimanager.UIProp ; } 45 | -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactProp ; } 46 | -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactPropGroup ; } 47 | 48 | -dontwarn com.facebook.react.** 49 | 50 | # okhttp 51 | 52 | -keepattributes Signature 53 | -keepattributes *Annotation* 54 | -keep class com.squareup.okhttp.** { *; } 55 | -keep interface com.squareup.okhttp.** { *; } 56 | -dontwarn com.squareup.okhttp.** 57 | 58 | # okio 59 | 60 | -keep class sun.misc.Unsafe { *; } 61 | -dontwarn java.nio.file.* 62 | -dontwarn org.codehaus.mojo.animal_sniffer.IgnoreJRERequirement 63 | -dontwarn okio.** 64 | 65 | # stetho 66 | 67 | -dontwarn com.facebook.stetho.** 68 | -------------------------------------------------------------------------------- /example-react-native-navigation/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 12 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /example-react-native-navigation/android/app/src/main/ic_launcher-web.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/android/app/src/main/ic_launcher-web.png -------------------------------------------------------------------------------- /example-react-native-navigation/android/app/src/main/java/com/example/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.example; 2 | 3 | import com.reactnativenavigation.controllers.SplashActivity; 4 | 5 | import android.os.Bundle; 6 | import android.support.annotation.Nullable; 7 | import android.view.MotionEvent; 8 | import com.rome2rio.android.reactnativetouchthroughview.TouchThroughTouchHandlerInterface; 9 | import com.rome2rio.android.reactnativetouchthroughview.TouchThroughTouchHandler; 10 | import android.view.View; 11 | 12 | public class MainActivity extends SplashActivity { 13 | @Override 14 | public View createSplashLayout() { 15 | return new View(this); // <====== TO AVOID WHITE BACKGROUND 16 | } 17 | } -------------------------------------------------------------------------------- /example-react-native-navigation/android/app/src/main/java/com/example/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.example; 2 | 3 | import android.content.Intent; 4 | import android.support.annotation.Nullable; 5 | 6 | import com.facebook.react.ReactPackage; 7 | import com.reactnativenavigation.NavigationApplication; 8 | import com.reactnativenavigation.controllers.NavigationActivity; 9 | import com.rome2rio.android.reactnativetouchthroughview.TouchThroughViewPackage; 10 | 11 | import java.util.List; 12 | import java.util.Arrays; 13 | 14 | public class MainApplication extends NavigationApplication { 15 | @Override 16 | public boolean isDebug() { 17 | return BuildConfig.DEBUG; 18 | } 19 | 20 | @Nullable 21 | @Override 22 | public List createAdditionalReactPackages() { 23 | return Arrays.asList(new TouchThroughViewPackage()); 24 | } 25 | 26 | @Nullable 27 | @Override 28 | public String getJSMainModuleName() { 29 | return "index"; 30 | } 31 | 32 | @Override 33 | public void startActivity(Intent intent) { 34 | intent.setClass(NavigationApplication.instance, TouchThroughActivity.class); 35 | 36 | super.startActivity(intent); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /example-react-native-navigation/android/app/src/main/java/com/example/TouchThroughActivity.java: -------------------------------------------------------------------------------- 1 | package com.example; 2 | 3 | 4 | import android.view.MotionEvent; 5 | 6 | import com.reactnativenavigation.controllers.NavigationActivity; 7 | import com.rome2rio.android.reactnativetouchthroughview.TouchThroughTouchHandler; 8 | import com.rome2rio.android.reactnativetouchthroughview.TouchThroughTouchHandlerInterface; 9 | 10 | public class TouchThroughActivity extends NavigationActivity implements TouchThroughTouchHandlerInterface { 11 | private TouchThroughTouchHandler touchThroughTouchHandler = new TouchThroughTouchHandler(); 12 | 13 | public TouchThroughTouchHandler getTouchThroughTouchHandler() { 14 | return touchThroughTouchHandler; 15 | } 16 | 17 | @Override 18 | public boolean dispatchTouchEvent(MotionEvent ev) { 19 | touchThroughTouchHandler.handleTouchEvent(ev); 20 | 21 | return super.dispatchTouchEvent(ev); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /example-react-native-navigation/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /example-react-native-navigation/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /example-react-native-navigation/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example-react-native-navigation/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example-react-native-navigation/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example-react-native-navigation/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | React Native Navigation 3 | 4 | -------------------------------------------------------------------------------- /example-react-native-navigation/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 | google() 6 | jcenter() 7 | } 8 | dependencies { 9 | classpath 'com.android.tools.build:gradle:3.0.1' 10 | 11 | // NOTE: Do not place your application dependencies here; they belong 12 | // in the individual module build.gradle files 13 | } 14 | } 15 | 16 | allprojects { 17 | repositories { 18 | mavenLocal() 19 | jcenter() 20 | google() 21 | maven { 22 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 23 | url "$rootDir/../node_modules/react-native/android" 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /example-react-native-navigation/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-react-native-navigation/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /example-react-native-navigation/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | #Sun Jan 28 19:31:28 IST 2018 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-4.1-all.zip 7 | -------------------------------------------------------------------------------- /example-react-native-navigation/android/gradlew: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | ############################################################################## 4 | ## 5 | ## Gradle start up script for UN*X 6 | ## 7 | ############################################################################## 8 | 9 | # Attempt to set APP_HOME 10 | # Resolve links: $0 may be a link 11 | PRG="$0" 12 | # Need this for relative symlinks. 13 | while [ -h "$PRG" ] ; do 14 | ls=`ls -ld "$PRG"` 15 | link=`expr "$ls" : '.*-> \(.*\)$'` 16 | if expr "$link" : '/.*' > /dev/null; then 17 | PRG="$link" 18 | else 19 | PRG=`dirname "$PRG"`"/$link" 20 | fi 21 | done 22 | SAVED="`pwd`" 23 | cd "`dirname \"$PRG\"`/" >/dev/null 24 | APP_HOME="`pwd -P`" 25 | cd "$SAVED" >/dev/null 26 | 27 | APP_NAME="Gradle" 28 | APP_BASE_NAME=`basename "$0"` 29 | 30 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 31 | DEFAULT_JVM_OPTS="" 32 | 33 | # Use the maximum available, or set MAX_FD != -1 to use that value. 34 | MAX_FD="maximum" 35 | 36 | warn ( ) { 37 | echo "$*" 38 | } 39 | 40 | die ( ) { 41 | echo 42 | echo "$*" 43 | echo 44 | exit 1 45 | } 46 | 47 | # OS specific support (must be 'true' or 'false'). 48 | cygwin=false 49 | msys=false 50 | darwin=false 51 | nonstop=false 52 | case "`uname`" in 53 | CYGWIN* ) 54 | cygwin=true 55 | ;; 56 | Darwin* ) 57 | darwin=true 58 | ;; 59 | MINGW* ) 60 | msys=true 61 | ;; 62 | NONSTOP* ) 63 | nonstop=true 64 | ;; 65 | esac 66 | 67 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 68 | 69 | # Determine the Java command to use to start the JVM. 70 | if [ -n "$JAVA_HOME" ] ; then 71 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 72 | # IBM's JDK on AIX uses strange locations for the executables 73 | JAVACMD="$JAVA_HOME/jre/sh/java" 74 | else 75 | JAVACMD="$JAVA_HOME/bin/java" 76 | fi 77 | if [ ! -x "$JAVACMD" ] ; then 78 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 79 | 80 | Please set the JAVA_HOME variable in your environment to match the 81 | location of your Java installation." 82 | fi 83 | else 84 | JAVACMD="java" 85 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 86 | 87 | Please set the JAVA_HOME variable in your environment to match the 88 | location of your Java installation." 89 | fi 90 | 91 | # Increase the maximum file descriptors if we can. 92 | if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then 93 | MAX_FD_LIMIT=`ulimit -H -n` 94 | if [ $? -eq 0 ] ; then 95 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then 96 | MAX_FD="$MAX_FD_LIMIT" 97 | fi 98 | ulimit -n $MAX_FD 99 | if [ $? -ne 0 ] ; then 100 | warn "Could not set maximum file descriptor limit: $MAX_FD" 101 | fi 102 | else 103 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" 104 | fi 105 | fi 106 | 107 | # For Darwin, add options to specify how the application appears in the dock 108 | if $darwin; then 109 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" 110 | fi 111 | 112 | # For Cygwin, switch paths to Windows format before running java 113 | if $cygwin ; then 114 | APP_HOME=`cygpath --path --mixed "$APP_HOME"` 115 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` 116 | JAVACMD=`cygpath --unix "$JAVACMD"` 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-react-native-navigation/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 | set DIRNAME=%~dp0 12 | if "%DIRNAME%" == "" set DIRNAME=. 13 | set APP_BASE_NAME=%~n0 14 | set APP_HOME=%DIRNAME% 15 | 16 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 17 | set DEFAULT_JVM_OPTS= 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 Windows 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 | -------------------------------------------------------------------------------- /example-react-native-navigation/android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'example' 2 | 3 | include ':app' 4 | include ':react-native-navigation' 5 | project(':react-native-navigation').projectDir = new File( 6 | rootProject.projectDir, '../node_modules/react-native-navigation/android/app/') 7 | include ':react-native-touch-through-view' 8 | project(':react-native-touch-through-view').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-touch-through-view/android') -------------------------------------------------------------------------------- /example-react-native-navigation/img/beach.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/beach.jpg -------------------------------------------------------------------------------- /example-react-native-navigation/img/colors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/colors.png -------------------------------------------------------------------------------- /example-react-native-navigation/img/delete@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/delete@1x.png -------------------------------------------------------------------------------- /example-react-native-navigation/img/delete@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/delete@2x.png -------------------------------------------------------------------------------- /example-react-native-navigation/img/edit@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/edit@1x.png -------------------------------------------------------------------------------- /example-react-native-navigation/img/edit@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/edit@2x.png -------------------------------------------------------------------------------- /example-react-native-navigation/img/gyro_header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/gyro_header.jpg -------------------------------------------------------------------------------- /example-react-native-navigation/img/heroes/bouny_hunter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/heroes/bouny_hunter.png -------------------------------------------------------------------------------- /example-react-native-navigation/img/heroes/earthspirit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/heroes/earthspirit.png -------------------------------------------------------------------------------- /example-react-native-navigation/img/heroes/oracle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/heroes/oracle.png -------------------------------------------------------------------------------- /example-react-native-navigation/img/heroes/skywrath_mage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/heroes/skywrath_mage.png -------------------------------------------------------------------------------- /example-react-native-navigation/img/heroes/templar_assasin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/heroes/templar_assasin.png -------------------------------------------------------------------------------- /example-react-native-navigation/img/list@1.5x.android.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/list@1.5x.android.png -------------------------------------------------------------------------------- /example-react-native-navigation/img/list@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/list@1x.png -------------------------------------------------------------------------------- /example-react-native-navigation/img/list@2x.android.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/list@2x.android.png -------------------------------------------------------------------------------- /example-react-native-navigation/img/list@3x.android.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/list@3x.android.png -------------------------------------------------------------------------------- /example-react-native-navigation/img/list@4x.android.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/list@4x.android.png -------------------------------------------------------------------------------- /example-react-native-navigation/img/masonry/158xD4xbeh.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/masonry/158xD4xbeh.jpeg -------------------------------------------------------------------------------- /example-react-native-navigation/img/masonry/37r6Cqp1B8.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/masonry/37r6Cqp1B8.jpeg -------------------------------------------------------------------------------- /example-react-native-navigation/img/masonry/5Gi8kova3k.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/masonry/5Gi8kova3k.jpeg -------------------------------------------------------------------------------- /example-react-native-navigation/img/masonry/61mpAVRV73.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/masonry/61mpAVRV73.jpeg -------------------------------------------------------------------------------- /example-react-native-navigation/img/masonry/A4g0lZ33Z8.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/masonry/A4g0lZ33Z8.jpeg -------------------------------------------------------------------------------- /example-react-native-navigation/img/masonry/AdGXmD1CH6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/masonry/AdGXmD1CH6.jpeg -------------------------------------------------------------------------------- /example-react-native-navigation/img/masonry/Cfw87359UT.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/masonry/Cfw87359UT.jpeg -------------------------------------------------------------------------------- /example-react-native-navigation/img/masonry/N30E32431C.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/masonry/N30E32431C.jpeg -------------------------------------------------------------------------------- /example-react-native-navigation/img/masonry/a848dHxA4e.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/masonry/a848dHxA4e.jpeg -------------------------------------------------------------------------------- /example-react-native-navigation/img/masonry/j51Pva1P8L.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/masonry/j51Pva1P8L.jpeg -------------------------------------------------------------------------------- /example-react-native-navigation/img/masonry/kVN0FryOZk.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/masonry/kVN0FryOZk.jpeg -------------------------------------------------------------------------------- /example-react-native-navigation/img/masonry/pqgylg80SD.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/masonry/pqgylg80SD.jpeg -------------------------------------------------------------------------------- /example-react-native-navigation/img/masonry/rVOcz7rd0z.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/masonry/rVOcz7rd0z.jpeg -------------------------------------------------------------------------------- /example-react-native-navigation/img/masonry/ri90ueind7.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/masonry/ri90ueind7.jpeg -------------------------------------------------------------------------------- /example-react-native-navigation/img/masonry/v8KLi2f0Tr.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/masonry/v8KLi2f0Tr.jpeg -------------------------------------------------------------------------------- /example-react-native-navigation/img/masonry/xU42hx19BB.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/masonry/xU42hx19BB.jpeg -------------------------------------------------------------------------------- /example-react-native-navigation/img/navicon_add@2x.android.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/navicon_add@2x.android.png -------------------------------------------------------------------------------- /example-react-native-navigation/img/navicon_add@2x.ios.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/navicon_add@2x.ios.png -------------------------------------------------------------------------------- /example-react-native-navigation/img/navicon_add@3x.android.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/navicon_add@3x.android.png -------------------------------------------------------------------------------- /example-react-native-navigation/img/navicon_edit@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/navicon_edit@2x.png -------------------------------------------------------------------------------- /example-react-native-navigation/img/navicon_menu@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/navicon_menu@2x.png -------------------------------------------------------------------------------- /example-react-native-navigation/img/one@1.5x.android.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/one@1.5x.android.png -------------------------------------------------------------------------------- /example-react-native-navigation/img/one@1x.android.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/one@1x.android.png -------------------------------------------------------------------------------- /example-react-native-navigation/img/one@2x.ios.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/one@2x.ios.png -------------------------------------------------------------------------------- /example-react-native-navigation/img/one@3x.android.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/one@3x.android.png -------------------------------------------------------------------------------- /example-react-native-navigation/img/one@4x.android.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/one@4x.android.png -------------------------------------------------------------------------------- /example-react-native-navigation/img/one_selected@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/one_selected@2x.png -------------------------------------------------------------------------------- /example-react-native-navigation/img/swap@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/swap@1x.png -------------------------------------------------------------------------------- /example-react-native-navigation/img/swap@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/swap@2x.png -------------------------------------------------------------------------------- /example-react-native-navigation/img/three@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/three@2x.png -------------------------------------------------------------------------------- /example-react-native-navigation/img/three_selected@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/three_selected@2x.png -------------------------------------------------------------------------------- /example-react-native-navigation/img/transform@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/transform@1x.png -------------------------------------------------------------------------------- /example-react-native-navigation/img/transform@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/transform@2x.png -------------------------------------------------------------------------------- /example-react-native-navigation/img/two@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/two@2x.png -------------------------------------------------------------------------------- /example-react-native-navigation/img/two_selected@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simonhoss/react-native-touch-through-view/6e384e0fea75310711fb795c924089039e842400/example-react-native-navigation/img/two_selected@2x.png -------------------------------------------------------------------------------- /example-react-native-navigation/index.js: -------------------------------------------------------------------------------- 1 | __STRESS_TEST__ = false; 2 | import App from './src/app'; 3 | -------------------------------------------------------------------------------- /example-react-native-navigation/ios/example.xcodeproj/xcshareddata/xcschemes/example.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 29 | 35 | 36 | 37 | 43 | 49 | 50 | 51 | 52 | 53 | 58 | 59 | 61 | 67 | 68 | 69 | 70 | 71 | 77 | 78 | 79 | 80 | 81 | 82 | 92 | 94 | 100 | 101 | 102 | 103 | 104 | 105 | 111 | 113 | 119 | 120 | 121 | 122 | 124 | 125 | 128 | 129 | 130 | -------------------------------------------------------------------------------- /example-react-native-navigation/ios/example.xcodeproj/xcshareddata/xcschemes/example_release.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 29 | 35 | 36 | 37 | 43 | 49 | 50 | 51 | 52 | 53 | 58 | 59 | 60 | 61 | 67 | 68 | 69 | 70 | 71 | 72 | 82 | 84 | 90 | 91 | 92 | 93 | 94 | 95 | 101 | 103 | 109 | 110 | 111 | 112 | 114 | 115 | 118 | 119 | 120 | -------------------------------------------------------------------------------- /example-react-native-navigation/ios/example/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-react-native-navigation/ios/example/AppDelegate.m: -------------------------------------------------------------------------------- 1 | #import "AppDelegate.h" 2 | #import 3 | 4 | // ********************************************** 5 | // *** DON'T MISS: THE NEXT LINE IS IMPORTANT *** 6 | // ********************************************** 7 | #import "RCCManager.h" 8 | 9 | // IMPORTANT: if you're getting an Xcode error that RCCManager.h isn't found, you've probably ran "npm install" 10 | // with npm ver 2. You'll need to "npm install" with npm 3 (see https://github.com/wix/react-native-navigation/issues/1) 11 | 12 | #import 13 | 14 | @implementation AppDelegate 15 | 16 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 17 | { 18 | NSURL *jsCodeLocation; 19 | #ifdef DEBUG 20 | // jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios&dev=true"]; 21 | jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; 22 | #else 23 | jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; 24 | #endif 25 | 26 | 27 | // ********************************************** 28 | // *** DON'T MISS: THIS IS HOW WE BOOTSTRAP ***** 29 | // ********************************************** 30 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 31 | self.window.backgroundColor = [UIColor whiteColor]; 32 | [[RCCManager sharedInstance] initBridgeWithBundleURL:jsCodeLocation launchOptions:launchOptions]; 33 | 34 | /* 35 | // original RN bootstrap - remove this part 36 | RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation 37 | moduleName:@"example" 38 | initialProperties:nil 39 | launchOptions:launchOptions]; 40 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 41 | UIViewController *rootViewController = [UIViewController new]; 42 | rootViewController.view = rootView; 43 | self.window.rootViewController = rootViewController; 44 | [self.window makeKeyAndVisible]; 45 | */ 46 | 47 | 48 | return YES; 49 | } 50 | 51 | @end 52 | -------------------------------------------------------------------------------- /example-react-native-navigation/ios/example/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 | -------------------------------------------------------------------------------- /example-react-native-navigation/ios/example/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-react-native-navigation/ios/example/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.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 | NSAllowsArbitraryLoads 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /example-react-native-navigation/ios/example/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 | -------------------------------------------------------------------------------- /example-react-native-navigation/ios/exampleTests/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-react-native-navigation/ios/exampleTests/exampleTests.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 240 17 | #define TEXT_TO_LOOK_FOR @"Welcome to React Native!" 18 | 19 | @interface exampleTests : XCTestCase 20 | 21 | @end 22 | 23 | @implementation exampleTests 24 | 25 | - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test 26 | { 27 | if (test(view)) { 28 | return YES; 29 | } 30 | for (UIView *subview in [view subviews]) { 31 | if ([self findSubviewInView:subview matching:test]) { 32 | return YES; 33 | } 34 | } 35 | return NO; 36 | } 37 | 38 | - (void)testRendersWelcomeScreen 39 | { 40 | UIViewController *vc = [[[[UIApplication sharedApplication] delegate] window] rootViewController]; 41 | NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS]; 42 | BOOL foundElement = NO; 43 | 44 | __block NSString *redboxError = nil; 45 | RCTSetLogFunction(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { 46 | if (level >= RCTLogLevelError) { 47 | redboxError = message; 48 | } 49 | }); 50 | 51 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { 52 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 53 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 54 | 55 | foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) { 56 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { 57 | return YES; 58 | } 59 | return NO; 60 | }]; 61 | } 62 | 63 | RCTSetLogFunction(RCTDefaultLogFunction); 64 | 65 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); 66 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); 67 | } 68 | 69 | 70 | @end 71 | -------------------------------------------------------------------------------- /example-react-native-navigation/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "postinstall": "node ./scripts/postinstall.js", 7 | "start": "watchman watch-del-all && (adb reverse tcp:8081 tcp:8081 || true) && node node_modules/react-native/local-cli/cli.js start --reset-cache", 8 | "xcode": "open ios/example.xcodeproj", 9 | "android": "cd android && ./gradlew installDebug", 10 | "e2e": "detox test --configuration ios.sim.debug", 11 | "e2e-release": "detox test --configuration ios.sim.release" 12 | }, 13 | "dependencies": { 14 | "react": "16.0.0", 15 | "react-native": "0.53.0", 16 | "react-native-animatable": "^1.1.0", 17 | "react-native-navigation": "latest", 18 | "react-native-touch-through-view": "https://github.com/simonhoss/react-native-touch-through-view.git" 19 | }, 20 | "devDependencies": { 21 | "detox": "^5.0.0", 22 | "mocha": "^3.4.2" 23 | }, 24 | "detox": { 25 | "specs": "test/e2e", 26 | "configurations": { 27 | "ios.sim.debug": { 28 | "binaryPath": "ios/DerivedData/example/Build/Products/Debug-iphonesimulator/example.app", 29 | "type": "ios.simulator", 30 | "name": "iPhone 6s" 31 | }, 32 | "ios.sim.release": { 33 | "binaryPath": "ios/DerivedData/example/Build/Products/Release-iphonesimulator/example.app", 34 | "type": "ios.simulator", 35 | "name": "iPhone 6s" 36 | } 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /example-react-native-navigation/scripts/postinstall.js: -------------------------------------------------------------------------------- 1 | const cp = require('child_process'); 2 | cp.execSync(`rm -rf node_modules/react-native-navigation/node_modules`); 3 | cp.execSync(`rm -rf node_modules/react-native-navigation/example `); 4 | -------------------------------------------------------------------------------- /example-react-native-navigation/src/app.js: -------------------------------------------------------------------------------- 1 | import {Platform} from 'react-native'; 2 | import {Navigation} from 'react-native-navigation'; 3 | import {registerScreens, registerScreenVisibilityListener} from './screens'; 4 | 5 | 6 | // screen related book keeping 7 | registerScreens(); 8 | registerScreenVisibilityListener(); 9 | 10 | const tabs = [{ 11 | label: 'Navigation', 12 | screen: 'example.Types', 13 | icon: require('../img/list.png'), 14 | title: 'Navigation Types', 15 | }, { 16 | label: 'Actions', 17 | screen: 'example.Actions', 18 | icon: require('../img/swap.png'), 19 | title: 'Navigation Actions', 20 | }]; 21 | 22 | if (Platform.OS === 'android') { 23 | tabs.push({ 24 | label: 'Transitions', 25 | screen: 'example.Transitions', 26 | icon: require('../img/transform.png'), 27 | title: 'Navigation Transitions', 28 | }); 29 | } 30 | 31 | // this will start our app 32 | Navigation.startTabBasedApp({ 33 | tabs, 34 | animationType: Platform.OS === 'ios' ? 'slide-down' : 'fade', 35 | tabsStyle: { 36 | tabBarBackgroundColor: '#003a66', 37 | tabBarButtonColor: '#ffffff', 38 | tabBarSelectedButtonColor: '#ff505c', 39 | tabFontFamily: 'BioRhyme-Bold', 40 | }, 41 | appStyle: { 42 | tabBarBackgroundColor: '#003a66', 43 | navBarButtonColor: '#ffffff', 44 | tabBarButtonColor: '#ffffff', 45 | navBarTextColor: '#ffffff', 46 | tabBarSelectedButtonColor: '#ff505c', 47 | navigationBarColor: '#003a66', 48 | navBarBackgroundColor: '#003a66', 49 | statusBarColor: '#002b4c', 50 | tabFontFamily: 'BioRhyme-Bold', 51 | }, 52 | drawer: { 53 | left: { 54 | screen: 'example.Types.Drawer' 55 | } 56 | } 57 | }); 58 | -------------------------------------------------------------------------------- /example-react-native-navigation/src/components/Row.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import {StyleSheet, View, Text, TouchableHighlight, Platform} from 'react-native'; 4 | 5 | class Row extends React.PureComponent { 6 | render() { 7 | const {title, onPress, onPressIn, platform, testID} = this.props; 8 | if (platform && platform !== Platform.OS) { 9 | return ; 10 | } 11 | 12 | return ( 13 | 19 | 20 | {title} 21 | 22 | 23 | ); 24 | } 25 | } 26 | 27 | Row.propTypes = { 28 | title: PropTypes.string.isRequired, 29 | onPress: PropTypes.func.isRequired, 30 | onPressIn: PropTypes.func 31 | }; 32 | 33 | const styles = StyleSheet.create({ 34 | row: { 35 | height: 48, 36 | paddingHorizontal: 16, 37 | flexDirection: 'row', 38 | alignItems: 'center', 39 | justifyContent: 'center', 40 | borderBottomWidth: 1, 41 | borderBottomColor: 'rgba(0, 0, 0, 0.054)', 42 | }, 43 | text: { 44 | fontSize: 16, 45 | }, 46 | }); 47 | 48 | export default Row; 49 | -------------------------------------------------------------------------------- /example-react-native-navigation/src/screens/Actions.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {StyleSheet, ScrollView} from 'react-native'; 3 | import Row from '../components/Row'; 4 | 5 | class Actions extends React.Component { 6 | 7 | constructor(props) { 8 | super(props); 9 | 10 | this._fab = false; 11 | this._rightButton = null; 12 | this._contextualMenu = false; 13 | this._toggleTabs = 'shown'; 14 | this._toggleNavBar = 'shown'; 15 | this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this)); 16 | } 17 | 18 | onNavigatorEvent(event) { 19 | if (event.id === 'contextualMenuDismissed') { 20 | this._contextualMenu = false; 21 | } 22 | } 23 | 24 | setTitle = () => { 25 | this.props.navigator.setTitle({ 26 | title: 'New Title!' 27 | }); 28 | }; 29 | 30 | setSubtitle = () => { 31 | this.props.navigator.setSubTitle({ 32 | subtitle: 'New SubTitle!', 33 | navigatorStyle: { 34 | navBarSubtitleColor: 'red' 35 | } 36 | }); 37 | }; 38 | 39 | toggleTabs = () => { 40 | const to = this._toggleTabs === 'shown' ? 'hidden' : 'shown'; 41 | 42 | this.props.navigator.toggleTabs({ 43 | to, 44 | animated: true 45 | }); 46 | this._toggleTabs = to; 47 | }; 48 | 49 | setTabBadge = () => { 50 | this.props.navigator.setTabBadge({ 51 | tabIndex: 1, 52 | badge: Math.floor(Math.random() * 20) + 1 53 | }); 54 | }; 55 | 56 | switchToTab = () => { 57 | this.props.navigator.switchToTab({ 58 | tabIndex: 0 59 | }); 60 | }; 61 | 62 | toggleNavBar = () => { 63 | const to = this._toggleNavBar === 'shown' ? 'hidden' : 'shown'; 64 | 65 | this.props.navigator.toggleNavBar({ 66 | to, 67 | animated: true 68 | }); 69 | this._toggleNavBar = to; 70 | }; 71 | 72 | showSnackbar = () => { 73 | this.props.navigator.showSnackbar({ 74 | text: 'Woo Snacks!' 75 | }); 76 | }; 77 | 78 | toggleContextualMenu = () => { 79 | if (!this._contextualMenu) { 80 | this.props.navigator.showContextualMenu({ 81 | rightButtons: [{ 82 | title: 'Edit', 83 | icon: require('../../img/edit.png') 84 | }, { 85 | title: 'Delete', 86 | icon: require('../../img/delete.png') 87 | }], 88 | onButtonPressed: (index) => console.log(`Button ${index} tapped`) 89 | }); 90 | this._contextualMenu = true; 91 | } else { 92 | this.props.navigator.dismissContextualMenu(); 93 | this._contextualMenu = false; 94 | } 95 | 96 | }; 97 | 98 | setButtons = () => { 99 | let title = ''; 100 | 101 | if (!this._rightButton) { 102 | title = 'Hello'; 103 | } else if (this._rightButton === 'Hello') { 104 | title = 'Its Me'; 105 | } 106 | 107 | this.props.navigator.setButtons({ 108 | rightButtons: [{ 109 | title, 110 | id: 'topRight' 111 | }], 112 | animated: true 113 | }); 114 | this._rightButton = title; 115 | }; 116 | 117 | toggleFAB = () => { 118 | if (this._fab) { 119 | this.props.navigator.setButtons({ 120 | fab: {} 121 | }); 122 | this._fab = false; 123 | } else { 124 | this.props.navigator.setButtons({ 125 | fab: { 126 | collapsedId: 'share', 127 | collapsedIcon: require('../../img/edit.png'), 128 | expendedId: 'clear', 129 | expendedIcon: require('../../img/edit.png'), 130 | backgroundColor: '#ff505c', 131 | actions: [ 132 | { 133 | id: 'mail', 134 | icon: require('../../img/edit.png'), 135 | backgroundColor: '#03A9F4' 136 | }, 137 | { 138 | id: 'delete', 139 | icon: require('../../img/delete.png'), 140 | backgroundColor: '#4CAF50' 141 | } 142 | ] 143 | }, 144 | animated: true 145 | }); 146 | this._fab = true; 147 | } 148 | }; 149 | 150 | render() { 151 | return ( 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | ); 165 | } 166 | } 167 | 168 | const styles = StyleSheet.create({ 169 | container: {} 170 | }); 171 | 172 | export default Actions; 173 | -------------------------------------------------------------------------------- /example-react-native-navigation/src/screens/NavigationTypes.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {StyleSheet, ScrollView} from 'react-native'; 3 | import Row from '../components/Row'; 4 | 5 | class NavigationTypes extends React.Component { 6 | 7 | constructor(props) { 8 | super(props); 9 | this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this)); 10 | } 11 | 12 | onNavigatorEvent(event) { 13 | if (event.type === 'DeepLink') { 14 | const parts = event.link.split('/'); 15 | if (parts[0] === 'tab1') { 16 | this.props.navigator.push({ 17 | screen: parts[1] 18 | }); 19 | } 20 | } 21 | } 22 | 23 | toggleDrawer = () => { 24 | this.props.navigator.toggleDrawer({ 25 | side: 'left', 26 | animated: true 27 | }); 28 | }; 29 | 30 | pushScreen = () => { 31 | this.props.navigator.push({ 32 | screen: 'example.Types.Push', 33 | title: 'New Screen', 34 | }); 35 | }; 36 | 37 | previewScreen = () => { 38 | this.props.navigator.push({ 39 | screen: 'example.Types.Push', 40 | title: 'New Screen', 41 | previewCommit: true, 42 | previewHeight: 250, 43 | previewView: this.previewRef, 44 | previewActions: [{ 45 | id: 'action-cancel', 46 | title: 'Cancel' 47 | }, { 48 | id: 'action-delete', 49 | title: 'Delete', 50 | actions: [{ 51 | id: 'action-delete-sure', 52 | title: 'Are you sure?', 53 | style: 'destructive' 54 | }] 55 | }] 56 | }); 57 | }; 58 | 59 | pushListScreen = () => { 60 | console.log('RANG', 'pushListScreen'); 61 | this.props.navigator.push({ 62 | screen: 'example.Types.ListScreen', 63 | title: 'List Screen', 64 | }); 65 | }; 66 | 67 | pushCustomTopBarScreen = () => { 68 | this.props.navigator.push({ 69 | screen: 'example.Types.CustomTopBarScreen' 70 | }); 71 | }; 72 | 73 | pushCustomButtonScreen = () => { 74 | this.props.navigator.push({ 75 | screen: 'example.Types.CustomButtonScreen', 76 | title: 'Custom Buttons' 77 | }); 78 | }; 79 | 80 | pushTopTabsScreen = () => { 81 | this.props.navigator.push({ 82 | screen: 'example.Types.TopTabs', 83 | title: 'Top Tabs', 84 | topTabs: [{ 85 | screenId: 'example.Types.TopTabs.TabOne', 86 | title: 'Tab One', 87 | }, { 88 | screenId: 'example.Types.TopTabs.TabTwo', 89 | title: 'Tab Two', 90 | }], 91 | }); 92 | }; 93 | 94 | showModal = () => { 95 | this.props.navigator.showModal({ 96 | screen: 'example.Types.Modal', 97 | title: 'Modal', 98 | }); 99 | }; 100 | 101 | showLightBox = () => { 102 | this.props.navigator.showLightBox({ 103 | screen: "example.Types.LightBox", 104 | passProps: { 105 | title: 'LightBox', 106 | content: 'Hey there, I\'m a light box screen :D', 107 | onClose: this.dismissLightBox, 108 | }, 109 | style: { 110 | backgroundBlur: 'dark', 111 | backgroundColor: 'rgba(0, 0, 0, 0.7)', 112 | tapBackgroundToDismiss: true 113 | } 114 | }); 115 | }; 116 | 117 | dismissLightBox = () => { 118 | this.props.navigator.dismissLightBox(); 119 | }; 120 | 121 | showInAppNotification = () => { 122 | this.props.navigator.showInAppNotification({ 123 | screen: 'example.Types.Notification', 124 | }); 125 | }; 126 | 127 | render() { 128 | return ( 129 | 130 | 131 | 132 | (this.previewRef = ref)} 134 | title={'Preview Screen'} 135 | testID={'previewScreen'} 136 | onPress={this.pushScreen} 137 | onPressIn={this.previewScreen} 138 | /> 139 | {/**/} 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | ); 148 | } 149 | } 150 | 151 | const styles = StyleSheet.create({ 152 | container: { 153 | flex: 1, 154 | }, 155 | row: { 156 | height: 48, 157 | paddingHorizontal: 16, 158 | flexDirection: 'row', 159 | alignItems: 'center', 160 | justifyContent: 'center', 161 | borderBottomWidth: 1, 162 | borderBottomColor: 'rgba(0, 0, 0, 0.054)', 163 | }, 164 | text: { 165 | fontSize: 16, 166 | }, 167 | }); 168 | 169 | export default NavigationTypes; 170 | -------------------------------------------------------------------------------- /example-react-native-navigation/src/screens/Transitions.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {StyleSheet, ScrollView, Text} from 'react-native'; 3 | import Row from '../components/Row'; 4 | 5 | class Transitions extends React.Component { 6 | 7 | showCollapsingHeader = () => { 8 | this.props.navigator.showModal({ 9 | title: 'Collapsing Header', 10 | screen: 'example.Transitions.CollapsingHeader', 11 | }); 12 | }; 13 | 14 | showSharedElementTransitions = () => { 15 | this.props.navigator.showModal({ 16 | title: 'Shared Element Transition Examples', 17 | screen: 'example.Transitions.SharedElementTransitions', 18 | }); 19 | }; 20 | 21 | render() { 22 | return ( 23 | 24 | 25 | 26 | 27 | ); 28 | } 29 | } 30 | 31 | const styles = StyleSheet.create({ 32 | container: { 33 | flex: 1, 34 | }, 35 | }); 36 | 37 | export default Transitions; 38 | -------------------------------------------------------------------------------- /example-react-native-navigation/src/screens/index.js: -------------------------------------------------------------------------------- 1 | import {Navigation, ScreenVisibilityListener} from 'react-native-navigation'; 2 | 3 | import Types from './NavigationTypes'; 4 | import Actions from './Actions'; 5 | import Transitions from './Transitions'; 6 | 7 | import Push from './types/Push'; 8 | import Drawer from './types/Drawer'; 9 | import ListScreen from './types/ListScreen'; 10 | import DummyScreen from './types/DummyScreen'; 11 | import LightBox from './types/LightBox'; 12 | import Notification from './types/Notification'; 13 | import Modal from './types/Modal'; 14 | import CustomTopBarScreen from './types/CustomTopBarScreen'; 15 | import CustomButtonScreen from './types/CustomButtonScreen'; 16 | import TopTabs from './types/TopTabs'; 17 | import TabOne from './types/tabs/TabOne'; 18 | import TabTwo from './types/tabs/TabTwo'; 19 | 20 | import CollapsingHeader from './transitions/CollapsingHeader'; 21 | import SharedElementTransitions from './transitions/SharedElementTransitions'; 22 | 23 | import Cards from './transitions/sharedElementTransitions/Cards/Cards'; 24 | import CardsInfo from './transitions/sharedElementTransitions/Cards/Info'; 25 | 26 | import Masonry from './transitions/sharedElementTransitions/Masonry/Masonry'; 27 | import MasonryItem from './transitions/sharedElementTransitions/Masonry/Item'; 28 | 29 | export function registerScreens() { 30 | Navigation.registerComponent('example.Types', () => Types); 31 | Navigation.registerComponent('example.Actions', () => Actions); 32 | Navigation.registerComponent('example.Transitions', () => Transitions); 33 | 34 | Navigation.registerComponent('example.Types.Push', () => Push); 35 | Navigation.registerComponent('example.Types.Drawer', () => Drawer); 36 | Navigation.registerComponent('example.Types.Screen', () => Drawer); 37 | Navigation.registerComponent('example.Types.ListScreen', () => ListScreen); 38 | Navigation.registerComponent('example.Types.DummyScreen', () => DummyScreen); 39 | Navigation.registerComponent('example.Types.Modal', () => Modal); 40 | Navigation.registerComponent('example.Types.LightBox', () => LightBox); 41 | Navigation.registerComponent('example.Types.Notification', () => Notification); 42 | Navigation.registerComponent('example.Types.CustomTopBarScreen', () => CustomTopBarScreen); 43 | Navigation.registerComponent('example.Types.CustomButtonScreen', () => CustomButtonScreen); 44 | Navigation.registerComponent('example.Types.TopTabs', () => TopTabs); 45 | Navigation.registerComponent('example.Types.TopTabs.TabOne', () => TabOne); 46 | Navigation.registerComponent('example.Types.TopTabs.TabTwo', () => TabTwo); 47 | 48 | Navigation.registerComponent('example.Transitions.CollapsingHeader', () => CollapsingHeader); 49 | Navigation.registerComponent('example.Transitions.SharedElementTransitions', () => SharedElementTransitions); 50 | Navigation.registerComponent('example.Transitions.SharedElementTransitions.Cards', () => Cards); 51 | Navigation.registerComponent('example.Transitions.SharedElementTransitions.Cards.Info', () => CardsInfo); 52 | Navigation.registerComponent('example.Transitions.SharedElementTransitions.Masonry', () => Masonry); 53 | Navigation.registerComponent('example.Transitions.SharedElementTransitions.Masonry.Item', () => MasonryItem); 54 | } 55 | 56 | export function registerScreenVisibilityListener() { 57 | new ScreenVisibilityListener({ 58 | willAppear: ({screen}) => console.log(`Displaying screen ${screen}`), 59 | didAppear: ({screen, startTime, endTime, commandType}) => console.log('screenVisibility', `Screen ${screen} displayed in ${endTime - startTime} millis [${commandType}]`), 60 | willDisappear: ({screen}) => console.log(`Screen will disappear ${screen}`), 61 | didDisappear: ({screen}) => console.log(`Screen disappeared ${screen}`) 62 | }).register(); 63 | } 64 | -------------------------------------------------------------------------------- /example-react-native-navigation/src/screens/transitions/CollapsingHeader.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {StyleSheet, View, Text, ScrollView} from 'react-native'; 3 | 4 | class CollapsingHeader extends React.Component { 5 | 6 | static navigatorStyle = { 7 | drawUnderTabBar: true, 8 | navBarButtonColor: '#ffffff', 9 | navBarTextColor: '#ffffff', 10 | collapsingToolBarImage: require('../../../img/gyro_header.jpg'), 11 | collapsingToolBarCollapsedColor: '#0f2362', 12 | navBarBackgroundColor: '#eeeeee' 13 | }; 14 | 15 | render() { 16 | return ( 17 | 18 | 19 | {[...new Array(40)].map((a, index) => ( 20 | Row {index} 21 | ))} 22 | 23 | 24 | ); 25 | } 26 | } 27 | 28 | const styles = StyleSheet.create({ 29 | container: { 30 | flex: 1, 31 | backgroundColor: '#fff', 32 | }, 33 | }); 34 | 35 | export default CollapsingHeader; 36 | -------------------------------------------------------------------------------- /example-react-native-navigation/src/screens/transitions/SharedElementTransitions.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {StyleSheet, ScrollView, Text} from 'react-native'; 3 | import Row from '../../components/Row'; 4 | 5 | class Transitions extends React.Component { 6 | 7 | showCardsExample = () => { 8 | this.props.navigator.showModal({ 9 | title: 'Cards', 10 | screen: 'example.Transitions.SharedElementTransitions.Cards', 11 | }); 12 | }; 13 | 14 | showProfileExample = () => { 15 | this.props.navigator.showModal({ 16 | title: 'Profiles', 17 | screen: 'example.Transitions.SharedElementTransitions.Profiles', 18 | }); 19 | }; 20 | 21 | showMasonryExample = () => { 22 | this.props.navigator.showModal({ 23 | title: 'Masonry', 24 | screen: 'example.Transitions.SharedElementTransitions.Masonry', 25 | }); 26 | }; 27 | 28 | render() { 29 | return ( 30 | 31 | 32 | {/**/} 33 | 34 | 35 | ); 36 | } 37 | } 38 | 39 | const styles = StyleSheet.create({ 40 | container: { 41 | flex: 1, 42 | backgroundColor: '#ffffff', 43 | }, 44 | }); 45 | 46 | export default Transitions; 47 | -------------------------------------------------------------------------------- /example-react-native-navigation/src/screens/transitions/sharedElementTransitions/Cards/Cards.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {ScrollView, TouchableHighlight, StyleSheet, Image, Text, View, ScrolView} from 'react-native'; 3 | import {SharedElementTransition} from 'react-native-navigation'; 4 | 5 | const IMAGE_HEIGHT = 190; 6 | 7 | class CardScreen extends React.Component { 8 | 9 | goToCard = (index) => { 10 | this.props.navigator.push({ 11 | screen: 'example.Transitions.SharedElementTransitions.Cards.Info', 12 | sharedElements: [`image${index}`], 13 | animated: false, 14 | overrideBackPress: true, 15 | passProps: { 16 | sharedImageId: `image${index}` 17 | } 18 | }) 19 | }; 20 | 21 | _renderCard(index) { 22 | return ( 23 | 24 | this.goToCard(index)} 27 | > 28 | 29 | {this._renderImage(index)} 30 | {this._renderCardContent()} 31 | 32 | 33 | 34 | ); 35 | } 36 | 37 | _renderImage(index) { 38 | return ( 39 | 43 | 47 | 48 | ); 49 | } 50 | 51 | _renderCardContent() { 52 | return ( 53 | 54 | This is a title 55 | This is a very long long long long long long long long long long content 56 | 57 | ); 58 | } 59 | 60 | render() { 61 | return ( 62 | 66 | {this._renderCard(0)} 67 | {this._renderCard(1)} 68 | {this._renderCard(2)} 69 | 70 | ); 71 | } 72 | } 73 | 74 | const styles = StyleSheet.create({ 75 | container: { 76 | flex: 1, 77 | backgroundColor: '#ffffff', 78 | }, 79 | content: { 80 | marginHorizontal: 8, 81 | }, 82 | cardContainer: { 83 | marginVertical: 8, 84 | elevation: 2, 85 | borderRadius: 2, 86 | backgroundColor: '#F5F5F5' 87 | }, 88 | imageContainer: { 89 | justifyContent: 'flex-start' 90 | }, 91 | image: { 92 | height: IMAGE_HEIGHT, 93 | borderTopLeftRadius: 2, 94 | borderTopRightRadius: 2 95 | }, 96 | cardContentContainer: { 97 | padding: 8 98 | }, 99 | title: { 100 | fontWeight: '500', 101 | paddingBottom: 8, 102 | fontSize: 17 103 | }, 104 | }); 105 | 106 | export default CardScreen; 107 | -------------------------------------------------------------------------------- /example-react-native-navigation/src/screens/transitions/sharedElementTransitions/Cards/Info.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import { 3 | ScrollView, 4 | TouchableOpacity, 5 | StyleSheet, 6 | Image, 7 | Text, 8 | View, 9 | Platform, 10 | ScrolView 11 | } from 'react-native'; 12 | import {SharedElementTransition} from 'react-native-navigation'; 13 | import * as Animatable from 'react-native-animatable'; 14 | 15 | const SHOW_DURATION = 400; 16 | const HIDE_DURATION = 300; 17 | 18 | class InfoScreen extends Component { 19 | 20 | constructor(props) { 21 | super(props); 22 | this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this)); 23 | this.state = { 24 | animationType: 'fadeInRight', 25 | animationDuration: SHOW_DURATION 26 | } 27 | } 28 | 29 | onNavigatorEvent(event) { 30 | if (event.id === 'backPress') { 31 | this.setState({ 32 | animationType: 'fadeOutRight', 33 | animationDuration: HIDE_DURATION 34 | }); 35 | this.props.navigator.pop(); 36 | } 37 | } 38 | 39 | render() { 40 | return ( 41 | 42 | {this._renderImage()} 43 | {this._renderContent()} 44 | 45 | ); 46 | } 47 | 48 | _renderImage() { 49 | return ( 50 | 69 | 73 | 74 | ); 75 | } 76 | 77 | _renderContent() { 78 | return ( 79 | 85 | Line 1 86 | Line 2 87 | Line 3 88 | Line 4 89 | Line 5 90 | Line 6 91 | Line 7 92 | Line 8 93 | 94 | ); 95 | } 96 | } 97 | 98 | const styles = StyleSheet.create({ 99 | container: { 100 | flex: 1 101 | }, 102 | content: { 103 | flex: 1, 104 | marginTop: 190, 105 | backgroundColor: 'white' 106 | }, 107 | imageContainer: { 108 | position: 'absolute', 109 | top: 0, 110 | left: 0, 111 | right: 0, 112 | }, 113 | image: { 114 | height: 190 115 | }, 116 | text: { 117 | fontSize: 17, 118 | paddingVertical: 4, 119 | paddingLeft: 8 120 | } 121 | }); 122 | 123 | export default InfoScreen; 124 | -------------------------------------------------------------------------------- /example-react-native-navigation/src/screens/transitions/sharedElementTransitions/Masonry/Item.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {StyleSheet, View, Text, Image} from 'react-native'; 3 | import {SharedElementTransition} from 'react-native-navigation'; 4 | 5 | const SHOW_DURATION = 240; 6 | const HIDE_DURATION = 200; 7 | 8 | class Item extends React.Component { 9 | 10 | static navigatorStyle = { 11 | navBarHidden: true, 12 | drawUnderNavBar: true 13 | }; 14 | 15 | render() { 16 | return ( 17 | 18 | 32 | 36 | 37 | 38 | ); 39 | } 40 | } 41 | 42 | const styles = StyleSheet.create({ 43 | container: { 44 | flex: 1, 45 | backgroundColor: '#ffffff', 46 | justifyContent: 'center', 47 | }, 48 | image: { 49 | width: 400, 50 | height: 400, 51 | } 52 | }); 53 | 54 | export default Item; 55 | -------------------------------------------------------------------------------- /example-react-native-navigation/src/screens/transitions/sharedElementTransitions/Masonry/Masonry.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {StyleSheet, View, Text, PixelRatio, FlatList, Image, TouchableHighlight} from 'react-native'; 3 | import {Navigation, SharedElementTransition} from 'react-native-navigation'; 4 | 5 | import images from './images'; 6 | 7 | const ROW_HEIGHT = 650; 8 | const COLS = 2; 9 | 10 | class Masonry extends React.Component { 11 | 12 | onAssetPress = (image, key) => { 13 | this.props.navigator.push({ 14 | screen: 'example.Transitions.SharedElementTransitions.Masonry.Item', 15 | sharedElements: [key], 16 | passProps: { 17 | image, 18 | sharedImageId: key, 19 | }, 20 | }); 21 | }; 22 | 23 | renderAsset = (asset, row, column, index) => { 24 | const key = `row_${row}_column_${column}_asset_${index}`; 25 | 26 | return ( 27 | { 30 | this.onAssetPress(asset.source, key); 31 | }} 32 | style={[styles.assetContainer, {flex: asset.weight}]} 33 | > 34 | 35 | 39 | 44 | 45 | 46 | 47 | ); 48 | }; 49 | 50 | renderItem = ({item, index}) => { 51 | return ( 52 | 53 | {[...new Array(COLS)].map((column, columnIndex) => ( 54 | 58 | {item.images[columnIndex].map((asset, assetIndex) => this.renderAsset(asset, index, columnIndex, assetIndex))} 59 | 60 | ))} 61 | 62 | ); 63 | }; 64 | 65 | render() { 66 | return ( 67 | 68 | ({length: ROW_HEIGHT, offset: ROW_HEIGHT * index, index})} 72 | /> 73 | 74 | ); 75 | } 76 | } 77 | 78 | const styles = StyleSheet.create({ 79 | container: { 80 | flex: 1, 81 | backgroundColor: '#ffffff', 82 | }, 83 | item: { 84 | flex: 1, 85 | flexDirection: 'row', 86 | }, 87 | assetContainer: { 88 | margin: 5, 89 | borderRadius: 6, 90 | borderWidth: StyleSheet.hairlineWidth, 91 | }, 92 | asset: { 93 | flex: 1, 94 | borderRadius: 6, 95 | }, 96 | }); 97 | 98 | export default Masonry; 99 | -------------------------------------------------------------------------------- /example-react-native-navigation/src/screens/transitions/sharedElementTransitions/Masonry/images.js: -------------------------------------------------------------------------------- 1 | const images = [ 2 | require('../../../../../img/masonry/Cfw87359UT.jpeg'), 3 | require('../../../../../img/masonry/a848dHxA4e.jpeg'), 4 | require('../../../../../img/masonry/AdGXmD1CH6.jpeg'), 5 | require('../../../../../img/masonry/5Gi8kova3k.jpeg'), 6 | require('../../../../../img/masonry/ri90ueind7.jpeg'), 7 | require('../../../../../img/masonry/kVN0FryOZk.jpeg'), 8 | require('../../../../../img/masonry/v8KLi2f0Tr.jpeg'), 9 | require('../../../../../img/masonry/xU42hx19BB.jpeg'), 10 | require('../../../../../img/masonry/61mpAVRV73.jpeg'), 11 | require('../../../../../img/masonry/pqgylg80SD.jpeg'), 12 | require('../../../../../img/masonry/37r6Cqp1B8.jpeg'), 13 | require('../../../../../img/masonry/N30E32431C.jpeg'), 14 | require('../../../../../img/masonry/rVOcz7rd0z.jpeg'), 15 | require('../../../../../img/masonry/A4g0lZ33Z8.jpeg'), 16 | require('../../../../../img/masonry/j51Pva1P8L.jpeg'), 17 | require('../../../../../img/masonry/158xD4xbeh.jpeg'), 18 | ]; 19 | 20 | function randomImage() { 21 | return images[Math.floor(Math.random() * images.length)]; 22 | } 23 | 24 | export default [ 25 | { 26 | key: 1, 27 | images: [[{ 28 | weight: 2, 29 | source: randomImage(), 30 | }, { 31 | weight: 1, 32 | source: randomImage(), 33 | }, { 34 | weight: 3, 35 | source: randomImage(), 36 | }], [{ 37 | weight: 1, 38 | source: randomImage(), 39 | }, { 40 | weight: 3, 41 | source: randomImage(), 42 | }, { 43 | weight: 1, 44 | source: randomImage(), 45 | }, { 46 | weight: 1, 47 | source: randomImage(), 48 | }]], 49 | }, 50 | { 51 | key: 2, 52 | images: [[{ 53 | weight: 1, 54 | source: randomImage(), 55 | }, { 56 | weight: 1, 57 | source: randomImage(), 58 | }, { 59 | weight: 1, 60 | source: randomImage(), 61 | }, { 62 | weight: 3, 63 | source: randomImage(), 64 | }], [{ 65 | weight: 3, 66 | source: randomImage(), 67 | }, { 68 | weight: 3, 69 | source: randomImage(), 70 | }]], 71 | }, 72 | { 73 | key: 3, 74 | images: [[{ 75 | weight: 1, 76 | source: randomImage(), 77 | }, { 78 | weight: 2, 79 | source: randomImage(), 80 | }, { 81 | weight: 1, 82 | source: randomImage(), 83 | }, { 84 | weight: 2, 85 | source: randomImage(), 86 | }], [{ 87 | weight: 2, 88 | source: randomImage(), 89 | }, { 90 | weight: 1, 91 | source: randomImage(), 92 | }, { 93 | weight: 2, 94 | source: randomImage(), 95 | }, { 96 | weight: 1, 97 | source: randomImage(), 98 | }]], 99 | } 100 | ]; 101 | -------------------------------------------------------------------------------- /example-react-native-navigation/src/screens/transitions/sharedElementTransitions/Profiles/Profiles.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import { 3 | ScrollView, 4 | TouchableOpacity, 5 | StyleSheet, 6 | Image, 7 | Text, 8 | View, 9 | ScrolView 10 | } from 'react-native'; 11 | import {SharedElementTransition} from 'react-native-navigation'; 12 | import * as Animatable from 'react-native-animatable'; 13 | 14 | const FADE_DURATION = 500; 15 | const SHOW_DURATION = 500; 16 | const HIDE_DURATION = 500; 17 | 18 | const ICON_MARGIN = 24; 19 | 20 | class Profiles extends Component { 21 | 22 | constructor(props) { 23 | super(props); 24 | this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this)); 25 | this.state = { 26 | animationType: 'fadeIn' 27 | } 28 | } 29 | 30 | componentDidMount() { 31 | if (__STRESS_TEST__) { 32 | setTimeout(() => { 33 | this.setState({ 34 | animationType: 'fadeOut' 35 | }); 36 | this.props.navigator.pop(); 37 | }, 650); 38 | } 39 | } 40 | 41 | onNavigatorEvent(event) { 42 | if (event.id === 'backPress') { 43 | this.setState({ 44 | animationType: 'fadeOut' 45 | }); 46 | this.props.navigator.pop(); 47 | } 48 | } 49 | 50 | _renderHeader() { 51 | return ( 52 | 58 | 59 | 60 | {this._renderIcon()} 61 | {this._renderTitle()} 62 | 63 | 64 | ); 65 | } 66 | 67 | _renderTitle() { 68 | return ( 69 | 70 | 96 | {this.props.title} 97 | 98 | 99 | ); 100 | } 101 | 102 | _renderContent() { 103 | return ( 104 | 109 | 112 | {this._genRows()} 113 | 114 | 115 | ); 116 | } 117 | 118 | _genRows() { 119 | const children = []; 120 | for (let ii = 0; ii < 30; ii++) { 121 | children.push( 122 | {'row ' + ii} 123 | ); 124 | } 125 | return children; 126 | } 127 | 128 | _renderIcon() { 129 | return ( 130 | 156 | 161 | 162 | ); 163 | } 164 | 165 | render() { 166 | return ( 167 | 168 | {this._renderHeader()} 169 | {this._renderContent()} 170 | 171 | ); 172 | } 173 | 174 | } 175 | 176 | const styles = StyleSheet.create({ 177 | container: { 178 | flex: 1, 179 | flexDirection: 'column', 180 | backgroundColor: 'transparent' 181 | }, 182 | header: { 183 | height: 110, 184 | flexDirection: 'column-reverse' 185 | }, 186 | titleContainer: { 187 | marginLeft: ICON_MARGIN + 90 + +16, 188 | marginBottom: 8 189 | }, 190 | title: { 191 | fontSize: 23, 192 | }, 193 | iconContainer: { 194 | position: 'absolute', 195 | bottom: -ICON_MARGIN, 196 | left: ICON_MARGIN 197 | }, 198 | heroIcon: { 199 | width: 90, 200 | height: 90, 201 | resizeMode: 'contain' 202 | }, 203 | body: { 204 | flex: 4, 205 | backgroundColor: 'white', 206 | }, 207 | list: { 208 | marginTop: 16, 209 | marginHorizontal: 8 210 | } 211 | }); 212 | 213 | export default Profiles; 214 | -------------------------------------------------------------------------------- /example-react-native-navigation/src/screens/transitions/sharedElementTransitions/Profiles/data.js: -------------------------------------------------------------------------------- 1 | export default heroes = [ 2 | { 3 | title: 'Bounty Hunter', 4 | icon: require('../../../../../img/heroes/bouny_hunter.png'), 5 | primaryColor: '#f0cb3c', 6 | titleColor: '#993825' 7 | }, 8 | { 9 | title: 'Templar Assasin', 10 | icon: require('../../../../../img/heroes/templar_assasin.png'), 11 | primaryColor: '#f6f6f6', 12 | titleColor: 'red', 13 | }, 14 | { 15 | title: 'Oracle', 16 | icon: require('../../../../../img/heroes/oracle.png'), 17 | primaryColor: '#19b0b9', 18 | titleColor: '#a2195b' 19 | }, 20 | { 21 | title: 'Earthspirit', 22 | icon: require('../../../../../img/heroes/earthspirit.png'), 23 | primaryColor: '#819c97', 24 | titleColor: 'red', 25 | }, 26 | { 27 | title: 'Skywrath Mage', 28 | icon: require('../../../../../img/heroes/skywrath_mage.png'), 29 | primaryColor: '#dfb42e', 30 | titleColor: '#1e5ea6' 31 | } 32 | ]; 33 | -------------------------------------------------------------------------------- /example-react-native-navigation/src/screens/types/CustomButtonScreen.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | View, 4 | StyleSheet, 5 | Text, 6 | TouchableOpacity, 7 | Button 8 | } from 'react-native'; 9 | import {Navigation} from 'react-native-navigation'; 10 | 11 | let navigator; 12 | const CustomButton = ({text}) => 13 | navigator.pop()} 16 | > 17 | 18 | {text} 19 | 20 | ; 21 | Navigation.registerComponent('CustomButton', () => CustomButton); 22 | 23 | export default class CustomButtonScreen extends React.Component { 24 | static navigatorButtons = { 25 | rightButtons: [ 26 | { 27 | id: 'custom-button', 28 | component: 'CustomButton', 29 | passProps: { 30 | text: 'Hi!' 31 | } 32 | } 33 | ] 34 | }; 35 | 36 | componentWillMount() { 37 | navigator = this.props.navigator; 38 | } 39 | 40 | render() { 41 | return ( 42 | 43 | Custom Left Button 44 | 45 | ); 46 | } 47 | 48 | componentWillUnmount() { 49 | navigator = null; 50 | } 51 | } 52 | 53 | const styles = StyleSheet.create({ 54 | container: { 55 | flex: 1, 56 | alignItems: 'center', 57 | justifyContent: 'center', 58 | backgroundColor: 'white' 59 | }, 60 | buttonContainer: { 61 | width: 48, 62 | height: 48, 63 | justifyContent: 'center', 64 | alignItems: 'center' 65 | }, 66 | button: { 67 | backgroundColor: 'tomato', 68 | width: 34, 69 | height: 34, 70 | borderRadius: 34 / 2, 71 | overflow: 'hidden', 72 | justifyContent: 'center', 73 | alignItems: 'center' 74 | } 75 | }); 76 | -------------------------------------------------------------------------------- /example-react-native-navigation/src/screens/types/CustomTopBar.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import { 3 | StyleSheet, 4 | View, 5 | TouchableOpacity, 6 | Text, 7 | Alert, 8 | Platform 9 | } from 'react-native'; 10 | 11 | export default class CustomTopBar extends Component { 12 | 13 | constructor(props) { 14 | super(props); 15 | this.state = {}; 16 | } 17 | 18 | render() { 19 | return ( 20 | 21 | Alert.alert(this.props.title, 'Hello custom btn :)') }> 22 | Custom 23 | 24 | 25 | ); 26 | } 27 | } 28 | 29 | const styles = StyleSheet.create({ 30 | container: { 31 | flex: 1, 32 | justifyContent: 'center', 33 | alignItems: 'center', 34 | // backgroundColor: 'yellow' 35 | }, 36 | button: { 37 | alignSelf: 'center', 38 | // backgroundColor: 'green' 39 | }, 40 | text: { 41 | alignSelf: 'center', 42 | color: 'white' 43 | } 44 | }); 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /example-react-native-navigation/src/screens/types/CustomTopBarScreen.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import { 3 | View, 4 | StyleSheet, 5 | Text 6 | } from 'react-native'; 7 | import {Navigation} from 'react-native-navigation'; 8 | import CustomTopBar from './CustomTopBar'; 9 | 10 | Navigation.registerComponent('example.CustomTopBar', () => CustomTopBar); 11 | 12 | export default class CustomTopBarScreen extends Component { 13 | 14 | static navigatorButtons = { 15 | leftButtons: [ 16 | { 17 | title: 'Back', 18 | id: 'helloBtn', 19 | } 20 | ], 21 | rightButtons: [ 22 | { 23 | title: 'Right', 24 | id: 'helloBtn2', 25 | } 26 | ], 27 | }; 28 | 29 | componentDidMount() { 30 | this.props.navigator.setStyle({ 31 | navBarCustomView: 'example.CustomTopBar', 32 | navBarComponentAlignment: 'center', 33 | navBarCustomViewInitialProps: { 34 | title: 'Hi Custom', 35 | navigator: this.props.navigator, 36 | }, 37 | }); 38 | this.props.navigator.setOnNavigatorEvent((e) => { 39 | if (e.type == 'NavBarButtonPress') { // this is the event type for button presses 40 | if (e.id == 'helloBtn') { // this is the same id field from the static navigatorButtons definition 41 | this.props.navigator.pop(); 42 | // alert('Hello left btn'); 43 | } 44 | if (e.id == 'helloBtn2') { // this is the same id field from the static navigatorButtons definition 45 | alert('Hello right btn'); 46 | } 47 | } 48 | }); 49 | } 50 | 51 | render() { 52 | return ( 53 | 54 | Custom component in TopBar 55 | 56 | ); 57 | } 58 | } 59 | 60 | const styles = StyleSheet.create({ 61 | container: { 62 | flex: 1, 63 | alignItems: 'center', 64 | justifyContent: 'center', 65 | backgroundColor: 'white' 66 | } 67 | }); 68 | -------------------------------------------------------------------------------- /example-react-native-navigation/src/screens/types/Drawer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {StyleSheet, View, Button} from 'react-native'; 3 | 4 | class MyClass extends React.Component { 5 | 6 | onShowModal = () => { 7 | this.toggleDrawer(); 8 | this.props.navigator.showModal({ 9 | screen: 'example.Types.Modal', 10 | title: `Modal` 11 | }); 12 | }; 13 | 14 | onPushToFirstTab = () => { 15 | this.toggleDrawer(); 16 | this.props.navigator.handleDeepLink({ 17 | link: 'tab1/example.Types.Push' 18 | }); 19 | }; 20 | 21 | toggleDrawer = () => { 22 | this.props.navigator.toggleDrawer({ 23 | side: 'left' 24 | }); 25 | }; 26 | 27 | render() { 28 | return ( 29 | 30 | 31 | 86 | 87 | ); 88 | })} 89 | 90 | 91 | 92 | ); 93 | } 94 | } 95 | 96 | function getRandomColor(index) { 97 | return Colors[index % Colors.length]; 98 | } 99 | 100 | const styles = StyleSheet.create({ 101 | cellContainer: { 102 | flex: 1, 103 | paddingVertical: 30, 104 | } 105 | }); 106 | 107 | 108 | 109 | module.exports = ListScreen; -------------------------------------------------------------------------------- /example-react-native-navigation/src/screens/types/Modal.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import {StyleSheet, View, Text, Button, TouchableOpacity, Platform} from 'react-native'; 3 | import {Navigation} from 'react-native-navigation'; 4 | 5 | const CloseModalButton = ({text}) => 6 | navigator.dismissModal()} 9 | > 10 | 11 | {text} 12 | 13 | ; 14 | Navigation.registerComponent('CloseModalButton', () => CloseModalButton); 15 | 16 | class Modal extends Component { 17 | static navigatorButtons = { 18 | rightButtons: [ 19 | { 20 | id: 'close-modal-button', 21 | component: Platform.OS === 'ios' ? 'CloseModalButton' : null, 22 | passProps: { 23 | text: 'Close' 24 | } 25 | } 26 | ] 27 | }; 28 | 29 | componentWillMount() { 30 | navigator = this.props.navigator; 31 | } 32 | 33 | onPushScreen = () => { 34 | this.props.navigator.push({ 35 | screen: 'example.Types.Modal', 36 | title: `Screen ${this.props.count || 1}`, 37 | passProps: { 38 | count: this.props.count ? this.props.count + 1 : 2 39 | } 40 | }); 41 | }; 42 | 43 | onResetTo = () => { 44 | this.props.navigator.resetTo({ 45 | screen: 'example.Types.Modal', 46 | icon: require('../../../img/list.png'), 47 | title: 'Modal' 48 | }); 49 | }; 50 | 51 | onPopToRoot = () => { 52 | this.props.navigator.popToRoot(); 53 | }; 54 | 55 | render() { 56 | return ( 57 | 58 | Modal Screen 59 | 60 |