title: Login React Native MySQL
body: <p>We been having an issue with our login code. We keep receiving an SyntaxError: JSON Parse Error:</p>
  
  <p><a href="https://i.stack.imgur.com/eBUWe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eBUWe.png" alt="enter image description here"></a></p>
  
  <p>We narrowed down the response error happens during one of the .then(response) lines or in the php code. I'm not sure what I'm doing wrong here. Any help?!</p>
  
  <p>loginScreen.js</p>
  
  <pre><code>login = () =&gt;{
      const { UserEmail }  = this.state ;
      const { UserPassword }  = this.state ;
  
      fetch('http://localhost:65535/login.php', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          user_email: UserEmail,
          user_pass: UserPassword
        })
       //Error within line 59-61 or php
      })
      .then((response) =&gt; response.json())
      .then((responseJson) =&gt; {
          // If server response message same as Data Matched
          if(responseJson === 'Data Matched'){
              alert("Correct");     
          } else{
              alert("Incorrect");
          }
  
       }).catch((error) =&gt; {
           console.error(error);
       });
  
  }
  
  
    render() {
      return (
        &lt;View style={styles.container}&gt;
          &lt;ScrollView
            style={styles.container}
            contentContainerStyle={styles.contentContainer}&gt;
            &lt;View style={styles.welcomeContainer}&gt;
              &lt;Image
                source={
                  __DEV__
                    ? require('../assets/images/HootLogo.png')
                    : require('../assets/images/robot-prod.png')
                }
                style={styles.welcomeImage}
              /&gt;
            &lt;/View&gt;
  </code></pre>
  
  <p>login.php Seems like everything is laid out correctly and works functionaly. I tried changing ' to ` and everything. </p>
  
  <pre><code>&lt;?php
  
   // Importing DBConfig.php file.
   include 'DBConfig.php';
  
   // Creating connection.
   $con = mysqli_connect($HostName,$HostUser,$HostPass,$DatabaseName);
  
   // Getting the received JSON into $json variable.
   $json = file_get_contents('php://input');
  
   // decoding the received JSON and store into $obj variable.
   $obj = json_decode($json,true);
  
   // Populate User email from JSON $obj array and store into $email.
   $user_email = $obj['user_email'];
  
   // Populate Password from JSON $obj array and store into $password.
   $user_pass = $obj['user_pass'];
  
   //Applying User Login query with email and password match.
   $Sql_Query = "select * from wp_users where user_email = '$user_email' and user_pass = '$user_pass' ";
  
   // Executing SQL Query.
   $check = mysqli_fetch_array(mysqli_query($con,$Sql_Query));
  
  
   if(isset($check)){
       $SuccessLoginMsg = 'Data Matched';
  
       // Converting the message into JSON format.
       $SuccessLoginJson = json_encode($SuccessLoginMsg);
  
       // Echo the message.
       echo $SuccessLoginJson ; 
  
   } else{
  
       // If the record inserted successfully then show the message.
       $InvalidMSG = 'Invalid Username or Password Please Try Again' ;
  
       // Converting the message into JSON format.
       $InvalidMSGJSon = json_encode($InvalidMSG);
  
       // Echo the message.
       echo $InvalidMSGJSon ;
  
   }
  
   mysqli_close($con);
  ?&gt;
  </code></pre>
  
  <p>Full JS Code</p>
  
  <pre><code>import React, { Component } from 'react';
  import {
    AppRegistry,
    Image,
    Input, 
    Platform,
    Button,
    Keyboard,
    ScrollView,
    StyleSheet,
    Text,
    TouchableOpacity,
    TextInput,
    View,
  } from 'react-native';
  
  import { StackNavigator } from 'react-navigation';
  
  
  
  export default class login extends Component {
      static navigationOptions= ({navigation}) =&gt;({
            title: 'Login',   
            headerRight:  
  
            &lt;TouchableOpacity
              onPress={() =&gt; navigation.navigate('Home')}
              style={{backgroundColor: '#f7f7f7'}}&gt;
  
            &lt;/TouchableOpacity&gt;
      });  
      constructor(props){
          super(props)
          this.state={
              userEmail:'',
              userPassword:''
          }
      }
  
      login = () =&gt;{
      const { UserEmail }  = this.state ;
      const { UserPassword }  = this.state ;
  
      fetch('http://192.168.0.13:65535/login.php', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
  
          user_email: UserEmail,
  
          user_pass: UserPassword
  
        })
  
      }).then((response) =&gt; response.json())
            .then((responseJson) =&gt; {
  
              // If server response message same as Data Matched
             if(responseJson === 'Data Matched')
              {
  
                  //Then open Profile activity and send user email to Home After Login. 
                  alert(responseJson);
  
              }
              else{
                alert(responseJson);
              }
  
            }).catch((error) =&gt; {
              console.error(error);
            });
  
        }
  
  
    render() {
      return (
        &lt;View style={styles.container}&gt;
          &lt;ScrollView
            style={styles.container}
            contentContainerStyle={styles.contentContainer}&gt;
            &lt;View style={styles.welcomeContainer}&gt;
              &lt;Image
                source={
                  __DEV__
                    ? require('../assets/images/HootLogo.png')
                    : require('../assets/images/robot-prod.png')
                }
                style={styles.welcomeImage}
              /&gt;
            &lt;/View&gt;
  
            &lt;View style={styles.errorContainer}&gt;    
              &lt;Text style={{padding:10,margin:10,color:'red'}}&gt;{this.state.email}&lt;/Text&gt;
            &lt;/View&gt;
  
  
            &lt;View style={styles.container}&gt;
                &lt;Text style={styles.headerText}&gt;Username&lt;/Text&gt;
            &lt;/View&gt;
  
            &lt;TextInput
            placeholder="Enter Email"
            style={styles.input}
            onChangeText={userEmail =&gt; this.setState({userEmail})}
            /&gt;
  
            &lt;View style={styles.container}&gt;
                &lt;Text style={styles.headerText}&gt;Password&lt;/Text&gt;
            &lt;/View&gt;
  
            &lt;TextInput
            placeholder="Enter Password"
            style={styles.input}
            secureTextEntry
            onChangeText={userPassword =&gt; this.setState({userPassword})}
            /&gt;
  
            &lt;TouchableOpacity style={styles.buttonContainer}
            onPress={this.login}&gt;
            &lt;Text style={styles.buttonText}&gt;Login&lt;/Text&gt;
            &lt;/TouchableOpacity&gt;
  
            &lt;View style={styles.loginContainer}&gt;
              &lt;Text style={styles.loginText}&gt;Don't Have an Account?&lt;/Text&gt;
  
              &lt;TouchableOpacity style={styles.emailButtonContainer}
              onPress={() =&gt; this.props.navigation.navigate('Links')}&gt;
                &lt;Text style={styles.loginButtonText}&gt;Register&lt;/Text&gt;
              &lt;/TouchableOpacity&gt;
            &lt;/View&gt;
  
  
        &lt;/ScrollView&gt;
      &lt;/View&gt;
    );
    }
  }
  
  const styles = StyleSheet.create({
      container: {
      flex: 1,
      backgroundColor: '#fff',
    },
  
    contentContainer: {
      paddingTop: 10,
    },
  
    welcomeContainer: {
      alignItems: 'center',
    },
  
    welcomeImage: {
      width: 250,
      height: 230,
      resizeMode: 'contain',
      marginLeft: -10,
    },
  
    errorContainer: {
        flex: 1,
        backgroundColor: '#fff',
        marginTop: -55,
        alignSelf: 'center',
      },
  
    headerText: {
      fontSize: 20,
      color: 'rgba(96,100,109, 1)',
      lineHeight: 24,
      marginLeft: 50,
      marginBottom: 10,
    },
  
    input: {
      height: 40,
      borderBottomColor: 'rgba(0,0,0,0.4)',
      borderBottomWidth: 3,
      padding: 10,
      marginBottom: 10,
      marginHorizontal: 50,
    },
  
    buttonContainer: {
      backgroundColor: '#78AA3A',
      padding: 15,
      marginTop: 10,
      marginHorizontal: 50,
      borderColor: '#fff',
      borderRadius:10,
      borderWidth: 1,
    },
  
    buttonText: {
      textAlign: 'center',
      color: '#FFFFFF',
    },
  
    loginContainer: {
      textAlign: 'center',
      marginTop: 10,
      flexDirection: 'row',
    },
  
    loginText: {
      marginLeft: 80,
      marginBottom: 20,
      color: 'rgba(0,0,0,0.4)',
      fontSize: 14,
      lineHeight: 19,
    },
  
    loginButtonText: {
      fontSize: 14,
      color: '#78AA3A',
      paddingLeft: 5 
    },
  });
  
  AppRegistry.registerComponent('login', () =&gt; login);
  </code></pre>