Hacktoberfest 2026:维护者为十月标记出来的 issue,仍然开放、适合新手。 浏览 Hacktoberfest issue

RTL swipe issue when project has a localized infoPlist (iOS)

未关闭
#990 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 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:

  1. Device is in RTL langauge like: Arabic.
    2.Its an iOS device.
  2. Xcode project has a localized infoPlist string file or string catalogue.
  3. 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

  1. Create a new React Native project and install react-native-pager-view.
  2. Add RTL language to the xcode project.
  3. Localize the Info.plist file to include Arabic, and add translation to app name for example.
  4. Implement react-native-pager-view in your project.
  5. Change the device language to Arabic.
  6. 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

环境准备

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

callstack/react-native-pager-view 的其他 Issue

查看 callstack/react-native-pager-view 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。