[iOS][Fabric] RTL horizontal ScrollView: contentOffset prop is not RTL-converted while scrollTo/metrics are, and scrollTo conversion uses stale contentSize
まだ誰も着手していません。
- 主要言語
- C++
- スター
- 127k
- フォーク
- 25.3k
- 平均マージ
- 1日 23時間
- マージ済み PR(30日)
- 4
説明
Description
On the New Architecture (Fabric), iOS implements RTL for a horizontal ScrollView by mirroring the view and converting scroll coordinates — but the conversion is asymmetric, and the imperative conversion depends on the native contentSize being current at call time. JS-driven paged lists that work on Paper break on Fabric under RTL.
In React/Fabric/Mounting/ComponentViews/ScrollView/RCTScrollViewComponentView.mm (0.81.5; the same code is on main and 0.82-stable):
updateLayoutMetrics:appliesCGAffineTransformMakeScale(-1, 1)to_containerViewand_scrollViewwhenlayoutDirection == RightToLeft._scrollViewMetricsconverts the reported offset:metrics.contentOffset.x = contentSize.width - containerSize.width - contentOffset.x(RTL branch).scrollToOffset:animated:converts the requested offset:offset.x = self.contentSize.width - _scrollView.frame.size.width - offset.x(RTL branch) —main~L1024.updateProps:applies thecontentOffsetprop with no conversion:_scrollView.contentOffset = RCTCGPointFromPoint(newScrollViewProps.contentOffset)—main~L408. TheprepareForRecycle/ state-restore paths setcontentOffsetunconverted too.
Two concrete consequences:
- Prop vs. imperative disagree. In RTL,
contentOffset={{x: k * pageWidth}}positions the view in physical (mirrored) space, whilescrollTo({x: k * pageWidth})positions it in logical space (andonScrollreports logical). For a paged list the prop lands one page off / at the far end relative to an identicalscrollTo. scrollTois timing-dependent. The conversion usesself.contentSize.widthand_scrollView.frame.size.widthat call time. AscrollToissued right after content changes (before the nativecontentSizecommits — e.g. in asetTimeout(0)after a data update, a very common pattern) is converted with stale dimensions and lands on the wrong page. This never happened in LTR (no conversion) and did not happen on Paper, so it surfaces as intermittent, device-only page jumps.
Steps to reproduce
- RTL app:
I18nManager.allowRTL(true); I18nManager.forceRTL(true)and cold launch (the direction is read at startup). newArchEnabled: true, iOS.- Horizontal
ScrollViewwithpagingEnabled, N full-width pages. - Case A — set
contentOffset={{x: k * width}}as a prop; compare the page shown with callingscrollTo({x: k * width, animated: false})after mount: they show different pages. - Case B — change the content (add/remove pages) and in the same tick /
setTimeout(0)callscrollTo({x: k * width}): on a device it frequently lands on a different page thank(converted against the previouscontentSize); readingcontentOffset.xfrom the nextonScrollconfirms the mismatch.
Expected behavior
All offset inputs are converted consistently in RTL — the contentOffset prop (and recycle/state restore) using the same mapping as scrollToOffset: and _scrollViewMetrics — and the imperative conversion should not silently use a stale contentSize (or the behavior should be documented so libraries can wait for the commit).
React Native Version
0.81.5 (Expo SDK 54). Verified the same code paths on main and 0.82-stable.
Affected Platforms
Runtime - iOS (New Architecture / Fabric). Not reproducible on the old architecture; not affected in LTR.
Environment
macOS 15 (Darwin 24.2), Xcode 16.2, iPhone 12 simulator (iOS 18.2) and physical iPhone (iOS 26.3.1), Hermes, newArchEnabled: true.
Real-world impact
react-native-calendars (used widely for RTL calendars) implements its own RTL offset handling for its recyclerlistview-based horizontal pagers; on Fabric that handling — and a naive "just remove the inversion" fix — both fail because of the two points above, producing calendars that jump between days/weeks nonstop. A downstream workaround (keep the pager's container direction: 'ltr' and mirror in JS) will be linked here.
Reproducer
No standalone reproducer repository attached yet; the steps above are minimal and the relevant native lines are cited. Happy to add a reproducer-react-native repo if maintainers want one.
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
調査の方向性
React/Fabric/Mounting/ComponentViews/ScrollView/RCTScrollViewComponentView.mm から調査を開始し、updateProps:、prepareForRecycle、state restoration、scrollToOffset:animated:、_scrollViewMetrics を比較します。記載されている RTL Fabric の再現手順を使用して、コンテンツ変更の前後における prop の offset と imperative な offset を確認します。RTL の offset 入力が一貫して動作し、コンテンツサイズのタイミングによって未文書化のページ不一致が発生しなくなり、関連する動作がカバーされるか明確に文書化されていれば完了です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- ios, objective-c
- 領域
- mobile-dev
- issue の種類
- バグ
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 活発
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 42/100