I want to capture and render 3 different different images In react native app. how can I do this. now I am able to click image but when I click image then same image is rendering 3 times but I want to click image one by one.
here is my code
constructor(props) {
super(props);
this.state = {
resourcePath: {},
singleFile:null,
fileUri:null,
imageArray:{
PAN: null,
ADH: null,
ADH1: null,
},
imageType:'',
evenTry:false,
singleFilePAN:'',
singleFileADH:'',
singleFileADH1:'',
showCamera: false
};
}
requestCameraPermission = async () => {
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.CAMERA,
{
title: "App Camera Permission",
message:"App needs access to your camera ",
buttonNeutral: "Ask Me Later",
buttonNegative: "Cancel",
buttonPositive: "OK"
}
);
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
let options = {
storageOptions: {
skipBackup: true,
path: 'images',
},
};
ImagePicker.launchCamera(options, (res) => {
console.log('Response = ', res);
if (res.didCancel) {
console.log('User cancelled image picker');
} else if (res.error) {
console.log('ImagePicker Error: ', res.error);
} else if (res.customButton) {
console.log('User tapped custom button: ', res.customButton);
alert(res.customButton);
} else {
const source = { uri: res.uri };
console.log('response', res.uri);
const newImageArray = this.state.imageArray;
newImageArray.PAN = res.uri
newImageArray.ADH = res.uri
newImageArray.ADH1 = res.uri
this.setState({imageArray : {...newImageArray}})
this.setState({
filePath: res,
fileData: res.data,
fileUri: res.uri,
singleFilePAN: newImageArray.PAN,
singleFileADH: newImageArray.ADH,
singleFileADH1: newImageArray.ADH1
});
}
})
} else {
console.log("Camera permission denied");
}
} catch (err) {
console.warn(err);
}
};
render() {
return (
<View style={styles.container}>
<View style={styles.container}>
<Image source={{uri: this.state.imageArray.PAN}} style={{width: 100, height: 100}} />
<Image source={{uri: this.state.imageArray.ADH}} style={{width: 100, height: 100}} />
<Image source={{uri: this.state.imageArray.ADH1}} style={{width: 100, height: 100}} />
<TouchableOpacity onPress={this.requestCameraPermission} style={styles.button}>
<Text style={styles.buttonText}>Launch Camera Directly</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this.uploadImage} style={styles.button} >
<Text style={styles.buttonText}>फोटो अपलोड कीजिए</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
please ignore this. I want to capture and render 3 different different images In react native app. how can I do this. now I am able to click image but when I click image then same image is rendering 3 times but I want to click image one by one. I want to capture and render 3 different different images In react native app. how can I do this. now I am able to click image but when I click image then same image is rendering 3 times but I want to click image one by one.