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

アラビア語の iOS ケースを再現し、その後、各 UIPageViewController が構成されている RNCPagerView.m と RNCPagerViewComponentView.mm を調査する。報告されている semantic-content のワークアラウンドと動作を比較する。ローカライズされた Info.plist のサポートにより RTL と LTR の両方で pager のスワイプが機能し、文書化されたテキスト方向の動作を壊していなければ完了とする。

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"
}