Skip to content

Conversation

@Gustash
Copy link

@Gustash Gustash commented May 5, 2022

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.

Simulator.Screen.Recording.-.iPhone.13.-.2022-05-05.at.15.44.13.mp4

@Gustash Gustash force-pushed the feat/custom-tile branch from abc15ba to 21a6b2f Compare May 5, 2022 15:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant