├── .gitattributes ├── .gitignore ├── LICENSE ├── README.md ├── android ├── build.gradle └── src │ └── main │ ├── AndroidManifest.xml │ └── java │ └── co │ └── twinger │ └── zoomlayout │ ├── RNZoomLayoutModule.java │ ├── RNZoomLayoutPackage.java │ └── ZoomLayoutManager.java ├── index.js └── package.json /.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # OSX 3 | # 4 | .DS_Store 5 | 6 | # node.js 7 | # 8 | node_modules/ 9 | npm-debug.log 10 | yarn-error.log 11 | 12 | 13 | # Xcode 14 | # 15 | build/ 16 | *.pbxuser 17 | !default.pbxuser 18 | *.mode1v3 19 | !default.mode1v3 20 | *.mode2v3 21 | !default.mode2v3 22 | *.perspectivev3 23 | !default.perspectivev3 24 | xcuserdata 25 | *.xccheckout 26 | *.moved-aside 27 | DerivedData 28 | *.hmap 29 | *.ipa 30 | *.xcuserstate 31 | project.xcworkspace 32 | 33 | 34 | # Android/IntelliJ 35 | # 36 | build/ 37 | .idea 38 | .gradle 39 | local.properties 40 | *.iml 41 | 42 | # BUCK 43 | buck-out/ 44 | \.buckd/ 45 | *.keystore 46 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2017 Tien Hoang 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # react-native-zoom-layout 3 | 4 | ## Getting started 5 | 6 | `$ npm install react-native-zoom-layout --save` 7 | 8 | ### Mostly automatic installation 9 | 10 | `$ react-native link react-native-zoom-layout` 11 | 12 | ### Manual installation 13 | 14 | #### Android 15 | 16 | 1. Open up `android/app/src/main/java/[...]/MainApplication.java` 17 | - Add `import co.twinger.zoomlayout.RNZoomLayoutPackage;` to the imports at the top of the file 18 | - Add `new RNZoomLayoutPackage()` to the list returned by the `getPackages()` method 19 | 2. Append the following lines to `android/settings.gradle`: 20 | ``` 21 | include ':react-native-zoom-layout' 22 | project(':react-native-zoom-layout').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-zoom-layout/android') 23 | ``` 24 | 3. Insert the following lines inside the dependencies block in `android/app/build.gradle`: 25 | ``` 26 | compile project(':react-native-zoom-layout') 27 | ``` 28 | 29 | ## Usage 30 | ```javascript 31 | import ZoomLayout from 'react-native-zoom-layout'; 32 | 33 | this.zoomLayout = ref} 35 | minZoom={1} 36 | maxZoom={10} 37 | style={{}}> 38 | 39 | //your view 40 | 41 | 42 | ``` 43 | -------------------------------------------------------------------------------- /android/build.gradle: -------------------------------------------------------------------------------- 1 | 2 | buildscript { 3 | repositories { 4 | jcenter() 5 | } 6 | 7 | dependencies { 8 | classpath 'com.android.tools.build:gradle:1.3.1' 9 | } 10 | } 11 | 12 | apply plugin: 'com.android.library' 13 | 14 | android { 15 | compileSdkVersion 23 16 | buildToolsVersion "23.0.1" 17 | 18 | defaultConfig { 19 | minSdkVersion 16 20 | targetSdkVersion 22 21 | versionCode 1 22 | versionName "1.0" 23 | } 24 | lintOptions { 25 | abortOnError false 26 | } 27 | } 28 | 29 | repositories { 30 | mavenCentral() 31 | } 32 | 33 | dependencies { 34 | compile 'com.facebook.react:react-native:+' 35 | compile 'com.otaliastudios:zoomlayout:1.3.0' 36 | } 37 | -------------------------------------------------------------------------------- /android/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /android/src/main/java/co/twinger/zoomlayout/RNZoomLayoutModule.java: -------------------------------------------------------------------------------- 1 | package co.twinger.zoomlayout; 2 | 3 | import com.facebook.react.bridge.ReactApplicationContext; 4 | import com.facebook.react.bridge.ReactContextBaseJavaModule; 5 | 6 | public class RNZoomLayoutModule extends ReactContextBaseJavaModule { 7 | 8 | private final ReactApplicationContext reactContext; 9 | 10 | public RNZoomLayoutModule(ReactApplicationContext reactContext, ZoomLayoutManager zoomLayoutManager) { 11 | super(reactContext); 12 | this.reactContext = reactContext; 13 | 14 | } 15 | 16 | @Override 17 | public String getName() { 18 | return "RNZoomLayout"; 19 | } 20 | 21 | 22 | 23 | } -------------------------------------------------------------------------------- /android/src/main/java/co/twinger/zoomlayout/RNZoomLayoutPackage.java: -------------------------------------------------------------------------------- 1 | 2 | package co.twinger.zoomlayout; 3 | 4 | import com.facebook.react.ReactPackage; 5 | import com.facebook.react.bridge.JavaScriptModule; 6 | import com.facebook.react.bridge.NativeModule; 7 | import com.facebook.react.bridge.ReactApplicationContext; 8 | import com.facebook.react.uimanager.ViewManager; 9 | 10 | import java.util.Arrays; 11 | import java.util.Collections; 12 | import java.util.List; 13 | 14 | public class RNZoomLayoutPackage implements ReactPackage { 15 | 16 | 17 | @Override 18 | public List createNativeModules(ReactApplicationContext reactContext) { 19 | return Arrays.asList(); 20 | } 21 | 22 | // Deprecated from RN 0.47 23 | public List> createJSModules() { 24 | return Collections.emptyList(); 25 | } 26 | 27 | @Override 28 | public List createViewManagers(ReactApplicationContext reactContext) { 29 | return Arrays.asList( 30 | new ZoomLayoutManager(reactContext) 31 | ); 32 | } 33 | } -------------------------------------------------------------------------------- /android/src/main/java/co/twinger/zoomlayout/ZoomLayoutManager.java: -------------------------------------------------------------------------------- 1 | package co.twinger.zoomlayout; 2 | 3 | import android.util.Log; 4 | 5 | import com.facebook.infer.annotation.Assertions; 6 | import com.facebook.react.bridge.ReactApplicationContext; 7 | import com.facebook.react.bridge.ReadableArray; 8 | import com.facebook.react.common.MapBuilder; 9 | import com.facebook.react.uimanager.ThemedReactContext; 10 | import com.facebook.react.uimanager.ViewGroupManager; 11 | import com.facebook.react.uimanager.annotations.ReactProp; 12 | import com.otaliastudios.zoom.ZoomApi; 13 | import com.otaliastudios.zoom.ZoomLayout; 14 | 15 | import java.util.Map; 16 | 17 | import javax.annotation.Nullable; 18 | 19 | public class ZoomLayoutManager extends ViewGroupManager { 20 | 21 | public static final String REACT_CLASS = "RCTZoomLayout"; 22 | private ZoomLayout zoomLayout; 23 | 24 | public static final int COMMAND_ZOOM_TO = 1; 25 | public static final int COMMAND_MOVE_TO = 2; 26 | public static final int COMMAND_ZOOM_BY = 3; 27 | public static final int COMMAND_ZOOM_IN = 4; 28 | public static final int COMMAND_ZOOM_OUT = 5; 29 | 30 | @Override 31 | public String getName() { 32 | return REACT_CLASS; 33 | } 34 | 35 | ZoomLayoutManager(ReactApplicationContext context) { 36 | } 37 | 38 | @Override 39 | protected ZoomLayout createViewInstance(ThemedReactContext reactContext) { 40 | zoomLayout = new ZoomLayout(reactContext); 41 | return zoomLayout; 42 | } 43 | 44 | @ReactProp(name = "minZoom") 45 | public void setMinZoom(ZoomLayout view, float minZoom) { 46 | view.setMinZoom(minZoom, ZoomApi.TYPE_ZOOM); 47 | } 48 | 49 | @ReactProp(name = "maxZoom") 50 | public void setMaxZoom(ZoomLayout view, float maxZoom) { 51 | view.setMaxZoom(maxZoom, ZoomApi.TYPE_ZOOM); 52 | } 53 | 54 | @ReactProp(name = "overPinchable") 55 | public void setOverPinchable(ZoomLayout view, boolean overPinchable) { 56 | view.setOverPinchable(overPinchable); 57 | } 58 | 59 | @ReactProp(name = "zoomEnabled") 60 | public void setZoomEnabled(ZoomLayout view, boolean zoomEnabled) { 61 | view.setZoomEnabled(zoomEnabled); 62 | } 63 | 64 | @ReactProp(name = "rotate") 65 | public void setRotate(ZoomLayout view, float rotate) { 66 | Log.d("Rotate", rotate + ""); 67 | view.setRotation(rotate); 68 | } 69 | 70 | @Override 71 | public Map getCommandsMap() { 72 | Log.d("React", " View manager getCommandsMap:"); 73 | return MapBuilder.of( 74 | "getZoom", 75 | COMMAND_ZOOM_TO, 76 | "moveTo", 77 | COMMAND_MOVE_TO); 78 | } 79 | 80 | @Override 81 | public void receiveCommand(ZoomLayout root, int commandId, @Nullable ReadableArray args) { 82 | super.receiveCommand(root, commandId, args); 83 | Assertions.assertNotNull(root); 84 | Assertions.assertNotNull(args); 85 | switch (commandId) { 86 | case COMMAND_ZOOM_TO: { 87 | float zoom = (float) args.getDouble(0); 88 | boolean animated = args.getBoolean(1); 89 | root.zoomTo(zoom, animated); 90 | return; 91 | } 92 | case COMMAND_MOVE_TO: { 93 | float zoom = (float) args.getDouble(0); 94 | float x = (float) args.getDouble(1); 95 | float y = (float) args.getDouble(2); 96 | boolean animated = args.getBoolean(3); 97 | root.moveTo(root.getZoom(), x, y, animated); 98 | return; 99 | } 100 | case COMMAND_ZOOM_BY: { 101 | float zoom = (float) args.getDouble(0); 102 | boolean animated = args.getBoolean(1); 103 | root.zoomBy(zoom, animated); 104 | return; 105 | } 106 | case COMMAND_ZOOM_IN: { 107 | root.zoomIn(); 108 | return; 109 | } 110 | case COMMAND_ZOOM_OUT: { 111 | root.zoomOut(); 112 | return; 113 | } 114 | default: 115 | throw new IllegalArgumentException(String.format( 116 | "Unsupported command %d received by %s.", 117 | commandId, 118 | getClass().getSimpleName())); 119 | } 120 | 121 | } 122 | 123 | 124 | @Nullable 125 | @Override 126 | public Map getExportedCustomDirectEventTypeConstants() { 127 | return MapBuilder.of( 128 | "onZoom", 129 | MapBuilder.of("registrationName", "onZoom"), 130 | "onPan", 131 | MapBuilder.of("registrationName", "onPan") 132 | ); 133 | } 134 | } -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 2 | import React, { Component } from 'react'; 3 | import { requireNativeComponent, Platform, ScrollView, UIManager, findNodeHandle } from 'react-native'; 4 | 5 | const RCTZoomLayout = requireNativeComponent('RCTZoomLayout'); 6 | 7 | export default class ZoomLayout extends Component { 8 | state = {} 9 | static defaultProps = { 10 | minZoom: 1, 11 | maxZoom: 3, 12 | } 13 | 14 | refZoomLayout = ref => { 15 | this.zoomLayout = ref; 16 | } 17 | 18 | scrollTo = (x, y, animated) => { 19 | if (Platform.OS === 'ios') { 20 | this.zoomLayout.scrollTo(x, y, animated) 21 | } else { 22 | UIManager.dispatchViewManagerCommand( 23 | findNodeHandle(this), 24 | UIManager.RCTZoomLayout.Commands.moveTo, 25 | [2, x, y, animated], 26 | ); 27 | } 28 | } 29 | 30 | render() { 31 | const { minZoom, maxZoom, children } = this.props; 32 | if (Platform.OS === 'ios') 33 | return ( 34 | 43 | {children} 44 | 45 | ) 46 | else return ( 47 | 56 | {children} 57 | ) 58 | } 59 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-zoom-layout", 3 | "version": "1.0.2", 4 | "keywords": [ 5 | "react-component", 6 | "react-native", 7 | "zoom pinch view", 8 | "zoom layout" 9 | ], 10 | "description": "", 11 | "main": "index.js", 12 | "scripts": { 13 | "test": "echo \"Error: no test specified\" && exit 1" 14 | }, 15 | "repository": { 16 | "type": "git", 17 | "url": "git+https://github.com/twinger/react-native-zoom-layout.git" 18 | }, 19 | "author": "TienDH", 20 | "email": "daohoangtien@gmail.com", 21 | "url": "https://github.com/yaraht17", 22 | "website": "twinger.co", 23 | "license": "MIT" 24 | } --------------------------------------------------------------------------------