[BTAPP-31] Smooth bottom sheet animation with spring entry and fast exit #45

Merged

chris merged 4 commits from feature/BTAPP-31 into main

2026-06-25 08:09:32 -06:00

chris commented

2026-06-24 08:42:52 -06:00

Owner

Ticket

BTAPP-31 Investigate smoother slide-up animation for bottom sheet

Investigation findings

The jankiness had two root causes:

Animated.timing with the default ease-in-out curve doesn't match the "arrives quickly then settles" feel of a native bottom sheet — spring physics does this naturally
Entry and exit used the same duration and curve; native sheets exit noticeably faster than they enter

Options evaluated: spring physics tuning (chosen), custom Easing curves, react-native-reanimated worklets (no meaningful advantage over useNativeDriver in RN 0.79), and @gorhom/bottom-sheet (heavy dependency for marginal gain here)

Summary

Entry animation (visible=true): switches from Animated.timing to Animated.spring on translateY with tension: 65, friction: 11 — arrives decisively then settles without the linear "shudder"; scrim opacity stays timing
Exit animation (visible=false): Animated.timing with Easing.in(Easing.quad) at 120 ms (vs 150 ms entry) — accelerates away, snaps off screen like platform conventions expect
Adds DISMISS_DURATION = 120 to lib/animations.ts alongside the existing SLIDE_DURATION
Adds the first tests for the Sheet component: children are accessible, dismiss button fires onClose

## Ticket [BTAPP-31](http://192.168.2.100:7123/home/browse/BTAPP-31/) Investigate smoother slide-up animation for bottom sheet ## Investigation findings The jankiness had two root causes: 1. `Animated.timing` with the default ease-in-out curve doesn't match the "arrives quickly then settles" feel of a native bottom sheet — spring physics does this naturally 2. Entry and exit used the same duration and curve; native sheets exit noticeably faster than they enter Options evaluated: spring physics tuning (chosen), custom Easing curves, `react-native-reanimated` worklets (no meaningful advantage over `useNativeDriver` in RN 0.79), and `@gorhom/bottom-sheet` (heavy dependency for marginal gain here) ## Summary - Entry animation (`visible=true`): switches from `Animated.timing` to `Animated.spring` on `translateY` with `tension: 65, friction: 11` — arrives decisively then settles without the linear "shudder"; scrim opacity stays timing - Exit animation (`visible=false`): `Animated.timing` with `Easing.in(Easing.quad)` at 120 ms (vs 150 ms entry) — accelerates away, snaps off screen like platform conventions expect - Adds `DISMISS_DURATION = 120` to `lib/animations.ts` alongside the existing `SLIDE_DURATION` - Adds the first tests for the `Sheet` component: children are accessible, dismiss button fires `onClose`

chris added 1 commit

2026-06-24 08:42:52 -06:00

[BTAPP-31] Smooth bottom sheet animation with spring entry and fast exit.

app / check (pull_request) Successful in 19s

Details

93730a16b3

chris added 1 commit

2026-06-24 20:37:44 -06:00

Merge branch 'main' into feature/BTAPP-31

app / check (pull_request) Successful in 18s

Details

3aa366f0cc