RFProjectImagePicker.js

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { TextInput, Image, Button, Text, View } from 'react-native';
import styles from './styles';
import { connect } from 'react-redux';
import {UploadImage, AddImage } from '../../src/action/project';
import * as ImagePicker from 'expo-image-picker';
import ButtonIconText from './../ButtonIconText';
import AppButton from './../AppButton';
class RFProjectImagePicker extends Component {
  constructor(props) {
    super(props);

  }
  _pickImage = async () => {
    try {
      let result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.All,
        allowsEditing: true,
        aspect: [16, 16],
        quality: 1,
      });

      if (!result.cancelled) {
        this.props.AddImage(result.uri);
      }
      console.log(result);
    } catch (E) {
      console.log(E);
    }
  };

  componentDidMount() {
    this.getPermissionAsync();
  }

  getPermissionAsync = async () => {
    if (Constants.platform.ios) {
      const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
      if (status !== 'granted') {
        alert('Sorry, we need camera roll permissions to make this work!');
      }
    }
  };

  uploadImage = () => {
    let uploadData = new FormData();
    uploadData.append("submit", "ok");
    uploadData.append("file", { type: "image/png", uri: this.props.projectReducer.image_path, name: "test.png" });
    this.props.UploadImage(uploadData);
  }

  clearImage = () => {
    this.props.AddImage(null);
  }
  render() {
    return (
      <View style={{ width: "100%", height: "100%" }}>
         <TextInput
          onBlur={this.props.input.onBlur}
          onChangeText={this.props.input.onChange}
          onFocus={this.props.input.onFocus}
          editable={!this.props.disabled}
          selectTextOnFocus={!this.props.disabled}
          value={this.props.projectReducer.data.image_path}
          placeholder={this.props.placeholder}
          style={[
            {
              height: 0, width: 0, borderWidth: 0,
              color: this.props.disabled ? 'gray' : 'black',
              borderColor: !this.props.meta.valid && this.props.meta.touched ? 'red' : 'gray'
            },
          ]}
        />

        {!this.props.meta.valid && this.props.meta.touched && <Text style={styles.rootError}>{this.props.meta.error}</Text>}
        <AppButton title={this.props.projectReducer.image_path ? "แก้ไขรูปโปรเจค" : "เพิ่มรูปโปรเจค"} onPress={this._pickImage}></AppButton>
         <View>
          {
            this.props.projectReducer.image_path != null &&
             <View>
               <Image source={this.props.projectReducer.image_path.indexOf("file") == 0 ? { isStatic: true, uri: this.props.projectReducer.image_path } : { uri: "https://programmerdesign.com" + this.props.projectReducer.image_path }} style={{ width: "100%", height: 300 }}></Image>
               <View style={{ position: "absolute", paddingLeft: "85%" }}>
                 <ButtonIconText source={require('./../../assets/icon/close.png')} style={{ paddingTop: 15, width: 20, height: 20 }} title="" onPress={this.clearImage}> </ButtonIconText>
               </View>
             </View>
          }

          {this.props.projectReducer.upload_check == false &&
             <AppButton backgroundColor="red" title="อัพโหลด" onPress={this.uploadImage}></AppButton>
          }
         </View>
       </View >
    );
  }
}
RFProjectImagePicker.propTypes = {
  input: PropTypes.shape({
    onBlur: PropTypes.func.isRequired,
    onChange: PropTypes.func.isRequired,
    onFocus: PropTypes.func.isRequired,
    value: PropTypes.string.isRequired,
  }).isRequired,
  meta: PropTypes.shape({
    error: PropTypes.string,
    touched: PropTypes.bool.isRequired,
    valid: PropTypes.bool.isRequired,
  }).isRequired,
  disabled: PropTypes.bool,
}

RFProjectImagePicker.defaultProps = {
  disabled: false,
};

const mapStateToProp = (state) => {
  return {
    projectReducer: state.projectReducer,
  }
}
const mapDispatchToProp = {
  UploadImage, AddImage
};
export default connect(mapStateToProp, mapDispatchToProp)(RFProjectImagePicker);