Bottom tab Badge style

[swabbass]

Changes:

• transform old options for new badge options (backwards compatibility).
• add new Options with textColor, Closes: #6889.
• Android native side implemented.
• updated docs and deprecations.
• IOS in progress...

Old way (deprecated):

  Navigation.mergeOptions(this.props.componentId, {
      bottomTab: {
        badgeColor: 'red',
        badge: 'hello',
      },
    });

New way:

  Navigation.mergeOptions(this.props.componentId, {
      bottomTab: {
        badge: {
          text: 'content',
          textColor: 'green',
          backgroundColor: 'blue',
        },
      },
    });

Demo

https://user-images.githubusercontent.com/7227793/108303324-65bc0080-71ae-11eb-8fec-04b71a1dc703.mov

[lindesvard]

What's the status for this PR? Super excited for it 🚀

[swabbass]

What's the status for this PR? Super excited for it 🚀

It is waiting for iOS, implementation, unfortunately, we got a couple of high priority stuff to deal with, but if you want to contribute or know someone who wants to, we will be glad to give you a hand.

[lindesvard]

It is waiting for iOS, implementation, unfortunately, we got a couple of high priority stuff to deal with, but if you want to contribute or know someone who wants to, we will be glad to give you a hand.

Thanks for the fast reply! Understand that you're busy. I'm just glad that you looking at this issue.

Whats left on the iOS side? Because I thought both were done when I glanced at the changed files. Can see if our iOS developer have some time over!

[swabbass]

It is waiting for iOS, implementation, unfortunately, we got a couple of high priority stuff to deal with, but if you want to contribute or know someone who wants to, we will be glad to give you a hand.

Thanks for the fast reply! Understand that you're busy. I'm just glad that you looking at this issue.

Whats left on the iOS side? Because I thought both were done when I glanced at the changed files. Can see if our iOS developer have some time over!

Thanks, :], yeah sure I "wrote" the ios part (as a rookie), it has a small bug and maybe a couple of final touches. The bug is, same js code need to be called twice in order to make badge changes like colour/text..., on ios only, the native side of ios is similar to android though, I'm really sure that experienced ios dev will catch it right away, it might be something I'm missing with the "UI thread" on ios :]

[tyson90]

@swabbass can you also add badge.fontSize and badge.fontFamily options for more flexible customization?

[xgenem]

+1