react-native-segmented-control icon indicating copy to clipboard operation
react-native-segmented-control copied to clipboard

feat: added `renderTile` prop

Open Gustash opened this issue 2 years ago • 0 comments

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

Gustash avatar May 05 '22 14:05 Gustash