Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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 NativeAnimated.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 customReactNode
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