├── PagedScrollViewExample ├── .watchmanconfig ├── android │ ├── settings.gradle │ ├── app │ │ ├── src │ │ │ └── main │ │ │ │ ├── res │ │ │ │ ├── values │ │ │ │ │ ├── strings.xml │ │ │ │ │ └── styles.xml │ │ │ │ ├── mipmap-hdpi │ │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-mdpi │ │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-xhdpi │ │ │ │ │ └── ic_launcher.png │ │ │ │ └── mipmap-xxhdpi │ │ │ │ │ └── ic_launcher.png │ │ │ │ ├── AndroidManifest.xml │ │ │ │ └── java │ │ │ │ └── com │ │ │ │ └── pagedscrollviewexample │ │ │ │ └── MainActivity.java │ │ ├── BUCK │ │ ├── proguard-rules.pro │ │ └── build.gradle │ ├── keystores │ │ ├── debug.keystore.properties │ │ └── BUCK │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── build.gradle │ ├── gradle.properties │ ├── gradlew.bat │ └── gradlew ├── device.js ├── package.json ├── index.ios.js ├── index.android.js ├── .gitignore ├── ios │ ├── PagedScrollViewExample │ │ ├── AppDelegate.h │ │ ├── main.m │ │ ├── Images.xcassets │ │ │ └── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ ├── Info.plist │ │ ├── AppDelegate.m │ │ └── Base.lproj │ │ │ └── LaunchScreen.xib │ ├── PagedScrollViewExampleTests │ │ ├── Info.plist │ │ └── PagedScrollViewExampleTests.m │ └── PagedScrollViewExample.xcodeproj │ │ ├── xcshareddata │ │ └── xcschemes │ │ │ └── PagedScrollViewExample.xcscheme │ │ └── project.pbxproj ├── .flowconfig ├── app.js └── PagedScrollView.js ├── .babelrc ├── .gitignore ├── .npmignore ├── example.gif ├── LICENSE ├── package.json ├── README.md ├── index.js └── src └── PagedScrollView.js /PagedScrollViewExample/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-native"] 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | PagedScrollViewExample/node_modules 2 | npm-debug.log 3 | lib 4 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | example.gif 2 | PagedScrollViewExample 3 | src 4 | .babelrc 5 | -------------------------------------------------------------------------------- /example.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rreusser/react-native-paged-scroll-view/HEAD/example.gif -------------------------------------------------------------------------------- /PagedScrollViewExample/android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'PagedScrollViewExample' 2 | 3 | include ':app' 4 | -------------------------------------------------------------------------------- /PagedScrollViewExample/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | PagedScrollViewExample 3 | 4 | -------------------------------------------------------------------------------- /PagedScrollViewExample/android/keystores/debug.keystore.properties: -------------------------------------------------------------------------------- 1 | key.store=debug.keystore 2 | key.alias=androiddebugkey 3 | key.store.password=android 4 | key.alias.password=android 5 | -------------------------------------------------------------------------------- /PagedScrollViewExample/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rreusser/react-native-paged-scroll-view/HEAD/PagedScrollViewExample/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /PagedScrollViewExample/android/keystores/BUCK: -------------------------------------------------------------------------------- 1 | keystore( 2 | name = 'debug', 3 | store = 'debug.keystore', 4 | properties = 'debug.keystore.properties', 5 | visibility = [ 6 | 'PUBLIC', 7 | ], 8 | ) 9 | -------------------------------------------------------------------------------- /PagedScrollViewExample/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rreusser/react-native-paged-scroll-view/HEAD/PagedScrollViewExample/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /PagedScrollViewExample/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rreusser/react-native-paged-scroll-view/HEAD/PagedScrollViewExample/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /PagedScrollViewExample/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rreusser/react-native-paged-scroll-view/HEAD/PagedScrollViewExample/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /PagedScrollViewExample/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rreusser/react-native-paged-scroll-view/HEAD/PagedScrollViewExample/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /PagedScrollViewExample/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /PagedScrollViewExample/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | zipStoreBase=GRADLE_USER_HOME 4 | zipStorePath=wrapper/dists 5 | distributionUrl=https\://services.gradle.org/distributions/gradle-2.4-all.zip 6 | -------------------------------------------------------------------------------- /PagedScrollViewExample/device.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | import { Dimensions } from 'react-native' 4 | 5 | class Device { } 6 | 7 | Object.defineProperties(Device, { 8 | width: { 9 | get: () => Dimensions.get('window').width 10 | }, 11 | 12 | height: { 13 | get: () => Dimensions.get('window').height 14 | } 15 | }) 16 | 17 | export default Device 18 | -------------------------------------------------------------------------------- /PagedScrollViewExample/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "PagedScrollViewExample", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "node node_modules/react-native/local-cli/cli.js start" 7 | }, 8 | "dependencies": { 9 | "react": "^0.14.8", 10 | "react-native": "^0.25.1", 11 | "react-native-invertible-scroll-view": "^1.0.0" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /PagedScrollViewExample/index.ios.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import React, { Component } from 'react'; 4 | 5 | import { 6 | AppRegistry 7 | } from 'react-native'; 8 | 9 | import App from './app' 10 | 11 | var PagedScrollViewExample = React.createClass({ 12 | render () { 13 | return 14 | } 15 | }); 16 | 17 | AppRegistry.registerComponent('PagedScrollViewExample', () => PagedScrollViewExample); 18 | -------------------------------------------------------------------------------- /PagedScrollViewExample/index.android.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import React, { Component } from 'react'; 4 | 5 | import { 6 | AppRegistry 7 | } from 'react-native'; 8 | 9 | import App from './app' 10 | 11 | var PagedScrollViewExample = React.createClass({ 12 | render () { 13 | return 14 | } 15 | }); 16 | 17 | AppRegistry.registerComponent('PagedScrollViewExample', () => PagedScrollViewExample); 18 | -------------------------------------------------------------------------------- /PagedScrollViewExample/.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | project.xcworkspace 24 | 25 | # Android/IJ 26 | # 27 | .idea 28 | .gradle 29 | local.properties 30 | 31 | # node.js 32 | # 33 | node_modules/ 34 | npm-debug.log 35 | -------------------------------------------------------------------------------- /PagedScrollViewExample/ios/PagedScrollViewExample/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 | -------------------------------------------------------------------------------- /PagedScrollViewExample/ios/PagedScrollViewExample/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 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2015, Ricky Reusser 2 | 3 | Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies. 4 | 5 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. 6 | -------------------------------------------------------------------------------- /PagedScrollViewExample/android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | repositories { 5 | jcenter() 6 | } 7 | dependencies { 8 | classpath 'com.android.tools.build:gradle:1.3.1' 9 | 10 | // NOTE: Do not place your application dependencies here; they belong 11 | // in the individual module build.gradle files 12 | } 13 | } 14 | 15 | allprojects { 16 | repositories { 17 | mavenLocal() 18 | jcenter() 19 | maven { 20 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 21 | url "$projectDir/../../node_modules/react-native/android" 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /PagedScrollViewExample/ios/PagedScrollViewExample/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 | } -------------------------------------------------------------------------------- /PagedScrollViewExample/ios/PagedScrollViewExampleTests/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 | -------------------------------------------------------------------------------- /PagedScrollViewExample/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 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-paged-scroll-view", 3 | "version": "2.0.4", 4 | "description": "A higher-order React Native component to compute the current and total pages of a ScrollView", 5 | "main": "./src/PagedScrollView.js", 6 | "scripts": { 7 | "test": "semistandard src/PagedScrollView.js", 8 | "clean": "rimraf lib", 9 | "build": "mkdir -p lib && babel src --out-dir lib && cp lib/PagedScrollView.js PagedScrollViewExample/PagedScrollView.js", 10 | "prepublish": "npm run test && npm run clean && npm run build" 11 | }, 12 | "keywords": [ 13 | "react-native", 14 | "react", 15 | "scrollview" 16 | ], 17 | "repository": { 18 | "type": "git", 19 | "url": "git://github.com/rreusser/react-native-paged-scroll-view.git" 20 | }, 21 | "author": "Ricky Reusser", 22 | "license": "MIT", 23 | "devDependencies": { 24 | "babel-cli": "^6.8.0", 25 | "babel-preset-react-native": "^1.8.0", 26 | "rimraf": "^2.5.2", 27 | "semistandard": "^7.0.5" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /PagedScrollViewExample/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | 12 | 13 | 18 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /PagedScrollViewExample/android/app/src/main/java/com/pagedscrollviewexample/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.pagedscrollviewexample; 2 | 3 | import com.facebook.react.ReactActivity; 4 | import com.facebook.react.ReactPackage; 5 | import com.facebook.react.shell.MainReactPackage; 6 | 7 | import java.util.Arrays; 8 | import java.util.List; 9 | 10 | public class MainActivity extends ReactActivity { 11 | 12 | /** 13 | * Returns the name of the main component registered from JavaScript. 14 | * This is used to schedule rendering of the component. 15 | */ 16 | @Override 17 | protected String getMainComponentName() { 18 | return "PagedScrollViewExample"; 19 | } 20 | 21 | /** 22 | * Returns whether dev mode should be enabled. 23 | * This enables e.g. the dev menu. 24 | */ 25 | @Override 26 | protected boolean getUseDeveloperSupport() { 27 | return BuildConfig.DEBUG; 28 | } 29 | 30 | /** 31 | * A list of packages used by the app. If the app uses additional views 32 | * or modules besides the default ones, add more packages here. 33 | */ 34 | @Override 35 | protected List getPackages() { 36 | return Arrays.asList( 37 | new MainReactPackage() 38 | ); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /PagedScrollViewExample/ios/PagedScrollViewExample/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | APPL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | LSRequiresIPhoneOS 24 | 25 | UILaunchStoryboardName 26 | LaunchScreen 27 | UIRequiredDeviceCapabilities 28 | 29 | armv7 30 | 31 | UISupportedInterfaceOrientations 32 | 33 | UIInterfaceOrientationPortrait 34 | UIInterfaceOrientationLandscapeLeft 35 | UIInterfaceOrientationLandscapeRight 36 | 37 | UIViewControllerBasedStatusBarAppearance 38 | 39 | NSLocationWhenInUseUsageDescription 40 | 41 | NSAppTransportSecurity 42 | 43 | 44 | NSAllowsArbitraryLoads 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /PagedScrollViewExample/android/app/BUCK: -------------------------------------------------------------------------------- 1 | import re 2 | 3 | # To learn about Buck see [Docs](https://buckbuild.com/). 4 | # To run your application with Buck: 5 | # - install Buck 6 | # - `npm start` - to start the packager 7 | # - `cd android` 8 | # - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US` 9 | # - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck 10 | # - `buck install -r android/app` - compile, install and run application 11 | # 12 | 13 | lib_deps = [] 14 | for jarfile in glob(['libs/*.jar']): 15 | name = 'jars__' + re.sub(r'^.*/([^/]+)\.jar$', r'\1', jarfile) 16 | lib_deps.append(':' + name) 17 | prebuilt_jar( 18 | name = name, 19 | binary_jar = jarfile, 20 | ) 21 | 22 | for aarfile in glob(['libs/*.aar']): 23 | name = 'aars__' + re.sub(r'^.*/([^/]+)\.aar$', r'\1', aarfile) 24 | lib_deps.append(':' + name) 25 | android_prebuilt_aar( 26 | name = name, 27 | aar = aarfile, 28 | ) 29 | 30 | android_library( 31 | name = 'all-libs', 32 | exported_deps = lib_deps 33 | ) 34 | 35 | android_library( 36 | name = 'app-code', 37 | srcs = glob([ 38 | 'src/main/java/**/*.java', 39 | ]), 40 | deps = [ 41 | ':all-libs', 42 | ':build_config', 43 | ':res', 44 | ], 45 | ) 46 | 47 | android_build_config( 48 | name = 'build_config', 49 | package = 'com.pagedscrollviewexample', 50 | ) 51 | 52 | android_resource( 53 | name = 'res', 54 | res = 'src/main/res', 55 | package = 'com.pagedscrollviewexample', 56 | ) 57 | 58 | android_binary( 59 | name = 'app', 60 | package_type = 'debug', 61 | manifest = 'src/main/AndroidManifest.xml', 62 | keystore = '//android/keystores:debug', 63 | deps = [ 64 | ':app-code', 65 | ], 66 | ) 67 | -------------------------------------------------------------------------------- /PagedScrollViewExample/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | 3 | # We fork some components by platform. 4 | .*/*.web.js 5 | .*/*.android.js 6 | 7 | # Some modules have their own node_modules with overlap 8 | .*/node_modules/node-haste/.* 9 | 10 | # Ugh 11 | .*/node_modules/babel.* 12 | .*/node_modules/babylon.* 13 | .*/node_modules/invariant.* 14 | 15 | # Ignore react and fbjs where there are overlaps, but don't ignore 16 | # anything that react-native relies on 17 | .*/node_modules/fbjs/lib/Map.js 18 | .*/node_modules/fbjs/lib/fetch.js 19 | .*/node_modules/fbjs/lib/ExecutionEnvironment.js 20 | .*/node_modules/fbjs/lib/ErrorUtils.js 21 | 22 | # Flow has a built-in definition for the 'react' module which we prefer to use 23 | # over the currently-untyped source 24 | .*/node_modules/react/react.js 25 | .*/node_modules/react/lib/React.js 26 | .*/node_modules/react/lib/ReactDOM.js 27 | 28 | .*/__mocks__/.* 29 | .*/__tests__/.* 30 | 31 | .*/commoner/test/source/widget/share.js 32 | 33 | # Ignore commoner tests 34 | .*/node_modules/commoner/test/.* 35 | 36 | # See https://github.com/facebook/flow/issues/442 37 | .*/react-tools/node_modules/commoner/lib/reader.js 38 | 39 | # Ignore jest 40 | .*/node_modules/jest-cli/.* 41 | 42 | # Ignore Website 43 | .*/website/.* 44 | 45 | [include] 46 | 47 | [libs] 48 | node_modules/react-native/Libraries/react-native/react-native-interface.js 49 | 50 | [options] 51 | module.system=haste 52 | 53 | esproposal.class_static_fields=enable 54 | esproposal.class_instance_fields=enable 55 | 56 | munge_underscores=true 57 | 58 | module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub' 59 | module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\)$' -> 'RelativeImageStub' 60 | 61 | suppress_type=$FlowIssue 62 | suppress_type=$FlowFixMe 63 | suppress_type=$FixMe 64 | 65 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-1]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\) 66 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-1]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+ 67 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy 68 | 69 | [version] 70 | 0.21.0 71 | -------------------------------------------------------------------------------- /PagedScrollViewExample/ios/PagedScrollViewExample/AppDelegate.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import "AppDelegate.h" 11 | 12 | #import "RCTRootView.h" 13 | 14 | @implementation AppDelegate 15 | 16 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 17 | { 18 | NSURL *jsCodeLocation; 19 | 20 | /** 21 | * Loading JavaScript code - uncomment the one you want. 22 | * 23 | * OPTION 1 24 | * Load from development server. Start the server from the repository root: 25 | * 26 | * $ npm start 27 | * 28 | * To run on device, change `localhost` to the IP address of your computer 29 | * (you can get this by typing `ifconfig` into the terminal and selecting the 30 | * `inet` value under `en0:`) and make sure your computer and iOS device are 31 | * on the same Wi-Fi network. 32 | */ 33 | 34 | jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"]; 35 | 36 | /** 37 | * OPTION 2 38 | * Load from pre-bundled file on disk. The static bundle is automatically 39 | * generated by the "Bundle React Native code and images" build step when 40 | * running the project on an actual device or running the project on the 41 | * simulator in the "Release" build configuration. 42 | */ 43 | 44 | // jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; 45 | 46 | RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation 47 | moduleName:@"PagedScrollViewExample" 48 | initialProperties:nil 49 | launchOptions:launchOptions]; 50 | 51 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 52 | UIViewController *rootViewController = [UIViewController new]; 53 | rootViewController.view = rootView; 54 | self.window.rootViewController = rootViewController; 55 | [self.window makeKeyAndVisible]; 56 | return YES; 57 | } 58 | 59 | @end 60 | -------------------------------------------------------------------------------- /PagedScrollViewExample/ios/PagedScrollViewExampleTests/PagedScrollViewExampleTests.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 "RCTLog.h" 14 | #import "RCTRootView.h" 15 | 16 | #define TIMEOUT_SECONDS 600 17 | #define TEXT_TO_LOOK_FOR @"Welcome to React Native!" 18 | 19 | @interface PagedScrollViewExampleTests : XCTestCase 20 | 21 | @end 22 | 23 | @implementation PagedScrollViewExampleTests 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 | -------------------------------------------------------------------------------- /PagedScrollViewExample/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 | *** get*(); 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 | -------------------------------------------------------------------------------- /PagedScrollViewExample/android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @if "%DEBUG%" == "" @echo off 2 | @rem ########################################################################## 3 | @rem 4 | @rem Gradle startup script for Windows 5 | @rem 6 | @rem ########################################################################## 7 | 8 | @rem Set local scope for the variables with windows NT shell 9 | if "%OS%"=="Windows_NT" setlocal 10 | 11 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 12 | set DEFAULT_JVM_OPTS= 13 | 14 | set DIRNAME=%~dp0 15 | if "%DIRNAME%" == "" set DIRNAME=. 16 | set APP_BASE_NAME=%~n0 17 | set APP_HOME=%DIRNAME% 18 | 19 | @rem Find java.exe 20 | if defined JAVA_HOME goto findJavaFromJavaHome 21 | 22 | set JAVA_EXE=java.exe 23 | %JAVA_EXE% -version >NUL 2>&1 24 | if "%ERRORLEVEL%" == "0" goto init 25 | 26 | echo. 27 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 28 | echo. 29 | echo Please set the JAVA_HOME variable in your environment to match the 30 | echo location of your Java installation. 31 | 32 | goto fail 33 | 34 | :findJavaFromJavaHome 35 | set JAVA_HOME=%JAVA_HOME:"=% 36 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 37 | 38 | if exist "%JAVA_EXE%" goto init 39 | 40 | echo. 41 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 42 | echo. 43 | echo Please set the JAVA_HOME variable in your environment to match the 44 | echo location of your Java installation. 45 | 46 | goto fail 47 | 48 | :init 49 | @rem Get command-line arguments, handling Windowz variants 50 | 51 | if not "%OS%" == "Windows_NT" goto win9xME_args 52 | if "%@eval[2+2]" == "4" goto 4NT_args 53 | 54 | :win9xME_args 55 | @rem Slurp the command line arguments. 56 | set CMD_LINE_ARGS= 57 | set _SKIP=2 58 | 59 | :win9xME_args_slurp 60 | if "x%~1" == "x" goto execute 61 | 62 | set CMD_LINE_ARGS=%* 63 | goto execute 64 | 65 | :4NT_args 66 | @rem Get arguments from the 4NT Shell from JP Software 67 | set CMD_LINE_ARGS=%$ 68 | 69 | :execute 70 | @rem Setup the command line 71 | 72 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 73 | 74 | @rem Execute Gradle 75 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS% 76 | 77 | :end 78 | @rem End local scope for the variables with windows NT shell 79 | if "%ERRORLEVEL%"=="0" goto mainEnd 80 | 81 | :fail 82 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 83 | rem the _cmd.exe /c_ return code! 84 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 85 | exit /b 1 86 | 87 | :mainEnd 88 | if "%OS%"=="Windows_NT" endlocal 89 | 90 | :omega 91 | -------------------------------------------------------------------------------- /PagedScrollViewExample/ios/PagedScrollViewExample/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 | -------------------------------------------------------------------------------- /PagedScrollViewExample/app.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import React, { Component } from 'react'; 4 | 5 | import { 6 | AppRegistry, 7 | StyleSheet, 8 | Text, 9 | View, 10 | ScrollView, 11 | Switch, 12 | TouchableOpacity, 13 | } from 'react-native'; 14 | 15 | import Device from './device' 16 | import AddPaging from './PagedScrollView' 17 | import InvertibleScrollView from 'react-native-invertible-scroll-view'; 18 | var InvertiblePagedScrollView = AddPaging(InvertibleScrollView) 19 | const slideColors = ['#678', '#786', '#867'] 20 | 21 | var App = React.createClass({ 22 | getInitialState: function () { 23 | return { 24 | horizontal: true, 25 | inverted: false 26 | } 27 | }, 28 | 29 | handlePageChange: function (state) { 30 | this.setState(state) 31 | }, 32 | 33 | slideStyles: function (i) { 34 | return { 35 | width: Device.width, 36 | height: Device.height, 37 | backgroundColor: slideColors[i % slideColors.length], 38 | } 39 | }, 40 | 41 | renderSlide: function(x, i) { 42 | return ( 43 | 44 | ) 45 | }, 46 | 47 | renderPagination () { 48 | return ( 49 | 50 | 51 | Horizontal: {this.state.currentHorizontalPage} / {this.state.totalHorizontalPages} 52 | 53 | 54 | Vertical: {this.state.currentVerticalPage} / {this.state.totalVerticalPages} 55 | 56 | 57 | Horizontal? 58 | this.setState({horizontal: value})} 61 | value={this.state.horizontal} 62 | /> 63 | 64 | 65 | Inverted? 66 | this.setState({inverted: value})} 69 | value={this.state.inverted} 70 | /> 71 | 72 | 73 | {this._scrollView.scrollToPage( 74 | this.state.currentHorizontalPage - (this.state.horizontal ? 1 : 0), 75 | this.state.currentVerticalPage - (this.state.horizontal ? 0 : 1) 76 | )}}> 77 | Prev 78 | 79 | {this._scrollView.scrollToPage( 80 | this.state.currentHorizontalPage + (this.state.horizontal ? 1 : 0), 81 | this.state.currentVerticalPage + (this.state.horizontal ? 0 : 1) 82 | )}}> 83 | Next 84 | 85 | 86 | 87 | ) 88 | }, 89 | 90 | render: function () { 91 | return ( 92 | 93 | {this._scrollView = c}} 95 | horizontal={this.state.horizontal} 96 | inverted={this.state.inverted} 97 | pagingEnabled={true} 98 | onPageChange={this.handlePageChange} 99 | > 100 | {new Array(10).fill(0).map(this.renderSlide)} 101 | 102 | {this.renderPagination()} 103 | 104 | ); 105 | } 106 | }); 107 | 108 | var styles = StyleSheet.create({ 109 | container: { 110 | flex: 1, 111 | }, 112 | pagination: { 113 | position: 'absolute', 114 | paddingHorizontal: 70, 115 | left: 0, 116 | bottom: 15, 117 | width: Device.width, 118 | backgroundColor: 'transparent', 119 | justifyContent: 'center', 120 | }, 121 | paginationText: { 122 | fontSize: 20, 123 | alignSelf: 'center', 124 | flex: 1, 125 | }, 126 | field: { 127 | height: 35, 128 | flexDirection: 'row', 129 | justifyContent: 'center', 130 | alignItems: 'center', 131 | } 132 | }); 133 | 134 | module.exports = App; 135 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-native-paged-scroll-view 2 | 3 | [![npm version](https://badge.fury.io/js/react-native-paged-scroll-view.svg)](https://badge.fury.io/js/react-native-paged-scroll-view) 4 | 5 | > A higher-order React Native component to compute the current and total pages of a ScrollView-compatible component 6 | 7 | **Note:** It sounds like there are a couple ugly bugs that have crept in. This was very useful for us at the time, but my job hasn't involved working with react native for nearly six months now, so it's difficult for me to find the time to debug. I'll gladly merge and publish pull requests as quickly as possible, but I won't be actively fixing bugs or maintaining. My apologies and best wishes! 8 | 9 | ## Introduction 10 | 11 | This module implements a [higher-order component](https://gist.github.com/sebmarkbage/ef0bf1f338a7182b6775) that computes the current and total pages contained in a React Native [ScrollView](https://facebook.github.io/react-native/docs/scrollview.html) (or functionally similar) component. So it's really very simple. Seriously, when you get down to it it's like a division and a floor function. But it attempts to solve layout race conditions, re-layout and other subtleties. This component could trivially be used as a swiper alongside a page indicator but does not implement that itself. 12 | 13 | To be clear, this is strictly just a page-computing component. I assume you'll use it with [`pagingEnabled={true}`](https://facebook.github.io/react-native/docs/scrollview.html#pagingenabled), and it doesn't add paged scrolling for Android. 14 | 15 | ## Example 16 | 17 | ![PagedScrollViewExample](./example.gif) 18 | 19 | ```javascript 20 | import { ScrollView } from 'react-native' 21 | import AddPaging from 'react-native-paged-scroll-view' 22 | var PagedScrollView = AddPaging(ScrollView) 23 | 24 | ... 25 | handlePageChange (state) { 26 | console.log('current horizontal page:', state.currentHorizontalPage) 27 | console.log('current vertical page: ', state.currentVerticalPage) 28 | console.log('total horizontal pages: ', state.totalHorizontalPages) 29 | console.log('total vertical pages: ', state.totalVerticalPages) 30 | } 31 | 32 | render () { 33 | return ( 34 | 35 | ... 36 | 37 | ) 38 | } 39 | ... 40 | ``` 41 | 42 | ## Installation 43 | 44 | ```bash 45 | $ npm install react-native-paged-scroll-view 46 | ``` 47 | 48 | ## Usage 49 | 50 | ##### `require('react-native-paged-scroll-view')(Component, [scrollViewRefPropName="ref"])` 51 | Wrap either a `ScrollView` or a component functionally equivalent (implements `onScroll` and similar basic methods). Returns a higher order component with props passed through. 52 | 53 | **Arguments**: 54 | - `Component`: The component being wrapped. It must implement the basic methods of a ScrollView. 55 | - `scrollViewRefPropName`: the name of the property passed to `Component` that will return the ref. This exists in case you're using a wrapped a `ScrollView` component for which `ref` returns the ref of the wrapper instead of the ref of the `ScrollView`. If you provide this property, then your wrapped `ScrollView` should have a property `ref={this.props.} ` with your method name inserted. If you're just using a `ScrollView` though, you should be fine. Suggestions on how to improve this are welcome. 56 | 57 | **Props**: 58 | - `onPageChange`: `function(state)`: Executed on initial layout, when the page changes, or when the inner content changes. Callback is passed `state` object containing: 59 | - `totalHorizontalPages`: total number of horizontal pages, rounded to the nearest integer. 60 | - `totalVerticalPages`: total number of vertical pages, rounded to the nearest integer. 61 | - `currentHorizontalPage`: the current horizontal page, rounded to the nearest integer. 62 | - `currentVerticalPage`: the current vertical page, rounded to the nearest integer. 63 | - `onInitialization`: `function(ref)`: Executed once, when the component is initially mounted and only once the dimensions have been measured. Useful, for example, for scrolling to a specific page once the component is mounted. 64 | 65 | **Attributes**: 66 | - `ref.scrollX`: current horizontal scroll offset 67 | - `ref.scrollY`: current vertical scroll offset 68 | - `ref.state.currentHorizontalPage`: as defined above 69 | - `ref.state.currentVerticalPage`: as defined above 70 | - `ref.state.totalHorizontalPages`: as defined above 71 | - `ref.state.totalVerticalPages`: as defined above 72 | 73 | **Methods**: 74 | - `ref.scrollToPage(horizontal, vertical, animated)`: Scroll to a specific page 75 | 76 | # License 77 | (c) 2015 Ricky Reusser. MIT License. 78 | -------------------------------------------------------------------------------- /PagedScrollViewExample/ios/PagedScrollViewExample.xcodeproj/xcshareddata/xcschemes/PagedScrollViewExample.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 29 | 35 | 36 | 37 | 38 | 39 | 44 | 45 | 47 | 53 | 54 | 55 | 56 | 57 | 63 | 64 | 65 | 66 | 75 | 77 | 83 | 84 | 85 | 86 | 87 | 88 | 94 | 96 | 102 | 103 | 104 | 105 | 107 | 108 | 111 | 112 | 113 | -------------------------------------------------------------------------------- /PagedScrollViewExample/android/app/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: "com.android.application" 2 | 3 | import com.android.build.OutputFile 4 | 5 | /** 6 | * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets 7 | * and bundleReleaseJsAndAssets). 8 | * These basically call `react-native bundle` with the correct arguments during the Android build 9 | * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the 10 | * bundle directly from the development server. Below you can see all the possible configurations 11 | * and their defaults. If you decide to add a configuration block, make sure to add it before the 12 | * `apply from: "../../node_modules/react-native/react.gradle"` line. 13 | * 14 | * project.ext.react = [ 15 | * // the name of the generated asset file containing your JS bundle 16 | * bundleAssetName: "index.android.bundle", 17 | * 18 | * // the entry file for bundle generation 19 | * entryFile: "index.android.js", 20 | * 21 | * // whether to bundle JS and assets in debug mode 22 | * bundleInDebug: false, 23 | * 24 | * // whether to bundle JS and assets in release mode 25 | * bundleInRelease: true, 26 | * 27 | * // whether to bundle JS and assets in another build variant (if configured). 28 | * // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants 29 | * // The configuration property can be in the following formats 30 | * // 'bundleIn${productFlavor}${buildType}' 31 | * // 'bundleIn${buildType}' 32 | * // bundleInFreeDebug: true, 33 | * // bundleInPaidRelease: true, 34 | * // bundleInBeta: true, 35 | * 36 | * // the root of your project, i.e. where "package.json" lives 37 | * root: "../../", 38 | * 39 | * // where to put the JS bundle asset in debug mode 40 | * jsBundleDirDebug: "$buildDir/intermediates/assets/debug", 41 | * 42 | * // where to put the JS bundle asset in release mode 43 | * jsBundleDirRelease: "$buildDir/intermediates/assets/release", 44 | * 45 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 46 | * // require('./image.png')), in debug mode 47 | * resourcesDirDebug: "$buildDir/intermediates/res/merged/debug", 48 | * 49 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 50 | * // require('./image.png')), in release mode 51 | * resourcesDirRelease: "$buildDir/intermediates/res/merged/release", 52 | * 53 | * // by default the gradle tasks are skipped if none of the JS files or assets change; this means 54 | * // that we don't look at files in android/ or ios/ to determine whether the tasks are up to 55 | * // date; if you have any other folders that you want to ignore for performance reasons (gradle 56 | * // indexes the entire tree), add them here. Alternatively, if you have JS files in android/ 57 | * // for example, you might want to remove it from here. 58 | * inputExcludes: ["android/**", "ios/**"] 59 | * ] 60 | */ 61 | 62 | apply from: "../../node_modules/react-native/react.gradle" 63 | 64 | /** 65 | * Set this to true to create two separate APKs instead of one: 66 | * - An APK that only works on ARM devices 67 | * - An APK that only works on x86 devices 68 | * The advantage is the size of the APK is reduced by about 4MB. 69 | * Upload all the APKs to the Play Store and people will download 70 | * the correct one based on the CPU architecture of their device. 71 | */ 72 | def enableSeparateBuildPerCPUArchitecture = false 73 | 74 | /** 75 | * Run Proguard to shrink the Java bytecode in release builds. 76 | */ 77 | def enableProguardInReleaseBuilds = false 78 | 79 | android { 80 | compileSdkVersion 23 81 | buildToolsVersion "23.0.1" 82 | 83 | defaultConfig { 84 | applicationId "com.pagedscrollviewexample" 85 | minSdkVersion 16 86 | targetSdkVersion 22 87 | versionCode 1 88 | versionName "1.0" 89 | ndk { 90 | abiFilters "armeabi-v7a", "x86" 91 | } 92 | } 93 | splits { 94 | abi { 95 | reset() 96 | enable enableSeparateBuildPerCPUArchitecture 97 | universalApk false // If true, also generate a universal APK 98 | include "armeabi-v7a", "x86" 99 | } 100 | } 101 | buildTypes { 102 | release { 103 | minifyEnabled enableProguardInReleaseBuilds 104 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" 105 | } 106 | } 107 | // applicationVariants are e.g. debug, release 108 | applicationVariants.all { variant -> 109 | variant.outputs.each { output -> 110 | // For each separate APK per architecture, set a unique version code as described here: 111 | // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits 112 | def versionCodes = ["armeabi-v7a":1, "x86":2] 113 | def abi = output.getFilter(OutputFile.ABI) 114 | if (abi != null) { // null for the universal-debug, universal-release variants 115 | output.versionCodeOverride = 116 | versionCodes.get(abi) * 1048576 + defaultConfig.versionCode 117 | } 118 | } 119 | } 120 | } 121 | 122 | dependencies { 123 | compile fileTree(dir: "libs", include: ["*.jar"]) 124 | compile "com.android.support:appcompat-v7:23.0.1" 125 | compile "com.facebook.react:react-native:+" // From node_modules 126 | } 127 | 128 | // Run this once to be able to run the application with BUCK 129 | // puts all compile dependencies into folder libs for BUCK to use 130 | task copyDownloadableDepsToLibs(type: Copy) { 131 | from configurations.compile 132 | into 'libs' 133 | } 134 | -------------------------------------------------------------------------------- /PagedScrollViewExample/android/gradlew: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | ############################################################################## 4 | ## 5 | ## Gradle start up script for UN*X 6 | ## 7 | ############################################################################## 8 | 9 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 10 | DEFAULT_JVM_OPTS="" 11 | 12 | APP_NAME="Gradle" 13 | APP_BASE_NAME=`basename "$0"` 14 | 15 | # Use the maximum available, or set MAX_FD != -1 to use that value. 16 | MAX_FD="maximum" 17 | 18 | warn ( ) { 19 | echo "$*" 20 | } 21 | 22 | die ( ) { 23 | echo 24 | echo "$*" 25 | echo 26 | exit 1 27 | } 28 | 29 | # OS specific support (must be 'true' or 'false'). 30 | cygwin=false 31 | msys=false 32 | darwin=false 33 | case "`uname`" in 34 | CYGWIN* ) 35 | cygwin=true 36 | ;; 37 | Darwin* ) 38 | darwin=true 39 | ;; 40 | MINGW* ) 41 | msys=true 42 | ;; 43 | esac 44 | 45 | # For Cygwin, ensure paths are in UNIX format before anything is touched. 46 | if $cygwin ; then 47 | [ -n "$JAVA_HOME" ] && JAVA_HOME=`cygpath --unix "$JAVA_HOME"` 48 | fi 49 | 50 | # Attempt to set APP_HOME 51 | # Resolve links: $0 may be a link 52 | PRG="$0" 53 | # Need this for relative symlinks. 54 | while [ -h "$PRG" ] ; do 55 | ls=`ls -ld "$PRG"` 56 | link=`expr "$ls" : '.*-> \(.*\)$'` 57 | if expr "$link" : '/.*' > /dev/null; then 58 | PRG="$link" 59 | else 60 | PRG=`dirname "$PRG"`"/$link" 61 | fi 62 | done 63 | SAVED="`pwd`" 64 | cd "`dirname \"$PRG\"`/" >&- 65 | APP_HOME="`pwd -P`" 66 | cd "$SAVED" >&- 67 | 68 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 69 | 70 | # Determine the Java command to use to start the JVM. 71 | if [ -n "$JAVA_HOME" ] ; then 72 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 73 | # IBM's JDK on AIX uses strange locations for the executables 74 | JAVACMD="$JAVA_HOME/jre/sh/java" 75 | else 76 | JAVACMD="$JAVA_HOME/bin/java" 77 | fi 78 | if [ ! -x "$JAVACMD" ] ; then 79 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 80 | 81 | Please set the JAVA_HOME variable in your environment to match the 82 | location of your Java installation." 83 | fi 84 | else 85 | JAVACMD="java" 86 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 87 | 88 | Please set the JAVA_HOME variable in your environment to match the 89 | location of your Java installation." 90 | fi 91 | 92 | # Increase the maximum file descriptors if we can. 93 | if [ "$cygwin" = "false" -a "$darwin" = "false" ] ; then 94 | MAX_FD_LIMIT=`ulimit -H -n` 95 | if [ $? -eq 0 ] ; then 96 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then 97 | MAX_FD="$MAX_FD_LIMIT" 98 | fi 99 | ulimit -n $MAX_FD 100 | if [ $? -ne 0 ] ; then 101 | warn "Could not set maximum file descriptor limit: $MAX_FD" 102 | fi 103 | else 104 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" 105 | fi 106 | fi 107 | 108 | # For Darwin, add options to specify how the application appears in the dock 109 | if $darwin; then 110 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" 111 | fi 112 | 113 | # For Cygwin, switch paths to Windows format before running java 114 | if $cygwin ; then 115 | APP_HOME=`cygpath --path --mixed "$APP_HOME"` 116 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` 117 | 118 | # We build the pattern for arguments to be converted via cygpath 119 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` 120 | SEP="" 121 | for dir in $ROOTDIRSRAW ; do 122 | ROOTDIRS="$ROOTDIRS$SEP$dir" 123 | SEP="|" 124 | done 125 | OURCYGPATTERN="(^($ROOTDIRS))" 126 | # Add a user-defined pattern to the cygpath arguments 127 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then 128 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" 129 | fi 130 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 131 | i=0 132 | for arg in "$@" ; do 133 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` 134 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option 135 | 136 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition 137 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` 138 | else 139 | eval `echo args$i`="\"$arg\"" 140 | fi 141 | i=$((i+1)) 142 | done 143 | case $i in 144 | (0) set -- ;; 145 | (1) set -- "$args0" ;; 146 | (2) set -- "$args0" "$args1" ;; 147 | (3) set -- "$args0" "$args1" "$args2" ;; 148 | (4) set -- "$args0" "$args1" "$args2" "$args3" ;; 149 | (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; 150 | (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; 151 | (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; 152 | (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; 153 | (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; 154 | esac 155 | fi 156 | 157 | # Split up the JVM_OPTS And GRADLE_OPTS values into an array, following the shell quoting and substitution rules 158 | function splitJvmOpts() { 159 | JVM_OPTS=("$@") 160 | } 161 | eval splitJvmOpts $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS 162 | JVM_OPTS[${#JVM_OPTS[*]}]="-Dorg.gradle.appname=$APP_BASE_NAME" 163 | 164 | exec "$JAVACMD" "${JVM_OPTS[@]}" -classpath "$CLASSPATH" org.gradle.wrapper.GradleWrapperMain "$@" 165 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | import React from 'react' 4 | 5 | //Polyfill for Number.isNaN on Safari 6 | //see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN 7 | Number.isNaN = Number.isNaN || function(value) { 8 | return typeof value === "number" && isNaN(value); 9 | } 10 | 11 | function isPresent (datum) { 12 | return datum !== undefined && ! Number.isNaN(datum) 13 | } 14 | 15 | var AddPaging = (ComposedComponent, scrollViewRefPropName) => class extends React.Component { 16 | 17 | constructor (props) { 18 | super(props) 19 | 20 | this.refProp = {} 21 | this.refProp[scrollViewRefPropName || 'ref'] = this.getScrollViewRef.bind(this) 22 | 23 | // Important to remember these, but they're not really 'state' variables: 24 | this.scrollX = 0 25 | this.scrollY = 0 26 | this.initialized = false 27 | 28 | // We'll consider these state variables although maybe we shouldn't: 29 | this.state = { 30 | totalHorizontalPages: 0, 31 | totalVerticalPages: 0, 32 | currentHorizontalPage: null, 33 | currentVerticalPage: null, 34 | } 35 | } 36 | 37 | initialize () { 38 | if (this.initialized) return 39 | if (isPresent(this.state.totalHorizontalPages) && 40 | isPresent(this.state.totalVerticalPages) && 41 | isPresent(this.state.currentHorizontalPage) && 42 | isPresent(this.state.currentVerticalPage)) { 43 | this.initialized = true 44 | this.props.onInitialization && this.props.onInitialization(this) 45 | } 46 | } 47 | 48 | handleScroll (event) { 49 | // Still trigger the passed callback, if provided: 50 | this.props.onScroll && this.props.onScroll(event) 51 | 52 | var e = event.nativeEvent 53 | 54 | // Get values from event: 55 | this.scrollViewWidth = e.layoutMeasurement.width 56 | this.scrollViewHeight = e.layoutMeasurement.height 57 | this.innerScrollViewWidth = e.contentSize.width 58 | this.innerScrollViewHeight = e.contentSize.height 59 | 60 | // These are important, but they're not state variables that trigger an update: 61 | this.scrollX = e.contentOffset.x 62 | this.scrollY = e.contentOffset.y 63 | 64 | var totalHorizontalPages = Math.floor(this.innerScrollViewWidth / this.scrollViewWidth + 0.5) 65 | var totalVerticalPages = Math.floor(this.innerScrollViewHeight / this.scrollViewHeight + 0.5) 66 | 67 | this.setState({ 68 | totalHorizontalPages: totalHorizontalPages, 69 | totalVerticalPages: totalVerticalPages, 70 | currentHorizontalPage: Math.min(Math.max(Math.floor(this.scrollX / this.scrollViewWidth + 0.5) + 1, 0), totalHorizontalPages), 71 | currentVerticalPage: Math.min(Math.max(Math.floor(this.scrollY / this.scrollViewHeight + 0.5) + 1, 0), totalVerticalPages) 72 | }) 73 | } 74 | 75 | componentWillUpdate (nextProps, nextState) { 76 | if (this.props.onPageChange) { 77 | var sendEvent = false 78 | for (var key in nextState) { 79 | if (nextState.hasOwnProperty(key)) { 80 | var a = this.state[key] 81 | var b = nextState[key] 82 | if (a !== b && ! Number.isNaN(b)) { 83 | sendEvent = true 84 | } 85 | } 86 | } 87 | if (sendEvent) { 88 | this.props.onPageChange(nextState) 89 | } 90 | } 91 | } 92 | 93 | measureScrollView (cb) { 94 | if (!this._scrollView || ! this._scrollView.refs.ScrollView) return 95 | this._scrollView.refs.ScrollView.measure((x,y,w,h) => { 96 | this.scrollViewWidth = w 97 | this.scrollViewHeight = h 98 | cb && cb() 99 | }) 100 | } 101 | 102 | measureInnerScrollView (cb) { 103 | if (!this._scrollView || !this._scrollView.refs.InnerScrollView) return 104 | this._scrollView.refs.InnerScrollView.measure((x,y,w,h) => { 105 | this.innerScrollViewWidth = w 106 | this.innerScrollViewHeight = h 107 | cb && cb() 108 | }) 109 | } 110 | 111 | scrollToPage (horizontalPage, verticalPage) { 112 | if (this._scrollView) { 113 | this._scrollView.scrollTo({ 114 | x: (Math.min(this.state.totalHorizontalPages, Math.max(1, horizontalPage)) - 1) * this.scrollViewWidth, 115 | y: (Math.min(this.state.totalVerticalPages, Math.max(1, verticalPage)) - 1) * this.scrollViewHeight, 116 | animated: true, 117 | }) 118 | } 119 | } 120 | 121 | scrollWithoutAnimationToPage (horizontalPage, verticalPage) { 122 | if (this._scrollView) { 123 | this._scrollView.scrollWithoutAnimationTo( 124 | (Math.min(this.state.totalVerticalPages, Math.max(1, verticalPage)) - 1) * this.scrollViewHeight, 125 | (Math.min(this.state.totalHorizontalPages, Math.max(1, horizontalPage)) - 1) * this.scrollViewWidth 126 | ) 127 | } 128 | } 129 | 130 | componentDidMount () { 131 | setTimeout(() => { 132 | var succeededCbs = 0 133 | var totalCbs = 2 134 | 135 | var computeNewState = () => { 136 | if (++succeededCbs < totalCbs) return 137 | var totalHorizontalPages = Math.max(1, Math.floor(this.innerScrollViewWidth / this.scrollViewWidth + 0.5)) 138 | var totalVerticalPages = Math.max(1, Math.floor(this.innerScrollViewHeight / this.scrollViewHeight + 0.5)) 139 | 140 | this.setState({ 141 | totalHorizontalPages: totalHorizontalPages, 142 | totalVerticalPages: totalVerticalPages, 143 | currentHorizontalPage: Math.min(Math.max(Math.floor(this.scrollX / this.scrollViewWidth + 0.5) + 1, 0), totalHorizontalPages), 144 | currentVerticalPage: Math.min(Math.max(Math.floor(this.scrollY / this.scrollViewHeight + 0.5) + 1, 0), totalVerticalPages) 145 | }) 146 | 147 | this.initialize() 148 | } 149 | 150 | // Trigger both measurements at the same time and compute the new state only 151 | // once they've both returned. 152 | this.measureInnerScrollView(computeNewState) 153 | this.measureScrollView(computeNewState) 154 | }) 155 | } 156 | 157 | handleContentSizeChange (width, height) { 158 | this.props.onContentSizeChange && this.props.onContentSizeChange(width, height) 159 | 160 | // Get values from event: 161 | this.innerScrollViewWidth = width 162 | this.innerScrollViewHeight = height 163 | 164 | var totalHorizontalPages = Math.max(1, Math.floor(this.innerScrollViewWidth / this.scrollViewWidth + 0.5)) 165 | var totalVerticalPages = Math.max(1, Math.floor(this.innerScrollViewHeight / this.scrollViewHeight + 0.5)) 166 | 167 | this.setState({ 168 | totalHorizontalPages: totalHorizontalPages, 169 | totalVerticalPages: totalVerticalPages, 170 | currentHorizontalPage: Math.min(Math.max(Math.floor(this.scrollX / this.scrollViewWidth + 0.5) + 1, 0), totalHorizontalPages), 171 | currentVerticalPage: Math.min(Math.max(Math.floor(this.scrollY / this.scrollViewHeight + 0.5) + 1, 0), totalVerticalPages) 172 | }) 173 | 174 | this.initialize() 175 | } 176 | 177 | getScrollViewRef (c) { 178 | this._scrollView = c 179 | } 180 | 181 | render () { 182 | return ( 183 | 190 | {this.props.children} 191 | 192 | ) 193 | } 194 | } 195 | 196 | export default AddPaging 197 | -------------------------------------------------------------------------------- /src/PagedScrollView.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import React, { Component } from 'react'; 4 | 5 | // Polyfill for Number.isNaN on Safari 6 | // see https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN 7 | Number.isNaN = Number.isNaN || function (value) { 8 | return typeof value === 'number' && isNaN(value); 9 | }; 10 | 11 | function isPresent (datum) { 12 | return datum !== undefined && !Number.isNaN(datum); 13 | } 14 | 15 | var AddPaging = (ComposedComponent, scrollViewRefPropName) => { 16 | var ComposedClass = class extends Component { 17 | constructor (props) { 18 | super(props); 19 | 20 | this.refProp = {}; 21 | this.refProp[scrollViewRefPropName || 'ref'] = this.getScrollViewRef.bind(this); 22 | 23 | // Important to remember these, but they're not really 'state' variables: 24 | this.scrollX = 0; 25 | this.scrollY = 0; 26 | this.initialized = false; 27 | 28 | // We'll consider these state variables although maybe we shouldn't: 29 | this.state = { 30 | totalHorizontalPages: 0, 31 | totalVerticalPages: 0, 32 | currentHorizontalPage: null, 33 | currentVerticalPage: null 34 | }; 35 | } 36 | 37 | componentWillUpdate (nextProps, nextState) { 38 | if (this.props.onPageChange) { 39 | var sendEvent = false; 40 | for (var key in nextState) { 41 | if (nextState.hasOwnProperty(key)) { 42 | var a = this.state[key]; 43 | var b = nextState[key]; 44 | if (a !== b && !Number.isNaN(b)) { 45 | sendEvent = true; 46 | } 47 | } 48 | } 49 | if (sendEvent) { 50 | this.props.onPageChange(nextState); 51 | } 52 | } 53 | } 54 | 55 | _initialize () { 56 | if (this.initialized) return; 57 | if (isPresent(this.state.totalHorizontalPages) && 58 | isPresent(this.state.totalVerticalPages) && 59 | isPresent(this.state.currentHorizontalPage) && 60 | isPresent(this.state.currentVerticalPage)) { 61 | this.initialized = true; 62 | this.props.onInitialization && this.props.onInitialization(this); 63 | } 64 | } 65 | 66 | _handleScroll (event) { 67 | // Still trigger the passed callback, if provided: 68 | this.props.onScroll && this.props.onScroll(event); 69 | 70 | var e = event.nativeEvent; 71 | 72 | // Get values from event: 73 | this.scrollViewWidth = e.layoutMeasurement.width; 74 | this.scrollViewHeight = e.layoutMeasurement.height; 75 | this.innerScrollViewWidth = e.contentSize.width; 76 | this.innerScrollViewHeight = e.contentSize.height; 77 | 78 | // These are important, but they're not state variables that trigger an update: 79 | this.scrollX = e.contentOffset.x; 80 | this.scrollY = e.contentOffset.y; 81 | 82 | var totalHorizontalPages = Math.floor(this.innerScrollViewWidth / this.scrollViewWidth + 0.5); 83 | var totalVerticalPages = Math.floor(this.innerScrollViewHeight / this.scrollViewHeight + 0.5); 84 | 85 | this.setState({ 86 | totalHorizontalPages: totalHorizontalPages, 87 | totalVerticalPages: totalVerticalPages, 88 | currentHorizontalPage: Math.min(Math.max(Math.floor(this.scrollX / this.scrollViewWidth + 0.5) + 1, 0), totalHorizontalPages), 89 | currentVerticalPage: Math.min(Math.max(Math.floor(this.scrollY / this.scrollViewHeight + 0.5) + 1, 0), totalVerticalPages) 90 | }); 91 | } 92 | 93 | _measureScrollView (cb) { 94 | var responder = this.getScrollResponder(); 95 | if (!responder) { 96 | return; 97 | } 98 | responder.refs.ScrollView.measure((x, y, w, h) => { 99 | this.scrollViewWidth = w; 100 | this.scrollViewHeight = h; 101 | cb && cb(); 102 | }); 103 | } 104 | 105 | _measureInnerScrollView (cb) { 106 | var responder = this.getScrollResponder(); 107 | if (!responder) { 108 | return; 109 | } 110 | responder.refs.InnerScrollView.measure((x, y, w, h) => { 111 | this.innerScrollViewWidth = w; 112 | this.innerScrollViewHeight = h; 113 | cb && cb(); 114 | }); 115 | } 116 | 117 | _handleContentSizeChange (width, height) { 118 | this.props.onContentSizeChange && this.props.onContentSizeChange(width, height); 119 | 120 | // Get values from event: 121 | this.innerScrollViewWidth = width; 122 | this.innerScrollViewHeight = height; 123 | 124 | var totalHorizontalPages = Math.max(1, Math.floor(this.innerScrollViewWidth / this.scrollViewWidth + 0.5)); 125 | var totalVerticalPages = Math.max(1, Math.floor(this.innerScrollViewHeight / this.scrollViewHeight + 0.5)); 126 | 127 | this.setState({ 128 | totalHorizontalPages: totalHorizontalPages, 129 | totalVerticalPages: totalVerticalPages, 130 | currentHorizontalPage: Math.min(Math.max(Math.floor(this.scrollX / this.scrollViewWidth + 0.5) + 1, 0), totalHorizontalPages), 131 | currentVerticalPage: Math.min(Math.max(Math.floor(this.scrollY / this.scrollViewHeight + 0.5) + 1, 0), totalVerticalPages) 132 | }); 133 | 134 | this._initialize(); 135 | } 136 | 137 | render () { 138 | return ( 139 | 146 | {this.props.children} 147 | 148 | ); 149 | } 150 | 151 | scrollToPage (horizontalPage, verticalPage, animated) { 152 | if (this._scrollView) { 153 | this._scrollView.scrollTo({ 154 | x: (Math.min(this.state.totalHorizontalPages, Math.max(1, horizontalPage)) - 1) * this.scrollViewWidth, 155 | y: (Math.min(this.state.totalVerticalPages, Math.max(1, verticalPage)) - 1) * this.scrollViewHeight, 156 | animated: animated 157 | }); 158 | } 159 | } 160 | 161 | componentDidMount () { 162 | setTimeout(() => { 163 | var succeededCbs = 0; 164 | var totalCbs = 2; 165 | 166 | var computeNewState = () => { 167 | if (++succeededCbs < totalCbs) { 168 | return; 169 | } 170 | 171 | var totalHorizontalPages = Math.max(1, Math.floor(this.innerScrollViewWidth / this.scrollViewWidth + 0.5)); 172 | var totalVerticalPages = Math.max(1, Math.floor(this.innerScrollViewHeight / this.scrollViewHeight + 0.5)); 173 | 174 | this.setState({ 175 | totalHorizontalPages: totalHorizontalPages, 176 | totalVerticalPages: totalVerticalPages, 177 | currentHorizontalPage: Math.min(Math.max(Math.floor(this.scrollX / this.scrollViewWidth + 0.5) + 1, 0), totalHorizontalPages), 178 | currentVerticalPage: Math.min(Math.max(Math.floor(this.scrollY / this.scrollViewHeight + 0.5) + 1, 0), totalVerticalPages) 179 | }); 180 | 181 | this._initialize(); 182 | }; 183 | 184 | // Trigger both measurements at the same time and compute the new state only 185 | // once they've both returned. 186 | this._measureInnerScrollView(computeNewState); 187 | this._measureScrollView(computeNewState); 188 | }); 189 | } 190 | 191 | getScrollViewRef (c) { 192 | this._scrollView = c; 193 | } 194 | 195 | getScrollResponder () { 196 | return this._scrollView.getScrollResponder(); 197 | } 198 | 199 | getInnerViewNode () { 200 | return this.getScrollResponder().getInnerViewNode(); 201 | } 202 | 203 | setNativeProps (props) { 204 | this._scrollView.setNativeProps(props); 205 | } 206 | }; 207 | 208 | ComposedClass.propTypes = { 209 | onInitialization: React.PropTypes.func, 210 | onScroll: React.PropTypes.func, 211 | onPageChange: React.PropTypes.func, 212 | onContentSizeChange: React.PropTypes.func, 213 | children: React.PropTypes.array, 214 | scrollEventThrottle: React.PropTypes.number, 215 | initialPage: React.PropTypes.number 216 | }; 217 | 218 | return ComposedClass; 219 | }; 220 | 221 | export default AddPaging; 222 | -------------------------------------------------------------------------------- /PagedScrollViewExample/PagedScrollView.js: -------------------------------------------------------------------------------- 1 | 'use strict';Object.defineProperty(exports,"__esModule",{value:true});var _extends=Object.assign||function(target){for(var i=1;i