feat: added renderTile prop
#47
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
positionanimated 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
renderTileprop. 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
renderTileprop that allows for rendering a completely custom tile, instead of the default one.renderTiletakes a function with the default tile styles, the animated transform style and the tile width as arguments, and returns a customReactNodeto 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
positionanimated value from@react-navigation/material-top-tabsto 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