React Native Pass data to another screen

Question

I need to pass some data from one screen to another, but I don't know how to do it. I've searched and I read about Redux, but it is a bit complicated since I never used it and most of the tutorials are confusing for a newcomer. But if I could do it without Redux, that would be better.

So, when I click in a button, It runs this:

  onSearch() {
    var listaCarros = fetch(`URL`, {
        method: 'GET',
        })
      .then((response) => { return response.json() } )
      .then((responseJson) => {
        console.log(responseJson)
      })
  }

and I want to pass the data I get from this, to another screen. Im using router-flux, if that matters.

score 1 · Accepted Answer · answered Apr 04 '17 at 14:02

1

you can save the response in state of your current component like

onSearch() {
    var listaCarros = fetch(`URL`, {
        method: 'GET',
        })
      .then((response) => { return response.json() } )
      .then((responseJson) => {
        console.log(responseJson);
        /*for react-native-router-flux you can simply do
         Actions.secondPage({data:responseJson});  and you will get data at SecondPage in props

       */
        this.setState({
         dataToPass :responseJson
        });
      })
}

then below in return like you want to pass data to a new component having named as SecondPage, you can do it in following way

render(){
  return(
   {this.state.dataToPass && <SecondPage data ={this.state.dataToPass}>} //you will get data as props in your second page
  );
}

answered Apr 04 '17 at 14:02

Manjeet Singh

4,382
4
26
39

Thanks for the response! So, I used the Actions.secondPage. How can I show the data on the second screen? – waze Apr 04 '17 at 14:20
see you will get props on 2nd page do console.log(this.props) in your componentDidMount of 2nd page, observe your logs in your chrome debugger and there you can see that your props object have a data key – Manjeet Singh Apr 04 '17 at 14:36
Since im passing an array, I need a ListView to show all the data right? But for that I need `this.state.data.cloneWithRows(responseJson)`, but since Im using `Actions.secondPage({data: responseJson})` how can I use the ListView? @Manjeet – waze Apr 04 '17 at 15:30
see my answer to http://stackoverflow.com/questions/43007259/add-object-to-array-js/43007873#43007873 and Listview documentation – Manjeet Singh Apr 04 '17 at 15:34

React Native Pass data to another screen

1 Answers1