Can't Pass Class to renderLeftButton

[Jahans3]

Version

Tell us which versions you are using:

• react-native-router-flux v3.38.0
• react-native v0.42.3

Expected behaviour

Pass a React.Component to renderLeftButton and render a component on the left side of the navigation header

Actual behaviour

Error: Cannot call class as a function

Steps to reproduce

1. Create router Scene with a navigation bar at the top
2. Create a React.Component
3. Pass the React.Component to the renderLeftButton prop of the Scene
4. Error occurs

This error only appears when you pass a React.Component/React.PureComponent into the prop, if I pass a stateless functional component into the prop it works as expected and renders the header navigation with the left button component I passed in.

Scene:

<Scene
        key='home'
        icon={TabBarIcon}
        component={HomeScene}
        title='Home'
        renderLeftButton={MenuButton}
        navigationBarStyle={style.navBar}
      />

Component:

class MenuButtonContainer extends PureComponent {

  _toggleDrawer = () => {
    this.props.dispatch(toggleDrawer())
  }

  generateProps () {
    return {
      ...this.props,
      toggleDrawer: this._toggleDrawer
    }
  }

  render () {
    const props = this.generateProps()
    return (
      <MenuButton {...props} />
    )
  }
}

export default connect()(MenuButtonContainer)

Component JSX:

const MenuButton = ({ toggleDrawer }) => (
  <TouchableHighlight onPress={toggleDrawer}>
    <Icon name='menu' />
  </TouchableHighlight>
)

[mattshen]

I have same issue to renderRightButton.

My solution is to let the renderRightButton function to return a react component connected with redux store, rather than being the react component.