Posting to a server multiple parameters at once - React Native - react-native

Question

I have a project where I am fetching from an API some data and I am rendering those data in React Native. After rendering, I am displaying a list of documents and when I click in one of them I pass some values to next page which includes Name, Description of the document and input fields. Then I sign the document.
So, I want to log all these values (Title, description, user input values and user signature) and POST them using fetch() to my server.
Please let me know if you need further explanation, thanks for any suggestion!
Here is the code of the class where I am displaying everything, I dont think you will need the homepage code:
class DetailScreen extends React.Component {
state = {
isModalVisible: false
};
_toggleModal = () =>
this.setState({ isModalVisible: !this.state.isModalVisible });
constructor(props) {
super(props);
this.state = {
signature: null,
}
this.postToBmp();
}
static navigationOptions = {
title: 'Content of selected'
};
handleSignature = signature => {
this.setState({ signature }), this.setState({ isModalVisible: false });
};
postToBmp = () => {
fetch('https://myurl', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
'Connection': 'Keep-Alive',
},
credentials: 'include',
body: JSON.stringify({
from: 'test#test.dk',
attachmentName: 'The PDF file name',
recipientFullName: 'My name',
to: [
'<test#test.com>'
]
})
})
}
renderTextandInputs = (obje) => {
console.log("KEYVALUES:", obje.keyValues)
var keyvalue_to_json = JSON.parse(obje.keyValues);
var foundTextFields = [];
for (let i = 0; i < keyvalue_to_json.length; i++) {
if (keyvalue_to_json[i].type === 'textfield') {
foundTextFields.push(<TextInput style={{ borderWidth: 1, flex: 1, alignItems: 'flex-start' }}>{keyvalue_to_json[i].placeholderText}</TextInput>)
}
}
return (
<View>
<ListItem
title={obje.name}
subtitle={obje.description}
/>
<View >
{foundTextFields}
</View>
</View>
)
}
render() {
const style = `.m-signature-pad--footer
.button {
background-color: red;
color: #FFF;
}`;
const obj = this.props.navigation.state.params.item;
var propsArray = [];
const itemArray = Object.assign(obj)
propsArray.push(itemArray)
keyExtractor = (item, index) => {
return index.toString();
}
return (
<View style={{ flex: 1, justifyContent: "center" }}>
<View style={{ flex: 1, alignItems: 'stretch' }}>
<FlatList
key={propsArray.key}
data={propsArray}
renderItem={({ item }) => this.renderTextandInputs(item)}
/>
</View>
<View >
{this.state.signature ? (
<Image
resizeMode={"contain"}
style={{ width: 150, height: 114 }}
source={{ uri: this.state.signature }}
/>
) : null}
</View>
<Modal isVisible={this.state.isModalVisible}
onBackdropPress={() => this.setState({ isModalVisible: false })}
>
<View style={{ flex: 1 }}>
</View>
<Signature
width="100"
onOK={this.handleSignature}
descriptionText="Please draw your signature"
clearText="Clear"
confirmText="Save"
webStyle={signature_styles}
/>
</Modal>
<View>
<Button title="SIGN" onPress={this._toggleModal} />
</View>
</View>
);
}
Here is a screenshot of the home page where I am displaying a list of documents from API:
This is a screenshot of second page where I displaying name, description, textinputs from API and I sign the document using a component: