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

Offen
  • Stimmt etwas nicht?
#1,223 3 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

@TaduJR arbeitet bereits daran.

Seit 04.11.2026.

  • #1224 von @TaduJR — offen

Bewertung

Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Anfängerfreundlichkeit
52/100
Issue-Typ
Bug
Klarheit
Größtenteils klar
Aktivitätsstatus
Aktiv
Tech-Stack
ios, react-native, swift, typescript
Bereich
frontend, mobile

Rechercherichtung

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.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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.

Vorherrschende Sprache
TypeScript
Sterne
3.4k
Forks
491
Ø Merge
2 T. 4 Std.
Gemergte PRs (30 T.)
51

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus callstack/react-native-pager-view

Alle Issues in callstack/react-native-pager-view

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.