RTL swipe issue when project has a localized infoPlist (iOS)
维护者通常 1 天内回复
还没有人认领这个 Issue。
评估
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 新手友好度
- 35/100
- Issue 类型
- 缺陷
- 描述清晰度
- 基本清楚
- 活跃度
- 停滞
- 技术栈
- ios, objective-c, react-native
- 领域
- mobile-dev
调研方向
复现阿拉伯语 iOS 案例,然后检查 RNCPagerView.m 和 RNCPagerViewComponentView.mm,其中配置了每个 UIPageViewController。将行为与报告中的 semantic-content workaround 进行比较;当 pager 滑动在 RTL 和 LTR 中都能正常工作,并支持本地化的 Info.plist,且不破坏文档所述的文本方向行为时,即视为完成。
由索引模型根据 Issue 内容生成。
描述
Environment
This is my current configuration, but I noticed the issue on many different versions and setups as well.
"react": "18.3.1",
"react-native": "0.76.3",
"react-native-pager-view": "6.7.0",
"react-native-gesture-handler": "2.20.2",
"react-native-reanimated": "3.16.1",
Description
I discovered that when the Info.plist is localized for Arabic (RTL language), the swipe gestures in react-native-pager-view become unresponsive.
The pages become "sticky" and cannot be swiped, whereas everything works fine when the device language is set to English or on Android devices it works fine RTL & LTR.
The issue only occurs when these condition are all met:
- Device is in RTL langauge like: Arabic.
2.Its an iOS device. - Xcode project has a localized infoPlist string file or string catalogue.
- The localized infoPlist for the RTL langauge, has a translated string.
1- Example project working fine (Swiping works: ✅) (Simulator lang: AR | Localization file: NO)
Video:
https://github.com/user-attachments/assets/859ed657-b77e-42cd-a7d0-90fdaa360220
2- Example project with issue (Swiping does not work: ❌) (Simulator lang: AR | Localization file: YES)
in this example you can see how swiping does not work. only tapping.
Also you can see how I can't switch between RTL & LTR, its fixed to RTL.
Video:
https://github.com/user-attachments/assets/bf15f8e9-ce47-4851-8cae-e60054275134
Tested on real devices as well, and tried to modify all those variables:
- Native vs JS.
- Fabric On & Off.
- New Architecture On & Off.
The issue still stays the same.
Reproducible Demo
- Create a new React Native project and install react-native-pager-view.
- Add RTL language to the xcode project.
- Localize the Info.plist file to include Arabic, and add translation to app name for example.
- Implement react-native-pager-view in your project.
- Change the device language to Arabic.
- Run the app on an iOS device/simulator and observe that the swipe gestures for the pager do not work properly - and pages become stuck.
Temporary fix
I was able to apply a fix that solved it for me temporrary.
It appears that the UIPageViewController is inheriting an RTL layout from the localized Info.plist, which interferes with the swipe gestures.
A temporary workaround is to force the UIPageViewController's view layout to left-to-right by adding the following line here in package file:
File: RNCPagerView.m
before this line:
pageViewController.delegate = self;
pageViewController.dataSource = self;
I added:
//force ltr layout to restore swipe gesture
pageViewController.view.semanticContentAttribute = UISemanticContentAttributeForceLeftToRight;
File: RNCPagerViewComponentView.mm (for fabric)
before this line:
_nativePageViewController.dataSource = self;
_nativePageViewController.delegate = self;
I added:
//force ltr layout to restore swipe gesture
_nativePageViewController.view.semanticContentAttribute = UISemanticContentAttributeForceLeftToRight;
This fixed it for me I can swipe normally on RTL & LTR, and it did not break RTL & LTR layout support.
The only thing I noticed is that if a I have a component that does not have a textAlign assigned, I will have to assign it to avoid LTR direction by defualt when device is LTR but app is RTL.
Another fix:
I noticed that adding the same change to project file AppDelegate.m fixes it too:
[UIView appearance].semanticContentAttribute = UISemanticContentAttributeForceLeftToRight;
within didFinishLaunchingWithOptions.
Localized InfoPlist example
example of localized InfoPlist.xcstrings file you can use to reporoduce this, make sure Arabic is added to the supported project localizations.
{
"sourceLanguage" : "en",
"strings" : {
"CFBundleDisplayName" : {
"comment" : "Bundle display name",
"extractionState" : "extracted_with_value",
"localizations" : {
"ar" : {
"stringUnit" : {
"state" : "translated",
"value" : "عرض الصفحات"
}
},
"en" : {
"stringUnit" : {
"state" : "new",
"value" : "PagerViewExample"
}
}
}
},
"CFBundleName" : {
"comment" : "Bundle name",
"extractionState" : "extracted_with_value",
"localizations" : {
"en" : {
"stringUnit" : {
"state" : "new",
"value" : "ReactTestApp"
}
}
}
},
"NSCameraUsageDescription" : {
"comment" : "Privacy - Camera Usage Description",
"extractionState" : "extracted_with_value",
"localizations" : {
"en" : {
"stringUnit" : {
"state" : "new",
"value" : "The camera is needed to scan QR codes for JS bundle URLs"
}
}
}
}
},
"version" : "1.0"
}
- 主要语言
- TypeScript
- 星标
- 3.4k
- 派生
- 485
- 平均合并
- 2 天 12 小时
- 30 天内合并 PR
- 24
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
callstack/react-native-pager-view 的其他 Issue
-
iOS: PagerScrollDelegate proxies to itself and overflows the stack when the weak originalDelegate dies可能已有人在做 @lvlrSajjad 于 34 天前认领。 未关闭
难度 4/5 3-5 天 新手友好度 25/100
callstack/react-native-pager-view#1146 ·
维护者通常 1 天内回复
-
难度 5/5 一周以上 新手友好度 35/100
callstack/react-native-pager-view#1144 ·
维护者通常 1 天内回复
-
难度 4/5 3-5 天 新手友好度 45/100
callstack/react-native-pager-view#1141 · 1 个 reaction ·
维护者通常 1 天内回复
-
难度 4/5 3-5 天 新手友好度 55/100
callstack/react-native-pager-view#1099 · 8 条评论 · 3 个 reaction ·
维护者通常 1 天内回复
-
难度 4/5 3-5 天 新手友好度 45/100
callstack/react-native-pager-view#1081 · 1 条评论 · 2 个 reaction ·
维护者通常 1 天内回复
查看 callstack/react-native-pager-view 的全部 Issue
相似的 Issue
-
难度 2/5 1-3 小时 新手友好度 78/100
维护者通常 1 天内回复
-
bug
难度 2/5 1-3 小时 新手友好度 68/100
jbacalso24/mimry#459 · 1 条评论 ·
维护者通常 1 天内回复
-
architecture help wanted hive/claimed-by-architect origin/architect stage/030-pr-in-progress tech-debt
难度 2/5 1-3 小时 新手友好度 78/100
kubestellar/console#24422 · 1 条评论 ·
维护者通常 1 天内回复
-
area: backends type: docs
难度 1/5 1-3 小时 新手友好度 83/100
schlessera/brain-kit#2383 ·
维护者通常 1 天内回复
-
agent duplicate providers tool triaged
难度 2/5 1-3 小时 新手友好度 74/100
维护者通常 1 天内回复