React Native image picker is showing image too slow after successfully uploading - react-native

Question

after uploading image successfully the uploaded image is taking time to show ?
anyone knows anything about it?
here is my code
_onPressEdit = () => {
ImagePicker.showImagePicker(options, response => {
console.log('Response = ', response);
if (response.didCancel) {
console.log('User cancelled image picker');
} else if (response.error) {
console.log('ImagePicker Error: ', response.error);
} else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
} else {
this._uploadImage(response.uri);
}
});
};
here is my full code
import React, {PureComponent} from 'react';
import {View, Text, Image, PermissionsAndroid, Platform} from 'react-native';
import {connect} from 'react-redux';
import ImagePicker from 'react-native-image-picker';
import styles from './styles';
import {Images, Styles, Language, Colors} from '#theme';
import {Wrapper, Input, ButtonView} from '#components';
import {TextInputField} from '#customComponents';
import {Navigator} from '#services';
import StarRating from 'react-native-star-rating';
import Header from '../Header';
import Footer from '../Footer';
import {uploadImage, editProfile} from '../../../actions/UserActions';
import {BASE_URL_PHOTO} from '../../../config/WebService';
import {selectUserData} from '../../../selectors/userSelector';
import {UserPresenter} from '../../../presenter';
import {Util} from '../../../utils';
const options = {
storageOptions: {
skipBackup: true,
path: 'images',
},
};
class Profile extends PureComponent {
constructor(props) {
super(props);
const {firstName, lastName, email, mobile, image, id} = this.props.user;
this.state = {
id,
firstName,
lastName,
email,
mobile,
image,
errors: {},
};
}
onStarRatingPress(rating) {
this.setState({
starCount: rating,
});
}
checkAllPermissions = async () => {
try {
await PermissionsAndroid.requestMultiple([
PermissionsAndroid.PERMISSIONS.CAMERA,
PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
]);
if (
(await PermissionsAndroid.check('android.permission.CAMERA')) &&
(await PermissionsAndroid.check('android.permission.CAMERA')) &&
(await PermissionsAndroid.check('android.permission.CAMERA'))
) {
this._onPressEdit();
return true;
} else {
console.log('all permissions denied');
return false;
}
} catch (err) {
console.warn(err);
}
};
_onPressEdit = () => {
ImagePicker.showImagePicker(options, response => {
console.log('Response = ', response);
if (response.didCancel) {
console.log('User cancelled image picker');
} else if (response.error) {
console.log('ImagePicker Error: ', response.error);
} else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
} else {
this._uploadImage(response.uri);
}
});
};
_uploadImage = image => {
const {uploadImage} = this.props;
const {id} = this.props.user;
UserPresenter.sendUploadAvatarRequest(
uploadImage,
image,
id,
this._onSuccessImageUpload,
);
};
_onSuccessImageUpload = uri => {
this.setState({
image: uri,
});
};
_onChangeText = (key, value) => {
this.setState(
{
[key]: value,
},
() => console.log(this.state),
);
};
_validateForm = () => {
const {firstName, lastName, mobile} = this.state;
const errors = UserPresenter.getEditProfileErrors(
firstName,
lastName,
mobile,
);
this.setState({errors});
return Util.isEmpty(errors);
};
_onPressSave = () => {
const {firstName, lastName, mobile, image} = this.state;
const {id} = this.props.user;
const {editProfile} = this.props;
if (this._validateForm()) {
UserPresenter.sendEditProfileRequestStepOne(
editProfile,
id,
firstName,
lastName,
mobile,
image,
this._onSuccessSave,
);
}
};
_onSuccessSave = () => {
// Navigator.pop();
Navigator.goBack();
};
_onPressNext = () => {
if (this._validateForm()) {
Navigator.navigate('EditProfileServices', {data: this.state});
}
};
onPressFooterBtn = () => {
Navigator.navigate('EditProfileServices');
};
renderStarRating() {
const {rating} = this.props.user;
return (
<StarRating
starSize={24}
starStyle={styles.starStyle}
halfStarEnabled={true}
halfStarColor={Colors.textWhiteTwo}
emptyStarColor={Colors.textWhiteTwo}
disabled={true}
maxStars={5}
rating={rating}
selectedStar={rating => this.onStarRatingPress(rating)}
/>
);
}
renderEditFields() {
const {firstName, lastName, email, mobile, errors} = this.state;
return (
<View>
<TextInputField
title={Language.firstName}
placeholder={Language.Andrew}
value={firstName}
onChangeText={text => this._onChangeText('firstName', text)}
error={errors.firstName}
/>
<TextInputField
title={Language.lastName}
placeholder={Language.Crammer}
value={lastName}
onChangeText={text => this._onChangeText('lastName', text)}
error={errors.lastName}
/>
<TextInputField
title={Language.email}
keyboardType={'email-address'}
placeholder={Language.andrewCrammerEmail}
value={email}
onChangeText={text => this._onChangeText('email', text)}
error={errors.email}
editable={false}
/>
<TextInputField
title={Language.phone}
keyboardType={'phone-pad'}
placeholder={Language.EditProfilePhonePlaceholder}
value={mobile}
onChangeText={text => this._onChangeText('mobile', text)}
error={errors.mobileNumber}
/>
{/* <Input
label={Language.changePassword}
secureTextEntry={true}
placeholder={Language.EditProfileChangePassword}
/> */}
</View>
);
}
renderBody() {
const {rating} = this.props.user;
const {image} = this.state;
return (
<View style={Styles.paddingHorizontal}>
<View
style={[
Styles.flexDirectionRow,
Styles.alignItemsCenter,
styles.mb_30,
]}>
<View style={styles.editProfileImgWrap}>
<Image
style={styles.imgStyle}
source={{uri: `${BASE_URL_PHOTO}${image}`}}
/>
<ButtonView
isBackgroundRipple
onPress={
Platform.OS === 'android'
? this.checkAllPermissions
: this._onPressEdit
}
style={[Styles.positionAbsolute, styles.editWrap]}>
<Text style={styles.edit}>{Language.edit}</Text>
</ButtonView>
</View>
<View>
<Text style={styles.textStyle}>{Language.ProfilePicture}</Text>
</View>
</View>
<View style={styles.starStyleWrap}>
{this.renderStarRating()}
<Text style={styles.starRatingText}>{rating}</Text>
</View>
<View>{this.renderEditFields()}</View>
</View>
);
}
renderHeader() {
return <Header onPressSave={this._onPressSave} />;
}
renderFooter() {
return <Footer onPressNext={this._onPressNext} step={1} />;
}
//Render
render() {
return (
<Wrapper
header={this.renderHeader()}
footer={this.renderFooter()}
isFetching={this.props.isFetching}
isAbsolute
mainContainerStyle={Styles.paddingHorizontalNone}
isScrollView>
{this.renderBody()}
</Wrapper>
);
}
}
const mapStateToProps = state => {
return {
user: selectUserData(state.user),
isFetching: state.user.isFetching,
};
};
const actions = {uploadImage, editProfile};
export default connect(mapStateToProps, actions)(Profile);

Answer 1

issue solved
just compress your image size so it wont take time to appear
here is the code
const options = {
title: 'Select Picture',
storageOptions: {
skipBackup: true,
path: 'images',
},
maxWidth: 500,
maxHeight: 500,
quality: 0.5,
};
previous code was
const options = {
storageOptions: {
skipBackup: true,
path: 'images',
},
};