0

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.

1 Answers1

0

What you are doing in your code is basically setting up the same image uri to all three entries of you array, which is why the rendered images are all the same

            newImageArray.PAN = res.uri //this is the same as the ones bellow
            newImageArray.ADH = res.uri
            newImageArray.ADH1 = res.uri

What you can do is add image to array once taken, and then do a map on the image array like this in your render function

imageArray.map((x) => <Image source={{uri: x.uri}} style={{width: 100, height: 100}} />)
redberry
  • 696
  • 7
  • 15
  • issue is not that I am rendering same image three Times I just write this bcoz . I want to 3 different imag in that arrays. But I am not able click multiple image. when I click one image its fine its rendring but when I click second image the second image is replace by first iamge that the issue –  Mar 18 '21 at 09:58
  • I want that when I click first image then first image have to add in PAN. when I click Image second time then second image have to be add in ADH and so on. –  Mar 18 '21 at 10:00
  • 1
    Yes, but what you do with your code is on response you set all the values to the same uri response. – redberry Mar 18 '21 at 10:03
  • Then How to do that please help –  Mar 18 '21 at 10:03
  • Either, dont have array with PAN,ADH & ADH1 and just have array list and render images the way I commented above, or have an extra parameter in your function, a string that specifies which entry of the array to update and pass it based on which image you want to update. – redberry Mar 18 '21 at 10:05
  • So instead of doing this => newImageArray.PAN = res.uri //this is the same as the ones bellow newImageArray.ADH = res.uri newImageArray.ADH1 = res.uri – redberry Mar 18 '21 at 10:06
  • 1
    You can it like that => newImageArray.[arrayEntryArgument] = res.ur. That way you will only populate the exact entry in the array you want to – redberry Mar 18 '21 at 10:06