CODEWITHSUNDEEP
react-nativereact-navigationhigher-order-componentsrecompose
Lee
Lee

Reputation: 5936

Recompose with react-navigation - how to hoist static navigation header when using branch?

I have the following using which sets the react-navigation header options. The component is enhanced using various HOC components, and then using Recompose to branch the render logic.

When rendering the AuthCallToAction via the renderWhileNoAuth the header options are not hoisted. What i would ideally like is there to be no header when displaying the renderWhileNoAuth branch of logic.

class ProfileScreen extends Component {
  static navigationOptions = {
    title: 'Profile',
    headerRight: (
      <Button
        onPress={() => alert('This is a button!')}
        title="Logout"
        type="clear"
      />
    ),
  }

  render() {
      <View><Text>Profile</Text></View>
  }
}

const renderWhileNoAuth = () => branch(
  props => !props.authQuery.auth.status,
  renderComponent(() => (
    <AuthCallToAction
      icon="smiley"
      title="Come on now..."
      text="Of course you need to login to see your profile!"
    />
  )),
)

const enhancedComonent = compose(
  graphql(CACHE_AUTH_QUERY, {
    name: 'authQuery',
  }),
  renderWhileNoAuth(),
)

export default hoistStatics(enhancedComponent)(ProfileScreen)

Component - AuthCallToActionScreen

The header: null does not work even if i use hoist static

class AuthCallToActionScreen extends Component {
  static navigationOptions = {
    header: null,
  }

  render() {
    return <View><Text>Auth Call To Action - No Header required</Text></View>
  }
}

export default withNavigation(AuthCallToActionScreen)

So question then would be, how do i hoist navigationOptions from AuthCallToAction, or am i thinking of this the wrong way?

Upvotes: 0

Views: 352

Answers (1)

Ian Henderson
Ian Henderson

Reputation: 1

I ran into the same problem. I haven't tested it thoroughly, but it looks like static class properties aren't handled properly with compose functions.

A solution I found was to define navigationOptions in the navigator function, e.g.

const AppStack = createStackNavigator({
  navigationOptions: {
    title: 'App Title',
  },
  screen: AppScreen,
})

You can also pass a function to navigationOptions with the signature ({navigation}) => ({}) to access navigation properties.

Upvotes: 0

Related Questions