Is there a way to tell a `Row` to invert the order...

# compose

[julioromano]

Is there a way to tell a Row to invert the order it lays out its content? (e.g. LTR instead of RTL)

[Zach Klippenstein (he/him) [MOD]]

You mean other than actually just changing the layout direction, I presume? (Not actually sure if doing so would even have that effect, but I would think)

[julioromano]

yes, but it has to be “local” somehow, i.e it shouldn’t affect other composables

[julioromano]

I mean… changing the LayoutDirection would be great, but can it be done for that Row only?

[Zach Klippenstein (he/him) [MOD]]

Change it back before adding the actual row children? Not very elegant, admittedly, but probably easier than reimplementing Row from scratch

[julioromano]

Sounds like I suck at explaining… lemme show an example

[julioromano]

with boolean param: false
||A|B|……||


with boolean param: true
||……|B|A||


(|| are the screen boundaries, the dots are just empty sapce)

[Zach Klippenstein (he/him) [MOD]]

eg

val originalDirection = LocalLayoutDirection.current
val flippedDirection = if (originalDirection == Ltr) Rtl else Ltr
CompositionLocalProvider(LocalLayoutDirection provides flippedDirection) {
  Row(…) {
    CompositionLocalProvider(LocalLayoutDirection provides originalDirection) {
      // Row children here
    }
  }
}

[julioromano]

oh super, sounds like a great place to start!

[Zach Klippenstein (he/him) [MOD]]

of course you could factor that all out into a custom Row if you needed to reuse it lots

[julioromano]

Thanks a bunch, leaving this here for whoever might come by:

@Composable
fun InvertibleRow(
  isInverted: Boolean,
  modifier: Modifier = Modifier,
  horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
  verticalAlignment: Alignment.Vertical = <http://Alignment.Top|Alignment.Top>,
  content: @Composable RowScope.() -> Unit
) {
  val layoutDirection: LayoutDirection = LocalLayoutDirection.current
  CompositionLocalProvider(
    LocalLayoutDirection provides if (isInverted) layoutDirection.invert() else layoutDirection
  ) {
    Row(
      modifier = modifier,
      horizontalArrangement = horizontalArrangement,
      verticalAlignment = verticalAlignment
    ) {
      CompositionLocalProvider(LocalLayoutDirection provides layoutDirection) {
        content()
      }
    }
  }
}

private fun LayoutDirection.invert(): LayoutDirection = when (this) {
  LayoutDirection.Ltr -> LayoutDirection.Rtl
  LayoutDirection.Rtl -> LayoutDirection.Ltr
}

[Vinay Gaba]

Showkase does this for rendering a component in RTL mode - https://github.com/airbnb/Showkase/blob/20d8c40878ce29fc2cc0ee647b85fc04d4f2c504/s[…]com/airbnb/android/showkase/ui/ShowkaseComponentDetailScreen.kt

[cb]

A much easier way is to use LazyRow and reverseLayout. This honors the layout direction: LazyRow(reverseLayout = true)