After checking the code, different name 'pickerTitle' is used for the props 'photoPickerTitle':

options = {
    title: this.props.pickerTitle || 'Select Photo',
    storageOptions: {
      skipBackup: true,
      path: 'images'
    }
  }

Please fix, thanks!

After I checked inside, I think package 'react-native-image-resizer' is not well installed. Could you please check?

import ImageResizer from 'react-native-image-resizer'
const resizedImageUri = await ImageResizer.createResizedImage(
        `data:image/jpeg;base64,${response.data}`,
        height,
        width,
        format,
        quality
)

Thanks!

<PhotoUpload
     onPhotoSelect={avatar => {
           if (avatar) {
		console.log('Image base64 string: ', avatar)
           }
	 }}  >
	<Image style={{width: 90, height: 90, marginLeft: 10, marginTop: 10, resize: 'cover'}} source = {{uri: 'https://api.helloworld.com/assets/member.png'}}></Image>
</PhotoUpload>

Using this code, how would I pass avatar to a payload? I want to store the base64 string so I can store this in the API. Can i call a state like this.state.avatar down below? How could approach this?

signup = () => {		  
    fetch('https://helloworld.app.com/api/signup.json', {
    	method: 'POST',
		headers: {
			Accept: 'application/json',
			'Content-Type': 'application/json' },
	body: JSON.stringify({
		"name": this.state.name,
		"password": this.state.password,
		"email": this.state.email,
		"avatar": this.state.avatar,
	  })
    })
	.then((response) => response.json())
	.then ((res) => { 

This library does not have remove selected images ability.
Please add a method for remove selected images!

Hi, the base 64 I get from onPhotoSelect when posted to axios and retrieved back it becomes truncated, and when it is decoded, the image is cut off. Using the onResponse also, getting its data base64 string, decoding it has a cut off image. Any workaround or fix on this?

Thanks

So I can get the base64 string but how can I get the uri of the image selected ?

I tried to change the prompt message and figured out that in the source you open imagePicker with options { title: this.props.pickerTitle || 'Select Photo', storageOptions: { skipBackup: true, path: 'images' } } which in read.me it's supposed to be photoPickerTitle...

and also it would be wonderful if I can also override internal messages like Take Photo.. and Choose from Library.. by providing them as props as well. I will be customizing them myself, but Thanks for your work anyway.

I had to re-install the modules I use, and I had the error path.StartWith is not a function .

When I replace resizedImageUri by resizedImageUri.uri to fix it (CF #7 ), i get this error : open failed: ENAMETOOLONG (File name too long) . Before this message, there is a very long string, must be the base64 string of the picture.

Can anyone help ? I probably do something wrong but I can't figure it out.

Thanks.

I was able to find the android files I needed to edit in node_modules\react-native-image-picker, but I can't find Info.plist anywhere in the ios folder? Is this step not necessary anymore?

Wrong properties for the PhotoUpload component
See line 34 and 35 of index.js
The ImageResizer uses these names internally.
Either change index.js to uses these names or change the docs.

Getting this error while trying to build with RN 0.47

Add (or expose) prop to disable the ability to upload a images. This is helpful when a user is toggling between an edit mode and a viewing mode.

iOS works fine. On Android, I can see the image being rendered, but nothing happens on click (no dialog opening).

<PhotoUpload
    onPhotoSelect={photo => {
        this.setState({ photo: photo });
    }}
    onStart={this.handleLoading}
    onRender={this.handleLoading}
>
    <Image
        style={styles.photo}
        resizeMode="cover"
        source={{
            uri:
                "https://www.sparklabs.com/forum/styles/comboot/theme/images/default_avatar.jpg"
        }}
    />
</PhotoUpload>

I get the following errors:
on iOS simulator: cannot read property of RNFSFileTypeRegular of undefined
on iOS device: undefined is not an object (evaluating 'RNFSManager.RNFSFileTypeRegular')

I completed the setup, then react-native link for all three dependencies.
Then I tried manually linking react-native-fs, still didn't work...

Any solutions to this?
Thanks

Can you please add a activity indicator asap.

Any idea about how can I translate Take Photo... and Choose from Library... to another language? On mobile the OS it's already in pt-BR but the label keeps in en.

I'm running a project with the following component on Android:

import React from 'react';
import { View, Image, StyleSheet } from 'react-native'
import PhotoUpload from 'react-native-photo-upload'

export default class Preferences extends React.Component {

  constructor(props){
    super(props)
  }  
  render() {
    return (
      <View style={styles.container}>
        <PhotoUpload
           onPhotoSelect={avatar => {
             if (avatar) {
               console.log('Image base64 string: ', avatar)
             }
           }}
         >
         <Image
           style={{
             paddingVertical: 30,
             width: 150,
             height: 150,
             borderRadius: 75
           }}
           resizeMode='cover'
           source={{
             uri: 'https://www.sparklabs.com/forum/styles/comboot/theme/images/default_avatar.jpg'
           }}
         />
        </PhotoUpload>    
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#2896d3',
  }
});

I have already linked react-native-fs and added all the necessary lines to the android files.
Additionally, I followed the steps for Android here: https://github.com/itinance/react-native-fs/blob/master/README.md yet I'm still getting the following error screen:

Running react native 0.55.4

How to get the name of the picked photo?

Hi, I understand the source prop allows us to specify what type of base64 string to output (jpeg or png).

But is there a way to tell the source of the image?

Use case: firebase needs to know if the image is a png or jpg... i have no way of telling what kind of of file was selected. I hope this makes sense.

When a user taps the PhotoUpload in quick succession on Android, duplicate dialogs appear on top of each other. After dismissing a single one of the dialogs, dismissing the next one causes the app to immediately crash due to the input event receiver having already been disposed.

There should be a built-in guard against rapid taps in react-native-photo-upload.

Here are the relevant logcat lines:

01-10 09:21:36.909   500   500 D SurfaceFlinger: duplicate layer name: changing com.example/com.example.MainActivity to com.example/com.example.MainActivity#1
01-10 09:21:37.107   500   500 D SurfaceFlinger: duplicate layer name: changing com.example/com.example.MainActivity to com.example/com.example.MainActivity#2
01-10 09:21:37.899  9125  9187 W InputEventReceiver: Attempted to finish an input event but the input event receiver has already been disposed.
01-10 09:21:37.902  9125  9186 I ReactNativeJS: 'Response = ', { didCancel: true }
01-10 09:21:37.902  9125  9186 I ReactNativeJS: User cancelled image picker
01-10 09:21:38.474  9125  9187 W InputEventReceiver: Attempted to finish an input event but the input event receiver has already been disposed.
01-10 09:21:38.477  9125  9187 E AndroidRuntime: FATAL EXCEPTION: mqt_native_modules
01-10 09:21:38.477  9125  9187 E AndroidRuntime: Process: com.theskale.app.staging, PID: 9125
01-10 09:21:38.477  9125  9187 E AndroidRuntime: java.lang.RuntimeException: Illegal callback invocation from native module. This callback type only permits a single invocation from native code.
01-10 09:21:38.477  9125  9187 E AndroidRuntime: 	at com.facebook.react.bridge.CallbackImpl.invoke(CallbackImpl.java:30)
01-10 09:21:38.477  9125  9187 E AndroidRuntime: 	at com.imagepicker.ResponseHelper.invokeResponse(ResponseHelper.java:76)
01-10 09:21:38.477  9125  9187 E AndroidRuntime: 	at com.imagepicker.ResponseHelper.invokeCancel(ResponseHelper.java:63)
01-10 09:21:38.477  9125  9187 E AndroidRuntime: 	at com.imagepicker.ImagePickerModule.doOnCancel(ImagePickerModule.java:201)
01-10 09:21:38.477  9125  9187 E AndroidRuntime: 	at com.imagepicker.ImagePickerModule$2.onCancel(ImagePickerModule.java:182)
01-10 09:21:38.477  9125  9187 E AndroidRuntime: 	at com.imagepicker.utils.UI$3.onCancel(UI.java:89)
01-10 09:21:38.477  9125  9187 E AndroidRuntime: 	at android.app.Dialog$ListenersHandler.handleMessage(Dialog.java:1364)
01-10 09:21:38.477  9125  9187 E AndroidRuntime: 	at android.os.Handler.dispatchMessage(Handler.java:106)
01-10 09:21:38.477  9125  9187 E AndroidRuntime: 	at android.os.Looper.loop(Looper.java:164)
01-10 09:21:38.477  9125  9187 E AndroidRuntime: 	at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:194)
01-10 09:21:38.477  9125  9187 E AndroidRuntime: 	at java.lang.Thread.run(Thread.java:764)
01-10 09:21:38.739   952   971 W ActivityManager:   Force finishing activity com.example.staging/com.example.MainActivity

I'm getting the string without problem, but I also need get the file and those logged attributes:

'Response = ', { height: 4160,
width: 3120,
type: 'image/jpeg',
fileName: 'image-f3305acd-8ae6-4361-b8d4-8c1074ea9fab.jpg',
fileSize: 4065585,
path: '/storage/emulated/0/Pictures/image-f3305acd-8ae6-4361-b8d4-8c1074ea9fab.jpg',
data: '/9j/...'

There's no image seen to click on. However, when the PhotoUpload tag is removed, the image is seen.

After uploading , image quality is reduced

I set the props to a height and width of 40 but in the devtools it shows view is 333px... did i do something wrong?

Current required version of react-native-image-picker is ^0.26.7, which contains a very annoying bug, which was fixed in version 0.27.1.

When I select the photo or take selfie, the app is restarted.

Version - Android 6.0 API 23 (Have 21 GB free)
- IOS 11

This docs says this api uses TouchableOpacity to display the image picked. Is there anyway I can have the initial to appear as a TouchableOpacity button instead of pre-selected image?

I have tried setting quality to 100. But still the image is blurred. I can see a height and width param. How can I maintain original height and width of image?

flex: 1 in styles.container is unnecessary. It breaks half of my views

I want to add button that onPress will open the the image picker. How can I call theis event?

as you cloned image in child elemenst of photouploader if i remove my image from external link it dosnt update in android and ios or update image source uri i dosnt update in android ,

Hi, I am using this package in both IOS and Android and it is working well. But there is a problem in the following case of IOS. If the user go for uploading the photo for the first time, the package asking the permission for camera and library. Then if the user removes the access to camera or library manually from the privacy setting of the phone and go for the second time to upload the photo, nothing happens. In other words, the app doesn't ask for permission again it doesn't show any reaction. Can you please let me know what is the problem. thanks in advance.

Does this package crop the images automatically? Or do they allow the user to drag the image and fit a specific portion of the image inside the cropping circle?

I'm trying this lib for the first time, I think I followed the steps correctly but maybe I'm wrong because I'm using Expo.

Error message

Code:

It's the same as the example:

import React, { Component } from 'react';
import { Image } from 'react-native'
import PhotoUpload from 'react-native-photo-upload'

class PhotoTest extends Component {
  render(){
    return(
      <PhotoUpload
        onPhotoSelect={avatar => {
          if (avatar) {
            console.log('Image base64 string: ', avatar)
          }
        }}
      >
        <Image
          style={{
            paddingVertical: 30,
            width: 150,
            height: 150,
            borderRadius: 75
          }}
          resizeMode='cover'
          source={{
            uri: 'https://www.sparklabs.com/forum/styles/comboot/theme/images/default_avatar.jpg'
          }}
        />
      </PhotoUpload>
    );
  }
}
export default PhotoTest;

app.json

My app.json from my expo project:

{
  "expo": {
    "name": "ficha",
    "description": "An empty new project",
    "slug": "ficha",
    "privacy": "public",
    "sdkVersion": "23.0.0",
    "version": "1.0.0",
    "orientation": "portrait",
    "primaryColor": "#cccccc",
    "icon": "./assets/icons/app-icon.png",
    "loading": {
      "icon": "./assets/icons/loading-icon.png"
    },
    "packagerOpts": {
      "assetExts": ["ttf", "mp4"]
    },
    "ios": {
      "supportsTablet": true,
      "infoPlist":{
        "NSPhotoLibraryUsageDescription": "would like access to your photo gallery",
        "NSCameraUsageDescription": "would like to use your camera",
        "NSPhotoLibraryAddUsageDescription": "would like to save photos to your photo gallery"
      }
    }
  }
}

Hi thanks for the useful library first of all. I like to know is there any way to style current choose from options popup windows or if I have my own custom component like with 2 buttons how can i link those options to that ?

any ideas ? is there any way to direct launch camera or image gallery with custom buttons ? please let me know

Thanks again...

It simply doesn't work. I'm using react native 55.4. PhotoUpload does not render whatsoever, throws no errors, nothing. Image renders fine by itself, disappears if I wrap it in PhotoUpload

I'm kind of newto all this NPM stuff but I'm haivng some peer dependency issues with this module...

Can you help please?

Hi. when i select an image from my gallery or camera i get this error. i install all dependency but i get error
evaluating 'ImageResizerAndroid.createResizedImage
what's wrong??

Having issues with blurry images. Stock/placeholder images display fine, selecting an image from the camera roll results in a blurry image regardless if i set the resize to cover, quality to 100, overall size, etc. Using the example from the readme.md doc.

"react": "^16.0.0",
"react-native": "^0.51.0",

How to change takePhotoButtonTitle & chooseFromLibraryButtonTitle.

After selecting image from the gallery, it gives warning on ios. path.startswith is undefined

That would be preferred since it would improve performance, even if slightly

It is not clear what this package can do.

Does this package UPLOADS image file to a server?
Or just displays it in <Image> tag?

The simulator and cellphone kind of freezes for a few milliseconds, it's very weird. Is that possible to fix? Not sure if it's the conversion to base64 or another thing.

@omarkhaled11 ideas?

Hi there! I noticed that the property onRender is specified in PhotoUpload's propType object but it is never called. Moreover, inside of PhotoUpload's componentDidUpdate lifecycle hook I noticed that you are calling onAfterRender. Is it possible that these two function are the same? Any help will be appreciated. Thanks in advance. ☺️

In android (i cannot test on real iPhone) I take a selfie picture or select a picture that is in portrait mode, when the picture is replaced in it rotates 90 degrees clockwise, meaning my picture is sideways; if the picture is in landscape it appears as it should no issue.

The weird thing about it is that the previews in android gallery look how they should look.

BTW, Everything else seems to work flawlessly, very easy to integrate to the project, example and documentations are topnotch.

When I change state visibility of loading overlay on onStart, I can't see any overlay.

Any suggestion loading component for react-native-photo-upload?

Thank you

Iam getting the following error please do let me know if i am doing anything wrong.

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/Cellar/node/8.3.0/bin/node',
1 verbose cli '/usr/local/bin/npm',
1 verbose cli 'install',
1 verbose cli 'react-native-photo-upload',
1 verbose cli '--save' ]
2 info using [email protected]
3 info using [email protected]
4 verbose npm-session b7ba7e27831671a4
5 silly install loadCurrentTree
6 silly install readLocalPackageData
7 http fetch GET 200 https://registry.npmjs.org/react-native-photo-upload 89ms (from cache)
8 silly pacote tag manifest for react-native-photo-upload@latest fetched in 177ms
9 silly install loadIdealTree
10 silly install cloneCurrentTreeToIdealTree
11 silly install loadShrinkwrap
12 verbose stack SyntaxError: Unexpected token < in JSON at position 173214
12 verbose stack at JSON.parse ()
12 verbose stack at module.exports (/usr/local/lib/node_modules/npm/lib/utils/parse-json.js:3:15)
12 verbose stack at BB.join (/usr/local/lib/node_modules/npm/lib/install/read-shrinkwrap.js:31:20)
12 verbose stack at tryCatcher (/usr/local/lib/node_modules/npm/node_modules/bluebird/js/release/util.js:16:23)
12 verbose stack at Holder$3._callFunction (eval at generateHolderClass (/usr/local/lib/node_modules/npm/node_modules/bluebird/js/release/join.js:92:16), :14:44)
12 verbose stack at Holder$3.checkFulfillment (eval at generateHolderClass (/usr/local/lib/node_modules/npm/node_modules/bluebird/js/release/join.js:92:16), :29:30)
12 verbose stack at Promise.eval (eval at thenCallback (/usr/local/lib/node_modules/npm/node_modules/bluebird/js/release/join.js:14:16), :6:20)
12 verbose stack at Promise._settlePromise (/usr/local/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:566:21)
12 verbose stack at Promise._settlePromise0 (/usr/local/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:614:10)
12 verbose stack at Promise._settlePromises (/usr/local/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:693:18)
12 verbose stack at Promise._fulfill (/usr/local/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:638:18)
12 verbose stack at Promise._settlePromise (/usr/local/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:582:21)
12 verbose stack at Promise._settlePromise0 (/usr/local/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:614:10)
12 verbose stack at Promise._settlePromises (/usr/local/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:693:18)
12 verbose stack at Promise._fulfill (/usr/local/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:638:18)
12 verbose stack at /usr/local/lib/node_modules/npm/node_modules/bluebird/js/release/nodeback.js:42:21
13 verbose cwd /Users/cdp/Desktop/mac/doctor_on_a_call
14 verbose Darwin 16.7.0
15 verbose argv "/usr/local/Cellar/node/8.3.0/bin/node" "/usr/local/bin/npm" "install" "react-native-photo-upload" "--save"
16 verbose node v8.3.0
17 verbose npm v5.3.0
18 error Unexpected token < in JSON at position 173214
19 verbose exit [ 1, true ]