Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: added renderTile prop #47

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

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

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