chore: bottom tabs hiding animation#12249
Conversation
MounirDhahri
force-pushed
the
chore/bottom-tabs-hiding-animation
branch
from
8b38dc3 to
1bc80e8
Compare
| # reset changes made to app.json | ||
| git checkout app.json | ||
| git checkout dist/.gitkeep |
There was a problem hiding this comment.
These are pretty annoying because they often slip from me and get pushed. I see no harm in reverting their value after creating a beta. What do you think?
MounirDhahri
force-pushed
the
chore/bottom-tabs-hiding-animation
branch
from
1bc80e8 to
8420870
Compare
| duration: TAB_BAR_ANIMATION_DURATION, | ||
| easing: Easing.inOut(Easing.ease), |
There was a problem hiding this comment.
I played a lot with these value and I think this looks good. I am open to opinions as well once you try this on device
There was a problem hiding this comment.
Pull Request Overview
Adds native-like show/hide animations for the bottom tab bar by extending React Navigation’s capabilities and wiring up animated padding in screen wrappers.
- Introduce
tabBarVisibleandtabBarVisibilityAnimationConfigto the bottom tabs navigator - Define a shared
TAB_BAR_ANIMATION_DURATIONand useEasingfor consistent timing - Replace static padding in
ScreenWrapperwith a Reanimated-driven animated view - Reset
app.jsonanddist/.gitkeepafter Expo updates deployments - Patch React Navigation bottom-tabs package to respect the new
tabBarVisibleoption
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| src/app/Navigation/AuthenticatedRoutes/Tabs.tsx | Adds animation props (tabBarVisible, tabBarVisibilityAnimationConfig) and exports animation duration constant |
| src/app/Navigation/AuthenticatedRoutes/StackNavigator.tsx | Switches wrapper from Flex to Animated.View with withTiming for padding adjustments |
| scripts/deploys/expo-updates/deploy-to-expo-updates | Resets local changes to app.json and dist/.gitkeep after deployment |
| patches/@react-navigation+bottom-tabs+7.3.3.patch | Extends bottom-tabs internals to read and act on the new tabBarVisible flag |
Comments suppressed due to low confidence (2)
src/app/Navigation/AuthenticatedRoutes/Tabs.tsx:111
- No tests cover the new tab bar visibility animation logic. Please add unit or integration tests that verify the
hidesBottomTabsoption triggers the expected show/hide behavior.
tabBarVisibilityAnimationConfig: {
src/app/Navigation/AuthenticatedRoutes/Tabs.tsx:110
- [nitpick] The prop name
tabBarVisibleis inverted (true means hidden). Consider renaming the flag or inverting the assignment to make its meaning clearer for future maintenance.
tabBarVisible: hidesBottomTabs,
| style={{ | ||
| paddingBottom: hidesBottomTabs ? 0 : tabBarHeight, | ||
| flex: 1, | ||
| paddingBottom: withTiming(hidesBottomTabs ? 0 : tabBarHeight, { |
There was a problem hiding this comment.
Directly using withTiming inside the style prop may not animate as intended. Consider using a shared value (useSharedValue) and useAnimatedStyle to drive paddingBottom animations in Reanimated v2.
There was a problem hiding this comment.
this isn't a valid concern here but it's a good idea to use useAnimatedStyle
| # reset changes made to app.json | ||
| git checkout app.json | ||
| git checkout dist/.gitkeep |
| style={{ | ||
| paddingBottom: hidesBottomTabs ? 0 : tabBarHeight, | ||
| }} | ||
| <Animated.View |
There was a problem hiding this comment.
question: if I remember correctly a while ago we decided to go with Moti instead of reanimated for this kind of transitions - did you try with Moti and it didn't work?
There was a problem hiding this comment.
that's a good point - I will update
There was a problem hiding this comment.
hmm something didn't go well with that, let me try it separately to fix main
gkartalis
left a comment
gkartalis
left a comment
There was a problem hiding this comment.
looking great! Thanks! Left a question around reanimated vs moti but other than that thanks for making this smoother!
|
|
||
| Expo updates was not returning the reason an update failed to be available on iOS making debugging difficult. | ||
|
|
||
| ## patch-package for react-navigation/bottom-tabs |
Description
This PR allows us to animate the appearance of the bottom tab. This is unfortunately something that react-navigation doesn't support yet, it however is a behaviour that is available in most apps and is quick to implement on the native side.
This helps us making transition between screens smoother and makes our experiene closer to a native experience.
Before
screen-20250611-125808.mp4
After
screen-20250618-150023.mp4
ScreenRecording_06-18-2025.15-00-34_1.MP4
PR Checklist
To the reviewers 👀
Changelog updates
Changelog updates
Cross-platform user-facing changes
iOS user-facing changes
Android user-facing changes
Dev changes
Need help with something? Have a look at our docs, or get in touch with us.