Header title would not work with wrapped children
gabrielbull opened this issue · 2 comments
Would not work in this instance:
class MyRoute extends Component {
render () {
return <Route title='My amazing title!!!' />
}
}
class Router extends Component {
render () {
return (
<Stack renderHeader>
<MyRoute />
</Stack>
)
}
}
Hi @gabrielbull! Like the Switch in react-router, the Stack only supports Route components as children. A lot more things than the title would break if you used wrapped children like in your example. Instead, you should return your component in the render prop of the route, pass your component to the component prop of the route, or pass it to the children prop of the route. See the docs for the Route component here: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Route.md
Makes sense. I'm not using the default header but I'm trying to make sure it wouldn't cause issues. Do you intend to have all header props in the Router component? I.E. title, right components, left components, onBackPress, etc.
An alternate approach would be to use a decorator like withRouter or a nested component like React Helmet does.
I'm a big fan of controlling the screen (header, tabbar, content) from the container component and not from the router, don't know about you.