When switching over to the new settings route UI design, we encountered a flaw with <AnimatedHeader /> in which we didn't account for the height of the content during the snapping animation. For example, if we reach the snap threshold, but the content isn't large enough, we might end up with the title sticking out from underneath the header, displaying an "incomplete" animation.
How
With our original design, we provided a fix bottom padding, in which all screens that used the <AnimatedHeader /> would have a 32px bottom padding. This of course, doesn't fix the mentioned issue. The solution is to dynamically increase this padding to ensure that we provide enough to allow the snapping animation to complete.
Flawed Behavior
Fix
Test Plan
Go to any of the /third-party/[id] routes and see that the snapping animation is completed completely.
Checklist
[ ] Documentation is up to date to reflect these changes (ie: CHANGELOG.md & README.md).
[ ] Add new dependencies into THIRD_PARTY.md.
[x] This diff will work correctly for pnpm android:prod.
Why
When switching over to the new settings route UI design, we encountered a flaw with
<AnimatedHeader />in which we didn't account for the height of the content during the snapping animation. For example, if we reach the snap threshold, but the content isn't large enough, we might end up with the title sticking out from underneath the header, displaying an "incomplete" animation.How
With our original design, we provided a fix bottom padding, in which all screens that used the
<AnimatedHeader />would have a 32px bottom padding. This of course, doesn't fix the mentioned issue. The solution is to dynamically increase this padding to ensure that we provide enough to allow the snapping animation to complete.Test Plan
Go to any of the
/third-party/[id]routes and see that the snapping animation is completed completely.Checklist
CHANGELOG.md&README.md).THIRD_PARTY.md.pnpm android:prod.