React Native Navigation v6 using custom top bar component

543 views Asked by At

react: 16.11.0 react-native: 0.62.2 react-native-navigation: ^6.4.0

Hi! I'm having some trouble setting a custom component as RNN top bar in v6.0. Following are my code snippets:

Navigation.registerComponent('com.someApp.PostingDetailsNavbar', () => require('../components/PostingDetailsNavbar'));

componentDidMount()
{
    Navigation.mergeOptions(this.props.componentId, {
      topBar: {
        background: {
          color: '#ffff00',
          component: {
            name: 'com.someApp.PostingDetailsNavbar',
            passProps: {
                onAuthorClick: this.viewAuthor,
                authorImage: this.props.post.authorImage,
                authorName: this.props.post.authorName
            }
          }
        }
      }
   });
}

When run this I'm having following errors in the debug window:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `WrappedComponent`.

I'm having a hard time finding the root cause, or am I simply using the mergeOptions wrong (?)

Thanks!

0

There are 0 answers