Passing component as a prop in react native

Question

In order to make a customize-able component, what should I do to pass component as a prop in another component.

I have a header component which may be customized depending on current pages actions.

For example, for autocomplete search, I may have a header component like this:

On another case, for trip search result, I may have a header component like this:

I want build to a component that will receive a component as a prop and will render it to the current component. What is the best way to do this in react-native way?

Answer 1

You can pass a component as a prop or as child. The first way is this one:

export default class Home extends Component{
    render(){
        return(
            <View>
                <PageComponent header = {<Header title = {".."}/>}/>
            </View>
        );
    }
}

export default class PageComponent extends Component{
    render(){
        return(
            <View>
                {this.props.header}
                <View>
                    ...
                </View>
            </View>
        );
    }
}

The second way is:

export default class Home extends Component{
    render(){
        return(
            <View>
                <PageComponent>
                    <Header title = {".."}/>
                </PageComponent>
            </View>
        );
    }
}
export default class PageComponent extends Component{
    render(){
        return(
            <View>
                {this.props.children}
                <View>
                    ...
                </View>
            </View>
        );
    }
}