1

I'm trying to integrate react-native-image-picker and I was able to successfully install it. Now when I try to choose image from gallery in log it does shows that my imageSource has value but it doesn't display. I'm currently running it on iOS simulator. Below is my code

import ImagePicker from "react-native-image-picker";

const options = {
  title: "Select a photo",
  takePhotoButtonTitle: "Take a photo",
  chooseFromLibraryButtonTitle: "Choose from gallery",
  quality: 1
};

constructor(props) {
    super(props);
    this.state = { imageSource: null };
  }

addImage = () => {
ImagePicker.showImagePicker(options, (response) => {
  console.log('Response = ', response);

  if (response.didCancel) {
    console.log('User cancelled image picker');
  } else if (response.error) {
    console.log('ImagePicker Error: ', response.error);
  } else {
    const source = { uri: response.uri };

    this.setState({
      imageSource: source,
    });
    console.log("Imagesource=" + JSON.stringify(source));
  }
});
}

render() {
    return (
      <View style={styles.container}>
        <Image source={this.state.imageSource} />
      </View>
    );
  }

The console log does print the path to the image I picked from gallery but it just doesn't display. I'm running it on iPad with landscape orientation. Any help is appreciated.

Francis F
  • 3,157
  • 3
  • 41
  • 79
  • 1
    According to [doc](https://facebook.github.io/react-native/docs/image), if you use uri source, you have to specify image dimensions. Set them in style prop or use require function – Milore Jan 03 '19 at 09:48

1 Answers1

2

Any Image shown should have fixed width and height.

You can use the Dimensionlike this var { width, height } = Dimensions.get("window"); to use height and width with respect to screen size(Don't forget to import from react-native).

Or you could just go ahead and give your own values to the respective parameters.

Ron Astle Lobo
  • 1,284
  • 2
  • 14
  • 34