value for uri cannot be cast from double to string

Question

I want to set a default image before i can upload any image from my gallery here is my code

 state = {
        user: {
            avatar : require('../assets/user.png')

        }
    }
    handlePickAvatar = async () => {

        UserPermission.getCamerPermission()
        let result = await ImagePicker.launchImageLibraryAsync({
            mediaTypes : ImagePicker.MediaTypeOptions.Images,
            allowsEditing: true,
            aspect:[4,3]
        })
        if (!result.cancelled) {
            this.setState({ user: { ...this.state.user, avatar: result.uri } });
        }
    }
    render() {

        return (
            <View style={styles.container}>
                <Text style={styles.profile}>Profile</Text>
                <View style={styles.avatarPlaceholder} >
                    <Image source={{ uri: this.state.user.avatar }}  style={styles.avatar} />


                </View>
                <TouchableOpacity onPress={this.handlePickAvatar}>
                    <Text style={styles.text}>Load Image</Text>                    
                </TouchableOpacity>
            </View>
        );
    }

The results should be like this the user image must be defaulted but i get the error :value for uri cannot be cast from double to string

is there any solution for this ?

Thank you! Updated!!

Answer 1

Use uri: this.state.user.avatar.toString() instead of uri: this.state.user.avatar and the error is gone.

Edit: your problem could've arised from the fact of loading in your store images with local paths via require('...'). In that scenario, the image is saved as a number.

Answer 2

If it is a local image, specify the image url directly without uri as below:

<Image source={this.state.user.avatar}

uri should be specified only when the image is loaded from external source such as cloud/internet, as below. Let's assume cloudImage contain's the path to an image in the cloud.

<Image source={ cloudImage ? { uri: cloudImage } : this.state.user.avatar}