react native image picker error : undefined is not an object

Question

I implemented get photo from library, but when I don't choose photo in libary and just cancel, I got error undefined is not an object (evaluating 'response.assets[0]')

I think it's because response.assets[0].uri might be empty when I didn't choose photo. How can I solve this?

here's my code CameraScreen.js

import React, {Component} from 'react'
import { View, Text, StyleSheet, Image, TouchableOpacity } from 'react-native'
import {launchCamera, launchImageLibrary } from 'react-native-image-picker'

class CameraScreen extends Component {
  state = {
    avatar: ''
  }

  showImage = () => {
    launchImageLibrary({}, (response)=>{
      alert(response.assets[0].uri)
      this.setState({
        avatar: response.assets[0].uri
      })
    })
  }

  render() {
    return (
      <View style={styles.container}>
        <Image
          source={{uri:this.state.avatar}}
          style={styles.avatar}
        />
        <TouchableOpacity
          style={styles.buttonStyle}
          activeOpacity={0.5}
          onPress={() => {this.showImage()}}
        >
          <Text style={styles.buttonTextStyle}>영수증 등록하기</Text>
        </TouchableOpacity>
      </View>
    )
  }
}

Answer 1

you can use like this:

launchImageLibrary({}, response => {
            console.log("Response = ", response);
            if (response.didCancel) {
                console.log("User cancelled image picker");
                alert("User cancelled image picker");
            } else if (response.errorCode) {
                console.log("ImagePicker ErrorCode: ", response.errorCode);
                alert("ImagePicker ErrorCode: " + response.errorCode);
            } else if (response.errorMessage) {
                console.log("ImagePicker ErrorMessage: ", response.errorMessage);
                alert("ImagePicker ErrorMessage: " + response.errorMessage);
            } else {
                let source = response;
                const uri = response?.assets && response.assets[0].uri;
                this.setState({
                    avatar: uri
                });
            }
        });

Answer 2

condition show avatar if defined

{
state.avatar &&
<Image
          source={{uri:this.state.avatar}}
          style={styles.avatar}
        />
}