Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở
  • Có gì không ổn?
#990 0 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

Chưa có ai nhận issue này.

Đá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
35/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
ios, objective-c, react-native
Lĩnh vực
mobile-dev

Hướng nghiên cứu

Tái hiện trường hợp iOS tiếng Ả Rập, sau đó kiểm tra RNCPagerView.m và RNCPagerViewComponentView.mm, nơi mỗi UIPageViewController được cấu hình. So sánh hành vi với workaround semantic-content đã được báo cáo; được xem là hoàn tất khi thao tác vuốt của pager hoạt động trong RTL và LTR với hỗ trợ Info.plist được bản địa hóa, mà không phá vỡ hành vi hướng văn bản đã được ghi lại.

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

Mô tả

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"
}
Ngôn ngữ chính
TypeScript
Star
3.4k
Fork
485
Merge trung bình
2 ngày 12 giờ
Pull request đã merge (30 ngày)
24

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.