Pass JSON data to next page in react native

Question

I am a beginner and still learning to react native.

In my react native App, I have 2 screens. In the first page, I have JSON data [fetched from live server]; I want to pass this JSON data to the next page.

I used react-navigation for navigating between pages. I passed one data[Mobile number] to the next page.

But I couldn't figure out, how to pass JSON data to next page!

first-page code : [which contain JSON data]

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) => {
        // If server response message same as Data Matched
       if(responseJson != 'Enter valid phone number' )
        {   

            console.log(responseJson[0]);
            console.log(responseJson[1]);
            console.log(responseJson[2]);
            console.log(responseJson[3]);
            //Then open Profile activity and send user email to profile activity.
            this.refs.toast.show('Login successful', 500, () => {
            const { navigation } = this.props;

            const { UserMNO }  = this.state ;

            navigation.navigate("Profile",
              {mobileno : UserMNO},
              );
    });
        }
        else{

          Alert.alert(responseJson);
        }

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

  }

console.log of first page's JSON data

second-page code: [where I need JSON data]

     <Block flex style={styles.profileCard}>
                <Block middle style={styles.avatarContainer}>
                  <Image
                    source={{ uri: Images.ProfilePicture }}
                    style={styles.avatar}
                  />
                </Block>

                <Block flex>

                  <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>

screenshot of second screen

Error

does not pass anything

Answer 1

You can send your response JSON like this:

navigation.navigate(
              "Profile", 
              {mobileno: UserMNO, myJSON: responseJson} 
);

and get it in second screen:

const responseJson = this.props.navigation.getParam("myJSON");