Skip to content

[Q] How to force RTL UI for the app shell in iOS (action-bar, pages animations, back swipe direction)? #9465

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mahmoudajawad opened this issue Jul 9, 2021 · 5 comments
Assignees

Comments

@mahmoudajawad
Copy link

Hello.

iOS has RTL mode for apps which makes quite serious difference when the app is supposed to be used in RTL or in LTR mode. The differences are:

  • App action-bar would place the back button automatically on the right side of the action-bar, and the arrow would point to right.
  • Pages when navigating would slide from left to right (as opposed to right to left for LTR apps).
  • Swiping gesture to navigate back starts from the right edge of the screen towards the left (as opposed to starting from left for LTR).

These differences make huge UX issue for RTL apps written in NativeScript when trying to use as much of the native look and feel on iOS.

I made a search on this over the past days, and found some interesting points, such as https://stackoverflow.com/a/42430254, which has a solution that is reported in one way or another across other SO answers and blog posts on the internet. I was able to translate the code to NativeScript with help from @williamjuan027 (thanks!) to this:

// Code is added to an event method to make sure it is running only when the UI is ready
UIView.appearance().semanticContentAttribute = UISemanticContentAttribute.ForceLeftToRight;
UINavigationBar.appearance().semanticContentAttribute = UISemanticContentAttribute.ForceLeftToRight;
const storyboard = new UIStoryboard();
const vc = storyboard.instantiateInitialViewController();
if (vc) {
  UIApplication.sharedApplication.keyWindow.rootViewController = vc;
}

However, it is transforming the app into a white screener, meaning it is working, but it is reloading the wrong storyboard/viewcontroller. Next I tried the following to get the current storyboard in order to try it:

const storyboard = UIStoryboard().storyboardWithNameBundle('root', null);

However, I'm unable to figure out the correct combination for the storyboard name and the value for NSBundle (second parameter).

What am I messing with this and how can I get NativeScript to reload current view-controller in order to get the changes of semanticContentAttribute get into effect?

@mahmoudajawad
Copy link
Author

This SO question is interesting as it mentions a successful import of storyboard of a custom bundle. This asserts the calls are working but the missing part is the correct combination:
https://stackoverflow.com/questions/55409217/nativescript-importing-ios-framework-classes-and-downcast

@mahmoudajawad
Copy link
Author

I also tried to get some inspiration from LanguageManager-iOS lib about how to get this working, but the addSubView doesn't seem to do anything: https://github.com/Abedalkareem/LanguageManager-iOS/blob/master/LanguageManager-iOS/Classes/Main/LanguageManager.swift#L203

@mahmoudajawad
Copy link
Author

In discussion with @xlmnxp, he confirmed that the snippet mentioned in the issue did work back then with NativeScript 6, and with NativeScript 7 this seems to have broken. Any thoughts on what might have changed and break this?

@mahmoudajawad
Copy link
Author

Bumping this up
Related: #6051 #6156 #7094

@CatchABus
Copy link
Contributor

Regarding the layout direction thing, I think core could provide a layoutDirection property for start.
Text has more things to consider though, like the direction of paragraph style in iOS.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants