Xamarin.forms: [Bug] Xamarin.Forms Shell Opener Issue for "RTL Language" when Tap at Hamburger

[ranacodendev]

Description

using xamarin.forms 4.0.0 -pre9 as Shell App, over all application is working fine, but right now i have one serious issue i.e.
My App is in Arabic Language , so when i Tap at Hamburger to open Shell/Menu it works differently for iPhone/iPad i.e. at iPad it open Shell/Menu Right to Left fine.
but at iPhone it open Shell/Menu Left to Right not acceptable by my Customer.

so please help me in this regards, that its behavior should be same for both Devices i.e. it should be open from Right to Left

Steps to Reproduce

1. 
   
   
   2.
   
3.

Expected Behavior

Actual Behavior

Basic Information

• Version with issue:
• Last known good version:
• IDE:
• Platform Target Frameworks:
  
  
  
  • iOS:
  
  
  • Android:
  
  
  • UWP:
  
  
• Android Support Library Version:
• Nuget Packages:
• Affected Devices:

Screenshots

Reproduction Link

[ranacodendev]

dear @pauldipietro ,
Is there any way that i can open this Shell/Menu in Standard way, i.e. Right to Left, may be using some Renderer, please help me in this regards ASAP.
Please share any source code sample if possible,
Thanks,

[ranacodendev]

hello anybody there to help me PLEASE.

[Hedyia]

To solve this issue the device should be in Arabic setting. or you could use this plugin.
https://github.com/saeedafshari/RedCorners.Forms

[mohamadayash]

Hello I have the same problem

[ranacodendev]

so any update on this issue as explained above,
is there any way to solve it, i.e. always open menu from RTL in both devices cases iPhone/iPad and also in Android.?

please share any code or any thing which helps me in this regards,
Thanks,
MN

[mohamadayash]

Hello , any news about this issue ?

[AmerBakeer]

Hello,
Please .. any update regarding this BIG issue?? please... !!!

[balbarak]

Same issue here,

Switch your iphone language to be arabic or any RTL lanugage.

The hamberger menu will be on the right position but when click the menu items or shell items will appear in worng direction

[AmerBakeer]

It is strange how they keep ignoring bugs like these, we don't need new features while existing are not stable! I think by continuous ignoring they are pushing us softly and politely to go to another platform like Flutter... I wish i am not correct here ...

[balbarak]

I found the solution after 2 days of search and investigate

I think IShellFlyoutTransition need to be documented with samples

• First create IShellFlyoutTransition
  ``` C#
  public class SlideFlyoutTransitionRtl : IShellFlyoutTransition
  {

  public void LayoutViews(CGRect bounds, nfloat openPercent, UIView flyout, UIView shell, FlyoutBehavior behavior)
  {
      if (behavior == FlyoutBehavior.Locked)
          openPercent = 1;
  
      nfloat flyoutWidth = (nfloat)(Math.Min(bounds.Width, bounds.Height) * 0.8);
      nfloat openLimit = flyoutWidth;
      nfloat openPixels = openLimit * openPercent;
  
      if (behavior == FlyoutBehavior.Locked)
          shell.Frame = new CGRect(bounds.X + flyoutWidth, bounds.Y, bounds.Width - flyoutWidth, bounds.Height);
      else
          shell.Frame = bounds;
  
      var shellWidth = shell.Frame.Width;
  
      var positionY = shellWidth - openPixels;
  
  
      Debug.WriteLine("Y: " + positionY);
      Debug.WriteLine("Width: " + shell.Frame.Width);
  
      //flyout.Frame = new CGRect(-openLimit + openPixels, 0, flyoutWidth, bounds.Height);
  
      flyout.Frame = new CGRect(positionY, 0, flyoutWidth, bounds.Height);
  
      if (behavior != FlyoutBehavior.Locked)
      {
          var shellOpacity = (nfloat)(0.5 + (0.5 * (1 - openPercent)));
          shell.Layer.Opacity = (float)shellOpacity;
      }
  }
  

* Then create `AppShellRenderer` as following

```C#
public class AppShellRenderer : ShellRenderer
    {
        public AppShellRenderer()
        {

        }

        protected override IShellFlyoutRenderer CreateFlyoutRenderer()
        {
            return new ShellFlyoutRenderer()
            {
                FlyoutTransition = new SlideFlyoutTransitionRtl()
            };
        }
    }

Thats will solve the issue

Thanks

[AmerBakeer]

@balbarak Thank you very much for sharing 😍
can you share a small empty project demonstrate this? 🙌🙌🙌 I think it is easier for you than answering many question (what, where , how .. etc) from me and the other readers.

[balbarak]

@AmerBakeer you can find the sample project here

https://github.com/balbarak/xamarin-shell-rtl

[AmerBakeer]

@balbarak Wonderful ⭐⭐⭐⭐⭐
Thank you very much 👍👍

[mohamadayash]

@balbarak Thank you

[PureWeen]

@balbarak Thank you for the initial work on this!!!

It was a great starting off point for this PR

https://github.com/xamarin/Xamarin.Forms/pull/9237

Once this PR gets merged please let me know about additional RTL issues
@mohamadayash @AmerBakeer @ranacodendev @Hedyia

One question I have for any of you.

How do you expect the tabs to change when you switch to RTL ? Would you expect them to reorder the other direction? Or do you not care so much because they are just tabs?

I couldn't find a lot of specific guidance about tabs and most things I saw just said if you want to change the tabs based on RTL then just add them in reverse order.

[AmerBakeer]

Dear Shane,
thank you for your interest in this issue.

Yes, in RTL the Tabs should appear from Right to Left (to meet the read direction), i.e. the first tab should appear at the far right and the last tab at the far left.

@PureWeen

[mohamadayash]

Dear Shane , yes the tabs should be appear from right to left , Thank you for your interest and sorry for answering late

[PureWeen]

@mohamadayash thank you for the response!

It's interesting because AFAICT UITabBar doesn't automatically relayout based on if the device is RTL

It seems like you have to just do it manually (which is why I asked)

But there is a chance my test was flawed

[davidbuckleyni]

For anyone interested I opened an enhancement request for a double flyover which I think people are asking for as well in here. Please vote for it.

https://github.com/xamarin/Xamarin.Forms/issues/10991