├── Examples ├── ImageBrowserExample │ ├── .buckconfig │ ├── .flowconfig │ ├── .gitignore │ ├── .watchmanconfig │ ├── Carousel.js │ ├── GridView.js │ ├── Lightbox.js │ ├── Lightbox_scale.js │ ├── android │ │ ├── app │ │ │ ├── BUCK │ │ │ ├── build.gradle │ │ │ ├── proguard-rules.pro │ │ │ └── src │ │ │ │ └── main │ │ │ │ ├── AndroidManifest.xml │ │ │ │ ├── java │ │ │ │ └── com │ │ │ │ │ └── imagebrowserexample │ │ │ │ │ ├── MainActivity.java │ │ │ │ │ └── MainApplication.java │ │ │ │ └── res │ │ │ │ ├── mipmap-hdpi │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-mdpi │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-xhdpi │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-xxhdpi │ │ │ │ └── ic_launcher.png │ │ │ │ └── values │ │ │ │ ├── strings.xml │ │ │ │ └── styles.xml │ │ ├── build.gradle │ │ ├── gradle.properties │ │ ├── gradle │ │ │ └── wrapper │ │ │ │ ├── gradle-wrapper.jar │ │ │ │ └── gradle-wrapper.properties │ │ ├── gradlew │ │ ├── gradlew.bat │ │ ├── keystores │ │ │ ├── BUCK │ │ │ └── debug.keystore.properties │ │ └── settings.gradle │ ├── index.android.js │ ├── index.ios.js │ ├── ios │ │ ├── ImageBrowserExample.xcodeproj │ │ │ ├── project.pbxproj │ │ │ └── xcshareddata │ │ │ │ └── xcschemes │ │ │ │ └── ImageBrowserExample.xcscheme │ │ ├── ImageBrowserExample │ │ │ ├── AppDelegate.h │ │ │ ├── AppDelegate.m │ │ │ ├── Base.lproj │ │ │ │ └── LaunchScreen.xib │ │ │ ├── Images.xcassets │ │ │ │ └── AppIcon.appiconset │ │ │ │ │ └── Contents.json │ │ │ ├── Info.plist │ │ │ └── main.m │ │ └── ImageBrowserExampleTests │ │ │ ├── ImageBrowserExampleTests.m │ │ │ └── Info.plist │ └── package.json ├── RichImageBrowserExample │ ├── .buckconfig │ ├── .flowconfig │ ├── .gitignore │ ├── .watchmanconfig │ ├── GridView.js │ ├── Lightbox.js │ ├── android │ │ ├── app │ │ │ ├── BUCK │ │ │ ├── build.gradle │ │ │ ├── proguard-rules.pro │ │ │ └── src │ │ │ │ └── main │ │ │ │ ├── AndroidManifest.xml │ │ │ │ ├── java │ │ │ │ └── com │ │ │ │ │ └── richimagebrowserexample │ │ │ │ │ ├── MainActivity.java │ │ │ │ │ └── MainApplication.java │ │ │ │ └── res │ │ │ │ ├── mipmap-hdpi │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-mdpi │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-xhdpi │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-xxhdpi │ │ │ │ └── ic_launcher.png │ │ │ │ └── values │ │ │ │ ├── strings.xml │ │ │ │ └── styles.xml │ │ ├── build.gradle │ │ ├── gradle.properties │ │ ├── gradle │ │ │ └── wrapper │ │ │ │ ├── gradle-wrapper.jar │ │ │ │ └── gradle-wrapper.properties │ │ ├── gradlew │ │ ├── gradlew.bat │ │ ├── keystores │ │ │ ├── BUCK │ │ │ └── debug.keystore.properties │ │ └── settings.gradle │ ├── index.android.js │ ├── index.ios.js │ ├── ios │ │ ├── RichImageBrowserExample.xcodeproj │ │ │ ├── project.pbxproj │ │ │ └── xcshareddata │ │ │ │ └── xcschemes │ │ │ │ └── RichImageBrowserExample.xcscheme │ │ ├── RichImageBrowserExample │ │ │ ├── AppDelegate.h │ │ │ ├── AppDelegate.m │ │ │ ├── Base.lproj │ │ │ │ └── LaunchScreen.xib │ │ │ ├── Images.xcassets │ │ │ │ └── AppIcon.appiconset │ │ │ │ │ └── Contents.json │ │ │ ├── Info.plist │ │ │ └── main.m │ │ └── RichImageBrowserExampleTests │ │ │ ├── Info.plist │ │ │ └── RichImageBrowserExampleTests.m │ └── package.json └── SingleImageExample │ ├── .buckconfig │ ├── .flowconfig │ ├── .gitignore │ ├── .watchmanconfig │ ├── GridView.js │ ├── ImageBrowser.js │ ├── Lightbox.js │ ├── Lightbox │ ├── Lightbox.js │ └── LightboxOverlay.js │ ├── android │ ├── app │ │ ├── BUCK │ │ ├── build.gradle │ │ ├── proguard-rules.pro │ │ └── src │ │ │ └── main │ │ │ ├── AndroidManifest.xml │ │ │ ├── java │ │ │ └── com │ │ │ │ └── singleimageexample │ │ │ │ ├── MainActivity.java │ │ │ │ └── MainApplication.java │ │ │ └── res │ │ │ ├── mipmap-hdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-mdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xhdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xxhdpi │ │ │ └── ic_launcher.png │ │ │ └── values │ │ │ ├── strings.xml │ │ │ └── styles.xml │ ├── build.gradle │ ├── gradle.properties │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── gradlew │ ├── gradlew.bat │ ├── keystores │ │ ├── BUCK │ │ └── debug.keystore.properties │ └── settings.gradle │ ├── index.android.js │ ├── index.ios.js │ ├── ios │ ├── SingleImageExample.xcodeproj │ │ ├── project.pbxproj │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ └── SingleImageExample.xcscheme │ ├── SingleImageExample │ │ ├── AppDelegate.h │ │ ├── AppDelegate.m │ │ ├── Base.lproj │ │ │ └── LaunchScreen.xib │ │ ├── Images.xcassets │ │ │ └── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ ├── Info.plist │ │ └── main.m │ └── SingleImageExampleTests │ │ ├── Info.plist │ │ └── SingleImageExampleTests.m │ └── package.json ├── README.md ├── lib └── ImageBrowser │ ├── Carousel.js │ ├── GridView.js │ └── Lightbox.js └── screenshots ├── imagebrowser1.gif └── lightbox.gif /Examples/ImageBrowserExample/.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /Examples/ImageBrowserExample/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | 3 | # We fork some components by platform. 4 | .*/*.android.js 5 | 6 | # Ignore templates with `@flow` in header 7 | .*/local-cli/generator.* 8 | 9 | # Ignore malformed json 10 | .*/node_modules/y18n/test/.*\.json 11 | 12 | [include] 13 | 14 | [libs] 15 | node_modules/react-native/Libraries/react-native/react-native-interface.js 16 | node_modules/react-native/flow 17 | flow/ 18 | 19 | [options] 20 | module.system=haste 21 | 22 | esproposal.class_static_fields=enable 23 | esproposal.class_instance_fields=enable 24 | 25 | experimental.strict_type_args=true 26 | 27 | munge_underscores=true 28 | 29 | module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub' 30 | module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub' 31 | 32 | suppress_type=$FlowIssue 33 | suppress_type=$FlowFixMe 34 | suppress_type=$FixMe 35 | 36 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-7]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\) 37 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-7]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+ 38 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy 39 | 40 | [version] 41 | ^0.27.0 42 | -------------------------------------------------------------------------------- /Examples/ImageBrowserExample/.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 | *.iml 28 | .idea 29 | .gradle 30 | local.properties 31 | 32 | # node.js 33 | # 34 | node_modules/ 35 | npm-debug.log 36 | 37 | # BUCK 38 | buck-out/ 39 | \.buckd/ 40 | android/app/libs 41 | android/keystores/debug.keystore 42 | -------------------------------------------------------------------------------- /Examples/ImageBrowserExample/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /Examples/ImageBrowserExample/Carousel.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Source code: https://github.com/CoderGLM/react-native-image-browser 3 | * @flow 4 | */ 5 | import React, { Component, PropTypes, } from 'react'; 6 | import { 7 | ScrollView, 8 | TouchableHighlight, 9 | View, 10 | Dimensions, 11 | StyleSheet, 12 | Modal, 13 | Text, 14 | } from 'react-native'; 15 | import Image from 'react-native-transformable-image'; 16 | import Lightbox from './Lightbox'; 17 | 18 | const WINDOW_WIDTH = Dimensions.get('window').width; 19 | const WINDOW_HEIGHT = Dimensions.get('window').height; 20 | 21 | export default class Carousel extends Component { 22 | static propTypes = { 23 | origins: PropTypes.array.isRequired, 24 | onClose: PropTypes.func.isRequired, 25 | }; 26 | 27 | constructor(props) { 28 | super(props); 29 | this._firstPageShowed = false; // 记录是否已经显示了first page 30 | this.state={ 31 | currentPage: 1, // 保存当前页码 32 | }; 33 | } 34 | 35 | render() { 36 | // 滚动到GridView中选择的page 37 | if (!this._firstPageShowed) { 38 | this._timer = setTimeout(()=> { 39 | this._scrollView && this._scrollView.scrollTo({ 40 | x: this.props.firstPage*WINDOW_WIDTH, 41 | y: 0, 42 | animated: false, 43 | }); 44 | // 当GridView显示时，就会执行这里，所以不能直接赋值为true 45 | this._firstPageShowed = this.props.isOpen; 46 | }); 47 | } 48 | 49 | let { children } = this.props, 50 | items = []; 51 | 52 | React.Children.forEach(children, (item, index) => { 53 | items.push( 54 | 58 | {item} 59 | 60 | ); 61 | }); 62 | 63 | return ( 64 | 67 | 68 | {this._scrollView = component}} 70 | scrollEventThrottle={15} 71 | removeClippedSubviews={true} 72 | pagingEnabled={true} 73 | horizontal={true} 74 | onScroll={this._onScroll.bind(this)}> 75 | {items} 76 | 77 | {this.state.currentPage}/{9} 78 | 79 | 80 | ); 81 | } 82 | 83 | componentWillReceiveProps(nextProps: Object): void { 84 | if (nextProps.isOpen !== this.props.isOpen) { 85 | this._firstPageShowed = false; 86 | } 87 | } 88 | 89 | componentWillUnmount() { 90 | this._timer && clearTimeout(this._timer); 91 | } 92 | 93 | /* 94 | * 95 | * Events 96 | * 97 | */ 98 | _onScroll(e) { 99 | // caculate page num 100 | let newPageNum = parseInt(e.nativeEvent.contentOffset.x/WINDOW_WIDTH+1.5); 101 | newPageNum!=this.state.currentPage && this.setState({ 102 | currentPage: newPageNum, 103 | }); 104 | } 105 | } 106 | 107 | const styles = StyleSheet.create({ 108 | legend: { 109 | position: 'absolute', 110 | top: 50, 111 | left: 0, 112 | right: 0, 113 | fontSize: 17, 114 | textAlign: 'center', 115 | color: 'white', 116 | backgroundColor: 'black', 117 | }, 118 | }); 119 | -------------------------------------------------------------------------------- /Examples/ImageBrowserExample/GridView.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Source code: https://github.com/CoderGLM/react-native-image-browser 3 | * 4 | * @flow 5 | */ 6 | import React, { Component } from 'react'; 7 | import { 8 | View, 9 | Text, 10 | StyleSheet, 11 | ScrollView, 12 | StatusBar, 13 | Image, 14 | TouchableHighlight, 15 | } from 'react-native'; 16 | import Carousel from './Carousel'; 17 | 18 | export default class GridView extends Component { 19 | constructor(props) { 20 | super(props); 21 | this.state = { 22 | isOpenModal: false, 23 | selectedIndex: 0, 24 | origins: [], 25 | }; 26 | } 27 | 28 | render() { 29 | let images = []; 30 | let imgBtns = this.props.images.map((url, index) => { 31 | let img = ; 32 | images.push(img); 33 | return ( 34 | 39 | {img} 40 | 41 | ); 42 | }); 43 | 44 | return ( 45 | 46 | {imgBtns} 47 | 53 | 54 | ); 55 | } 56 | 57 | componentDidMount() { 58 | console.log('-------'); 59 | this.setState({ 60 | origins: [], 61 | }); 62 | // 如果不使用setTimeout，异步回调得不到正确的值 63 | setTimeout(() => { 64 | // 计算每个item的origin（原始坐标大小），保存在origins里 65 | for (var i = 0; i < this.props.images.length; i++) { 66 | this.refs["touch_ref_"+i].measure((fx, fy, width, height, px, py) => { 67 | this.state.origins.push({ 68 | x: px, 69 | y: py, 70 | width, 71 | height, 72 | }); 73 | }); 74 | } 75 | }); 76 | } 77 | 78 | /* 79 | * 80 | * Private 81 | * 82 | */ 83 | _itemClicked(index: number): void { 84 | StatusBar.setHidden(true, 'fade'); 85 | this.setState({ 86 | selectedIndex: index, 87 | isOpenModal: true, 88 | }); 89 | } 90 | 91 | _closeCarousel(): void { 92 | this.setState({ 93 | isOpenModal: false, 94 | }); 95 | } 96 | } 97 | 98 | const styles = StyleSheet.create({ 99 | container: { 100 | flexDirection: 'row', 101 | flexWrap: 'wrap', 102 | justifyContent: 'space-around', 103 | alignItems: 'center', 104 | }, 105 | image: { 106 | resizeMode: 'stretch', 107 | margin: 5, 108 | width: 100, 109 | height: 100, 110 | backgroundColor: 'gray', 111 | } 112 | }); 113 | -------------------------------------------------------------------------------- /Examples/ImageBrowserExample/Lightbox.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Source code: https://github.com/CoderGLM/react-native-image-browser 3 | * @flow 4 | */ 5 | import React, { Component, PropTypes } from 'react'; 6 | import { 7 | View, 8 | TouchableHighlight, 9 | StyleSheet, 10 | Dimensions, 11 | Animated, 12 | Platform, 13 | } from 'react-native'; 14 | import Image from 'react-native-transformable-image'; 15 | 16 | const WINDOW_WIDTH = Dimensions.get("window").width; 17 | const WINDOW_HEIGHT = Dimensions.get("window").height; 18 | const STATUS_BAR_OFFSET = (Platform.OS == 'android' ? -25 : 0); 19 | 20 | export default class Lightbox extends Component { 21 | static propTypes = { 22 | origin: PropTypes.shape({ 23 | x: PropTypes.number, 24 | y: PropTypes.number, 25 | width: PropTypes.number, 26 | height: PropTypes.number, 27 | }), 28 | onClose: PropTypes.func.isRequired, 29 | onOpen: PropTypes.func, 30 | }; 31 | 32 | constructor(props) { 33 | super(props); 34 | this.state = { 35 | openValue: new Animated.Value(0), 36 | }; 37 | } 38 | 39 | render() { 40 | let { children, origin } = this.props; 41 | let { openValue } = this.state; 42 | let image = React.cloneElement(React.Children.only(children), { 43 | style: styles.image, 44 | }); 45 | let openStyle = this.props.origin && [styles.open, { 46 | left: openValue.interpolate({inputRange: [0, 1], outputRange: [origin.x, 0]}), 47 | top: openValue.interpolate({inputRange: [0, 1], outputRange: [origin.y + STATUS_BAR_OFFSET, STATUS_BAR_OFFSET]}), 48 | width: openValue.interpolate({inputRange: [0, 1], outputRange: [origin.width, WINDOW_WIDTH]}), 49 | height: openValue.interpolate({inputRange: [0, 1], outputRange: [origin.height, WINDOW_HEIGHT]}), 50 | }]; 51 | let content = ( 52 | 53 | {image} 54 | 55 | ); 56 | return ( 57 | 61 | {content} 62 | 63 | ); 64 | } 65 | 66 | componentDidMount() { 67 | /* 68 | * 需要setValue(0)，如果不添加，会有一定几率看不到动画，短暂黑屏然后显示最终图片 69 | */ 70 | this.state.openValue.setValue(0); 71 | Animated.timing(this.state.openValue, { 72 | toValue: 1, 73 | }).start(); 74 | } 75 | 76 | /* 77 | * 78 | * Private 79 | * 80 | */ 81 | _pressImage() { 82 | Animated.timing(this.state.openValue, { 83 | toValue: 0, 84 | }).start(() => { 85 | this.props.onClose(); 86 | }); 87 | 88 | } 89 | } 90 | 91 | const styles = StyleSheet.create({ 92 | container: { 93 | flex: 1, 94 | width: WINDOW_WIDTH, 95 | }, 96 | image: { 97 | flex: 1, 98 | resizeMode: 'contain', 99 | }, 100 | open: { 101 | position: 'absolute', 102 | margin: 0, 103 | backgroundColor: 'black', 104 | } 105 | }); 106 | -------------------------------------------------------------------------------- /Examples/ImageBrowserExample/Lightbox_scale.js: -------------------------------------------------------------------------------- 1 | import React, { Component, PropTypes } from 'react'; 2 | import { 3 | View, 4 | Image, 5 | TouchableHighlight, 6 | StyleSheet, 7 | Dimensions, 8 | Animated, 9 | Platform, 10 | } from 'react-native'; 11 | 12 | const WINDOW_WIDTH = Dimensions.get("window").width; 13 | const WINDOW_HEIGHT = Dimensions.get("window").height; 14 | const STATUS_BAR_OFFSET = (Platform.OS == 'android' ? -25 : 0); 15 | 16 | export default class Lightbox extends Component { 17 | static propTypes = { 18 | origin: PropTypes.shape({ 19 | x: PropTypes.number, 20 | y: PropTypes.number, 21 | width: PropTypes.number, 22 | height: PropTypes.number, 23 | }), 24 | onClose: PropTypes.func.isRequired, 25 | onOpen: PropTypes.func, 26 | }; 27 | 28 | constructor(props) { 29 | super(props); 30 | this.state = { 31 | animator: new Animated.Value(0), 32 | }; 33 | } 34 | 35 | componentWillMount() { 36 | } 37 | 38 | render() { 39 | let { children, origin } = this.props; 40 | let { animator } = this.state; 41 | let image = React.cloneElement(React.Children.only(children), { 42 | style: styles.image, 43 | }); 44 | let openStyle = [styles.open, { 45 | left: origin.x, 46 | top: origin.y, 47 | width: origin.width, 48 | height: origin.height, 49 | transform: [{ 50 | translateY: animator.interpolate({inputRange: [0, 1], outputRange: [0, 0.5*WINDOW_HEIGHT-0.5*(2*origin.y + origin.height + STATUS_BAR_OFFSET)]}) 51 | }, { 52 | translateX: animator.interpolate({inputRange: [0, 1], outputRange: [0, 0.5*WINDOW_WIDTH-0.5*(2*origin.x+origin.width)]}) 53 | }, { 54 | scale: animator.interpolate({inputRange: [0, 1], outputRange: [1, WINDOW_WIDTH/origin.width]}) 55 | }], 56 | }]; 57 | let content = ( 58 | 59 | {image} 60 | 61 | ); 62 | return ( 63 | 67 | {content} 68 | 69 | ); 70 | } 71 | 72 | componentDidMount() { 73 | /* 74 | * 需要setValue(0)，如果不添加，会有一定几率看不到动画，短暂黑屏然后显示最终图片 75 | */ 76 | this.state.animator.setValue(0); 77 | Animated.timing(this.state.animator, { 78 | toValue: 1, 79 | }).start(); 80 | } 81 | 82 | /* 83 | * 84 | * Private 85 | * 86 | */ 87 | _pressImage() { 88 | Animated.timing(this.state.animator, { 89 | toValue: 0, 90 | }).start(() => { 91 | this.props.onClose(); 92 | }); 93 | } 94 | } 95 | 96 | const styles = StyleSheet.create({ 97 | container: { 98 | flex: 1, 99 | width: WINDOW_WIDTH, 100 | }, 101 | image: { 102 | flex: 1, 103 | resizeMode: 'contain', 104 | }, 105 | open: { 106 | position: 'absolute', 107 | margin: 0, 108 | backgroundColor: 'black', 109 | } 110 | }); 111 | -------------------------------------------------------------------------------- /Examples/ImageBrowserExample/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.imagebrowserexample', 50 | ) 51 | 52 | android_resource( 53 | name = 'res', 54 | res = 'src/main/res', 55 | package = 'com.imagebrowserexample', 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 | -------------------------------------------------------------------------------- /Examples/ImageBrowserExample/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 | * // override which node gets called and with what additional arguments 61 | * nodeExecutableAndArgs: ["node"] 62 | * 63 | * // supply additional arguments to the packager 64 | * extraPackagerArgs: [] 65 | * ] 66 | */ 67 | 68 | apply from: "../../node_modules/react-native/react.gradle" 69 | 70 | /** 71 | * Set this to true to create two separate APKs instead of one: 72 | * - An APK that only works on ARM devices 73 | * - An APK that only works on x86 devices 74 | * The advantage is the size of the APK is reduced by about 4MB. 75 | * Upload all the APKs to the Play Store and people will download 76 | * the correct one based on the CPU architecture of their device. 77 | */ 78 | def enableSeparateBuildPerCPUArchitecture = false 79 | 80 | /** 81 | * Run Proguard to shrink the Java bytecode in release builds. 82 | */ 83 | def enableProguardInReleaseBuilds = false 84 | 85 | android { 86 | compileSdkVersion 23 87 | buildToolsVersion "23.0.1" 88 | 89 | defaultConfig { 90 | applicationId "com.imagebrowserexample" 91 | minSdkVersion 16 92 | targetSdkVersion 22 93 | versionCode 1 94 | versionName "1.0" 95 | ndk { 96 | abiFilters "armeabi-v7a", "x86" 97 | } 98 | } 99 | splits { 100 | abi { 101 | reset() 102 | enable enableSeparateBuildPerCPUArchitecture 103 | universalApk false // If true, also generate a universal APK 104 | include "armeabi-v7a", "x86" 105 | } 106 | } 107 | buildTypes { 108 | release { 109 | minifyEnabled enableProguardInReleaseBuilds 110 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" 111 | } 112 | } 113 | // applicationVariants are e.g. debug, release 114 | applicationVariants.all { variant -> 115 | variant.outputs.each { output -> 116 | // For each separate APK per architecture, set a unique version code as described here: 117 | // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits 118 | def versionCodes = ["armeabi-v7a":1, "x86":2] 119 | def abi = output.getFilter(OutputFile.ABI) 120 | if (abi != null) { // null for the universal-debug, universal-release variants 121 | output.versionCodeOverride = 122 | versionCodes.get(abi) * 1048576 + defaultConfig.versionCode 123 | } 124 | } 125 | } 126 | } 127 | 128 | dependencies { 129 | compile fileTree(dir: "libs", include: ["*.jar"]) 130 | compile "com.android.support:appcompat-v7:23.0.1" 131 | compile "com.facebook.react:react-native:+" // From node_modules 132 | } 133 | 134 | // Run this once to be able to run the application with BUCK 135 | // puts all compile dependencies into folder libs for BUCK to use 136 | task copyDownloadableDepsToLibs(type: Copy) { 137 | from configurations.compile 138 | into 'libs' 139 | } 140 | -------------------------------------------------------------------------------- /Examples/ImageBrowserExample/android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | 12 | # If your project uses WebView with JS, uncomment the following 13 | # and specify the fully qualified class name to the JavaScript interface 14 | # class: 15 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 16 | # public *; 17 | #} 18 | 19 | # Disabling obfuscation is useful if you collect stack traces from production crashes 20 | # (unless you are using a system that supports de-obfuscate the stack traces). 21 | -dontobfuscate 22 | 23 | # React Native 24 | 25 | # Keep our interfaces so they can be used by other ProGuard rules. 26 | # See http://sourceforge.net/p/proguard/bugs/466/ 27 | -keep,allowobfuscation @interface com.facebook.proguard.annotations.DoNotStrip 28 | -keep,allowobfuscation @interface com.facebook.proguard.annotations.KeepGettersAndSetters 29 | -keep,allowobfuscation @interface com.facebook.common.internal.DoNotStrip 30 | 31 | # Do not strip any method/class that is annotated with @DoNotStrip 32 | -keep @com.facebook.proguard.annotations.DoNotStrip class * 33 | -keep @com.facebook.common.internal.DoNotStrip class * 34 | -keepclassmembers class * { 35 | @com.facebook.proguard.annotations.DoNotStrip *; 36 | @com.facebook.common.internal.DoNotStrip *; 37 | } 38 | 39 | -keepclassmembers @com.facebook.proguard.annotations.KeepGettersAndSetters class * { 40 | void set*(***); 41 | *** get*(); 42 | } 43 | 44 | -keep class * extends com.facebook.react.bridge.JavaScriptModule { *; } 45 | -keep class * extends com.facebook.react.bridge.NativeModule { *; } 46 | -keepclassmembers,includedescriptorclasses class * { native ; } 47 | -keepclassmembers class * { @com.facebook.react.uimanager.UIProp ; } 48 | -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactProp ; } 49 | -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactPropGroup ; } 50 | 51 | -dontwarn com.facebook.react.** 52 | 53 | # okhttp 54 | 55 | -keepattributes Signature 56 | -keepattributes *Annotation* 57 | -keep class okhttp3.** { *; } 58 | -keep interface okhttp3.** { *; } 59 | -dontwarn okhttp3.** 60 | 61 | # okio 62 | 63 | -keep class sun.misc.Unsafe { *; } 64 | -dontwarn java.nio.file.* 65 | -dontwarn org.codehaus.mojo.animal_sniffer.IgnoreJRERequirement 66 | -dontwarn okio.** 67 | -------------------------------------------------------------------------------- /Examples/ImageBrowserExample/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | 12 | 13 | 19 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /Examples/ImageBrowserExample/android/app/src/main/java/com/imagebrowserexample/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.imagebrowserexample; 2 | 3 | import com.facebook.react.ReactActivity; 4 | 5 | public class MainActivity extends ReactActivity { 6 | 7 | /** 8 | * Returns the name of the main component registered from JavaScript. 9 | * This is used to schedule rendering of the component. 10 | */ 11 | @Override 12 | protected String getMainComponentName() { 13 | return "ImageBrowserExample"; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /Examples/ImageBrowserExample/android/app/src/main/java/com/imagebrowserexample/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.imagebrowserexample; 2 | 3 | import android.app.Application; 4 | import android.util.Log; 5 | 6 | import com.facebook.react.ReactApplication; 7 | import com.facebook.react.ReactInstanceManager; 8 | import com.facebook.react.ReactNativeHost; 9 | import com.facebook.react.ReactPackage; 10 | import com.facebook.react.shell.MainReactPackage; 11 | 12 | import java.util.Arrays; 13 | import java.util.List; 14 | 15 | public class MainApplication extends Application implements ReactApplication { 16 | 17 | private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { 18 | @Override 19 | protected boolean getUseDeveloperSupport() { 20 | return BuildConfig.DEBUG; 21 | } 22 | 23 | @Override 24 | protected List getPackages() { 25 | return Arrays.asList( 26 | new MainReactPackage() 27 | ); 28 | } 29 | }; 30 | 31 | @Override 32 | public ReactNativeHost getReactNativeHost() { 33 | return mReactNativeHost; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /Examples/ImageBrowserExample/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CoderLim/react-native-image-browser/d7da2dc652247154ae3384e73e6f343db506b9da/Examples/ImageBrowserExample/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /Examples/ImageBrowserExample/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CoderLim/react-native-image-browser/d7da2dc652247154ae3384e73e6f343db506b9da/Examples/ImageBrowserExample/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /Examples/ImageBrowserExample/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CoderLim/react-native-image-browser/d7da2dc652247154ae3384e73e6f343db506b9da/Examples/ImageBrowserExample/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /Examples/ImageBrowserExample/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CoderLim/react-native-image-browser/d7da2dc652247154ae3384e73e6f343db506b9da/Examples/ImageBrowserExample/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /Examples/ImageBrowserExample/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | ImageBrowserExample 3 | 4 | -------------------------------------------------------------------------------- /Examples/ImageBrowserExample/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Examples/ImageBrowserExample/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 "$rootDir/../node_modules/react-native/android" 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /Examples/ImageBrowserExample/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 | -------------------------------------------------------------------------------- /Examples/ImageBrowserExample/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CoderLim/react-native-image-browser/d7da2dc652247154ae3384e73e6f343db506b9da/Examples/ImageBrowserExample/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /Examples/ImageBrowserExample/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 | -------------------------------------------------------------------------------- /Examples/ImageBrowserExample/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 | -------------------------------------------------------------------------------- /Examples/ImageBrowserExample/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 | -------------------------------------------------------------------------------- /Examples/ImageBrowserExample/android/keystores/BUCK: -------------------------------------------------------------------------------- 1 | keystore( 2 | name = 'debug', 3 | store = 'debug.keystore', 4 | properties = 'debug.keystore.properties', 5 | visibility = [ 6 | 'PUBLIC', 7 | ], 8 | ) 9 | -------------------------------------------------------------------------------- /Examples/ImageBrowserExample/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 | -------------------------------------------------------------------------------- /Examples/ImageBrowserExample/android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'ImageBrowserExample' 2 | 3 | include ':app' 4 | -------------------------------------------------------------------------------- /Examples/ImageBrowserExample/index.android.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample React Native App 3 | * https://github.com/facebook/react-native 4 | * @flow 5 | */ 6 | 7 | import React, { Component } from 'react'; 8 | import { 9 | AppRegistry, 10 | StyleSheet, 11 | Text, 12 | View, 13 | Dimensions, 14 | Image, 15 | } from 'react-native'; 16 | import GridView from './GridView'; 17 | 18 | const WINDOW_WIDTH = Dimensions.get('window').width; 19 | 20 | class ImageBrowserExample extends Component { 21 | constructor(props) { 22 | super(props); 23 | } 24 | 25 | render() { 26 | return ( 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | ); 41 | } 42 | } 43 | 44 | const styles = StyleSheet.create({ 45 | container: { 46 | flex: 1, 47 | justifyContent: 'center', 48 | alignItems: 'center', 49 | backgroundColor: '#F5FCFF', 50 | }, 51 | image: { 52 | resizeMode: 'stretch', 53 | margin: 5, 54 | width: 100, 55 | height: 100, 56 | backgroundColor: 'gray', 57 | }, 58 | gridview: { 59 | width: WINDOW_WIDTH, 60 | height: 300, 61 | } 62 | }); 63 | 64 | AppRegistry.registerComponent('ImageBrowserExample', () => ImageBrowserExample); 65 | -------------------------------------------------------------------------------- /Examples/ImageBrowserExample/index.ios.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample React Native App 3 | * https://github.com/facebook/react-native 4 | * @flow 5 | */ 6 | 7 | import React, { Component } from 'react'; 8 | import { 9 | AppRegistry, 10 | StyleSheet, 11 | Text, 12 | View, 13 | Dimensions, 14 | Image, 15 | } from 'react-native'; 16 | import GridView from './GridView'; 17 | 18 | const WINDOW_WIDTH = Dimensions.get('window').width; 19 | 20 | class ImageBrowserExample extends Component { 21 | constructor(props) { 22 | super(props); 23 | } 24 | 25 | render() { 26 | return ( 27 | 28 | 41 | 42 | 43 | ); 44 | } 45 | } 46 | 47 | const styles = StyleSheet.create({ 48 | container: { 49 | flex: 1, 50 | justifyContent: 'center', 51 | alignItems: 'center', 52 | backgroundColor: '#F5FCFF', 53 | }, 54 | gridview: { 55 | width: WINDOW_WIDTH, 56 | height: 300, 57 | } 58 | }); 59 | 60 | AppRegistry.registerComponent('ImageBrowserExample', () => ImageBrowserExample); 61 | -------------------------------------------------------------------------------- /Examples/ImageBrowserExample/ios/ImageBrowserExample.xcodeproj/xcshareddata/xcschemes/ImageBrowserExample.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 | -------------------------------------------------------------------------------- /Examples/ImageBrowserExample/ios/ImageBrowserExample/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 | -------------------------------------------------------------------------------- /Examples/ImageBrowserExample/ios/ImageBrowserExample/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 "RCTBundleURLProvider.h" 13 | #import "RCTRootView.h" 14 | 15 | @implementation AppDelegate 16 | 17 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 18 | { 19 | NSURL *jsCodeLocation; 20 | 21 | jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil]; 22 | 23 | RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation 24 | moduleName:@"ImageBrowserExample" 25 | initialProperties:nil 26 | launchOptions:launchOptions]; 27 | rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1]; 28 | 29 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 30 | UIViewController *rootViewController = [UIViewController new]; 31 | rootViewController.view = rootView; 32 | self.window.rootViewController = rootViewController; 33 | [self.window makeKeyAndVisible]; 34 | return YES; 35 | } 36 | 37 | @end 38 | -------------------------------------------------------------------------------- /Examples/ImageBrowserExample/ios/ImageBrowserExample/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 | -------------------------------------------------------------------------------- /Examples/ImageBrowserExample/ios/ImageBrowserExample/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 | } -------------------------------------------------------------------------------- /Examples/ImageBrowserExample/ios/ImageBrowserExample/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 | NSAllowsArbitraryLoads 44 | 45 | NSExceptionDomains 46 | 47 | localhost 48 | 49 | NSTemporaryExceptionAllowsInsecureHTTPLoads 50 | 51 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /Examples/ImageBrowserExample/ios/ImageBrowserExample/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 | -------------------------------------------------------------------------------- /Examples/ImageBrowserExample/ios/ImageBrowserExampleTests/ImageBrowserExampleTests.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 ImageBrowserExampleTests : XCTestCase 20 | 21 | @end 22 | 23 | @implementation ImageBrowserExampleTests 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 | -------------------------------------------------------------------------------- /Examples/ImageBrowserExample/ios/ImageBrowserExampleTests/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 | -------------------------------------------------------------------------------- /Examples/ImageBrowserExample/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ImageBrowserExample", 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": "15.2.1", 10 | "react-native": "^0.30.0", 11 | "react-native-gallery": "0.0.17" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /Examples/RichImageBrowserExample/.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /Examples/RichImageBrowserExample/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | 3 | # We fork some components by platform. 4 | .*/*.android.js 5 | 6 | # Ignore templates with `@flow` in header 7 | .*/local-cli/generator.* 8 | 9 | # Ignore malformed json 10 | .*/node_modules/y18n/test/.*\.json 11 | 12 | # Ignore the website subdir 13 | /website/.* 14 | 15 | # Ignore BUCK generated dirs 16 | /\.buckd/ 17 | 18 | # Ignore unexpected extra @providesModule 19 | .*/node_modules/commoner/test/source/widget/share.js 20 | 21 | # Ignore duplicate module providers 22 | # For RN Apps installed via npm, "Libraries" folder is inside node_modules/react-native but in the source repo it is in the root 23 | .*/Libraries/react-native/React.js 24 | .*/Libraries/react-native/ReactNative.js 25 | .*/node_modules/jest-runtime/build/__tests__/.* 26 | 27 | [include] 28 | 29 | [libs] 30 | node_modules/react-native/Libraries/react-native/react-native-interface.js 31 | node_modules/react-native/flow 32 | flow/ 33 | 34 | [options] 35 | module.system=haste 36 | 37 | esproposal.class_static_fields=enable 38 | esproposal.class_instance_fields=enable 39 | 40 | experimental.strict_type_args=true 41 | 42 | munge_underscores=true 43 | 44 | module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub' 45 | module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub' 46 | 47 | suppress_type=$FlowIssue 48 | suppress_type=$FlowFixMe 49 | suppress_type=$FixMe 50 | 51 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-9]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\) 52 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-9]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+ 53 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy 54 | 55 | unsafe.enable_getters_and_setters=true 56 | 57 | [version] 58 | ^0.29.0 59 | -------------------------------------------------------------------------------- /Examples/RichImageBrowserExample/.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 | *.iml 28 | .idea 29 | .gradle 30 | local.properties 31 | 32 | # node.js 33 | # 34 | node_modules/ 35 | npm-debug.log 36 | 37 | # BUCK 38 | buck-out/ 39 | \.buckd/ 40 | android/app/libs 41 | android/keystores/debug.keystore 42 | -------------------------------------------------------------------------------- /Examples/RichImageBrowserExample/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /Examples/RichImageBrowserExample/GridView.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Source code: https://github.com/CoderGLM/react-native-image-browser 3 | * 4 | * @flow 5 | */ 6 | import React, { Component } from 'react'; 7 | import { 8 | View, 9 | Text, 10 | StyleSheet, 11 | ScrollView, 12 | Image, 13 | StatusBar, 14 | TouchableHighlight, 15 | } from 'react-native'; 16 | 17 | import Gallery from 'react-native-gallery'; 18 | import Lightbox from './Lightbox'; 19 | 20 | export default class GridView extends Component { 21 | constructor(props) { 22 | super(props); 23 | this.origins = []; 24 | this.state = { 25 | selectedIndex: -1, 26 | }; 27 | } 28 | 29 | render() { 30 | let images = []; 31 | let imgBtns = this.props.images.map((uri, index) => { 32 | let img = ; 33 | images.push(img); 34 | return ( 35 | 40 | {img} 41 | 42 | ); 43 | }); 44 | 45 | return ( 46 | 47 | 52 | 57 | 58 | {imgBtns} 59 | 60 | ); 61 | } 62 | 63 | componentDidMount() { 64 | this.origin = []; 65 | 66 | setTimeout(() => { 67 | // calculate all of the Image component's origin position 68 | for (var i = 0; i < this.props.images.length; i++) { 69 | this.refs["touch_ref_"+i].measure((fx, fy, width, height, px, py) => { 70 | this.origins.push({ 71 | x: px, 72 | y: py, 73 | width, 74 | height, 75 | });}); 76 | } 77 | }); 78 | } 79 | 80 | /* 81 | * 82 | * Private 83 | * 84 | */ 85 | _imageClicked(index: number): void { 86 | StatusBar.setHidden(true, 'fade'); 87 | this.setState({ 88 | isOpen: true, 89 | selectedIndex: index, 90 | }); 91 | } 92 | 93 | _closeLightbox(): void { 94 | this.setState({ 95 | selectedIndex: -1 96 | }); 97 | } 98 | } 99 | 100 | const styles = StyleSheet.create({ 101 | container: { 102 | flexDirection: 'row', 103 | flexWrap: 'wrap', 104 | justifyContent: 'space-around', 105 | alignItems: 'center', 106 | }, 107 | image: { 108 | resizeMode: 'stretch', 109 | margin: 5, 110 | width: 100, 111 | height: 100, 112 | backgroundColor: 'gray', 113 | } 114 | }); 115 | -------------------------------------------------------------------------------- /Examples/RichImageBrowserExample/Lightbox.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Source code: https://github.com/CoderGLM/react-native-image-browser 3 | * @flow 4 | */ 5 | import React, { Component, PropTypes } from 'react'; 6 | import { 7 | View, 8 | Image, 9 | TouchableHighlight, 10 | StyleSheet, 11 | Dimensions, 12 | Animated, 13 | Platform, 14 | Modal, 15 | } from 'react-native'; 16 | 17 | const WINDOW_WIDTH = Dimensions.get("window").width; 18 | const WINDOW_HEIGHT = Dimensions.get("window").height; 19 | const STATUS_BAR_OFFSET = (Platform.OS == 'android' ? -25 : 0); 20 | 21 | export default class Lightbox extends Component { 22 | static propTypes = { 23 | visible: PropTypes.bool, 24 | origin: PropTypes.shape({ 25 | x: PropTypes.number, 26 | y: PropTypes.number, 27 | width: PropTypes.number, 28 | height: PropTypes.number, 29 | }), 30 | }; 31 | 32 | constructor(props) { 33 | super(props); 34 | this.state = { 35 | animating: false, 36 | animator: new Animated.Value(0), 37 | }; 38 | } 39 | 40 | render() { 41 | // if (!this.props.visible) { 42 | // console.log('return null'); 43 | // return null; 44 | // } 45 | let { children, origin } = this.props; 46 | let { animator } = this.state; 47 | 48 | let openStyle; 49 | 50 | openStyle = this.props.origin && [styles.open, { 51 | left: animator.interpolate({inputRange: [0, 1], outputRange: [origin.x, 0]}), 52 | top: animator.interpolate({inputRange: [0, 1], outputRange: [origin.y + STATUS_BAR_OFFSET, STATUS_BAR_OFFSET]}), 53 | width: animator.interpolate({inputRange: [0, 1], outputRange: [origin.width, WINDOW_WIDTH]}), 54 | height: animator.interpolate({inputRange: [0, 1], outputRange: [origin.height, WINDOW_HEIGHT]}), 55 | }]; 56 | 57 | 58 | let gallery = React.cloneElement(children, { 59 | position: 'absolute', 60 | left: 0, 61 | top: 0, 62 | width: WINDOW_WIDTH, 63 | height: WINDOW_HEIGHT, 64 | opacity: this.state.animating?0:1, 65 | }); 66 | 67 | let animatedView = ( 68 | 69 | 70 | 71 | ); 72 | return ( 73 | 82 | 86 | {animatedView} 87 | 88 | {gallery} 89 | 90 | ); 91 | } 92 | 93 | componentDidMount() { 94 | console.log('componentDidMount'); 95 | } 96 | 97 | componentWillReceiveProps(newProps) { 98 | if (this.props.visible != newProps.visible) { 99 | if (newProps.visible) { 100 | this.setState({ 101 | animating: true, 102 | }); 103 | 104 | this.state.animator.setValue(0); 105 | Animated.timing(this.state.animator, { 106 | toValue: 1, 107 | }).start(() => { 108 | this.setState({ 109 | animating: false, 110 | }); 111 | }); 112 | } 113 | } 114 | } 115 | 116 | /* 117 | * 118 | * Private 119 | * 120 | */ 121 | _pressImage() { 122 | this.setState({ 123 | animating: true, 124 | }); 125 | Animated.timing(this.state.animator, { 126 | toValue: 0, 127 | }).start(() => { 128 | this.setState({ 129 | animating: false, 130 | }); 131 | this.props.onClose(); 132 | }); 133 | } 134 | } 135 | 136 | const styles = StyleSheet.create({ 137 | container: { 138 | flex: 1, 139 | width: WINDOW_WIDTH, 140 | backgroundColor: 'black', 141 | }, 142 | open: { 143 | position: 'absolute', 144 | backgroundColor: 'black', 145 | } 146 | }); 147 | -------------------------------------------------------------------------------- /Examples/RichImageBrowserExample/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.richimagebrowserexample', 50 | ) 51 | 52 | android_resource( 53 | name = 'res', 54 | res = 'src/main/res', 55 | package = 'com.richimagebrowserexample', 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 | -------------------------------------------------------------------------------- /Examples/RichImageBrowserExample/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 | * // override which node gets called and with what additional arguments 61 | * nodeExecutableAndArgs: ["node"] 62 | * 63 | * // supply additional arguments to the packager 64 | * extraPackagerArgs: [] 65 | * ] 66 | */ 67 | 68 | apply from: "../../node_modules/react-native/react.gradle" 69 | 70 | /** 71 | * Set this to true to create two separate APKs instead of one: 72 | * - An APK that only works on ARM devices 73 | * - An APK that only works on x86 devices 74 | * The advantage is the size of the APK is reduced by about 4MB. 75 | * Upload all the APKs to the Play Store and people will download 76 | * the correct one based on the CPU architecture of their device. 77 | */ 78 | def enableSeparateBuildPerCPUArchitecture = false 79 | 80 | /** 81 | * Run Proguard to shrink the Java bytecode in release builds. 82 | */ 83 | def enableProguardInReleaseBuilds = false 84 | 85 | android { 86 | compileSdkVersion 23 87 | buildToolsVersion "23.0.1" 88 | 89 | defaultConfig { 90 | applicationId "com.richimagebrowserexample" 91 | minSdkVersion 16 92 | targetSdkVersion 22 93 | versionCode 1 94 | versionName "1.0" 95 | ndk { 96 | abiFilters "armeabi-v7a", "x86" 97 | } 98 | } 99 | splits { 100 | abi { 101 | reset() 102 | enable enableSeparateBuildPerCPUArchitecture 103 | universalApk false // If true, also generate a universal APK 104 | include "armeabi-v7a", "x86" 105 | } 106 | } 107 | buildTypes { 108 | release { 109 | minifyEnabled enableProguardInReleaseBuilds 110 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" 111 | } 112 | } 113 | // applicationVariants are e.g. debug, release 114 | applicationVariants.all { variant -> 115 | variant.outputs.each { output -> 116 | // For each separate APK per architecture, set a unique version code as described here: 117 | // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits 118 | def versionCodes = ["armeabi-v7a":1, "x86":2] 119 | def abi = output.getFilter(OutputFile.ABI) 120 | if (abi != null) { // null for the universal-debug, universal-release variants 121 | output.versionCodeOverride = 122 | versionCodes.get(abi) * 1048576 + defaultConfig.versionCode 123 | } 124 | } 125 | } 126 | } 127 | 128 | dependencies { 129 | compile fileTree(dir: "libs", include: ["*.jar"]) 130 | compile "com.android.support:appcompat-v7:23.0.1" 131 | compile "com.facebook.react:react-native:+" // From node_modules 132 | } 133 | 134 | // Run this once to be able to run the application with BUCK 135 | // puts all compile dependencies into folder libs for BUCK to use 136 | task copyDownloadableDepsToLibs(type: Copy) { 137 | from configurations.compile 138 | into 'libs' 139 | } 140 | -------------------------------------------------------------------------------- /Examples/RichImageBrowserExample/android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | 12 | # If your project uses WebView with JS, uncomment the following 13 | # and specify the fully qualified class name to the JavaScript interface 14 | # class: 15 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 16 | # public *; 17 | #} 18 | 19 | # Disabling obfuscation is useful if you collect stack traces from production crashes 20 | # (unless you are using a system that supports de-obfuscate the stack traces). 21 | -dontobfuscate 22 | 23 | # React Native 24 | 25 | # Keep our interfaces so they can be used by other ProGuard rules. 26 | # See http://sourceforge.net/p/proguard/bugs/466/ 27 | -keep,allowobfuscation @interface com.facebook.proguard.annotations.DoNotStrip 28 | -keep,allowobfuscation @interface com.facebook.proguard.annotations.KeepGettersAndSetters 29 | -keep,allowobfuscation @interface com.facebook.common.internal.DoNotStrip 30 | 31 | # Do not strip any method/class that is annotated with @DoNotStrip 32 | -keep @com.facebook.proguard.annotations.DoNotStrip class * 33 | -keep @com.facebook.common.internal.DoNotStrip class * 34 | -keepclassmembers class * { 35 | @com.facebook.proguard.annotations.DoNotStrip *; 36 | @com.facebook.common.internal.DoNotStrip *; 37 | } 38 | 39 | -keepclassmembers @com.facebook.proguard.annotations.KeepGettersAndSetters class * { 40 | void set*(***); 41 | *** get*(); 42 | } 43 | 44 | -keep class * extends com.facebook.react.bridge.JavaScriptModule { *; } 45 | -keep class * extends com.facebook.react.bridge.NativeModule { *; } 46 | -keepclassmembers,includedescriptorclasses class * { native ; } 47 | -keepclassmembers class * { @com.facebook.react.uimanager.UIProp ; } 48 | -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactProp ; } 49 | -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactPropGroup ; } 50 | 51 | -dontwarn com.facebook.react.** 52 | 53 | # okhttp 54 | 55 | -keepattributes Signature 56 | -keepattributes *Annotation* 57 | -keep class okhttp3.** { *; } 58 | -keep interface okhttp3.** { *; } 59 | -dontwarn okhttp3.** 60 | 61 | # okio 62 | 63 | -keep class sun.misc.Unsafe { *; } 64 | -dontwarn java.nio.file.* 65 | -dontwarn org.codehaus.mojo.animal_sniffer.IgnoreJRERequirement 66 | -dontwarn okio.** 67 | -------------------------------------------------------------------------------- /Examples/RichImageBrowserExample/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | 12 | 13 | 19 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /Examples/RichImageBrowserExample/android/app/src/main/java/com/richimagebrowserexample/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.richimagebrowserexample; 2 | 3 | import com.facebook.react.ReactActivity; 4 | 5 | public class MainActivity extends ReactActivity { 6 | 7 | /** 8 | * Returns the name of the main component registered from JavaScript. 9 | * This is used to schedule rendering of the component. 10 | */ 11 | @Override 12 | protected String getMainComponentName() { 13 | return "RichImageBrowserExample"; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /Examples/RichImageBrowserExample/android/app/src/main/java/com/richimagebrowserexample/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.richimagebrowserexample; 2 | 3 | import android.app.Application; 4 | import android.util.Log; 5 | 6 | import com.facebook.react.ReactApplication; 7 | import com.facebook.react.ReactInstanceManager; 8 | import com.facebook.react.ReactNativeHost; 9 | import com.facebook.react.ReactPackage; 10 | import com.facebook.react.shell.MainReactPackage; 11 | 12 | import java.util.Arrays; 13 | import java.util.List; 14 | 15 | public class MainApplication extends Application implements ReactApplication { 16 | 17 | private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { 18 | @Override 19 | protected boolean getUseDeveloperSupport() { 20 | return BuildConfig.DEBUG; 21 | } 22 | 23 | @Override 24 | protected List getPackages() { 25 | return Arrays.asList( 26 | new MainReactPackage() 27 | ); 28 | } 29 | }; 30 | 31 | @Override 32 | public ReactNativeHost getReactNativeHost() { 33 | return mReactNativeHost; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /Examples/RichImageBrowserExample/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CoderLim/react-native-image-browser/d7da2dc652247154ae3384e73e6f343db506b9da/Examples/RichImageBrowserExample/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /Examples/RichImageBrowserExample/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CoderLim/react-native-image-browser/d7da2dc652247154ae3384e73e6f343db506b9da/Examples/RichImageBrowserExample/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /Examples/RichImageBrowserExample/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CoderLim/react-native-image-browser/d7da2dc652247154ae3384e73e6f343db506b9da/Examples/RichImageBrowserExample/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /Examples/RichImageBrowserExample/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CoderLim/react-native-image-browser/d7da2dc652247154ae3384e73e6f343db506b9da/Examples/RichImageBrowserExample/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /Examples/RichImageBrowserExample/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | RichImageBrowserExample 3 | 4 | -------------------------------------------------------------------------------- /Examples/RichImageBrowserExample/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Examples/RichImageBrowserExample/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 "$rootDir/../node_modules/react-native/android" 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /Examples/RichImageBrowserExample/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 | -------------------------------------------------------------------------------- /Examples/RichImageBrowserExample/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CoderLim/react-native-image-browser/d7da2dc652247154ae3384e73e6f343db506b9da/Examples/RichImageBrowserExample/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /Examples/RichImageBrowserExample/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 | -------------------------------------------------------------------------------- /Examples/RichImageBrowserExample/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 | -------------------------------------------------------------------------------- /Examples/RichImageBrowserExample/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 | -------------------------------------------------------------------------------- /Examples/RichImageBrowserExample/android/keystores/BUCK: -------------------------------------------------------------------------------- 1 | keystore( 2 | name = 'debug', 3 | store = 'debug.keystore', 4 | properties = 'debug.keystore.properties', 5 | visibility = [ 6 | 'PUBLIC', 7 | ], 8 | ) 9 | -------------------------------------------------------------------------------- /Examples/RichImageBrowserExample/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 | -------------------------------------------------------------------------------- /Examples/RichImageBrowserExample/android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'RichImageBrowserExample' 2 | 3 | include ':app' 4 | -------------------------------------------------------------------------------- /Examples/RichImageBrowserExample/index.android.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample React Native App 3 | * https://github.com/facebook/react-native 4 | * @flow 5 | */ 6 | 7 | import React, { Component } from 'react'; 8 | import { 9 | AppRegistry, 10 | StyleSheet, 11 | Text, 12 | View 13 | } from 'react-native'; 14 | 15 | class RichImageBrowserExample extends Component { 16 | render() { 17 | return ( 18 | 19 | 20 | Welcome to React Native! 21 | 22 | 23 | To get started, edit index.android.js 24 | 25 | 26 | Double tap R on your keyboard to reload,{'\n'} 27 | Shake or press menu button for dev menu 28 | 29 | 30 | ); 31 | } 32 | } 33 | 34 | const styles = StyleSheet.create({ 35 | container: { 36 | flex: 1, 37 | justifyContent: 'center', 38 | alignItems: 'center', 39 | backgroundColor: '#F5FCFF', 40 | }, 41 | welcome: { 42 | fontSize: 20, 43 | textAlign: 'center', 44 | margin: 10, 45 | }, 46 | instructions: { 47 | textAlign: 'center', 48 | color: '#333333', 49 | marginBottom: 5, 50 | }, 51 | }); 52 | 53 | AppRegistry.registerComponent('RichImageBrowserExample', () => RichImageBrowserExample); 54 | -------------------------------------------------------------------------------- /Examples/RichImageBrowserExample/index.ios.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample React Native App 3 | * https://github.com/facebook/react-native 4 | * @flow 5 | */ 6 | 7 | import React, { Component } from 'react'; 8 | import { 9 | AppRegistry, 10 | StyleSheet, 11 | Text, 12 | View 13 | } from 'react-native'; 14 | 15 | import GridView from './GridView'; 16 | 17 | class RichImageBrowserExample extends Component { 18 | render() { 19 | return ( 20 | 33 | 34 | ); 35 | } 36 | } 37 | 38 | const styles = StyleSheet.create({ 39 | container: { 40 | flex: 1, 41 | justifyContent: 'center', 42 | backgroundColor: '#F5FCFF', 43 | }, 44 | welcome: { 45 | fontSize: 20, 46 | textAlign: 'center', 47 | margin: 10, 48 | }, 49 | instructions: { 50 | textAlign: 'center', 51 | color: '#333333', 52 | marginBottom: 5, 53 | }, 54 | }); 55 | 56 | AppRegistry.registerComponent('RichImageBrowserExample', () => RichImageBrowserExample); 57 | -------------------------------------------------------------------------------- /Examples/RichImageBrowserExample/ios/RichImageBrowserExample.xcodeproj/xcshareddata/xcschemes/RichImageBrowserExample.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 | -------------------------------------------------------------------------------- /Examples/RichImageBrowserExample/ios/RichImageBrowserExample/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 | -------------------------------------------------------------------------------- /Examples/RichImageBrowserExample/ios/RichImageBrowserExample/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 "RCTBundleURLProvider.h" 13 | #import "RCTRootView.h" 14 | 15 | @implementation AppDelegate 16 | 17 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 18 | { 19 | NSURL *jsCodeLocation; 20 | 21 | jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil]; 22 | 23 | RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation 24 | moduleName:@"RichImageBrowserExample" 25 | initialProperties:nil 26 | launchOptions:launchOptions]; 27 | rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1]; 28 | 29 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 30 | UIViewController *rootViewController = [UIViewController new]; 31 | rootViewController.view = rootView; 32 | self.window.rootViewController = rootViewController; 33 | [self.window makeKeyAndVisible]; 34 | return YES; 35 | } 36 | 37 | @end 38 | -------------------------------------------------------------------------------- /Examples/RichImageBrowserExample/ios/RichImageBrowserExample/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 | -------------------------------------------------------------------------------- /Examples/RichImageBrowserExample/ios/RichImageBrowserExample/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 | } -------------------------------------------------------------------------------- /Examples/RichImageBrowserExample/ios/RichImageBrowserExample/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 | NSAllowsArbitraryLoads 44 | 45 | NSExceptionDomains 46 | 47 | localhost 48 | 49 | NSTemporaryExceptionAllowsInsecureHTTPLoads 50 | 51 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /Examples/RichImageBrowserExample/ios/RichImageBrowserExample/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 | -------------------------------------------------------------------------------- /Examples/RichImageBrowserExample/ios/RichImageBrowserExampleTests/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 | -------------------------------------------------------------------------------- /Examples/RichImageBrowserExample/ios/RichImageBrowserExampleTests/RichImageBrowserExampleTests.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 RichImageBrowserExampleTests : XCTestCase 20 | 21 | @end 22 | 23 | @implementation RichImageBrowserExampleTests 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 | -------------------------------------------------------------------------------- /Examples/RichImageBrowserExample/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "RichImageBrowserExample", 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": "15.2.1", 10 | "react-native": "^0.31.0", 11 | "react-native-gallery": "0.0.17" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /Examples/SingleImageExample/.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /Examples/SingleImageExample/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | 3 | # We fork some components by platform. 4 | .*/*.android.js 5 | 6 | # Ignore templates with `@flow` in header 7 | .*/local-cli/generator.* 8 | 9 | # Ignore malformed json 10 | .*/node_modules/y18n/test/.*\.json 11 | 12 | [include] 13 | 14 | [libs] 15 | node_modules/react-native/Libraries/react-native/react-native-interface.js 16 | node_modules/react-native/flow 17 | flow/ 18 | 19 | [options] 20 | module.system=haste 21 | 22 | esproposal.class_static_fields=enable 23 | esproposal.class_instance_fields=enable 24 | 25 | experimental.strict_type_args=true 26 | 27 | munge_underscores=true 28 | 29 | module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub' 30 | module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub' 31 | 32 | suppress_type=$FlowIssue 33 | suppress_type=$FlowFixMe 34 | suppress_type=$FixMe 35 | 36 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-7]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\) 37 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-7]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+ 38 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy 39 | 40 | [version] 41 | ^0.27.0 42 | -------------------------------------------------------------------------------- /Examples/SingleImageExample/.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 | *.iml 28 | .idea 29 | .gradle 30 | local.properties 31 | 32 | # node.js 33 | # 34 | node_modules/ 35 | npm-debug.log 36 | 37 | # BUCK 38 | buck-out/ 39 | \.buckd/ 40 | android/app/libs 41 | android/keystores/debug.keystore 42 | -------------------------------------------------------------------------------- /Examples/SingleImageExample/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /Examples/SingleImageExample/GridView.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Source code: https://github.com/CoderGLM/react-native-image-browser 3 | * 4 | * @flow 5 | */ 6 | import React, { Component } from 'react'; 7 | import { 8 | View, 9 | Text, 10 | StyleSheet, 11 | ScrollView, 12 | Image, 13 | StatusBar, 14 | TouchableHighlight, 15 | } from 'react-native'; 16 | import Carousel from './Carousel'; 17 | 18 | export default class GridView extends Component { 19 | constructor(props) { 20 | super(props); 21 | this.state = { 22 | isOpenModal: false, 23 | selectedIndex: 0, 24 | origins: [], 25 | }; 26 | } 27 | 28 | render() { 29 | let images = []; 30 | let imgBtns = this.props.images.map((url, index) => { 31 | let img = ; 32 | images.push(img); 33 | return ( 34 | 39 | {img} 40 | 41 | ); 42 | }); 43 | 44 | return ( 45 | 46 | {imgBtns} 47 | 53 | 54 | ); 55 | } 56 | 57 | componentDidMount() { 58 | console.log('-------'); 59 | this.setState({ 60 | origins: [], 61 | }); 62 | // 如果不使用setTimeout，异步回调得不到正确的值 63 | setTimeout(() => { 64 | // 计算每个item的origin（原始坐标大小），保存在origins里 65 | for (var i = 0; i < this.props.images.length; i++) { 66 | this.refs["touch_ref_"+i].measure((fx, fy, width, height, px, py) => { 67 | this.state.origins.push({ 68 | x: px, 69 | y: py, 70 | width, 71 | height, 72 | }); 73 | }); 74 | } 75 | }); 76 | } 77 | 78 | /* 79 | * 80 | * Private 81 | * 82 | */ 83 | _itemClicked(index: number): void { 84 | StatusBar.setHidden(true, 'fade'); 85 | this.setState({ 86 | selectedIndex: index, 87 | isOpenModal: true, 88 | }); 89 | } 90 | 91 | _closeCarousel(): void { 92 | this.setState({ 93 | isOpenModal: false, 94 | }); 95 | } 96 | } 97 | 98 | const styles = StyleSheet.create({ 99 | container: { 100 | flexDirection: 'row', 101 | flexWrap: 'wrap', 102 | justifyContent: 'space-around', 103 | alignItems: 'center', 104 | }, 105 | image: { 106 | resizeMode: 'stretch', 107 | margin: 5, 108 | width: 100, 109 | height: 100, 110 | backgroundColor: 'gray', 111 | } 112 | }); 113 | -------------------------------------------------------------------------------- /Examples/SingleImageExample/ImageBrowser.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @flow 3 | */ 4 | 5 | /* 6 | * How to get location of any element, two method metioned in this post: 7 | * http://stackoverflow.com/questions/30096038/react-native-getting-the-position-of-an-element 8 | */ 9 | 10 | import React, { Component } from 'react'; 11 | import { 12 | ReactNative, 13 | Image, 14 | StyleSheet, 15 | Text, 16 | View, 17 | TouchableHighlight, 18 | Modal, 19 | Dimensions, 20 | Animated, 21 | Easing, 22 | } from 'react-native'; 23 | import ReactNativeComponentTree from 'react/lib/ReactNativeComponentTree'; 24 | import { UIManager } from 'NativeModules'; 25 | 26 | const { WinW: width, WinH: height } = Dimensions.get('window'); 27 | 28 | export default class ImageBrowser extends Component { 29 | constructor(props) { 30 | super(props); 31 | 32 | this.state = { 33 | showModal: false, 34 | top: new Animated.Value(0), 35 | left: new Animated.Value(0), 36 | width: new Animated.Value(0), 37 | height: new Animated.Value(0), 38 | }; 39 | } 40 | 41 | componentDidMount() { 42 | } 43 | 44 | render() { 45 | let images = []; 46 | for (let i = 0; i < 9; i++) { 47 | images.push(( 48 | {i} 49 | )); 50 | } 51 | return ( 52 | 53 | 58 | 59 | {this.setState({showModal: false})}} 61 | style={[styles.image, 62 | { 63 | position: 'absolute', 64 | backgroundColor: 'white', 65 | left: this.state.left, 66 | top: this.state.top, 67 | width: this.state.width, 68 | height: this.state.height, 69 | }]}> 70 | 123 71 | 72 | 73 | 74 | 75 | 76 | {images} 77 | 78 | 79 | ); 80 | } 81 | 82 | _onPress(e) { 83 | this.setState({ 84 | showModal: true, 85 | }); 86 | 87 | let target = ReactNativeComponentTree.getInstanceFromNode(e.nativeEvent.target); 88 | console.log(this.state.top); 89 | target.measure((fx, fy, width, height, px, py) => { 90 | Animated.parallel(['top', 'left', 'width', 'height'].map(property => { 91 | return Animated.timing(this.state[property],{ 92 | toValue: 100, 93 | duration: 1000, 94 | easing: Easing.linear, 95 | }); 96 | })).start(); 97 | }); 98 | }; 99 | } 100 | 101 | var styles = StyleSheet.create({ 102 | container: { 103 | flex: 1, 104 | flexDirection: 'row', 105 | justifyContent: 'center', 106 | alignItems: 'center', 107 | backgroundColor: '#F5FCFF', 108 | }, 109 | imageList: { 110 | backgroundColor: 'green', 111 | flex: 1, 112 | margin: 20, 113 | flexDirection: 'row', 114 | flexWrap: 'wrap', 115 | }, 116 | image: { 117 | margin: 5, 118 | width: 100, 119 | height: 100, 120 | borderWidth: 1, 121 | }, 122 | modalContainer: { 123 | flex: 1, 124 | justifyContent: 'center', 125 | alignItems: 'center', 126 | backgroundColor: 'rgba(0,0,0,0.9)', 127 | } 128 | }); 129 | -------------------------------------------------------------------------------- /Examples/SingleImageExample/Lightbox.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Source code: https://github.com/CoderGLM/react-native-image-browser 3 | * @flow 4 | */ 5 | import React, { Component, PropTypes } from 'react'; 6 | import { 7 | View, 8 | Image, 9 | TouchableHighlight, 10 | StyleSheet, 11 | Dimensions, 12 | Animated, 13 | Platform, 14 | } from 'react-native'; 15 | 16 | const WINDOW_WIDTH = Dimensions.get("window").width; 17 | const WINDOW_HEIGHT = Dimensions.get("window").height; 18 | const STATUS_BAR_OFFSET = (Platform.OS == 'android' ? -25 : 0); 19 | 20 | export default class Lightbox extends Component { 21 | static propTypes = { 22 | origin: PropTypes.shape({ 23 | x: PropTypes.number, 24 | y: PropTypes.number, 25 | width: PropTypes.number, 26 | height: PropTypes.number, 27 | }), 28 | onClose: PropTypes.func.isRequired, 29 | onOpen: PropTypes.func, 30 | }; 31 | 32 | constructor(props) { 33 | super(props); 34 | this.state = { 35 | openValue: new Animated.Value(0), 36 | }; 37 | } 38 | 39 | render() { 40 | let { children, origin } = this.props; 41 | let { openValue } = this.state; 42 | let image = React.cloneElement(React.Children.only(children), { 43 | style: styles.image, 44 | }); 45 | let openStyle = this.props.origin && [styles.open, { 46 | left: openValue.interpolate({inputRange: [0, 1], outputRange: [origin.x, 0]}), 47 | top: openValue.interpolate({inputRange: [0, 1], outputRange: [origin.y + STATUS_BAR_OFFSET, STATUS_BAR_OFFSET]}), 48 | width: openValue.interpolate({inputRange: [0, 1], outputRange: [origin.width, WINDOW_WIDTH]}), 49 | height: openValue.interpolate({inputRange: [0, 1], outputRange: [origin.height, WINDOW_HEIGHT]}), 50 | }]; 51 | let content = ( 52 | 53 | {image} 54 | 55 | ); 56 | return ( 57 | 61 | {content} 62 | 63 | ); 64 | } 65 | 66 | componentDidMount() { 67 | /* 68 | * 需要setValue(0)，如果不添加，会有一定几率看不到动画，短暂黑屏然后显示最终图片 69 | */ 70 | this.state.openValue.setValue(0); 71 | Animated.timing(this.state.openValue, { 72 | toValue: 1, 73 | }).start(); 74 | } 75 | 76 | /* 77 | * 78 | * Private 79 | * 80 | */ 81 | _pressImage() { 82 | Animated.timing(this.state.openValue, { 83 | toValue: 0, 84 | }).start(() => { 85 | this.props.onClose(); 86 | }); 87 | 88 | } 89 | } 90 | 91 | const styles = StyleSheet.create({ 92 | container: { 93 | flex: 1, 94 | width: WINDOW_WIDTH, 95 | }, 96 | image: { 97 | flex: 1, 98 | resizeMode: 'contain', 99 | }, 100 | open: { 101 | position: 'absolute', 102 | margin: 0, 103 | backgroundColor: 'black', 104 | } 105 | }); 106 | -------------------------------------------------------------------------------- /Examples/SingleImageExample/Lightbox/Lightbox.js: -------------------------------------------------------------------------------- 1 | /* 2 | * 3 | * reference: react-native-lightbox 4 | * 5 | */ 6 | 7 | 'use strict'; 8 | 9 | import React, { Component, PropTypes } from 'react'; 10 | import { 11 | Animated, 12 | TouchableHighlight, 13 | View 14 | } from 'react-native'; 15 | import LightboxOverlay from './LightboxOverlay'; 16 | 17 | export default class Lightbox extends Component { 18 | static propTypes = { 19 | onOpen: PropTypes.func, 20 | onClose: PropTypes.func, 21 | }; 22 | 23 | static defaultProps = { 24 | onOpen: () => {}, 25 | onClose: () => {}, 26 | }; 27 | 28 | constructor(props) { 29 | super(props); 30 | this.state = { 31 | isOpen: false, 32 | origin: { 33 | x: 0, 34 | y: 0, 35 | }}; 36 | } 37 | 38 | open() { 39 | this._root.measure((fx, fy, width, height, px, py) => { 40 | this.setState({ 41 | isOpen: true, 42 | isAnimating: true, 43 | origin: { 44 | x: px, 45 | y: py, 46 | width, 47 | height, 48 | } 49 | }); 50 | }); 51 | } 52 | 53 | onClose() { 54 | this.setState({ 55 | isOpen: false, 56 | }); 57 | } 58 | 59 | getOverlayProps() { 60 | return { 61 | isOpen: this.state.isOpen, 62 | origin: this.state.origin, 63 | onClose: this.onClose.bind(this), 64 | }; 65 | } 66 | 67 | render() { 68 | return ( 69 | this._root = component} 71 | style={this.props.style} 72 | onLayout={() => {}} 73 | > 74 | 75 | 76 | {this.props.children} 77 | 78 | 79 | 80 | { 81 | React.cloneElement( 82 | React.Children.only(this.props.children), 83 | this.props.activeProps, 84 | ) 85 | } 86 | 87 | 88 | ); 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /Examples/SingleImageExample/Lightbox/LightboxOverlay.js: -------------------------------------------------------------------------------- 1 | 2 | 'use strict'; 3 | 4 | import React, { Component, PropTypes }from 'react'; 5 | import { 6 | Animated, 7 | Dimensions, 8 | Modal, 9 | Platform, 10 | StatusBar, 11 | StyleSheet, 12 | Text, 13 | TouchableOpacity, 14 | TouchableHighlight, 15 | View, 16 | } from 'react-native'; 17 | 18 | const WINDOW_WIDTH = Dimensions.get('window').width; 19 | const WINDOW_HEIGHT = Dimensions.get('window').height; 20 | const STATUS_BAR_OFFSET = (Platform.OS == 'android' ? -25 : 0); 21 | 22 | export default class LightboxOverlay extends Component { 23 | static propTypes = { 24 | origin: PropTypes.shape({ 25 | x: PropTypes.number, 26 | y: PropTypes.number, 27 | width: PropTypes.number, 28 | height: PropTypes.number, 29 | }), 30 | isOpen: PropTypes.bool, 31 | onOpen: PropTypes.func, 32 | onClose: PropTypes.func, 33 | }; 34 | 35 | static defaultProps = { 36 | backgroundColor: 'black', 37 | }; 38 | 39 | constructor(props) { 40 | super(props); 41 | this.state = { 42 | isAnimating: false, 43 | target: { 44 | x: 0, 45 | y: 0, 46 | }, 47 | openVal: new Animated.Value(0), 48 | }; 49 | } 50 | 51 | componentDidMount() { 52 | if (this.props.isOpen) this.open(); 53 | } 54 | 55 | open() { 56 | StatusBar.setHidden(true, 'fade'); 57 | this.setState({ 58 | isAnimating: true, 59 | target: { 60 | x: 0, 61 | y: 0, 62 | } 63 | }); 64 | Animated.timing(this.state.openVal, { 65 | toValue: 1, 66 | }).start(); 67 | } 68 | 69 | close() { 70 | StatusBar.setHidden(false, 'fade'); 71 | Animated.timing(this.state.openVal, { 72 | toValue: 0 73 | }).start(() => { 74 | this.props.onClose(); 75 | }); 76 | } 77 | 78 | componentWillReceiveProps(props) { 79 | if (this.props.isOpen != props.isOpen && props.isOpen) { 80 | this.open(); 81 | } 82 | } 83 | 84 | render() { 85 | let { isOpen, origin, backgroundColor, } = this.props; 86 | let { isAnimating, openVal, target, } = this.state; 87 | console.log(origin); 88 | let openStyle = [styles.open, { 89 | left: openVal.interpolate({inputRange: [0, 1], outputRange: [origin.x, target.x]}), 90 | top: openVal.interpolate({inputRange: [0, 1], outputRange: [origin.y + STATUS_BAR_OFFSET, target.y + STATUS_BAR_OFFSET]}), 91 | width: openVal.interpolate({inputRange: [0, 1], outputRange: [origin.width, WINDOW_WIDTH]}), 92 | height: openVal.interpolate({inputRange: [0, 1], outputRange: [origin.height, WINDOW_HEIGHT]}), 93 | }]; 94 | 95 | let background = 96 | let header = null; 97 | let content = ( 98 | 99 | {this.props.children} 100 | 101 | ); 102 | 103 | return ( 104 | 105 | 106 | 107 | {header} 108 | {background} 109 | {content} 110 | 111 | 112 | 113 | ); 114 | } 115 | } 116 | 117 | const styles = StyleSheet.create({ 118 | background: { 119 | position: 'absolute', 120 | top: 0, 121 | left: 0, 122 | width: WINDOW_WIDTH, 123 | height: WINDOW_HEIGHT, 124 | }, 125 | open: { 126 | position: 'absolute', 127 | flex: 1, 128 | justifyContent: 'center', 129 | backgroundColor: 'pink', 130 | } 131 | }); 132 | -------------------------------------------------------------------------------- /Examples/SingleImageExample/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.singleimageexample', 50 | ) 51 | 52 | android_resource( 53 | name = 'res', 54 | res = 'src/main/res', 55 | package = 'com.singleimageexample', 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 | -------------------------------------------------------------------------------- /Examples/SingleImageExample/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 | * // override which node gets called and with what additional arguments 61 | * nodeExecutableAndArgs: ["node"] 62 | * 63 | * // supply additional arguments to the packager 64 | * extraPackagerArgs: [] 65 | * ] 66 | */ 67 | 68 | apply from: "../../node_modules/react-native/react.gradle" 69 | 70 | /** 71 | * Set this to true to create two separate APKs instead of one: 72 | * - An APK that only works on ARM devices 73 | * - An APK that only works on x86 devices 74 | * The advantage is the size of the APK is reduced by about 4MB. 75 | * Upload all the APKs to the Play Store and people will download 76 | * the correct one based on the CPU architecture of their device. 77 | */ 78 | def enableSeparateBuildPerCPUArchitecture = false 79 | 80 | /** 81 | * Run Proguard to shrink the Java bytecode in release builds. 82 | */ 83 | def enableProguardInReleaseBuilds = false 84 | 85 | android { 86 | compileSdkVersion 23 87 | buildToolsVersion "23.0.1" 88 | 89 | defaultConfig { 90 | applicationId "com.singleimageexample" 91 | minSdkVersion 16 92 | targetSdkVersion 22 93 | versionCode 1 94 | versionName "1.0" 95 | ndk { 96 | abiFilters "armeabi-v7a", "x86" 97 | } 98 | } 99 | splits { 100 | abi { 101 | reset() 102 | enable enableSeparateBuildPerCPUArchitecture 103 | universalApk false // If true, also generate a universal APK 104 | include "armeabi-v7a", "x86" 105 | } 106 | } 107 | buildTypes { 108 | release { 109 | minifyEnabled enableProguardInReleaseBuilds 110 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" 111 | } 112 | } 113 | // applicationVariants are e.g. debug, release 114 | applicationVariants.all { variant -> 115 | variant.outputs.each { output -> 116 | // For each separate APK per architecture, set a unique version code as described here: 117 | // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits 118 | def versionCodes = ["armeabi-v7a":1, "x86":2] 119 | def abi = output.getFilter(OutputFile.ABI) 120 | if (abi != null) { // null for the universal-debug, universal-release variants 121 | output.versionCodeOverride = 122 | versionCodes.get(abi) * 1048576 + defaultConfig.versionCode 123 | } 124 | } 125 | } 126 | } 127 | 128 | dependencies { 129 | compile fileTree(dir: "libs", include: ["*.jar"]) 130 | compile "com.android.support:appcompat-v7:23.0.1" 131 | compile "com.facebook.react:react-native:+" // From node_modules 132 | } 133 | 134 | // Run this once to be able to run the application with BUCK 135 | // puts all compile dependencies into folder libs for BUCK to use 136 | task copyDownloadableDepsToLibs(type: Copy) { 137 | from configurations.compile 138 | into 'libs' 139 | } 140 | -------------------------------------------------------------------------------- /Examples/SingleImageExample/android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | 12 | # If your project uses WebView with JS, uncomment the following 13 | # and specify the fully qualified class name to the JavaScript interface 14 | # class: 15 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 16 | # public *; 17 | #} 18 | 19 | # Disabling obfuscation is useful if you collect stack traces from production crashes 20 | # (unless you are using a system that supports de-obfuscate the stack traces). 21 | -dontobfuscate 22 | 23 | # React Native 24 | 25 | # Keep our interfaces so they can be used by other ProGuard rules. 26 | # See http://sourceforge.net/p/proguard/bugs/466/ 27 | -keep,allowobfuscation @interface com.facebook.proguard.annotations.DoNotStrip 28 | -keep,allowobfuscation @interface com.facebook.proguard.annotations.KeepGettersAndSetters 29 | -keep,allowobfuscation @interface com.facebook.common.internal.DoNotStrip 30 | 31 | # Do not strip any method/class that is annotated with @DoNotStrip 32 | -keep @com.facebook.proguard.annotations.DoNotStrip class * 33 | -keep @com.facebook.common.internal.DoNotStrip class * 34 | -keepclassmembers class * { 35 | @com.facebook.proguard.annotations.DoNotStrip *; 36 | @com.facebook.common.internal.DoNotStrip *; 37 | } 38 | 39 | -keepclassmembers @com.facebook.proguard.annotations.KeepGettersAndSetters class * { 40 | void set*(***); 41 | *** get*(); 42 | } 43 | 44 | -keep class * extends com.facebook.react.bridge.JavaScriptModule { *; } 45 | -keep class * extends com.facebook.react.bridge.NativeModule { *; } 46 | -keepclassmembers,includedescriptorclasses class * { native ; } 47 | -keepclassmembers class * { @com.facebook.react.uimanager.UIProp ; } 48 | -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactProp ; } 49 | -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactPropGroup ; } 50 | 51 | -dontwarn com.facebook.react.** 52 | 53 | # okhttp 54 | 55 | -keepattributes Signature 56 | -keepattributes *Annotation* 57 | -keep class okhttp3.** { *; } 58 | -keep interface okhttp3.** { *; } 59 | -dontwarn okhttp3.** 60 | 61 | # okio 62 | 63 | -keep class sun.misc.Unsafe { *; } 64 | -dontwarn java.nio.file.* 65 | -dontwarn org.codehaus.mojo.animal_sniffer.IgnoreJRERequirement 66 | -dontwarn okio.** 67 | -------------------------------------------------------------------------------- /Examples/SingleImageExample/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | 12 | 13 | 19 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /Examples/SingleImageExample/android/app/src/main/java/com/singleimageexample/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.singleimageexample; 2 | 3 | import com.facebook.react.ReactActivity; 4 | 5 | public class MainActivity extends ReactActivity { 6 | 7 | /** 8 | * Returns the name of the main component registered from JavaScript. 9 | * This is used to schedule rendering of the component. 10 | */ 11 | @Override 12 | protected String getMainComponentName() { 13 | return "SingleImageExample"; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /Examples/SingleImageExample/android/app/src/main/java/com/singleimageexample/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.singleimageexample; 2 | 3 | import android.app.Application; 4 | import android.util.Log; 5 | 6 | import com.facebook.react.ReactApplication; 7 | import com.facebook.react.ReactInstanceManager; 8 | import com.facebook.react.ReactNativeHost; 9 | import com.facebook.react.ReactPackage; 10 | import com.facebook.react.shell.MainReactPackage; 11 | 12 | import java.util.Arrays; 13 | import java.util.List; 14 | 15 | public class MainApplication extends Application implements ReactApplication { 16 | 17 | private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { 18 | @Override 19 | protected boolean getUseDeveloperSupport() { 20 | return BuildConfig.DEBUG; 21 | } 22 | 23 | @Override 24 | protected List getPackages() { 25 | return Arrays.asList( 26 | new MainReactPackage() 27 | ); 28 | } 29 | }; 30 | 31 | @Override 32 | public ReactNativeHost getReactNativeHost() { 33 | return mReactNativeHost; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /Examples/SingleImageExample/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CoderLim/react-native-image-browser/d7da2dc652247154ae3384e73e6f343db506b9da/Examples/SingleImageExample/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /Examples/SingleImageExample/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CoderLim/react-native-image-browser/d7da2dc652247154ae3384e73e6f343db506b9da/Examples/SingleImageExample/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /Examples/SingleImageExample/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CoderLim/react-native-image-browser/d7da2dc652247154ae3384e73e6f343db506b9da/Examples/SingleImageExample/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /Examples/SingleImageExample/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CoderLim/react-native-image-browser/d7da2dc652247154ae3384e73e6f343db506b9da/Examples/SingleImageExample/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /Examples/SingleImageExample/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | SingleImageExample 3 | 4 | -------------------------------------------------------------------------------- /Examples/SingleImageExample/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Examples/SingleImageExample/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 "$rootDir/../node_modules/react-native/android" 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /Examples/SingleImageExample/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 | -------------------------------------------------------------------------------- /Examples/SingleImageExample/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CoderLim/react-native-image-browser/d7da2dc652247154ae3384e73e6f343db506b9da/Examples/SingleImageExample/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /Examples/SingleImageExample/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 | -------------------------------------------------------------------------------- /Examples/SingleImageExample/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 | -------------------------------------------------------------------------------- /Examples/SingleImageExample/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 | -------------------------------------------------------------------------------- /Examples/SingleImageExample/android/keystores/BUCK: -------------------------------------------------------------------------------- 1 | keystore( 2 | name = 'debug', 3 | store = 'debug.keystore', 4 | properties = 'debug.keystore.properties', 5 | visibility = [ 6 | 'PUBLIC', 7 | ], 8 | ) 9 | -------------------------------------------------------------------------------- /Examples/SingleImageExample/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 | -------------------------------------------------------------------------------- /Examples/SingleImageExample/android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'SingleImageExample' 2 | 3 | include ':app' 4 | -------------------------------------------------------------------------------- /Examples/SingleImageExample/index.android.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample React Native App 3 | * https://github.com/facebook/react-native 4 | * @flow 5 | */ 6 | 7 | import React, { Component } from 'react'; 8 | import { 9 | AppRegistry, 10 | StyleSheet, 11 | Text, 12 | View 13 | } from 'react-native'; 14 | 15 | class SingleImageExample extends Component { 16 | render() { 17 | return ( 18 | 19 | 20 | Welcome to React Native! 21 | 22 | 23 | To get started, edit index.android.js 24 | 25 | 26 | Double tap R on your keyboard to reload,{'\n'} 27 | Shake or press menu button for dev menu 28 | 29 | 30 | ); 31 | } 32 | } 33 | 34 | const styles = StyleSheet.create({ 35 | container: { 36 | flex: 1, 37 | justifyContent: 'center', 38 | alignItems: 'center', 39 | backgroundColor: '#F5FCFF', 40 | }, 41 | welcome: { 42 | fontSize: 20, 43 | textAlign: 'center', 44 | margin: 10, 45 | }, 46 | instructions: { 47 | textAlign: 'center', 48 | color: '#333333', 49 | marginBottom: 5, 50 | }, 51 | }); 52 | 53 | AppRegistry.registerComponent('SingleImageExample', () => SingleImageExample); 54 | -------------------------------------------------------------------------------- /Examples/SingleImageExample/index.ios.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @flow 3 | */ 4 | 5 | /* 6 | * How to get location of any element, two method metioned in this post: 7 | * http://stackoverflow.com/questions/30096038/react-native-getting-the-position-of-an-element 8 | */ 9 | 10 | import React, { Component } from 'react'; 11 | import { 12 | AppRegistry, 13 | Image, 14 | StyleSheet, 15 | Text, 16 | View, 17 | TouchableHighlight, 18 | Animated, 19 | } from 'react-native'; 20 | import ImageBrowser from './ImageBrowser'; 21 | import Lightbox from './Lightbox/Lightbox'; 22 | 23 | class SingleImageExample extends Component { 24 | constructor(props) { 25 | super(props); 26 | } 27 | 28 | render() { 29 | return 30 | 31 | 32 | 36 | 37 | 38 | 39 | ); 40 | } 41 | } 42 | 43 | 44 | var styles = StyleSheet.create({ 45 | container: { 46 | flex: 1, 47 | justifyContent: 'center', 48 | }, 49 | image: { 50 | flex: 1, 51 | height: 200, 52 | backgroundColor: 'white', 53 | }, 54 | }); 55 | 56 | AppRegistry.registerComponent('SingleImageExample', () => SingleImageExample); 57 | -------------------------------------------------------------------------------- /Examples/SingleImageExample/ios/SingleImageExample.xcodeproj/xcshareddata/xcschemes/SingleImageExample.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 | -------------------------------------------------------------------------------- /Examples/SingleImageExample/ios/SingleImageExample/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 | -------------------------------------------------------------------------------- /Examples/SingleImageExample/ios/SingleImageExample/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 "RCTBundleURLProvider.h" 13 | #import "RCTRootView.h" 14 | 15 | @implementation AppDelegate 16 | 17 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 18 | { 19 | NSURL *jsCodeLocation; 20 | 21 | jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil]; 22 | 23 | RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation 24 | moduleName:@"SingleImageExample" 25 | initialProperties:nil 26 | launchOptions:launchOptions]; 27 | rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1]; 28 | 29 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 30 | UIViewController *rootViewController = [UIViewController new]; 31 | rootViewController.view = rootView; 32 | self.window.rootViewController = rootViewController; 33 | [self.window makeKeyAndVisible]; 34 | return YES; 35 | } 36 | 37 | @end 38 | -------------------------------------------------------------------------------- /Examples/SingleImageExample/ios/SingleImageExample/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 | -------------------------------------------------------------------------------- /Examples/SingleImageExample/ios/SingleImageExample/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 | } -------------------------------------------------------------------------------- /Examples/SingleImageExample/ios/SingleImageExample/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 | NSAllowsArbitraryLoads 44 | 45 | NSExceptionDomains 46 | 47 | localhost 48 | 49 | NSTemporaryExceptionAllowsInsecureHTTPLoads 50 | 51 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /Examples/SingleImageExample/ios/SingleImageExample/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 | -------------------------------------------------------------------------------- /Examples/SingleImageExample/ios/SingleImageExampleTests/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 | -------------------------------------------------------------------------------- /Examples/SingleImageExample/ios/SingleImageExampleTests/SingleImageExampleTests.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 SingleImageExampleTests : XCTestCase 20 | 21 | @end 22 | 23 | @implementation SingleImageExampleTests 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 | -------------------------------------------------------------------------------- /Examples/SingleImageExample/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "SingleImageExample", 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": "15.2.1", 10 | "react-native": "0.30.0" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-native-image-browser 2 | 3 | This is the `imagebrowser` component in React Native just for ios now. This is a JavaScript-only implementation of pager for React Native. 4 | There are many issues to be resolved, such as Beautification code, optimization, I hope you can ask questions and recommendations 5 | 6 | ## ImageBrowserExample 7 | 8 | ![image](https://github.com/CoderGLM/react-native-image-browser/blob/master/screenshots/imagebrowser1.gif)
9 | Demo project is [here](./Examples). 10 | 11 | ## Usage 12 | 1. Copy GridView.js, Carousel.js., Lightbox.js into your project, make sure putting them in the same directory.
13 | 2. Code like this: 14 | 15 | ``` 16 | 29 | ``` 30 | 31 | ## Page Transition Animation Controls 32 | * **`animation`**: Not implement. I will add a property including 'scale', 'fade', 'none'. 33 | 34 | 35 | ## Licensed 36 | 37 | MIT License 38 | -------------------------------------------------------------------------------- /lib/ImageBrowser/Carousel.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Source code: https://github.com/CoderGLM/react-native-image-browser 3 | * @flow 4 | */ 5 | import React, { Component, PropTypes, } from 'react'; 6 | import { 7 | ScrollView, 8 | Image, 9 | TouchableHighlight, 10 | View, 11 | Dimensions, 12 | StyleSheet, 13 | Modal, 14 | Text, 15 | } from 'react-native'; 16 | 17 | import Lightbox from './Lightbox'; 18 | 19 | const WINDOW_WIDTH = Dimensions.get('window').width; 20 | const WINDOW_HEIGHT = Dimensions.get('window').height; 21 | 22 | export default class Carousel extends Component { 23 | static propTypes = { 24 | origins: PropTypes.array.isRequired, 25 | onClose: PropTypes.func.isRequired, 26 | }; 27 | 28 | constructor(props) { 29 | super(props); 30 | this._firstPageShowed = false; // 记录是否已经显示了first page 31 | this.state={ 32 | currentPage: 1, // 保存当前页码 33 | }; 34 | } 35 | 36 | render() { 37 | // 滚动到GridView中选择的page 38 | if (!this._firstPageShowed) { 39 | this._timer = setTimeout(()=> { 40 | this._scrollView && this._scrollView.scrollTo({ 41 | x: this.props.firstPage*WINDOW_WIDTH, 42 | y: 0, 43 | animated: false, 44 | }); 45 | // 当GridView显示时，就会执行这里，所以不能直接赋值为true 46 | this._firstPageShowed = this.props.isOpen; 47 | }); 48 | } 49 | 50 | let { children } = this.props, 51 | items = []; 52 | 53 | React.Children.forEach(children, (item, index) => { 54 | items.push( 55 | 59 | {item} 60 | 61 | ); 62 | }); 63 | 64 | return ( 65 | 66 | 67 | {this._scrollView = component}} 69 | scrollEventThrottle={15} 70 | removeClippedSubviews={true} 71 | pagingEnabled={true} 72 | horizontal={true} 73 | onScroll={this._onScroll.bind(this)}> 74 | {items} 75 | 76 | {this.state.currentPage}/{9} 77 | 78 | 79 | ); 80 | } 81 | 82 | componentWillReceiveProps(nextProps: Object): void { 83 | if (nextProps.isOpen !== this.props.isOpen) { 84 | this._firstPageShowed = false; 85 | } 86 | } 87 | 88 | componentWillUnmount() { 89 | this._timer && this.clearTimeout(this._timer); 90 | } 91 | 92 | /* 93 | * 94 | * Events 95 | * 96 | */ 97 | _onScroll(e) { 98 | // caculate page num 99 | let newPageNum = parseInt(e.nativeEvent.contentOffset.x/WINDOW_WIDTH+1.5); 100 | newPageNum!=this.state.currentPage && this.setState({ 101 | currentPage: newPageNum, 102 | }); 103 | } 104 | } 105 | 106 | const styles = StyleSheet.create({ 107 | legend: { 108 | position: 'absolute', 109 | top: 50, 110 | left: 0, 111 | right: 0, 112 | fontSize: 17, 113 | textAlign: 'center', 114 | color: 'white', 115 | backgroundColor: 'black', 116 | }, 117 | }); 118 | -------------------------------------------------------------------------------- /lib/ImageBrowser/GridView.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Source code: https://github.com/CoderGLM/react-native-image-browser 3 | * @flow 4 | */ 5 | import React, { Component } from 'react'; 6 | import { 7 | View, 8 | Text, 9 | StyleSheet, 10 | ScrollView, 11 | Image, 12 | StatusBar, 13 | TouchableHighlight, 14 | } from 'react-native'; 15 | import Carousel from './Carousel'; 16 | 17 | export default class GridView extends Component { 18 | constructor(props) { 19 | super(props); 20 | this.state = { 21 | isOpenModal: false, 22 | selectedIndex: 0, 23 | origins: [], 24 | }; 25 | } 26 | 27 | render() { 28 | let { children } = this.props, 29 | images = []; 30 | 31 | React.Children.forEach(children, (item, index) => { 32 | images.push( 33 | 38 | {item} 39 | 40 | ); 41 | }); 42 | 43 | return ( 44 | 45 | {images} 46 | 52 | 53 | ); 54 | } 55 | 56 | componentDidMount() { 57 | this.setState({ 58 | origins: [], 59 | }); 60 | // 如果不使用setTimeout，异步回调得不到正确的值 61 | setTimeout(() => { 62 | // 计算没个item的origin（原始坐标大小），保存在origins里 63 | for (var i = 0; i < this.props.children.length; i++) { 64 | this.refs["touch_ref_"+i].measure((fx, fy, width, height, px, py) => { 65 | this.state.origins.push({ 66 | x: px, 67 | y: py, 68 | width, 69 | height, 70 | }); 71 | }); 72 | } 73 | }); 74 | } 75 | 76 | /* 77 | * 78 | * Private 79 | * 80 | */ 81 | _itemClicked(index: number): void { 82 | StatusBar.setHidden(true, 'fade'); 83 | this.setState({ 84 | selectedIndex: index, 85 | isOpenModal: true, 86 | }); 87 | } 88 | 89 | _closeCarousel(): void { 90 | this.setState({ 91 | isOpenModal: false, 92 | }); 93 | } 94 | } 95 | 96 | const styles = StyleSheet.create({ 97 | container: { 98 | flexDirection: 'row', 99 | flexWrap: 'wrap', 100 | justifyContent: 'space-around', 101 | alignItems: 'center', 102 | }, 103 | }); 104 | -------------------------------------------------------------------------------- /lib/ImageBrowser/Lightbox.js: -------------------------------------------------------------------------------- 1 | import React, { Component, PropTypes } from 'react'; 2 | import { 3 | View, 4 | Image, 5 | TouchableHighlight, 6 | StyleSheet, 7 | Dimensions, 8 | Animated, 9 | Platform, 10 | } from 'react-native'; 11 | 12 | const WINDOW_WIDTH = Dimensions.get("window").width; 13 | const WINDOW_HEIGHT = Dimensions.get("window").height; 14 | const STATUS_BAR_OFFSET = (Platform.OS == 'android' ? -25 : 0); 15 | 16 | export default class Lightbox extends Component { 17 | static propTypes = { 18 | origin: PropTypes.shape({ 19 | x: PropTypes.number, 20 | y: PropTypes.number, 21 | width: PropTypes.number, 22 | height: PropTypes.number, 23 | }), 24 | onClose: PropTypes.func.isRequired, 25 | onOpen: PropTypes.func, 26 | }; 27 | 28 | constructor(props) { 29 | super(props); 30 | this.state = { 31 | openValue: new Animated.Value(0), 32 | }; 33 | } 34 | 35 | componentWillMount() { 36 | } 37 | 38 | render() { 39 | let { children, origin } = this.props; 40 | let { openValue } = this.state; 41 | let image = React.cloneElement(React.Children.only(children), { 42 | style: styles.image, 43 | }); 44 | let openStyle = [styles.open, { 45 | left: openValue.interpolate({inputRange: [0, 1], outputRange: [origin.x, 0]}), 46 | top: openValue.interpolate({inputRange: [0, 1], outputRange: [origin.y + STATUS_BAR_OFFSET, STATUS_BAR_OFFSET]}), 47 | width: openValue.interpolate({inputRange: [0, 1], outputRange: [origin.width, WINDOW_WIDTH]}), 48 | height: openValue.interpolate({inputRange: [0, 1], outputRange: [origin.height, WINDOW_HEIGHT]}), 49 | }]; 50 | let content = ( 51 | 52 | {image} 53 | 54 | ); 55 | return ( 56 | 60 | {content} 61 | 62 | ); 63 | } 64 | 65 | componentDidMount() { 66 | /* 67 | * 需要setValue(0)，如果不添加，会有一定几率看不到动画，短暂黑屏然后显示最终图片 68 | */ 69 | this.state.openValue.setValue(0); 70 | Animated.timing(this.state.openValue, { 71 | toValue: 1, 72 | }).start(); 73 | } 74 | 75 | /* 76 | * 77 | * Private 78 | * 79 | */ 80 | _pressImage() { 81 | Animated.timing(this.state.openValue, { 82 | toValue: 0, 83 | }).start(() => { 84 | this.props.onClose(); 85 | }); 86 | 87 | } 88 | } 89 | 90 | const styles = StyleSheet.create({ 91 | container: { 92 | flex: 1, 93 | width: WINDOW_WIDTH, 94 | }, 95 | image: { 96 | flex: 1, 97 | resizeMode: 'contain', 98 | }, 99 | open: { 100 | position: 'absolute', 101 | margin: 0, 102 | backgroundColor: 'black', 103 | } 104 | }); 105 | -------------------------------------------------------------------------------- /screenshots/imagebrowser1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CoderLim/react-native-image-browser/d7da2dc652247154ae3384e73e6f343db506b9da/screenshots/imagebrowser1.gif -------------------------------------------------------------------------------- /screenshots/lightbox.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CoderLim/react-native-image-browser/d7da2dc652247154ae3384e73e6f343db506b9da/screenshots/lightbox.gif --------------------------------------------------------------------------------