picker.js

import React, { Component } from 'react'
import {
  View,
  StyleSheet,
  ActivityIndicator,
  Text,
  Image,
  ScrollView,
  TouchableOpacity,
  Alert,
  Platform
} from 'react-native'
import { connect } from 'react-redux'
import ImagePicker from 'react-native-image-picker'
import {  Button } from '../components/common'
import * as actions from '../actions'
import RNFetchBlob from 'react-native-fetch-blob'

const Blob = RNFetchBlob.polyfill.Blob
const fs = RNFetchBlob.fs
window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest
window.Blob = Blob

const options = {
  title: 'Choose a photo',
  storageOptions: {
    skipBackup: true,
    path: 'images'
  },
  allowsEditing: true,
  maxWidth: 200,
  maxHeight: 200,
  quality: 0.8
}

class SignUpScreen extends Component {
  state = {
    profilePhotoUri: '',
    photoLoading: false
  }

  uploadImage = async (imageUri) => {
    const uploadUri = Platform.OS === 'ios' ? imageUri.replace('file://', '') : imageUri
    try {
      const data = await fs.readFile(uploadUri, 'base64')
      return data      
    } catch (error) {
      throw error
    }
  }

  onSubmitPressed = async () => {
    const { profilePhotoUri } = this.state
    try {
      if (profilePhotoUri === '') {
        const errorMessage = 'Добавте фото'
        Alert.alert( 'Oops', errorMessage)
        return
      }
      const uri = await this.uploadImage(profilePhotoUri) 
      this.setState({
        profilePhotoUri: uri 
      })
    } catch (error) {
      throw error
    }
  }

  showImagePicker = async () => {
    this.setState({ photoLoading: true })
    ImagePicker.showImagePicker(options, (response) => {
      if (response.didCancel) {
        this.setState({ photoLoading: false })
      } else if (response.error) {
        this.setState({ photoLoading: false })
      } else {
        const source = { uri: response.uri }
        console.log('source', source)
        this.setState({ profilePhotoUri: source.uri, photoLoading: false })
      }
    })
  }

  renderProfilePhoto() {
    const photoUri = this.state.profilePhotoUri
    const { profilePhoto, addPhotoCircle, plusSign, photoLoading } = styles

    if (photoUri === '' && !this.state.photoLoading) {
      return (
        <View style={addPhotoCircle}>
          <Text style={plusSign}>+</Text>
        </View>
      )
    } else if (this.state.photoLoading) {
      return (
        <ActivityIndicator size="large" style={photoLoading} />
      )
    }
    return (
      <Image
        style={profilePhoto}
        source={{ uri: photoUri }}
        resizeMode='cover'
      />
    )
  }

  renderSubmitButton() {
    if (this.props.authLoading) {
      return (
        <ActivityIndicator
          size="large"
          style={{ top: 20 }} 
        />
      )
    }
    return (
      <Button
        onPress={this.onSubmitPressed}
      >
        Go
      </Button>
    )
  }

  render() {
    const {
      container,
      addPhotoContainer,
      addPhotoText,
      button
    } = styles

    return (
      <ScrollView style={container}>
        <TouchableOpacity
          style={addPhotoContainer}
          onPress={this.showImagePicker}
        >
          <Text style={addPhotoText}>Добавить фото</Text>
          {this.renderProfilePhoto()}
        </TouchableOpacity>
        <View style={button}>
          {this.renderSubmitButton()}
        </View>
      </ScrollView>
    )
  }
}

const styles = StyleSheet.create({
  container: {
		flex:1,
    paddingTop: 100
  },
  addPhotoContainer: {
    flexDirection: 'row',
    height: 100,
    justifyContent: 'center',
    alignContent: 'center'
  },
  addPhotoText: {
    width: 105,
    marginTop: 25,
    fontSize: 19,
    color: 'gray',
    fontFamily: 'AppleSDGothicNeo-Light'
  },
  addPhotoCircle: {
    width: 100,
    height: 100,
    backgroundColor: '#D8D8D8',
    justifyContent: 'center',
    alignItems: 'center'
  },
  plusSign: {
    fontSize: 76,
    color: 'gray',
    backgroundColor: 'transparent',
    lineHeight: Platform.OS === 'ios' ? 80 : 90
  },
  profilePhoto: {
    width: 100,
    height: 100,
  },
  photoLoading: {
    marginLeft: 16,
    marginRight: 13
  },
  button: {
    paddingTop: 10
  }
})

const mapStateToProps = state => {
  return {
    photoLoading: state.addPhoto.authLoading,
    profilePhotoUri: state.addPhoto.profilePhotoUri,
    profilePhotoUrl: state.auth.profilePhotoUrl,
    authLoading: state.auth.authLoading,
  }
}

export default connect(mapStateToProps, actions)(SignUpScreen)