When using `movableContentOf()`, got an issue wher...

# compose

[Stylianos Gakis]

When using movableContentOf(), got an issue where the state does not persist when (I think) I’m using the content normally on one end, and inside a SubComposeLayout on the other call site. More details in Thread 🧵

[Stylianos Gakis]

I got a structure which looks like this (simplified):

val movableItem = remember { movableContentOf... }
if(true) {
  Foo1(movableItem)
} else {
  Foo2(movableItem)
}

fun Foo1(movableItem) {
  ModalBottomSheetLayout(...) {
    movableItem()
  }
}

fun Foo2(movableItem) {
  Stuff() {
    movableItem()
  }
}

And I feel like since ModalBottomSheetLayout uses subcomposition this does not work. If I specifically move inside Foo1 the movableItem() call to outside of the bottom sheet the state is persisted perfectly fine!

[Stylianos Gakis]

Known problem? Something else I may be missing?
This is the first time I’m playing with movableContentOf() so there’s a good chance I’m completely missing something of course.

[fengdai]

I experienced a similar issue: https://kotlinlang.slack.com/archives/CJLTWPH7S/p1654734644676989

[Stylianos Gakis]

Ah yes, I could totally reproduce this with a very minimal repro here

@Composable
fun Demo() {
  val movableItem = remember {
    movableContentOf<String> { text ->
      val infiniteTransition = rememberInfiniteTransition()
      val height by infiniteTransition.animateValue(50.dp, 150.dp, Dp.VectorConverter, infiniteRepeatable(tween(600), RepeatMode.Reverse))
      Text(text, Modifier.height(height).border(1.dp, Color.Red))
    }
  }
  var placementFlag by remember { mutableStateOf(true) }
  Box(Modifier.fillMaxSize()) {
    Button(onClick = { placementFlag = !placementFlag }) {
      Text("Flip state")
    }
    if (placementFlag) {
      Column(Modifier.align(Alignment.Center)) {
        Text("Smth else")
        Spacer(Modifier.height(40.dp))
        movableItem("cat")
      }
    } else {
      //BoxWithConstraints(Modifier.align(Alignment.Center)) { // uncomment this (and the '}' below) to break the movableContentOf
        Column(Modifier.align(Alignment.Center)) {
          movableItem("cat12")
          Spacer(Modifier.height(40.dp))
          Text("Smth else")
        }
      //}
    }
  }
}

[Stylianos Gakis]

Thanks for the reply, I posted my minimal repro in there too to hopefully get some more attention on this issue.
There are just so many places where there’s subcomposition (Scaffold, this bottom sheet layout etc) which means that movableContentOf is simply not usable if it doesn’t play well with subcomposition. That’s quite unfortunate, I hope it gets bumped from P4 priority 👀

[Stylianos Gakis]

Seems to be fixed here https://android-review.googlesource.com/c/platform/frameworks/support/+/2199821/
Super happy about it 🦜 🦜 🦜