initial src commit

.gitignore

@@ -0,0 +1 @@
+node_modules

package.json

@@ -0,0 +1,35 @@
+{
+  "name": "react-native-photo-upload",
+  "version": "1.0.0",
+  "description": "Cross platform photo upload component for react native",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "prop-types": "^15.5.10",
+    "react-native-fs": "^2.3.2",
+    "react-native-image-picker": "^0.26.3",
+    "react-native-image-resizer": "^0.1.1"
+  },
+  "peerDependencies": {
+    "react": ">15.0",
+    "react-native": ">0.27"
+  },
+  "keywords": [
+    "photo",
+    "react",
+    "react-native",
+    "resizer",
+    "image",
+    "picker",
+    "base64",
+    "ios",
+    "android"
+  ],
+  "author": "Omar Khaled <omarkhaled320@hotmail.com>",
+  "license": "MIT",
+  "devDependencies": {
+    "standard": "^10.0.2"
+  }
+}

src/index.js

@@ -0,0 +1,97 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { View, Image, StyleSheet, TouchableOpacity, Platform } from 'react-native'
+import ImagePicker from 'react-native-image-picker'
+import ImageResizer from 'react-native-image-resizer'
+import RNFS from 'react-native-fs'
+
+export default class PhotoUpload extends React.Component {
+  static propTypes = {
+    containerStyle: PropTypes.object,
+    photoPickerTitle: PropTypes.string,
+    height: PropTypes.number,
+    width: PropTypes.number,
+    format: PropTypes.string,
+    quality: PropTypes.number,
+    onPhotoSelect: PropTypes.func // returns the base64 string of uploaded photo
+  }
+
+  state = {
+    height: this.props.height || 300,
+    width: this.props.width || 300,
+    format: this.props.format || 'JPEG',
+    quality: this.props.quality || 80
+  }
+
+  options = {
+    title: this.props.pickerTitle || 'Select Photo',
+    storageOptions: {
+      skipBackup: true,
+      path: 'images'
+    }
+  }
+
+  openImagePicker = () => {
+    // get image from image picker
+    ImagePicker.showImagePicker(this.options, async response => {
+      console.log('Response = ', response)
+
+      if (response.didCancel) {
+        console.log('User cancelled image picker')
+        return
+      } else if (response.error) {
+        console.log('ImagePicker Error: ', response.error)
+        return
+      } else if (response.customButton) {
+        console.log('User tapped custom button: ', response.customButton)
+        return
+      }
+
+      let { height, width, quality, format } = this.state
+
+      // resize image
+      const resizedImageUri = await ImageResizer.createResizedImage(`data:image/jpeg;base64,${response.data}`, height, width, format, quality)
+      const filePath = Platform.OS === 'android' && resizedImageUri.replace ? resizedImageUri.replace('file:/data', '/data') : resizedImageUri
+
+      // convert image back to base64 string
+      const photoData = await RNFS.readFile(filePath, 'base64')
+      let source = { uri: resizedImageUri }
+      this.setState({
+        avatarSource: source
+      })
+
+      // handle photo in props functions as data string
+      if (this.props.onPhotoSelect) {
+        this.props.onPhotoSelect(photoData)
+      }
+    })
+  }
+
+  renderChildren = props => {
+    return React.Children.map(props.children, child => {
+      if (child.type === Image && this.state.avatarSource) {
+        return React.cloneElement(child, {
+          source: this.state.avatarSource
+        })
+      } else return child
+    })
+  }
+
+  render () {
+    return (
+      <View style={[styles.container, this.props.containerStyle]}>
+        <TouchableOpacity onPress={this.openImagePicker}>
+          {this.renderChildren(this.props)}
+        </TouchableOpacity>
+      </View>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+})