get json data in react native's TextInput

Question

I am just a beginner so help me!

I want to get JSON response in react native TextInput. [ i have 2 pages in react native app. on the first page ==> I want that JSON data and navigate to the second page with that JSON response.

I used PHP as a server-side scripting language. My PHP code is:

<?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 column from JSON $obj array and store into $coulmn.
$firstname = $obj['firstname'];
$lastname = $obj['lastname'];
//$mobileno = $obj['mobileno'];
$email = $obj['email'];
$profession = $obj['profession'];
$mobileno = '7874853188';
//Applying User Login query with mobile number match.
$Sql_Query = "select firstname,lastname,email,profession from member where mobileno = '$mobileno' ";

// 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);

 $first_name = $check[0];
 $last_name = $check[1];
 $email = $check[2];
 $profession = $check[3];

// Echo the message.
 echo $SuccessLoginJson ; 
 }

 else{

 // If the record inserted successfully then show the message.
$InvalidMSG = 'Enter valid phone number' ;

// Converting the message into JSON format.
$InvalidMSGJSon = json_encode($InvalidMSG);

// Echo the message.
 echo $InvalidMSGJSon ;

 }

 mysqli_close($con);
?>

above code is 100% right. [tested on the web page]

In my react native code, first I check for mobile number => if a mobile number is right[exist in the database] then that user can go to the next page with that JSON response.

[response contain 4 fields = first_name, last_name, email, response] My JSON implementation in react native is:

constructor(props) { 
    super(props) 
    this.state = {

    UserMNO: ''
    } 
  }

  UserLoginFunction = () =>{

 const { UserMNO } = this.state;
 const {firstname} = this.state;
 const {lastname} = this.state;
 const {email} = this.state;
 const {profession} =this.state;

fetch('http://demo.weybee.in/react/User_Login.php', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({

  mobileno: UserMNO,

      })

}).then((response) => response.json())
      .then((responseJson) => {
        console.log(responseJson);
        // If server response message same as Data Matched
       if(responseJson === 'Data Matched')
        {   

            //Then open Profile activity and send user email to profile activity.
            this.refs.toast.show('Login successful', 500, () => {
            const { navigation } = this.props;

            const  $firstname   = this.state ;
            const $lastname   = this.state ;
            const  $email   = this.state ;
            const  $profession   = this.state ;
            const { UserMNO }  = this.state ;

            navigation.navigate("Profile",
              {EmailId: $email,
              Name: $firstname+$lastname,
              Profe : $profession,
              mobileno : UserMNO,
              });
    });
        }
        else{

          Alert.alert(responseJson);
        }

      }).catch((error) => {
        console.error(error);
      });

  }

I enter my mobile number here:

My second screen [profile]- where I want my JSON response

essential code of 2nd screen [profile]

<Block middle style={styles.nameInfo}>
                    <Text bold size={28} color="#32325D">
                        {this.props.navigation.getParam("Name")}
                    </Text>
                    <Block width={width * 0.8} style={{ marginBottom: 15 }}>
                      <Input
                        editable = {false}
                        placeholder="Email id"
                        value={this.props.navigation.getParam("EmailId")}
                        style={{marginTop:20, borderRadius:30, borderWidth:3}}
                        iconContent={
                          <Icon
                            size={16}
                            color={argonTheme.COLORS.ICON}
                            name="nav-right"
                            family="ArgonExtra"
                            style={styles.inputIcons}
                          />
                        }
                      />
                    </Block>
                      <Block width={width * 0.8} style={{ marginBottom: 15 }}>
                      <Input
                        editable = {false}
                        placeholder="Mobile Number"
                        value={this.props.navigation.getParam("mobileno")}
                        style={{borderRadius:30, borderWidth:3}}
                        iconContent={
                          <Icon
                            size={16}
                            color={argonTheme.COLORS.ICON}
                            name="nav-right"
                            family="ArgonExtra"
                            style={styles.inputIcons}
                          />
                        }
                      />
                    </Block>
                    <Block width={width * 0.8} style={{ marginBottom: 15 }}>
                      <Input
                        editable = {false}
                        placeholder="profession"
                        value={this.props.navigation.getParam("Profe")}
                        style={{borderRadius:30, borderWidth:3}}
                        iconContent={
                          <Icon
                            size={16}
                            color={argonTheme.COLORS.ICON}
                            name="nav-right"
                            family="ArgonExtra"
                            style={styles.inputIcons}
                          />
                        }
                      />
                    </Block>

                  </Block>

Error says:

failed prop type: invalid prop 'value' of type 'object' supplied to 'TextInput', expected 'string'.

hong developer · Accepted Answer · 2019-06-19 15:17:01Z

1

There seems to be some data you receive that is not string value. You can only set the string value for Textinput. Check the value of the data received and make sure the data is string.

If you just want to get rid of the error,

navigation.navigate("Profile",
              {EmailId: JSON.stringify($email),
              Name: JSON.stringify($firstname+$lastname),
              Profe : JSON.stringify($profession),
              mobileno : JSON.stringify(UserMNO),
              });

answered Jun 19, 2019 at 15:17

hong developer

13.9k4 gold badges46 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alfredo Hinarejos · Accepted Answer · 2019-06-19 12:36:17Z

0

You are not correctly storing the information you receive in this.state

You must call setState() to store the information, and then use its values with this.state.xxx

Once you store with this.setState():

this.setState({profe: YOUR_VALUE})

you should modify this:

value={this.state.profe}

answered Jun 19, 2019 at 12:36

Alfredo Hinarejos

1998 bronze badges

Collectives™ on Stack Overflow

get json data in react native's TextInput

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related