the image of the openSelectDialog method of the ImagePickerIOS in the React Native is not output

Question

Here is my code:

import React, {Component} from 'react';
import {ImagePickerIOS, Image, Text, View} from 'react-native';

class Dashboard extends Component {

  constructor(props) {
    super(props);
    this.state = {
      image: ''
    };
  }

  componentDidMount() {
    ImagePickerIOS.openSelectDialog({}, imageUri => {
      this.setState({ image: imageUri });
    }, error => console.log(error));
  }

  render() {
    return (
      <View>
        <Text>{JSON.stringify(this.state.image)}</Text>
        { this.state.image ?
        <Image style={{flex: 1}} source={{uri: this.state.image}} />
        : null }
      </View>
    );
  }
}

export default Dashboard

When you run the above code, this.state.image will have "assets-library: //asset/asset.HEIC? Id = .... & ext = HEIC".

However, is not output.

And <Image style={{width: 200, height: 200}} source={{uri: this.state.image}} /> This style property puts the IOS simulator to a black screen and exits the app.

The React Native version is 0.57.4 and the simulator is iPhone X - 12.1.

Help.

Answer 1

I have the same problem. But I have solved this issue. You may need add width and height to style.

{ this.state.image ? <Image style={{height: 100, width: 100}} source={{uri: this.state.image}} /> : null }