Compose multiplatform - iOS app layout does not adapt to RTL when changing app language to RTL language

Question

I am developing a Kotlin Compose multiplatform app with multiple language support, including both LTR and RTL languages. When the user changes the app language to Hebrew, which is right-to-left, the app layout does not fully convert to properly display RTL.

I confirmed that the localization files are properly configured.

It works fine on Android, so seems to be an iOS issue handling dynamic RTL layout changes.

Any ideas on what might cause this or how to properly trigger the right-to-left layout conversion dynamically on language change? Thanks!

Answer 1

So, Eventually that what I did:

in commonMain:

expect val platformLanguageCode: String?

in androidMain:

actual val platformLanguageCode: String?
    get() = Locale.getDefault().language

in iosMain:

actual val platformLanguageCode: String?
    get() = NSLocale.currentLocale.languageCode

I created this wrapper:

@Composable
fun LayoutDirectionWrapper(content: @Composable () -> Unit) {
    val layoutDirection = when (platformLanguageCode) {
        "en" -> LayoutDirection.Ltr
        "iw", "he" -> LayoutDirection.Rtl
        else -> LayoutDirection.Ltr
    }

    CompositionLocalProvider(LocalLayoutDirection provides layoutDirection) {
        content()
    }
}

and then in the main App function:

@Composable
fun App() {
    LayoutDirectionWrapper {
        MySharedComposeContent()
    }
}

Works like a charm both in Android and iOS