{"id":1707,"date":"2022-06-27T12:24:35","date_gmt":"2022-06-27T05:24:35","guid":{"rendered":"https:\/\/www.bagi2info.com\/?p=1707"},"modified":"2023-01-04T12:13:20","modified_gmt":"2023-01-04T05:13:20","slug":"react-native-expo-login-register-dengan-php-database-mysql","status":"publish","type":"post","link":"https:\/\/www.bagi2info.com\/en\/react-native-expo-login-register-with-php-mysql-database\/","title":{"rendered":"React Native Expo Login\/Register with PHP Mysql database"},"content":{"rendered":"\r\n\r\nHello friends, back to our programming tutorial this time.\r\n\r\nFor friends who are new to React native, it&#8217;s a good idea to read the article <a href=\"https:\/\/www.bagi2info.com\/en\/get-to-know-react-react-native-bare-react-native-and-expo\/\" target=\"_blank\" rel=\"noopener\">Get to know React, React Native, Bare React Native, and Expo first.<\/a>\r\n\r\n\r\n\r\n\r\n<figure class=\"wp-block-gallery columns-3 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\r\n<ul class=\"blocks-gallery-grid\">\r\n \t<li class=\"blocks-gallery-item\">\r\n<figure><a href=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/06\/Screenshot_20220627_102431_host.exp_.exponent.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"473\" height=\"1024\" class=\"wp-image-1766\" src=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/06\/Screenshot_20220627_102431_host.exp_.exponent-473x1024.jpg\" alt=\"\" data-id=\"1766\" data-full-url=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/06\/Screenshot_20220627_102431_host.exp_.exponent.jpg\" data-link=\"https:\/\/www.bagi2info.com\/react-native-expo-login-register-dengan-php-database-mysql\/screenshot_20220627_102431_host-exp-exponent\/\" srcset=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/06\/Screenshot_20220627_102431_host.exp_.exponent-473x1024.jpg 473w, https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/06\/Screenshot_20220627_102431_host.exp_.exponent-138x300.jpg 138w, https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/06\/Screenshot_20220627_102431_host.exp_.exponent-768x1664.jpg 768w, https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/06\/Screenshot_20220627_102431_host.exp_.exponent-709x1536.jpg 709w, https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/06\/Screenshot_20220627_102431_host.exp_.exponent-945x2048.jpg 945w, https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/06\/Screenshot_20220627_102431_host.exp_.exponent.jpg 1080w\" sizes=\"auto, (max-width: 473px) 100vw, 473px\" \/><\/a><\/figure>\r\n<\/li>\r\n \t<li class=\"blocks-gallery-item\">\r\n<figure><a href=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/06\/Screenshot_20220627_102439_host.exp_.exponent.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"473\" height=\"1024\" class=\"wp-image-1767\" src=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/06\/Screenshot_20220627_102439_host.exp_.exponent-473x1024.jpg\" alt=\"\" data-id=\"1767\" data-full-url=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/06\/Screenshot_20220627_102439_host.exp_.exponent.jpg\" data-link=\"https:\/\/www.bagi2info.com\/react-native-expo-login-register-dengan-php-database-mysql\/screenshot_20220627_102439_host-exp-exponent\/\" srcset=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/06\/Screenshot_20220627_102439_host.exp_.exponent-473x1024.jpg 473w, https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/06\/Screenshot_20220627_102439_host.exp_.exponent-138x300.jpg 138w, https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/06\/Screenshot_20220627_102439_host.exp_.exponent-768x1664.jpg 768w, https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/06\/Screenshot_20220627_102439_host.exp_.exponent-709x1536.jpg 709w, https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/06\/Screenshot_20220627_102439_host.exp_.exponent-945x2048.jpg 945w, https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/06\/Screenshot_20220627_102439_host.exp_.exponent.jpg 1080w\" sizes=\"auto, (max-width: 473px) 100vw, 473px\" \/><\/a><\/figure>\r\n<\/li>\r\n \t<li class=\"blocks-gallery-item\">\r\n<figure><a href=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/06\/Screenshot_20220627_102446_host.exp_.exponent.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"473\" height=\"1024\" class=\"wp-image-1768\" src=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/06\/Screenshot_20220627_102446_host.exp_.exponent-473x1024.jpg\" alt=\"register\" data-id=\"1768\" data-full-url=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/06\/Screenshot_20220627_102446_host.exp_.exponent.jpg\" data-link=\"https:\/\/www.bagi2info.com\/react-native-expo-login-register-dengan-php-database-mysql\/screenshot_20220627_102446_host-exp-exponent\/\" srcset=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/06\/Screenshot_20220627_102446_host.exp_.exponent-473x1024.jpg 473w, https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/06\/Screenshot_20220627_102446_host.exp_.exponent-138x300.jpg 138w, https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/06\/Screenshot_20220627_102446_host.exp_.exponent-768x1664.jpg 768w, https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/06\/Screenshot_20220627_102446_host.exp_.exponent-709x1536.jpg 709w, https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/06\/Screenshot_20220627_102446_host.exp_.exponent-945x2048.jpg 945w, https:\/\/www.bagi2info.com\/wp-content\/uploads\/2022\/06\/Screenshot_20220627_102446_host.exp_.exponent.jpg 1080w\" sizes=\"auto, (max-width: 473px) 100vw, 473px\" \/><\/a><\/figure>\r\n<\/li>\r\n<\/ul>\r\n<\/figure>\r\n\r\n\r\n\r\n\r\nThis time we will discuss creating a mobile application using react native with the Expo framework and storing data using the <strong>php API<\/strong> and <strong>mysql<\/strong> database.\r\n\r\nType the following command to install <strong>expo-cli<\/strong> and create a new project<strong> usermanager-app<\/strong>\r\n\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code class=\"language-bash\" lang=\"bash\">npm install --global expo-cli\r\nexpo init usermanager-app<\/code><\/pre>\r\n\r\n\r\n\r\n\r\nProject file structure\r\n\r\n\r\n\r\n\r\n\r\nApp.js\r\n&#8211;pages\/home.js\r\n&#8211;pages\/profile.js\r\n&#8211;pages\/login.js\r\n&#8211;pages\/register.js\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.bagi2info.com\/en\/react-native-expo-login-register-with-php-mysql-database\/#React_Native_Source_Code\" >React Native Source Code:<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.bagi2info.com\/en\/react-native-expo-login-register-with-php-mysql-database\/#1_Appsjs\" >1. Apps.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.bagi2info.com\/en\/react-native-expo-login-register-with-php-mysql-database\/#2_Homejs\" >2. Home.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.bagi2info.com\/en\/react-native-expo-login-register-with-php-mysql-database\/#3_Loginjs\" >3. Login.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.bagi2info.com\/en\/react-native-expo-login-register-with-php-mysql-database\/#4_Registerjs\" >4. Register.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.bagi2info.com\/en\/react-native-expo-login-register-with-php-mysql-database\/#5_Profilejs\" >5. Profile.js<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.bagi2info.com\/en\/react-native-expo-login-register-with-php-mysql-database\/#API_Server\" >API Server<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.bagi2info.com\/en\/react-native-expo-login-register-with-php-mysql-database\/#1_Mysql_Tabel\" >1. Mysql Tabel<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.bagi2info.com\/en\/react-native-expo-login-register-with-php-mysql-database\/#2_configphp\" >2. config.php<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.bagi2info.com\/en\/react-native-expo-login-register-with-php-mysql-database\/#3_registerphp\" >3. register.php<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.bagi2info.com\/en\/react-native-expo-login-register-with-php-mysql-database\/#4_loginphp\" >4. login.php<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"React_Native_Source_Code\"><\/span>React Native Source Code:<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Appsjs\"><\/span>1. Apps.js<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code class=\"language-jsx line-numbers\" lang=\"jsx\">import React, { Component } from 'react';\r\nimport {\r\n  AppRegistry,\r\n  View,\r\n  Text,\r\n  StyleSheet,\r\n  ScrollView,\r\n  TouchableOpacity,\r\n} from 'react-native';\r\n\r\nimport { NavigationContainer } from '@react-navigation\/native';\r\nimport { createStackNavigator } from '@react-navigation\/stack';\r\n\r\nimport HomeScreen from '.\/pages\/home';\r\nimport Login from '.\/pages\/login';\r\nimport Register from '.\/pages\/register';\r\nimport Profile from '.\/pages\/profile';\r\n\r\nconst Stack = createStackNavigator();\r\n\r\nconst App = () =&gt; {\r\n  return (\r\n    &lt;View style={{ flex: 1 }}&gt;\r\n      &lt;NavigationContainer&gt;\r\n        &lt;Stack.Navigator\r\n          screenOptions={{\r\n            \/\/ headerShown: false, \/\/ if not gonna show header\r\n          }}\r\n          &gt;\r\n          &lt;Stack.Screen name=\"HomeScreen\" component={HomeScreen} \/&gt;\r\n          &lt;Stack.Screen name=\"Login\" component={Login} \/&gt;\r\n          &lt;Stack.Screen name=\"Register\" component={Register} \/&gt;\r\n          &lt;Stack.Screen name=\"Profile\" component={Profile} \/&gt;\r\n        &lt;\/Stack.Navigator&gt;\r\n      &lt;\/NavigationContainer&gt;\r\n    &lt;\/View&gt;\r\n  );\r\n};\r\n\r\nexport default App;\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<div class=\"wp-block-spacer\" style=\"height: 100px;\" aria-hidden=\"true\">&nbsp;<\/div>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Homejs\"><\/span>2. Home.js<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code class=\"language-jsx line-numbers\" lang=\"jsx\">import React, { Component } from 'react';\r\nimport { View, Text, StyleSheet, TouchableOpacity } from 'react-native';\r\n\r\nexport default class Home extends Component {\r\n  render() {\r\n    const { navigate } = this.props.navigation;\r\n    return (\r\n      &lt;View style={styles.container}&gt;\r\n        &lt;Text style={styles.pageName}&gt;User Manager&lt;\/Text&gt;\r\n\r\n        &lt;TouchableOpacity onPress={() =&gt; navigate('Login')} style={styles.btn1}&gt;\r\n          &lt;Text style={styles.btnText}&gt;Login&lt;\/Text&gt;\r\n        &lt;\/TouchableOpacity&gt;\r\n\r\n        &lt;TouchableOpacity\r\n          onPress={() =&gt; navigate('Register')}\r\n          style={styles.btn2}&gt;\r\n          &lt;Text style={styles.btnText}&gt;Register&lt;\/Text&gt;\r\n        &lt;\/TouchableOpacity&gt;\r\n      &lt;\/View&gt;\r\n    );\r\n  }\r\n}\r\nconst styles = StyleSheet.create({\r\n  container: {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n  },\r\n  btn1: {\r\n    backgroundColor: 'orange',\r\n    padding: 10,\r\n    margin: 10,\r\n    width: '95%',\r\n  },\r\n  btn2: {\r\n    backgroundColor: 'blue',\r\n    padding: 10,\r\n    margin: 10,\r\n    width: '95%',\r\n  },\r\n  pageName: {\r\n    margin: 10,\r\n    fontWeight: 'bold',\r\n    color: '#000',\r\n    textAlign: 'center',\r\n  },\r\n  btnText: {\r\n    color: '#fff',\r\n    fontWeight: 'bold',\r\n  },\r\n});\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<div class=\"wp-block-spacer\" style=\"height: 100px;\" aria-hidden=\"true\">&nbsp;<\/div>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Loginjs\"><\/span>3. Login.js<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code class=\"language-jsx line-numbers\" lang=\"jsx\">import React, { Component } from 'react';\r\nimport {\r\n  StyleSheet,\r\n  Text,\r\n  View,\r\n  TouchableOpacity,\r\n  TextInput,\r\n  Keyboard,\r\n} from 'react-native';\r\n\r\nexport default class Login extends Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {\r\n      userEmail: '',\r\n      userPassword: '',\r\n    };\r\n  }\r\n\r\n  login = () =&gt; {\r\n    const { userEmail, userPassword } = this.state;\r\n    let reg = \/^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$\/;\r\n    if (userEmail == '') {\r\n      \/\/alert(\"Please enter Email address\");\r\n      this.setState({ email: 'Please enter Email address' });\r\n    } else if (reg.test(userEmail) === false) {\r\n      \/\/alert(\"Email is Not Correct\");\r\n      this.setState({ email: 'Email is Not Correct' });\r\n      return false;\r\n    } else if (userPassword == '') {\r\n      this.setState({ email: 'Please enter password' });\r\n    } else {\r\n      fetch('https:\/\/hardeepwork.000webhostapp.com\/react\/login.php', {\r\n        method: 'post',\r\n        header: {\r\n          Accept: 'application\/json',\r\n          'Content-type': 'application\/json',\r\n        },\r\n        body: JSON.stringify({\r\n          \/\/ we will pass our input data to server\r\n          email: userEmail,\r\n          password: userPassword,\r\n        }),\r\n      })\r\n        .then((response) =&gt; response.json())\r\n        .then((responseJson) =&gt; {\r\n          if (responseJson == 'ok') {\r\n            \/\/ redirect to profile page\r\n            alert('Successfully Login');\r\n            this.props.navigation.navigate('Profile');\r\n          } else {\r\n            alert('Wrong Login Details');\r\n          }\r\n        })\r\n        .catch((error) =&gt; {\r\n          console.error(error);\r\n        });\r\n    }\r\n\r\n    Keyboard.dismiss();\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      &lt;View style={styles.container}&gt;\r\n        &lt;Text style={{ padding: 10, margin: 10, color: 'red' }}&gt;\r\n          {this.state.email}\r\n        &lt;\/Text&gt;\r\n\r\n        &lt;TextInput\r\n          placeholder=\"Enter Email\"\r\n          style={{ width: 200, margin: 10 }}\r\n          onChangeText={(userEmail) =&gt; this.setState({ userEmail })}\r\n        \/&gt;\r\n\r\n        &lt;TextInput\r\n          placeholder=\"Enter Password\"\r\n          style={{ width: 200, margin: 10 }}\r\n          onChangeText={(userPassword) =&gt; this.setState({ userPassword })}\r\n        \/&gt;\r\n\r\n        &lt;TouchableOpacity\r\n          onPress={this.login}\r\n          style={{\r\n            width: 200,\r\n            padding: 10,\r\n            backgroundColor: 'magenta',\r\n            alignItems: 'center',\r\n          }}&gt;\r\n          &lt;Text style={{ color: 'white' }}&gt;Login&lt;\/Text&gt;\r\n        &lt;\/TouchableOpacity&gt;\r\n      &lt;\/View&gt;\r\n    );\r\n  }\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n  container: {\r\n    flex: 1,\r\n    justifyContent: 'center',\r\n    alignItems: 'center',\r\n    backgroundColor: '#F5FCFF',\r\n  },\r\n});\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<div class=\"wp-block-spacer\" style=\"height: 100px;\" aria-hidden=\"true\">&nbsp;<\/div>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_Registerjs\"><\/span>4. Register.js<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code class=\"language-jsx line-numbers\" lang=\"jsx\">import React, { Component } from 'react';\r\nimport {\r\n  StyleSheet,\r\n  Text,\r\n  View,\r\n  TextInput,\r\n  TouchableOpacity,\r\n} from 'react-native';\r\n\r\nexport default class Register extends Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {\r\n      userName: '',\r\n      userEmail: '',\r\n      userPassword: '',\r\n    };\r\n  }\r\n\r\n  userRegister = () =&gt; {\r\n    const { userName } = this.state;\r\n    const { userEmail } = this.state;\r\n    const { userPassword } = this.state;\r\n\r\n    fetch('https:\/\/hardeepwork.000webhostapp.com\/react\/register.php', {\r\n      method: 'post',\r\n      header: {\r\n        Accept: 'application\/json',\r\n        'Content-type': 'application\/json',\r\n      },\r\n      body: JSON.stringify({\r\n        name: userName,\r\n        email: userEmail,\r\n        password: userPassword,\r\n      }),\r\n    })\r\n      .then((response) =&gt; response.json())\r\n      .then((responseJson) =&gt; {\r\n        alert(responseJson);\r\n      })\r\n      .catch((error) =&gt; {\r\n        console.error(error);\r\n      });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      &lt;View style={styles.container}&gt;\r\n        &lt;TextInput\r\n          placeholder=\"Enter Name\"\r\n          style={{\r\n            width: 250,\r\n            margin: 10,\r\n            borderColor: '#333',\r\n            borderWidth: 1,\r\n          }}\r\n          underlineColorAndroid=\"transparent\"\r\n          onChangeText={(userName) =&gt; this.setState({ userName })}\r\n        \/&gt;\r\n\r\n        &lt;TextInput\r\n          placeholder=\"Enter Email\"\r\n          style={{\r\n            width: 250,\r\n            margin: 10,\r\n            borderColor: '#333',\r\n            borderWidth: 1,\r\n          }}\r\n          underlineColorAndroid=\"transparent\"\r\n          onChangeText={(userEmail) =&gt; this.setState({ userEmail })}\r\n        \/&gt;\r\n\r\n        &lt;TextInput\r\n          placeholder=\"Enter Password\"\r\n          style={{\r\n            width: 250,\r\n            margin: 10,\r\n            borderColor: '#333',\r\n            borderWidth: 1,\r\n          }}\r\n          underlineColorAndroid=\"transparent\"\r\n          onChangeText={(userPassword) =&gt; this.setState({ userPassword })}\r\n        \/&gt;\r\n\r\n        &lt;TouchableOpacity\r\n          onPress={this.userRegister}\r\n          style={{\r\n            width: 250,\r\n            padding: 10,\r\n            backgroundColor: 'magenta',\r\n            alignItems: 'center',\r\n          }}&gt;\r\n          &lt;Text style={{ color: '#fff' }}&gt;Signup&lt;\/Text&gt;\r\n        &lt;\/TouchableOpacity&gt;\r\n      &lt;\/View&gt;\r\n    );\r\n  }\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n  container: {\r\n    flex: 1,\r\n    justifyContent: 'center',\r\n    alignItems: 'center',\r\n    backgroundColor: '#F5FCFF',\r\n  },\r\n});\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<div class=\"wp-block-spacer\" style=\"height: 100px;\" aria-hidden=\"true\">&nbsp;<\/div>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"5_Profilejs\"><\/span>5. Profile.js<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code class=\"language-jsx line-numbers\" lang=\"jsx\">import React, { Component } from 'react';\r\nimport { View, Text, StyleSheet } from 'react-native';\r\n\r\nexport default class Profile extends Component {\r\n  render() {\r\n    return (\r\n      &lt;View style={styles.container}&gt;\r\n        &lt;Text style={styles.pageName}&gt;Profile&lt;\/Text&gt;\r\n      &lt;\/View&gt;\r\n    );\r\n  }\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n  container: {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n  },\r\n\r\n  pageName: {\r\n    margin: 10,\r\n    fontWeight: 'bold',\r\n    color: '#000',\r\n    textAlign: 'center',\r\n  },\r\n});\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<div class=\"wp-block-spacer\" style=\"height: 100px;\" aria-hidden=\"true\">&nbsp;<\/div>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"API_Server\"><\/span>API Server<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Mysql_Tabel\"><\/span>1. Mysql Tabel<span class=\"ez-toc-section-end\"><\/span><\/h3>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code class=\"language-sql\" lang=\"sql\">\r\nCREATE TABLE `users` (\r\n  `id` int(11) NOT NULL AUTO_INCREMENT,\r\n  `name` varchar(200) DEFAULT NULL,\r\n  `email` varchar(100) DEFAULT NULL,\r\n  `password` varchar(100) DEFAULT NULL,\r\n  PRIMARY KEY (`id`)\r\n) ENGINE=InnoDB DEFAULT CHARSET=latin1;\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_configphp\"><\/span>2. config.php<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code class=\"language-php line-numbers\" lang=\"php\">&lt;?php\r\n\r\n$mysqli = mysqli_connect(\"localhost\", \"testingdb\", \"test\", \"test@123\");\r\n\r\n\/\/ Check connection\r\nif (mysqli_connect_errno()) {\r\n  \/\/ echo \"Failed to connect to MySQL: \" . mysqli_connect_error();\r\n  \r\n  echo json_encode(array('err' =&gt; true, 'msg' =&gt; mysqli_connect_error()));\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n<div class=\"wp-block-spacer\" style=\"height: 100px;\" aria-hidden=\"true\">&nbsp;<\/div>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_registerphp\"><\/span>3. register.php<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code class=\"language-php line-numbers\" lang=\"php\">&lt;?php include 'config.php';\r\n\r\n$json = file_get_contents('php:\/\/input');\r\n\r\n\/\/ decoding the received JSON and store into $obj variable.\r\n$obj = json_decode($json, true);\r\n\r\n\/\/ name store into $name.\r\n$name = $obj['name'];\r\n\r\n\/\/ same with $email.\r\n$email = $obj['email'];\r\n\r\n\/\/ same with $password.\r\n$password = $obj['password'];\r\n\r\nif ($obj['email'] != \"\") {\r\n\r\n\t\/\/ $result= $mysqli-&gt;query(\"SELECT * FROM users where email='$email'\");\r\n\t$query = sprintf(\r\n\t\t\"SELECT * FROM users WHERE email= '%s' limit 1\",\r\n\t\t$mysqli-&gt;real_escape_string($email)\r\n\t);\r\n\r\n\t$result = $mysqli-&gt;query($query);\r\n\r\n\tif ($result-&gt;num_rows &gt; 0) {\r\n\t\techo json_encode('email already exist');  \/\/ alert msg in react native\t\t \t\t\r\n\t} else {\r\n\t\t\/\/    $add = $mysqli-&gt;query(\"insert into users (name,email,password) values('$name','$email','$password')\");\r\n\t\t$query = sprintf(\r\n\t\t\t\"insert into users (name,email,password) values('%s','%s','%s')\",\r\n\t\t\t$mysqli-&gt;real_escape_string($name),\r\n\t\t\t$mysqli-&gt;real_escape_string($email),\r\n\t\t\t$mysqli-&gt;real_escape_string($password)\r\n\t\t);\r\n\r\n\t\t$result = $mysqli-&gt;query($query);\r\n\t\tif ($add) {\r\n\t\t\techo  json_encode('User Registered Successfully'); \/\/ alert msg in react native\r\n\t\t} else {\r\n\t\t\techo json_encode('check internet connection'); \/\/ our query fail \t\t\r\n\t\t}\r\n\t}\r\n} else {\r\n\techo json_encode('try again');\r\n}\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<div class=\"wp-block-spacer\" style=\"height: 100px;\" aria-hidden=\"true\">&nbsp;<\/div>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_loginphp\"><\/span>4. login.php<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code class=\"language-php line-numbers\" lang=\"php\">&lt;?php include 'config.php';\r\n\r\n$json = file_get_contents('php:\/\/input');\r\n$obj = json_decode($json, true);\r\n\r\n$email = $obj['email'];\r\n\r\n$password = $obj['password'];\r\n\r\nif ($obj['email'] != \"\") {\r\n\r\n\t\/\/ $result= $mysqli-&gt;query(\"SELECT * FROM users where email='$email' and password='$password'\");\r\n\r\n\t$query = sprintf(\r\n\t\t\"SELECT * FROM users WHERE email= '%s' and password='%s' limit 1\",\r\n\t\t$mysqli-&gt;real_escape_string($email),\r\n\t\t$mysqli-&gt;real_escape_string($password)\r\n\t);\r\n\r\n\t$result = $mysqli-&gt;query($query);\r\n\r\n\tif ($result-&gt;num_rows == 0) {\r\n\t\techo json_encode('Wrong Details');\r\n\t} else {\r\n\t\techo json_encode('ok');\r\n\t}\r\n} else {\r\n\techo json_encode('try again');\r\n}\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<div class=\"wp-block-spacer\" style=\"height: 100px;\" aria-hidden=\"true\">&nbsp;<\/div>\r\n\r\n\r\n\r\n\r\nSnack Expo Link : <a href=\"https:\/\/snack.expo.dev\/@rudiahmad\/usermanager-login-register-form-with-mysql-php-json\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/snack.expo.dev\/@rudiahmad\/usermanager-login-register-form-with-mysql-php-json<\/a>\r\n\r\n\r\n\r\n\r\n\r\nGithub : <a href=\"https:\/\/github.com\/rudiahmad\/UserManager-Login-Register-Form-with-Mysql-PHP-json\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/github.com\/rudiahmad\/UserManager-Login-Register-Form-with-Mysql-PHP-json<\/a>\r\n\r\n\r\n\r\n\r\n\r\nThe above project is forked from the source below using the latest version of expo and react native\r\n\r\n\r\n\r\n\r\n\r\n<a href=\"https:\/\/github.com\/Hardeepcoder\/UserManager---React-Native\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/github.com\/Hardeepcoder\/UserManager&#8212;React-Native<\/a>\r\n\r\n","protected":false},"excerpt":{"rendered":"<p>Hello friends, back to our programming tutorial this time. For friends who are new to React native, it&#8217;s a good idea to read the article Get to know React, React Native, Bare React Native,&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":1768,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,2,173],"tags":[79,151,82,62,150,145],"class_list":["post-1707","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-featured","category-komputer","category-react-native","tag-android","tag-expo","tag-mysql","tag-php","tag-react-native","tag-source-code"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/1707","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/comments?post=1707"}],"version-history":[{"count":2,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/1707\/revisions"}],"predecessor-version":[{"id":3639,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/1707\/revisions\/3639"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/media\/1768"}],"wp:attachment":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/media?parent=1707"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/categories?post=1707"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/tags?post=1707"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}