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.

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

Solution 2

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.

Solution 3

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.

Comments

[Henrik Andersson]

No it will not, componentDidMount is only called once - so on updating the component will not rerender with the proper colors.

[Kartikeya Sharma]

Yeah it is invoked only once, Workaround you can use componentWillReceiveProps It is invoked whenever the component is receiving new props

[Adil]

I'd a similar problem, your answer helped me resolving that but I'm now getting missing in props validation react/prop-types error.