Passing Parameters to Components in React Native

The render is a non-parametrised function means it does not take any parameter. So to pass parameters/value from one component to other in React Native we use props. The props is a JavaScript object that has property to pass on from one component to others. So, you need to pass the values with props.

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

You Can call the Navigation bar component and giving the props like this

let inputProps={
   color:"blue",
   title:"Title"
};
<NavigationBar props={inputProps}/>

And in the declaration of NavigationBar you can use it like this

const NavigationBar = (props)=>{
    const [title,setTitle] = useState("");
    const [color,setColor] = useState("");
    useEffect(()=>{
        setColor(props.color);
        setTitle(props.title);
    },[props.color,props.title]);
    return(
        <NavBar
            title={title}
            tintColor={color}
            leftButton={<Button style={styles.menuButton}>&#xf0c9;</Button>}
            rightButton={
                <Button style={styles.menuButton}>&#xf07a;</Button>}
             />
    );
}

As your the color and the title changes the effect hook will trigger and update the state of the title and color using the state hook which will force the component to re-render with updated values.So its one way binding giving you a flavour of two way binding.