react-nativeexporeact-native-image-picker

Expo Imagepicker asks for permissions but nothing else happens


I'm using expo to build a react-native app. I'm trying to implement the expo imagePicker so the user can pick an image from their gallery or camera roll and use it on the app however after the ImagePicker ahs asked for permissions and I allow them, nothing else happens. Thee user isn't taken to their gallery or cameraRoll. There are no errors currently however imagePicker isn't working correctly. What changes do I need to make to my code?

ImageSelector.js file

import * as React from 'react';
import { Button, Image, View } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import * as Permissions from 'expo-permissions';
import * as Constants from 'expo-Constants';

export default class ImageSelector extends React.Component {
  state = {
    image: null,
  };

  render() {
    let { image } = this.state;

    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Button
          title="Pick an image from camera roll"
          onPress={this._pickImage}
        />
        {image &&
          <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
      </View>
    );
  }

  componentDidMount() {
    this.getPermissionAsync();
  }

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

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

    console.log(result);

    if (!result.cancelled) {
      this.setState({ image: result.uri });
    }
  };
}

Solution

  • If you use Expo, you don't have to use it. And you need the right to storage space.

    You can run expo install expo-image-picker expo-permissions and get Permission Permissions.CAMERA_ROL

    Example

    import * as React from 'react';
    import { Button, Image, View } from 'react-native';
    import * as ImagePicker from 'expo-image-picker';
    import * as Permissions from 'expo-permissions';
    import * as Constants from 'expo-Constants';
    
    export default class ImagePickerExample extends React.Component {
      state = {
        image: null,
      };
    
      render() {
        let { image } = this.state;
    
        return (
          <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Button
              title="Pick an image from camera roll"
              onPress={this._pickImage}
            />
            {image &&
              <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
          </View>
        );
      }
    
      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!');
          }
        }
      }
    
      _pickImage = async () => {
        let result = await ImagePicker.launchImageLibraryAsync({
          mediaTypes: ImagePicker.MediaTypeOptions.All,
          allowsEditing: true,
          aspect: [4, 3],
        });
    
        console.log(result);
    
        if (!result.cancelled) {
          this.setState({ image: result.uri });
        }
      };
    }