feat: animatable font size and color
Please provide enough information so that others can review your pull request.
Motivation
This commit uses the interpolate method to support animated gradients of tab color and font size in material-top-tab and react-native-tab-view.
Active and inactive tabs usually have different colors and font sizes to show their active state, and I added a gradient process to make it smoother and more natural.
Changed:
tabBarActiveTintColor, tabBarInactiveTintColor now supports gradients.
Added:
tabBarActiveFontSize, tabBarInactiveFontSize, animatable.
tabBarActiveFontWeight, tabBarInactiveFontWeight, not animatable.
Test plan
On native platforms, the fontSize property does not support useNativeDriver, so currently if tabBarActiveFontSize or tabBarInactiveFontSize is passed, the useNativeDriver value will be automatically set to false. This change may cause differences between web and native platforms and may cause performance loss, so you can focus on testing this. The latest code effects can be seen in the "Material Top Tab" and "Tab View" in the example project.
Example videos:
https://github.com/user-attachments/assets/cc928743-58c8-4073-b645-27d78b9186e6
https://github.com/user-attachments/assets/0aeea75e-445b-461a-833d-1c15e1f4f69a
Hey @likeSo! Thanks for opening your first pull request in this repo. If you haven't already, make sure to read our contribution guidelines.
Deploy Preview for react-navigation-example ready!
| Name | Link |
|---|---|
| Latest commit | a40034eb406605c34e506335fca3f5f96ebb2e22 |
| Latest deploy log | https://app.netlify.com/sites/react-navigation-example/deploys/67847578d0a26e000809d80f |
| Deploy Preview | https://deploy-preview-12387--react-navigation-example.netlify.app |
| Preview on mobile | Toggle QR Code...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify site configuration.
I'll fix these type errors later
PanResponderAdapter is missing type useNativeDriver, I'll fix this next week
So far, I have tested it on both web and Android iOS platforms. As for the above failed checks, it seems that the npm installation package is wrong, which seems to have nothing to do with my changes this time?