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?

Federico Baù · Accepted Answer · 2021-08-02 11:16:59Z

28

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

edited Aug 2, 2021 at 11:16

Federico Baù

7,9755 gold badges44 silver badges49 bronze badges

answered Jun 27, 2018 at 6:55

Paolo Dell'Aguzzo

1,43111 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sakibur Rahman Over a year ago

Works perfectly fine, thanks, it was so simple even to think around.

Sayok Majumder Over a year ago

Can you please tell me how to send send the componet as the prop as my app is showing

Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

wladimirguerra Over a year ago

@SayokMajumder when you do like the answer say to do ( use the prop within a {} like {this.props.header}), and your component is a function, you must provide the header as <MyComponent header={<Header />} {...} />. You are probably missing < and /> around the Headercomponent.

FortuneCookie Over a year ago

What if , if we want to pass some thing to {this.props.chindren} ?

Collectives™ on Stack Overflow

Passing component as a prop in react native

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related