I cant able to send in image data to my server using RNFetchBlob in react native

Question

I am making a image upload page. i used 2 library 1.react-native-image-picker and rn-fetch-blob. when i perform a script it's show an error like

"RNFetchBlob failed to create request multipart body :Value for data cannot be cast from ReadableNativeMap to String"

And

"Attempt to invoke virtual method 'int java.io.InputStream.read(byte[], int, int)' on a null object reference"

i don't have an idea how to do that. i am new in react native so please help me to find what's problem are there and how to solve it.

here i am write my code. please find out the solution

import React, { Component  from 'react';
import { StyleSheet, Text, View, PixelRatio, TouchableOpacity, Image, TextInput, Alert } from 'react-native';
import {launchCamera, launchImageLibrary} from 'react-native-image-picker';
import RNFetchBlob from 'rn-fetch-blob';
export default class UploadProfile extends Component {
 
  constructor() {
 
    super();
 
    this.state = {
 
      ImageSource: null,
 
      data: null,
 
      Image_TAG: ''
 
    }
  }
 
  selectPhotoTapped() {
    const options = {
      quality: 1.0,
      maxWidth: 500,
      maxHeight: 500,
      storageOptions: {
        skipBackup: true
      }
    };
    
    launchImageLibrary(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 {
        let source = { uri: response.assets[0].uri };

        const data = new FormData();
        data.append('photo', {
          name: response.assets[0].fileName,
          type: response.assets[0].type,
          uri: response.assets[0].uri,
        });

        this.setState({
 
          ImageSource: source,
          data: data,
 
        });
      }
    });
  }
 
  uploadImageToServer = () => {
 
    RNFetchBlob.fetch('POST', 'https://demo.com/api/pro_upload.php', {
      Authorization: "Bearer access-token",
      otherHeader: "foo",
      'Content-Type': 'multipart/form-data',
    }, [
        { name: 'image', filename: 'image.png', type: 'image/png', data: this.state.data },
        { name: 'image_tag', data: this.state.Image_TAG }
      ]).then((resp) => {
 
        var tempMSG = resp.data;
 
        tempMSG = tempMSG.replace(/^"|"$/g, '');
 
        Alert.alert(tempMSG);
 
      }).catch((err) => {
        // ...
      })
 
  }
 
  render() {
    return (
      <View style={styles.container}>
 
        <TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>
 
          <View style={styles.ImageContainer}>
 
            {this.state.ImageSource === null ? <Text>Select a Photo</Text> :
              <Image style={styles.ImageContainer} source={this.state.ImageSource} />
            }
 
          </View>
 
        </TouchableOpacity>
 
 
        <TextInput
 
          placeholder="Enter Image Name "
 
          onChangeText={data => this.setState({ Image_TAG: data })}
 
          underlineColorAndroid='transparent'
 
          style={styles.TextInputStyle}
        />
 
 
        <TouchableOpacity onPress={this.uploadImageToServer} activeOpacity={0.6} style={styles.button} >
 
          <Text style={styles.TextStyle}> UPLOAD IMAGE TO SERVER </Text>
 
        </TouchableOpacity>
 
      </View>
    );
  }
 
}

I want to upload an image to server and store this image using php