react-native-elementes Avatar

Question

I'd like to upload an image by clicking on avatar component and then pick a picture from the device. Anyone knows if its possible using avatar component from react-native-elements?

I have already added the permissons below:

 <uses-permission android:name="android.permission.CAMERA" />
 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

Do you think I have to install the react-native-image-picker library as well?

Thanks in advance,

Sagar Chavada · Answer 1 · 2018-09-12T06:28:52.323

The library you are using they are not maintaining. use react-native-crop-picker

import ImagePicker from 'react-native-image-crop-picker';

    <Avatar
      source={this.state.image}
      onPress={() => this.openPicker()}
    />

      openPicker() {
        ImagePicker.openPicker({
          width: 200,
          height: 200,
          cropping: true,
          includeBase64: true,
          includeExif: true,
        }).then(image => {
          this.setState({
            image: { uri: `data:${image.mime};base64,${image.data}`,
              width: image.width,
              height: image.height },
          });
        }).catch(e => console.log(e));
      }

score 0 · Accepted Answer · answered Sep 12 '18 at 06:26

  constructor(props: Object) {
    super(props);
    this.state = {
      image_uri: '' //initially set the state of image with default image
    };
  }

**your avatar component** 

  <Avatar
    small
    rounded
    source = {{uri: this.state.image_uri}}
    onPress={() => this.openImagePicker()}
    activeOpacity={0.7}
  />

 **import { showImagePicker } from 'react-native-image-picker';**

  captureMediaOrGetFromDeviceLibrary(options: Object = OPTIONS) {
      var promise = new Promise(function(fulfill, reject) {
      showImagePicker(options, (response) => {
      if (response.didCancel) {
        fulfill ({success: false})
      } else if (response.error) {
        fulfill ({success: false})
      } else {
        fulfill ({
         success: true,
         media_data: response
        })
      }
    })
  })
  return promise.then((response)=>{
    return response
  })
 }


 openImagePicker() {
   const options = {
    quality: 1.0,
    maxWidth: 500,
    maxHeight: 500
   };
   return captureMediaOrGetFromDeviceLibrary(options).then((response)=> {
     if(response.success){
       this.setState({image_uri:response.media_data.uri})
     }
   }) 
  }
}

Hi @SathvikNasani thanks a lot! Do you believe I have to import RN Fetch Blob in order to upload images to firebase? — Gustavo Menezes, Sep 12 '18 at 17:41
hi @GustavoMenezes i think react-native-fetch-blob is require to upload images check the example: https://github.com/dailydrip/react-native-firebase-storage/blob/master/src/App.js#L43-L69 — Sathvik Nasani, Sep 14 '18 at 05:23

react-native-elementes Avatar

2 Answers2