Problem passing props from one scene to another in ignite

[sayedatif]

Hey guys i want to pass props from one scene to another using ignite as a boilerplate application but could not achieve success . Here is the code through which i am pushing it onPress={() => this.props.navigator.push({Routes.ModalData, passProps : {modalData: this.state.modalData},})}

and on the another scene i am calling it

constructor (props) {
    super(props)
    this.state = {
      modalData: this.props.modalData,
    }
  }

can anybody help me how to pass props in ignite? Thanks in advance

[skellock]

Looks like you're using the older style of Navigation. In the new react-native-router-flux implementation it's really straight forward.

In your version, have a look at your Router.js. See the renderScene function? See the createElement function call? Add this to the end of the 2nd parameter (right after the navigator: navigator line:

...route.passProps

[sayedatif]

@skellock do i need to update my onPress after adding that line currently it is

onPress={() => this.props.navigator.push(Routes.ModalData)}

and in the other scene i am just calling the props in the constructor

[skellock]

Yes. That will need to be changed to become a function to pass through the variable.

[sayedatif]

@skellock i am getting error while i added a line in ...route.passProps it says unexpected token

here is the snipet

return React.createElement(route.component, {
      navigator: navigator ...route.passProps
    })

[skellock]

It's another key, so you'll need a comma.

[sayedatif]

@skellock can you tell me why i am getting an error called undefined is not an object on button press here is the function through which i am passing props

modalButtonPress() {
    this.props.navigator.push({
      component: require('../Containers/ModalData').default,
      passProps: {modaldata: this.state.modaldata}
    });
  }

can you correct me where i am going wrong?

[skellock]

this is not bound properly. A couple of ways out, but try this in your constructor:

this.modalButtonPress = this.modalButtonPress.bind(this).

[sayedatif]

@skellock after passing props successfully i can see the receive data in console.log but when i am trying to print the receive props using

 <View style={style.mainContainer}>
        <Text>{this.state.modalData}</Text>
      </View> 

but error popping up as Objects are not valid as a React child (found: object with keys {_index, _type, _id, _version, found, _source}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of Text. why thus this coming up

[skellock]

You can't print an JS object. At this point, you're ready to start rendering things with <Text> nodes. Probably from your _source object as that looks like Elastic Search.

We're drifting a bit beyond Ignite at this point, so I'll close this up here... but yup, you've got a valid object and hurdled through JS scope issues. You're ready to draw!

🎉

[sayedatif]

thanks for your time i will look into it @skellock one final question thus react-native-router-flux is more easy and efficient than navigator?

[skellock]

Hell ya!

If you're not too deep, switch it up. It may feel a bit onerous, but react-native-router-flux is absolutely lovely.

[sayedatif]

thanks for your feedback i will give it a try someday thanks alot!

[infinitered-circleci]

:tada: This issue has been resolved in version 10.0.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[infinitered-circleci]

:tada: This issue has been resolved in version 10.0.1 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[infinitered-circleci]

:tada: This issue has been resolved in version 10.0.2 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[infinitered-circleci]

:tada: This issue has been resolved in version 10.0.3 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: