react-navigation icon indicating copy to clipboard operation
react-navigation copied to clipboard

feat: animatable font size and color

Open likeSo opened this issue 11 months ago • 5 comments

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

likeSo avatar Jan 11 '25 06:01 likeSo

Hey @likeSo! Thanks for opening your first pull request in this repo. If you haven't already, make sure to read our contribution guidelines.

github-actions[bot] avatar Jan 11 '25 06:01 github-actions[bot]

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...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] avatar Jan 11 '25 06:01 netlify[bot]

I'll fix these type errors later

likeSo avatar Jan 11 '25 06:01 likeSo

PanResponderAdapter is missing type useNativeDriver, I'll fix this next week

likeSo avatar Jan 11 '25 09:01 likeSo

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?

likeSo avatar Feb 11 '25 04:02 likeSo