feat: allow tab bar customization

[tcorreiaubi]

Hey, this is based mostly on the approach that react-native-tab-view takes about styling their tab bar, the idea is to allow customization without having to refactor/copy the existent bar.

I had to increase the package version because of the following error coming from interpolateColor
software-mansion/react-native-reanimated#1401

Let me know if this changes make sense

Closes #82

[PedroBern]

hi @tcorreiaubi thanks for the PR, the changes do make sense. However, expo is officially supporting only rc.0. The rc.1 and rc2 have native code changes that expo didn't follow up yet.

So we need to avoid using intepolateColor for the moment 😞 .

You can keep it open and wait for official support or you can come up with a different solution (Probably interpolating the opacity as the current implementation).

[tcorreiaubi]

@PedroBern I was actually just looking at it, the interpolateColor behavior ended up looking really not good as expected, I guess a simple condition rendering either 1 color or another will do it for the moment, I will update the pull request

[tcorreiaubi]

@PedroBern fixed, I'm also working in implementing a minimum collapsible header height, will make the pull request tomorrow.
And after that if I can get sometime to work on it, I will help on the testing, I believe it makes sense to we can easily add more functionality

[alexpchin]

@tcorreiaubi @PedroBern I was actually working on pretty much the same PR today... In my project, I have implemented intepolateColor (I'm not on expo) but then I realised also I needed a color value to pass to my focused custom TabItemComponent because I am using FontAwesome and custom badges for notifications. (FontAwesomeIcons do not work with react-native-reanimated. FortAwesome/react-native-fontawesome#53)

I finally solved it by using '@react-native-community/masked-view' with an animated background under the icon.

[PedroBern]

Everything looks good, just some minor changes

Also, not sure why the yarn.lock changes, what's the difference?

[PedroBern]

I finally solved it by using '@react-native-community/masked-view' with an animated background under the icon.

@alexpchin clever solution.

[tcorreiaubi]

@PedroBern Fixed, I think it can be merged

[PedroBern]

@tcorreiaubi nice work 👍

Need to solve some conflicts, you can copy the example you wrote in the readme and add it as a docstring to the tabbar. Will need to remove the /* */ inside the children.

And delete the prop table, it will be auto-generated.

Then, run yarn docs

[tcorreiaubi]

@PedroBern Done, let me know if something is missing