Support for badges from the NavigationComponent

[timomeh]

Thanks for contributing through this PR! I'm not quite sure how you can dynamically adjust some of those props, e.g. dynamically setting isBadgeVisible or badgeText. Could you share an example how this would work?

[matt-oakes]

You would use it when you are using the NavigationComponent in a Higher Order Component (HOC), like this:

export function TabBarAndroid(props) {
  const { style, invitationCount, bottomNavigationOptions, ...rest } = props;
  return (
    <NavigationComponent
      style={[styles.bar, style]}
      bottomNavigationOptions={{
        ...bottomNavigationOptions,
        tabs: {
          ...bottomNavigationOptions.tabs,
          Profile: {
            ...bottomNavigationOptions.tabs.Profile,
            badgeText: invitationCount > 0 ? "" + invitationCount : undefined,
            badgeStyle: {
              container: {
                backgroundColor: Theme.Colors.brandBlue,
                left: "60%"
              }
            }
          }
        }
      }}
      {...rest}
    />
  );
}

const styles = StyleSheet.create({
  bar: {
    height: 56,
    width: "100%",
    elevation: 8
  }
});

const mapStateToProps = (state) => {
  return {
    invitationCount: UserSelectors.getIncomingInvitationCount(state)
  };
};

const mapDispatchToProps = (dispatch) => {
  return {};
};

const connector = connect(
  mapStateToProps,
  mapDispatchToProps
);

export default connector(TabBarAndroid);

This HOC is connected to Redux and makes use of a selector to get the state out of it and then modifies the bottomNavigationOptions prop to include the badge text before passing it on to the NavigationComponent.

[timomeh]

Thanks for the example, looks great! I think a small and simple working example (without redux) in the example directory of this project would be helpful for a lot of people. Could you add one?

[matt-oakes]

I can add one, but without Redux the use-case for it might not be as obvious. I'll have a go though.

[matt-oakes]

@timomeh I've added an example to examples/ showing how this would work with Redux.

[timomeh]

Great! I'll publish a release soon

[timomeh]

Published as v0.8.2