How to Update image in react native - image

Question

I was trying to update the user profile but the profile picture only changes ones.To change it each time i had to change the image name each time how to solve it.I have tried to send the request in post method but my api does not support post.I will post my code below.Could some one help me and Thanks in advance.
class ProfileEdit extends Component {
state = {
username: '',
email: '',
about: '',
userInfo: '',
avatarSource: null,
showAlert: false,
showCancelButton: false,
showConfirmButton: false,
};
constructor(props) {
super(props);
this.selectPhotoTapped = this.selectPhotoTapped.bind(this);
}
hideAlert = () => {
this.setState({
showAlert: false
});
};
selectPhotoTapped() {
const options = {
quality: 1.0,
maxWidth: 500,
maxHeight: 500,
storageOptions: {
skipBackup: true,
},
};
ImagePicker.showImagePicker(options, response => {
console.log('Response = ', response);
if (response.didCancel) {
console.log('User cancelled photo picker');
} else if (response.error) {
console.log('ImagePicker Error: ', response.error);
} else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
} else {
const source = { uri: response.uri }
this.setState({
avatarSource: source,
});
this.upLoadImage(response.uri);
}
});
}
upLoadImage = async (image_uri) => {
const value = await AsyncStorage.getItem('userToken');
//alert(value)
var url = 'http://www.dev.beta.duklr.com:8000/api/v2/profile/';
var b_url = url + value + '/';
let data = new FormData();
data.append('photo', { type: 'image/jpg', uri: image_uri, name: 'profile_image1.jpg' });
data.append('Content-Type', 'image/jpg');
fetch(b_url, {
method: 'PUT',
body: data
}).then((res) => res.json())
.then((res) => {
// alert("response" + JSON.stringify(res));
})
.catch((e) => this.setState({
showAlert: true,
message: e,
showCancelButton: true,
cancelText: 'close',
}))
.done()
}
componentDidMount = async () => {
const value = await AsyncStorage.getItem('userToken');
//alert(value)
var url = 'http://www.dev.beta.duklr.com:8000/api/v2/profile/';
var b_url = url + value + '/';
//alert(value);
return fetch(b_url)
.then(res => res.json())
.then(res => {
this.setState(
{
isLoading: false,
refreshing: false,
userInfo: res,
},
function () { }
);
})
.catch(error => {
this.setState({
showAlert: true,
message: error,
showCancelButton: true,
cancelText: 'close',
})
});
}
onUpdate = async () => {
const value = await AsyncStorage.getItem('userToken');
var url = 'my_api';
var b_url = url + value + '/';
//alert(b_url);
const { email, about, avatarSource } = this.state;
//alert(`${email},${about}`);
fetch(b_url, {
method: 'PUT',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
email: email,
about_us: about,
}),
})
.then((response) => response.json())
.then((responseJson) => {
this.setState({
showAlert: true,
message: "Saved successfully",
showCancelButton: true,
cancelText: 'close',
})
// this.setState({
// dataSource: responseJson.promptmsg,
// })
})
.catch((error) => {
this.setState({
showAlert: true,
message: error,
showCancelButton: true,
cancelText: 'close',
})
});
}
catch(errors) {
this.setState({
showAlert: true,
message: errors,
showCancelButton: true,
cancelText: 'close',
});
}
render() {
const value_email = this.state.userInfo.email;
const value_about = this.state.userInfo.about_us;
return (
<View style={styles.continer}>
<ScrollView>
<View style={{ alignItems: 'center', padding: 20 }}>
<Avatar
source={this.state.avatarSource}
size="xlarge"
// showEditButton
onPress={this.selectPhotoTapped.bind(this)}
/>
</View>
<View style={styles.textContiner}>
{/* <TextField
label='User Name'
title={this.state.userInfo.name}
value={this.state.username}
onChangeText={(username) => this.setState({ username })}
/> */}
<TextField
label='Email Id'
placeholder={value_email}
//value={value_email}
onChangeText={(email) => this.setState({ email })}
/>
<TextField
label='About'
//value={value_about}
placeholder={value_about}
onChangeText={(about) => this.setState({ about })}
/>
<View style={{ marginTop: 20 }}>
<Button
title="Save"
onPress={this.onUpdate.bind(this)}>
</Button>
</View>
</View>
</ScrollView>
<AwesomeAlert
show={this.state.showAlert}
showProgress={false}
title="Hello There"
message={this.state.message}
closeOnTouchOutside={true}
closeOnHardwareBackPress={true}
showCancelButton={this.state.showCancelButton}
showConfirmButton={this.state.showConfirmButton}
cancelText={this.state.cancelText}
confirmText={this.state.confirmText}
confirmButtonColor="#DD6B55"
onCancelPressed={() => {
this.hideAlert();
}}
onConfirmPressed={() => {
this.hideAlert();
}}
/>
</View>
);
}
}
export default ProfileEdit;

Answer 1

Is Avatar based on React Native's Image? To my experience, the Image component shipped with React Native is very buggy. Indeed, reloading issue is one of them. I often use FastImage as replacement for Image.