Bidirectional TurboNative Android apps

1

Hello everyone,

I have a Rails application that supports Arabic & English (RTL & LTR). when I created a TurboNative application for it, the Arabic (RTL) version works fine as I set android:supportsRtl="true" in AndroidManifest.xml, but changing the language to English (LTR) is not changing the layout even that the HTML tag in the webview has dir attribute set to ltr.

Do you know how to solve this?

2

I solved the issue. The main issue that the TurboNative webView is not updating the dir attribute on the head tag when I change the language from RTL to LTR or vise-versa. To solve this issue, I created a direction-validator StimulusJS controller like this:

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="direction-validator"
export default class extends Controller {
  connect() {
    const htmlElement = document.documentElement;
    const url = window.location.href;

    if (url.includes('/ar')) {
      htmlElement.setAttribute('dir', 'rtl');
    } else if (url.includes('/en')) {
      htmlElement.setAttribute('dir', 'ltr');
    }
  }
}

And then attached it to the body element if the request comes from Android TurboNative app like this:

data: { controller: (turbo_android? ? 'direction-validator' : nil) }