[iOS] UIKit's scroll to a focused field can leave the pager between pages

オープン
  • 何か問題がありますか？
#1,230 コメント 4 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

@TaduJR がすでに取り組んでいます。

2026年11月6日 から。

  • #1234 @TaduJR による — オープン

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
52/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
ios, react-native, typescript
領域
frontend, mobile

調査の方向性

Start with the example app screen “Issue #1154 Page Change Focus Repro” and set styles.events to height: 44 to reproduce the timing. Trace the iOS pager handling of interrupted setPage calls alongside the focus and keyboard events, then run the described release-build sequence. Done means the pager settles on page 2, reports matching selection and scroll state, and the focused input and keyboard behave consistently.

索引モデルが issue の本文から書いたものです。

説明

Environment

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

Description

When a text field on another page takes focus, UIKit scrolls the pager's collection view to reveal it: scrollRectToVisible, twice and animated, once while the field becomes first responder and once from the keyboard notification. That scroll replaces the slide TabView is running and stops at the smallest offset that shows the field, and UIKit leaves the pager there.

The selection and the screen then disagree. onPageSelected reports page 2 while the pager rests nearest page 1, the log reads selected 2 and then state idle at 1, and the screen shows a sliver of page 0 beside page 1. Because the pager is not on a page boundary nothing reports a rest, so the input on the page being left keeps focus with the keyboard open.

Measuring the collection view's offset at scrollViewDidEndScrollingAnimation, against a 402 pt page:

run end offset
interrupt, with the arriving page's input focused in the same handler 377
interrupt, no focus 804
interrupt, keyboard already open from the previous page 804
focus on arrival, single setPage, no interrupt 402

Both ingredients are needed, and 377 is not arbitrary: it is the least the pager can scroll to bring that field on screen.

A per-instance override is viable, since PagerGestureObserver.installGestureArbitration already gives the pager's collection view its own runtime subclass. It is a behaviour change: an app that focuses an input on a page it is not showing would see nothing move, where today the pager is dragged between pages instead. An enclosing scroll view is unaffected, since in a pager inside a ScrollView inside a KeyboardAvoidingView the pager receives no reveal at all in 6 of 6 runs, and every one goes to the outer scroll view and the field's own editor.

Reproducible Demo

The example app has the screen already: Issue #1154 Page Change Focus Repro. Its event log reflows as it grows, which shifts the timing, so give the events box a fixed height first (height: 44 on styles.events) to see this reliably.

  1. Open the screen in a release build
  2. Tap onPress, so the arriving page's input is focused in the same handler as the command
  3. Tap the input on page 0, so the keyboard opens
  4. Tap Go 1 then 2, which sends setPage(1) and then setPage(2) from onPageSelected
  5. The pager stops between pages and stays there. The status line reads Selected: 2, the log ends state idle at 1, and the input on page 1 is still focused with the keyboard open

With that fixed height, two runs in six end this way on main. Without it the screen's own timing hides it most of the time, though the same case failed CI on #1224 with Selected: 1 | Focused: input 1 | Keyboard: visible | Scrolls: 9.

A fix is open as #1234, which declines the reveal from iOS 16 rather than repairing the landing after it.

主要言語
TypeScript
スター
3.4k
フォーク
491
平均マージ
2日 4時間
マージ済み PR（30日）
51

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

callstack/react-native-pager-view のほかの issue

callstack/react-native-pager-view の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。