callstack / callstack/react-native-pager-view
RTL swipe issue when project has a localized infoPlist (iOS)
- Langage dominant
- TypeScript
- Étoiles
- 3.4k
- Forks
- 476
- Merge moyen
- 10 j 21 h
- PR mergées (30 j)
- 2
Description
## 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.
3. Xcode project has a localized infoPlist string file or string catalogue.
4. 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"
}
```
Guide de contribution
Ouvrir le guide de contribution
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.
Évaluation
- Stack technique
- ios, objective-c, react-native
- Domaine
- mobile-dev
- Type d'issue
- Bug
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 35/100