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

Đang mở
  • Có gì không ổn?
#1,223 3 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

@TaduJR đang làm issue này rồi.

Từ ngày 4/11/2026.

  • #1224 của @TaduJR — đang mở

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
52/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
ios, react-native, swift, typescript
Lĩnh vực
frontend, mobile

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.

Ngôn ngữ chính
TypeScript
Star
3.4k
Fork
491
Merge trung bình
2 ngày 4 giờ
Pull request đã merge (30 ngày)
51

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của callstack/react-native-pager-view

Tất cả issue của callstack/react-native-pager-view

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.