Passing Parameters to Components in React Native

Question

I'm trying to use a common Navigation Component I made in React-Native. At the point of calling I want to set the Navigation Bar Tint, Title etc.

Nav Bar Code:

var NavigationBar = React.createClass({     render: function(title, titleColor, NavBarColor) {         var titleConfig = {             title: title,             tintColor: titleColor,         };          return (             <NavBar                 title={titleConfig}                 tintColor={NavBarColor}                 leftButton={<Button style={styles.menuButton}>&#xf0c9;</Button>}                 rightButton={<Button style={styles.menuButton}>&#xf07a;</Button>} />         );     } }); 

Applying it on another page:

<NavigationBar title="Categories" titleColor="#ffffff" NavBarColor="#f0b210"/> 

How to do this properly? Thanks in advance.

Answer 1

First off render does not take any parameters, what you want to do is to reference your props that you passed in.

render: function () {   var titleConfig = {       title: this.props.title,       tintColor: this.props.titleColor   };     // Rest of code } 

Just by doing this, whenever your NavigationBar rerenders so will the NavBar component too.

A super simple example demonstrating this

var NavBar = React.createClass({   render: function () {     return <div id="navbar" style={{backgroundColor: this.props.tintColor}}>     <h1 style={{color: this.props.title.tintColor}}>{this.props.title.title}</h1>     </div>;   } });  var NavigationBar = React.createClass({     render: function() {         var titleConfig = {             title: this.props.title,             tintColor: this.props.titleColor,         };          return (             <NavBar                 title={titleConfig}                 tintColor={this.props.NavBarColor}                 />         );     } });   React.render(<NavigationBar title="Categories" titleColor="#ff0" NavBarColor="#f0b210" />, document.body);