react-native-segmented-control
react-native-segmented-control copied to clipboard
feat: added `renderTile` prop
Motivation
We're using this component as a Tab Bar for React Navigation. We wanted to make use of the position
animated value that React Navigation provides, but you can't interop React Native animated values with React Native Reanimated, and we also couldn't override the translation style anyway.
The best solution we found is to add a custom renderTile
prop. This way we can render the tile in a React Native Animated.View
, use the default styles for the tile, but change the translate.
Changes
This PR adds a renderTile
prop that allows for rendering a completely custom tile, instead of the default one.
renderTile
takes a function with the default tile styles, the animated transform style and the tile width as arguments, and returns a custom ReactNode
to render.
If this prop is not supplied, we just render the same tile we were rendering before.
Preview
This is an example of what this prop allows you to do. We can use the position
animated value from @react-navigation/material-top-tabs
to translate the tile in sync with React Navigation, as you're swiping through each tab.
https://user-images.githubusercontent.com/8539174/166950854-95278be0-a781-48eb-891e-41a69fea8751.mp4