CODEWITHSUNDEEP
reactjsreact-native
Naveen DINUSHKA
Naveen DINUSHKA

Reputation: 1627

Ask User to choose photo from photo library or camera with react native button

I am using expo and cannot use https://github.com/react-community/react-native-image-picker , and would like to know how to implement the same functionality . I have the following code for each option separately (One button for gallery and the other one for camera)

  _pickImage = async () => {
            let pickerResult = await Expo.ImagePicker.launchImageLibraryAsync({
              exif: true,
              allowsEditing: false,
              quality: 0.7,
              base64: true,
            })

            if (pickerResult.cancelled) {
              return
            }

            console.log(pickerResult)
  }

And the other one is

uploadImage = async() =>{

       // Display the camera to the user and wait for them to take a photo or to cancel
  // the action
  let result = await ImagePicker.launchCameraAsync({
          allowsEditing: true,
          aspect: [4, 3],
        });

        if (result.cancelled) {
          return;
        }

        // ImagePicker saves the taken photo to disk and returns a local URI to it
        let localUri = result.uri;
        let filename = localUri.split('/').pop();

        // Infer the type of the image
        let match = /\.(\w+)$/.exec(filename);
        let type = match ? `image/${match[1]}` : `image`;

        // Upload the image using the fetch and FormData APIs
        let formData = new FormData();
        // Assume "photo" is the name of the form field the server expects
        formData.append('photo', { uri: localUri, name: filename, type });

        return await fetch(YOUR_SERVER_URL, {
          method: 'POST',
          body: formData,
          header: {
            'content-type': 'multipart/form-data',
          },
        });
}


}

And the both functions was called as 

 <Button title="Pick image" onPress={this._pickImage} />
 <Button title="Upload image" onPress={this._uploadImage} />

But how do I make i work as shown below:enter image description here

Upvotes: 1

Views: 2549

Answers (1)

ljmocic
ljmocic

Reputation: 1887

Expo has released the ActionSheet library which provides exact functionality you need.

Upvotes: 1

Related Questions