React-native-router-flux: How to pass props from navbar to another page?

[vzhen]

I have a product view page with rightTitle Edit on navbar. When edit is clicked i want to pass product view state to another page.

How to do this if i use Action.productEdit() in <Scene />

<Scene
 key='product'
 component={Product}
 title='Product'
 rightTitle='Edit'
 onRight={() => { Actions.productEdit({ product: this.props.product }) }} // How can i get the state and pass it to Edit Page?
/>

[dragfire]

I think you can't do like that. A quick solution would be:
onRight={ ()=>Actions.refresh({ product: true }) }
Then, in your Product's componentWillReceiveProps

componentWillReceiveProps (props) {
    if (props.product) {
        Actions.productEdit({ product: this.state.product });
    }
}

[AndrewHenderson]

@vzhen I use Redux to handle this. I dispatch the product id and the Products reducer pulls it from the list and sets is on a sub-state "focus" like so:

products: {
  list: [{…}],
  focus: {…}
}

Then, the Product component uses mapStateToProps to map the focus state to its props.

[AndrewHenderson]

@dragfire I'm dealing with a similar issue, where I want to set the NavBar title based on a value in the Redux store. I tried several things that didn't work. I'm considering creating a new Scene component that is connected to the Redux store like so:

import React from 'react'; 
import { Scene } from 'react-native-router-flux';
import { connect } from 'react-redux';

class SceneWithRedux extends React.Component {
  render() {
    return (
     <Scene title={this.props.productTitle} />
    )
  }
}

function mapStateToProps(state) {
  return {
    productTitle: state.product.title
  }
}
export default connect(mapStateToProps)(SceneWithRedux);

[vzhen]

@AndrewHenderson Ohhh, got it. Thank you