[iOS] setPage does not animate when the pager resizes with the keyboard

Aperta
  • Qualcosa non va?
#1,223 3 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@TaduJR ci sta già lavorando.

Dal 4/11/2026.

  • #1224 di @TaduJR — aperta

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
52/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
ios, react-native, swift, typescript
Ambito
frontend, mobile

Direzione di ricerca

Read the iOS pager implementation and the focus-clearing change from #1193, then reproduce the two-command sequence in the Issue #1154 Page Change Focus Repro screen using a release build. Compare the pager's scroll frames with the keyboard closed and open to trace why the selection loses its animation after the layout pass. Done means repeated keyboard-up setPage calls slide while still landing on the requested page.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Environment

  • react-native-pager-view: main
  • React Native 0.88.0, new architecture
  • iPhone 18 Pro simulator, iOS 27.0

Description

An imperative setPage does not animate when the pager's height changes while the command is in flight: the page changes instantly instead of sliding.

The resize is what breaks it, not the focus. Flipping a 40 pt spacer above the pager in the handler that calls setPage jumps the same way with no keyboard anywhere, and that part is not new. What #1193 changed is that an app no longer has to resize anything itself: leaving a page resigns its input, the keyboard closes, and a pager that sizes itself around the keyboard springs back to full height a frame after the command.

Counting the pager's scroll frames per command, where a slide reports about 18 and a jump 1, with the pager inside a KeyboardAvoidingView and an input focused before each of three moves: 1, 1, 1. Removing the blur that #1193 added to setPage, and nothing else, puts it back to a 230 ms slide a move. The keyboard then closes once the pager settles instead of during the command.

The heights at each step, from the pager's own layout pass:

setPage index=1 h=225
layout h=437   +17 ms
scroll h=225   x1

Reproducible Demo

<KeyboardAvoidingView behavior="padding" style={{ flex: 1 }}>
  <Button title="Go 1" onPress={() => pagerRef.current?.setPage(1)} />
  <PagerView ref={pagerRef} style={{ flex: 1 }}>
    {/* one page per colour, each holding a TextInput */}
  </PagerView>
</KeyboardAvoidingView>
  1. Focus the input on page 0 so the keyboard opens
  2. Tap Go 1
  3. The page changes with no slide. With the keyboard closed the same tap slides

The example screen resizes itself for an unrelated reason. Its Events: line wraps as the log grows and Go N clears it in the same handler as the command, so its steps do not isolate this one.

Lingua principale
TypeScript
Stelle
3.4k
Fork
491
Merge medio
2g 4h
PR unite (30g)
51

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di callstack/react-native-pager-view

Tutte le issue di callstack/react-native-pager-view

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.