POST data request on server via react native? - react-native

Question

Basically what i'm trying to do is, on click of login button it should take my input data and check whether the data is valid for authentication and send back response to user and display on UI. After authentication it should be redirected to home screen. I tried using fetch but it's not working. Below is the code:
import React, { Component } from 'react';
import {
AppRegistry,
Text,
Image,
View,
StyleSheet,
TextInput,
Linking,
Alert,
Navigator
} from 'react-native';
import { Button } from 'react-native-elements';
import t from 'tcomb-form-native';
const Form = t.form.Form;
// here we are: define your domain model
const Email = t.subtype(t.Str, (email) => {
const reg = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return reg.test(email);
});
const LoginFields = t.struct({
username: Email, // a required string
password: t.String, // a required string
});
const options = {
fields: {
password: {
type: 'password',
placeholder: 'Password',
error: 'Password cannot be empty'
},
username: {
placeholder: 'e.g: abc#gmail.com',
error: 'Insert a valid email'
}
}
}; // optional rendering options (see documentation)
export class ChildComponent extends Component {
render() {
if(this.props.result) {
var res = this.props.result.map((item, i) => {
return(
<Text key={i}>{item.useremail}</Text>
)
})
}
return (
<View>
{res}
</View>
)
}
}
export default class Login extends Component {
constructor(props) {
super(props);
this.state = {
buttonState: true,
value: {}
}
}
_onSubmit() {
const value = this.refs.form.getValue();
if (value) { // if validation fails, value will be null
console.log(value);
// value here is an instance of LoginFields
}
componentDidMount() {
fetch('http://192.168.100.160:6016/admin/login', {
method: 'POST',
headers: {
'Accept': 'application/x-www-form-urlencoded',
'Content-Type': 'application/x-www-form-urlencoded',
},
body: JSON.stringify({
useremail: 'kirti#pws.com',
userpassword: '1234',
})
})
.then((response) => response.json())
.then((responseJson) => {
this.setState ({
data: responseJson.admin/login
})
})
}
this.props.navigator.push({
id: 'Home'
});
}
onChange = () => {
const value = this.refs.form.getValue();
if(value) {
this.setState({
value,
buttonState: false
});
}
}
render() {
return (
<View style={styles.container}>
<View style={styles.header}>
</View>
<View style={styles.content}>
<Text style={styles.contentHeader}>
Pateast Login
</Text>
<View style={styles.loginFormContent}>
<Form
ref="form"
type={LoginFields}
options={options}
value={this.state.value}
onChange={this.onChange}
/>
<Text style={{color: 'blue', marginBottom: 10}}
onPress={() => Linking.openURL('https://www.google.co.in')}>
Forgot Password?
</Text>
<Button
raise
icon={{name: 'key', type: 'octicon'}}
onPress={this._onSubmit.bind(this)}
title="Login"
disabled={this.state.buttonState}
accessibilityLabel="Ok, Great!"
/>
</View>
</View>
<View style={styles.footer}>
</View>
<ChildComponent status={this.state.status} result={this.state.data} />
</View>
);
}
}
const styles = StyleSheet.create(
{
container: {
flex: 1
},
contentHeader: {
// fontFamily: 'sans-serif-condensed',
fontWeight: 'bold',
fontSize: 40,
alignSelf: 'center',
marginBottom: 30
},
header : {
flex: 0.5,
backgroundColor: '#008080'
},
content: {
flex: 10,
backgroundColor: '#f8f8ff',
justifyContent: 'center'
},
loginFormContent: {
marginHorizontal: 20
},
footer: {
flex: 0.5,
backgroundColor: '#008080'
},
loginText: {
fontSize: 20,
marginBottom: 10
},
inputFields: {
fontSize: 20,
borderStyle: 'solid',
borderColor: '#000000',
borderRadius: 30,
marginBottom: 10
}
}
);

Answer 1

you were just one step away from your goal. The only thing you have to change is your body object in your post request. This object has to be a FormData https://developer.mozilla.org/de/docs/Web/API/FormData
Try to set the body like this:
let data = new FormData();
data.append("useremail", 'kirti#pws.com');
data.append("userpassword", '1234');
After that your fetch request should look like this:
fetch('http://192.168.100.160:6016/admin/login', {
method: 'POST',
headers: {
'Accept': 'application/x-www-form-urlencoded',
'Content-Type': 'application/x-www-form-urlencoded',
},
body: data
}
...