User Registration with PHP & MySQL in React Native || Insert Data with JSON

We will learn how to use PHP MySQL for User registration in react native with JSON.

firstly i create register.php

include 'config.php';
$json = file_get_contents('php://input'); 

// decoding the received JSON and store into $obj variable.
$obj = json_decode($json,true); 
// name store into $name. 
$name = $obj['name']; 
// same with $email. 
$email = $obj['email']; 
// same with $password.
$password = $obj['password'];
if($obj['email']!="")
{ 
$result= $mysqli->query("SELECT * FROM users where email='$email'");
if($result->num_rows>0){
echo json_encode('email already exist');  
// alert msg in react native 
}
else
{ 
$add = $mysqli->query("insert into users (name,email,password) 
values('$name','$email','$password')");
if($add){
echo  json_encode('User Registered Successfully'); 
// alert msg in react native
}
else{
echo json_encode('check internet connection'); 
// our query fail  
}
}
}
else{
echo json_encode('try again');
}

Open postman and test this link https://hardeepcoder.site/api

insert data to mysql then i put that file on online server. next you need to create register.js inside your react native app. Constructor function with variables username, user email and password blank by default.

constructor(props){ 

super(props)  
this.state={ 
userName:'', 
userEmail:'',  
userPassword:''  
} 
}

next we have three textboxes for input

TextInput 
placeholder="Enter Name" 
style={{width:250,margin:10, borderColor:"#333",borderWidth:1}} 
underlineColorAndroid="transparent" 
onChangeText= {userName => this.setState({userName})} 

TextInput 
placeholder="Enter Email" 
style={{width:250,margin:10, borderColor:"#333",borderWidth:1}} 
underlineColorAndroid="transparent" 
onChangeText= {userEmail => this.setState({userEmail})} 

TextInput 
placeholder="Enter Password" 
style={{width:250,margin:10, borderColor:"#333", borderWidth:1}} 
underlineColorAndroid="transparent" 
onChangeText= {userPassword => this.setState({userPassword})}

now create button for click

TouchableOpacity 
onPress={this.userRegister} 
style={{width:250,padding:10, backgroundColor:'magenta',alignItems:'center'}}>

now our main react native function

userRegister = () =>{ 
//alert('ok'); // version 0.48 

const {userName} = this.state;
const {userEmail} = this.state;
const {userPassword} = this.state;

fetch('https://hardeepwork.000webhostapp.com/react/register.php', {
method: 'post',
header:{
'Accept': 'application/json',
'Content-type': 'application/json'
},
body:JSON.stringify({
name: userName,
email: userEmail,
password: userPassword,
})
})
.then((response) => response.json())
.then((responseJson) =>{
alert(responseJson);
})
.catch((error)=>{
console.error(error);
});

}

last but not least is our styles for all input and buttons

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},

welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},

instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});

Thank You