Hiding navigation header dynamically in react-native

Question

I want to hide the navigation header dynamically based on a redux property. This is my code.

 // navigation options
  static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state;
    console.log(params.mainFeedIsLoading);

    if (
      typeof params.mainFeedIsLoading !== undefined ||
      params.mainFeedIsLoading === true
    ) {
      return {
        header: null
      };
    }

    return {
      headerTitle: <Logo type="default_logo" />,
      headerTitleStyle: { alignItems: "center" },
      headerMode: "screen",
      headerStyle: {
        paddingRight: 10,
        paddingLeft: 10
      },
      headerLeft: (
        <ClickableIcon
          source={NotificationInactive}
          height={35}
          width={35}
          onIconPressed={() => alert("Notifications Clicked")}
        />
      ),
      headerRight: (
        <ClickableIcon
          height={35}
          width={35}
          source={AddNewUserInactive}
          onIconPressed={() => alert("Add New Clicked")}
        />
      )
    };
  };
}

params.mainFeedIsLoading is not updated to false, so it is always true. so, the header is always null.

  case FETCH_MAIN_FEED:
      return {
        ...state,
        posts: action.mainFeedData.posts,
        featuredWorkouts: action.mainFeedData.posts,
        mainFeedIsLoading: action.mainFeedIsLoading
      };
      break;

Here, mainFeedIsLoading becomes false, but it is not affected in the params.mainFeedIsLoading. How can I achieve this?

Pravin · Accepted Answer · 2018-06-01 05:17:50Z

1

this.props.navigation.setParams({ key: value });

Put this in componentWillReceiveProps(nextProps) , Or whenever you want to update the navigation props. And conditionally you can render header. Check the condition of 'key' used in setParams and render header. I hope this will help.

answered Jun 1, 2018 at 5:17

Pravin

1951 silver badge6 bronze badges

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

Collectives™ on Stack Overflow

Hiding navigation header dynamically in react-native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related