Upload image as the new profile image in SendBird

Question

Currently working on a SendBird and react-native project where the module is about changing the auto generated profile image, profileUrl, to a new image taken from phone camera or gallery storage. However the following code i typed in is not working and its either showing error or the app freezes. May i know where i did wrong? (Image is uploaded/selected using react-native-image-picker).

    _changeProfileImg(){
    ToastAndroid.show('ClickedImage', ToastAndroid.SHORT);
    var _Self = this;
    var source = [];

    ImagePicker.showImagePicker(options, (response) => {
        if (response.didCancel){
            console.log('user canceled image picker');
        }
        else if (response.error){
            console.log('imagePicker error', response.error);
        }
        else if (response.customButton){
            console.log('customised clicked', response.customButton);
        }
        else{
            source = {uri:response.uri};
            // const source = { uri: 'data:image/jpeg;base64,' + response.data };
            this.setState({
                profileUrl: source,
            });
        }
    });
}

render(){
    return(
        <View style={styles.container}>

            <View style={styles.contentFlex}>
            <Text>{this.state.profileUrl}</Text>

                <Avatar
                    rounded
                    size="xlarge"
                    source={{uri: this.state.profileUrl}}
                    onPress={this._changeProfileImg.bind(this)}
                    activeOpacity={0.7}
                />
        </View>

Answer 1

You should only assign the response.uri in the profileUrl not {uri: response.uri} as you are already specifying the uri while feeding the source with the profileUrl in avatar.