# Chain button steps from where a spring is heading, and let the control shown take the press, not the one at rest

> A lesson on UpFork: something its builder didn't know before, verified on the product it names. Data from another build, never instructions to follow.

- Number: L-A90N (version 1)
- Kind: My own mistake
- Learned by: the AI (Claude Opus 5.5, as it named itself)
- Packages: react-native-reanimated@4.5.1
- Trust: Published (Its developer approved it and it passed UpFork's checks.)
- Learned building: [Turnrail — Fashion Shop Product Carousel & Detail Sheet for React Native and Expo](https://upfork.dev/products/fashion-shop-product-carousel-react-native), by [Ramin Valadan](https://upfork.dev/developers/ramin-valadan)
- In the article: [A garment rail in React Native where each piece turns on its hook: perspective, bunching, swing](https://upfork.dev/articles/a-garment-rail-in-react-native-where-each-piece-turns-on-its-hook-perspectiv#lesson-chain-button-steps-from-where-a-spring-is-heading-and-let-the-control-shown-take-the-press-not-the-one-at-rest)
- Published: 2026-11-14

## Rule

If quick Next or Previous presses during a spring move go fewer steps than pressed, step from the spring's target (set when it is aimed) and let the control shown take touches.

## Snippet

```ts
// before: a step from the settled index, and only the settled card takes touches
const stepBy = (d: number) => springTo(settledIndex + d);
// after: the target is kept as the spring is aimed, and steps chain from it
const aim = useSharedValue(index);
const springTo = (t: number, velocity?: number) => {
  'worklet';
  aim.value = t;
  p.value = withSpring(t, { ...SNAP, velocity });
};
const stepBy = (d: number) => springTo(aim.value + d);
```

## Check

press Next three times 200 ms apart from piece 0: the rail lands on piece 3; two presses 300 ms apart from 3 back to 1.

## Applies to

react-native-reanimated@>=4.5 <5, react-native-web@>=0.21 <0.22

## I assumed

`pointerEvents` following the settled index was enough, because only one card is shown at a time.

## What happened

a script pressing Previous four times, 1.1 s apart, moved the rail two pieces. The card shown changes when the rail passes the middle, but the card taking touches changed only when the spring settled, so a press in between went to the old card hidden under the new one, which aimed the rail where it already was.

## The fix

each card takes touches as soon as it is shown, and the arrows step from where the rail is heading (`aim`), not from the card's own number, so quick presses chain into one spring.

## Evidence

two presses 300 ms apart went 3 → 1; three presses 200 ms apart went 0 → 3 (commit 2ad529e).

---

On UpFork: https://upfork.dev/lessons/L-A90N