React-native Post request API call
In this article, we learn about React-native Fetch POST request registration form
on the last post, we created on registration form UI so we going to use these registrations form here and using Fetch POST request to send data I have created one table as follow
API code is written in PHP I will write another article for API code
1. Create a project using the following command
1 |
react-native init ApiCallExample |
2. Import following in your projects App.js
1 2 3 4 |
import React, {Component} from 'react'; import {Platform, StyleSheet, Text, TextInput, View, Dimensions,TouchableOpacity,Button,Alert,Image, ImageBackground,StatusBar} from 'react-native'; |
3. Define constructor
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
constructor(props) { super(props); //this.login= this.login.bind(this); this.registerCall = this.registerCall.bind(this); var {height, width} = Dimensions.get('window'); this.state = {screenHeight: height, screenWidth: width, Usrname: '', email : '', password: '', status: '', wholeResult: '', baseUrl: 'http://192.168.0.101/android_login_api/' }; } |
In this constructor, I defined a registerCall method also define username, email, password and baseUrl in react-native state
4. form UI
create form UI with the help of component as follows
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
return ( <ImageBackground source={require('./image/ic_background.jpg')} imageStyle={{resizeMode: 'stretch'}} style={{width: '100%', height: '100%'}}> <StatusBar backgroundColor="#0B7600" barStyle="light-content"/> <View style={styles.container}> <Text style={styles.input}>Registeration</Text> <View style={styles.inputContainer}> <TextInput style={styles.inputs} placeholder="Usrname" keyboardType="email-address" underlineColorAndroid='transparent' onChangeText={(Usrname) => this.setState({Usrname})}/> </View> <View style={styles.inputContainer}> <TextInput style={styles.inputs} placeholder="Email" keyboardType="email-address" underlineColorAndroid='transparent' onChangeText={(email) => this.setState({email})}/> </View> <View style={styles.inputContainer}> <TextInput style={styles.inputs} placeholder="Password" secureTextEntry={true} underlineColorAndroid='transparent' onChangeText={(password) => this.setState({password})}/> </View> <TouchableOpacity style={styles.submitButtonText} onPress={() => this.onClickListener('sign_up')}> <Text style={styles.signUpText}>Sign up</Text> </TouchableOpacity> </View> </ImageBackground> ); |
add three TextInputLayout for Username, email, password and create one Sign up button using TouchableOpacity also added onChangeText will call when text change on TextInputLayout and set these value in the setState
1 |
onChangeText={(Usrname) => this.setState({Usrname})} |
then add onClickListener to text button view as follows
1 2 3 |
<TouchableOpacity style={styles.submitButtonText} onPress={() => this.onClickListener('sign_up')}> <Text style={styles.signUpText}>Sign up</Text> </TouchableOpacity> |
This is our style sheet
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, input: { margin: 15, fontSize: 40, marginBottom : 40, color : 'blue' }, submitButton: { backgroundColor: '#7a42f4', padding: 10, margin: 15, height: 60, }, submitButtonText:{ color: '#FFFFFF', backgroundColor: '#3462FD', width:350, height:45, borderRadius:10, justifyContent: 'center', alignItems: 'center' }, signUpText:{ color: '#FFFFFF', alignItems: 'center' }, inputContainer: { borderBottomColor: '#05C203', backgroundColor: '#FFFFFF', borderRadius:5, borderBottomWidth: 1, width:350, height:45, marginBottom:20, flexDirection: 'row', alignItems:'center' }, inputs:{ height:45, marginLeft:16, borderBottomColor: '#FFFFFF', flex:1, }, }) |
Then we write Fetch POST API call as follows
create a method which we had defined in the constructor registerCall in this method first define one variable and assign this to that variable as follows
1 2 3 |
registerCall(){ var that = this; } |
then defined your URL below that
1 2 3 4 |
registerCall(){ var that = this; var url = that.state.baseUrl + 'register.php'; } |
if you want to pass parameters from URL then use that.state.username not this.state.username
after that write fetch post method inside registerCall as follows
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
fetch(url,{ method: 'POST', body: JSON.stringify({"name": this.state.Usrname, "email": this.state.email, "password": this.state.password}) }).then(function (response) { return response.json(); }).then(function (result) { // console.log(result); if(!result.error){ that.setState({ status: result.error, wholeResult: result, }); Alert.alert("User register successfully \n userId: "+that.state.wholeResult.user.uid); console.log(that.state.wholeResult.user.uid); }else{ Alert.alert(result.error_msg); console.log(result); } }).catch(function (error) { console.log("-------- error ------- "+error); alert("result:"+error) }); |
In above Fetch POST API call we are passing the body parameters like this
1 2 3 |
body: JSON.stringify({"name": this.state.Usrname, "email": this.state.email, "password": this.state.password}) |
After success response, we are setting whole response data in the state that set the complete code for App.js is below
5. App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 |
import React, {Component} from 'react'; import {Platform, StyleSheet, Text, TextInput, View, Dimensions,TouchableOpacity, Button,Alert,Image,ImageBackground,StatusBar} from 'react-native'; export default class App extends Component<Props> { constructor(props) { super(props); //this.login= this.login.bind(this); this.registerCall = this.registerCall.bind(this); var {height, width} = Dimensions.get('window'); this.state = {screenHeight: height, screenWidth: width, Usrname: '', email : '', password: '', status: '', wholeResult: '', baseUrl: 'http://192.168.0.101/android_login_api/' }; } onClickListener = (viewId) => { // Alert.alert(this.state.Usrname+" "+this.state.email+" "+this.state.password , "View_id "+viewId); if(this.state.Usrname || this.state.Usrname != " "){ if(this.state.email){ if(this.state.password){ this.registerCall(); }else{ Alert.alert("Please enter email"); } }else{ Alert.alert("Please enter email"); } }else{ Alert.alert("Please enter username"); } } registerCall(){ var that = this; var url = that.state.baseUrl + 'register.php'; console.log("url:"+url); fetch(url,{ method: 'POST', body: JSON.stringify({"name": this.state.Usrname, "email": this.state.email,"password": this.state.password}) }).then(function (response) { return response.json(); }).then(function (result) { // console.log(result); if(!result.error){ that.setState({ status: result.error, wholeResult: result, }); Alert.alert("User register successfully \n userId: "+that.state.wholeResult.user.uid); console.log(that.state.wholeResult.user.uid); }else{ Alert.alert(result.error_msg); console.log(result); } }).catch(function (error) { console.log("-------- error ------- "+error); alert("result:"+error) }); } render() { return ( <ImageBackground source={require('./image/ic_background.jpg')} imageStyle={{resizeMode: 'stretch'}} style={{width: '100%', height: '100%'}}> <StatusBar backgroundColor="#0B7600" barStyle="light-content"/> <View style={styles.container}> <Text style={styles.input}>Registeration</Text> <View style={styles.inputContainer}> <TextInput style={styles.inputs} placeholder="Usrname" keyboardType="email-address" underlineColorAndroid='transparent' onChangeText={(Usrname) => this.setState({Usrname})}/> </View> <View style={styles.inputContainer}> <TextInput style={styles.inputs} placeholder="Email" keyboardType="email-address" underlineColorAndroid='transparent' onChangeText={(email) => this.setState({email})}/> </View> <View style={styles.inputContainer}> <TextInput style={styles.inputs} placeholder="Password" secureTextEntry={true} underlineColorAndroid='transparent' onChangeText={(password) => this.setState({password})}/> </View> <TouchableOpacity style={styles.submitButtonText} onPress={() => this.onClickListener('sign_up')}> <Text style={styles.signUpText}>Sign up</Text> </TouchableOpacity> </View> </ImageBackground> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, input: { margin: 15, fontSize: 40, marginBottom : 40, color : 'blue' }, submitButton: { backgroundColor: '#7a42f4', padding: 10, margin: 15, height: 60, }, submitButtonText:{ color: '#FFFFFF', backgroundColor: '#3462FD', width:350, height:45, borderRadius:10, justifyContent: 'center', alignItems: 'center' }, signUpText:{ color: '#FFFFFF', alignItems: 'center' }, inputContainer: { borderBottomColor: '#05C203', backgroundColor: '#FFFFFF', borderRadius:5, borderBottomWidth: 1, width:350, height:45, marginBottom:20, flexDirection: 'row', alignItems:'center' }, inputs:{ height:45, marginLeft:16, borderBottomColor: '#FFFFFF', flex:1, }, }) |
make sure after coding complete run following command in the project root folder which builds the project
1 |
react-native run-android |
to see the log of API call run following command in the project root folder
1 |
react-native log-android |
6. Output:

Response
1 2 3 4 5 6 7 8 9 10 11 |
{ "error": false, "error_msg": "", "user": { "uid": "5bfaeef2962957.31026319", "name": "techup", "email": "contact@techup.com", "created_at": "2018-11-25 13:58:13", "updated_at": null } } |
enjoy coding… 🙂
I appreciate, cause I found exactly what I was looking for. You have ended my 4 day long hunt! God Bless you man. Have a nice day. Bye
Thanks a lot 🙂
Thanks for finally writing about >React Native – Fetch POST request registration form <Liked it!
Welcome 🙂
Looking forward to reading more. Great article. Really Cool.
Thank you 🙂
My brother suggested I might like this website.
He was entirely right. This post actually made my day.
You can not imagine simply how much time I had spent for this information! Thanks!
Thank you 🙂
Im thankful for the blog.Really looking forward to read more. Really Cool.
Thank you 🙂