CODEWITHSUNDEEP
react-native
Shashika Virajh
Shashika Virajh

Reputation: 9457

Hiding navigation header dynamically in react-native

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?

Upvotes: 0

Views: 747

Answers (1)

Pravin
Pravin

Reputation: 195

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.

Upvotes: 1

Related Questions