I am new to React Native and I am trying to show image from Gallery in my app. After picking the image from Gallery, image doesn't display on app and the button (i.e., TouchOpacity) and back navigation button also stops working. Please help me out to fix this.
Android is working fine. But iOS is doing the weird thing.
Here is my code:
import React from 'react';
import ImagePicker from 'react-native-image-picker';
import {
StyleSheet,
View,
TextInput,
Image,
Text,
TouchableOpacity,
Alert,
} from 'react-native';
export default class AddNewProductPage extends React.Component {
static navigationOptions = {
title: 'Add Product',
};
constructor(props){
super(props)
this.state = {
filepath: {
data: '',
uri: ''
},
}
}
_showImagePickerOptions(titleVal, messageVal) {
Alert.alert(
titleVal,
messageVal,
[
{
text: "Camera",
onPress: () => console.log("Camera pressed")
},
{
text: "Photo Gallery",
onPress: () => console.log("Photo Gallery pressed"),
},
{
text: "Cancel", onPress: () => console.log("Cancel pressed..."),
style: "cancel"
}
],
{ cancelable: false }
);
}
_handleSignUp() {
this._showImagePickerOptions("Upload Product Photo", "Please upload product photo using below options")
}
render() {
const {navigate} = this.props.navigation;
return (
<View>
<View style={{marginTop: 20}} >
<Text style={styles.titleTextStyle}>
PRODUCT PHOTO
</Text>
</View>
<View style={{flexDirection: 'row', borderRadius: 18, borderColor: '#d8d8d8', borderWidth:1, height: 150, marginLeft: 18, marginRight: 18, marginTop: 10}}>
<TouchableOpacity onPress={() => this.chooseImage()} style={{height: 150, marginLeft: 0, marginRight: 0}}>
{this.renderFileData()}
</TouchableOpacity>
</View>
</View>
);
}
chooseImage = () => {
let options = {
title: 'Select Image',
// customButtons: [
// { name: 'customOptionKey', title: 'Choose Photo from Custom Option' },
// ],
storageOptions: {
skipBackup: true,
path: 'images',
},
};
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);
alert(response.customButton);
} else {
const source = { uri: response.uri };
// You can also display the image using data:
// const source = { uri: 'data:image/jpeg;base64,' + response.data };
// alert(JSON.stringify(response));s
console.log('response', JSON.stringify(response));
this.setState({
filePath: response,
fileData: response.data,
fileUri: response.uri
});
}
});
}
renderFileData() {
if (this.state.fileData) {
return <Image source={{ uri: 'data:image/jpeg;base64,' + this.state.fileData }}
style={styles.images}
/>
} else {
return <Image source={require('./Images/mail_icon.png')}
style={styles.images}
/>
}
}
}
const styles = StyleSheet.create({
image_container: {
flex: 1,
// remove width and height to override fixed static size
width: null,
height: null,
},
imageIcons: {
left: 11,
top: 14,
},
textInputContainer: {
flexDirection:'row',
padding: 0,
marginLeft: 18,
marginRight: 18,
marginTop: 14,
height: 42,
},
txtInput: {
flex:1,
height:42,
fontSize: 18,
},
titleTextStyle: {
textAlign: "left",
fontSize: 14,
fontWeight: '500',
color: '#161616',
marginLeft: 18,
},
images: {
width: 150,
height: 150,
borderColor: 'black',
borderWidth: 1,
marginHorizontal: 3
},
});
I am implementing react-native-image-picker for this.