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

Ouverte
  • Quelque chose ne va pas ?
#990 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
4/5
Temps estimé
3-5 jours
Accessibilité débutants
35/100
Type d'issue
Bug
Clarté
Plutôt claire
Activité
À l'abandon
Stack technique
ios, objective-c, react-native
Domaine
mobile-dev

Piste de recherche

Reproduire le cas iOS en arabe, puis inspecter RNCPagerView.m et RNCPagerViewComponentView.mm, où chaque UIPageViewController est configuré. Comparer le comportement avec le contournement de semantic-content signalé ; c'est terminé lorsque les balayages du pager fonctionnent en RTL et LTR avec la prise en charge d'une Info.plist localisée, sans casser le comportement documenté de la direction du texte.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

stale

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"
}
Langage dominant
TypeScript
Étoiles
3.4k
Forks
491
Merge moyen
2 j 7 h
PR mergées (30 j)
49

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de callstack/react-native-pager-view

Toutes les issues de callstack/react-native-pager-view

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.