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!!
Check if user.avatar has the image then show the uploaded image. If it is not uploaded show the default image.
<View style={styles.container}>
<View style={styles.avatarPlaceholder}>
<Image
source={{ uri: this.state.user.avatar || 'default image path' }}
style={styles.avatar}
/>
</View>
<TouchableOpacity onPress={this.handlePickAvatar}>
<Text style={styles.text}>Load Image</Text>
</TouchableOpacity>
</View>