title: ConstraintLayout inside ConstraintLayout not working in Jetpack Compose
body: <p>I've two components <code>Brand</code> and <code>SignInCreateAccount</code>. Each component created by <code>ConstraintLayout</code>. Now, I create <code>WelcomeScreen</code> from above components.</p>
  <p>Usecase 1: <code>WelcomeScreen</code> using still <code>ConstraintLayout</code> (<code>ConstraintLayout</code> inside <code>ConstraintLayout</code>)</p>
  <pre><code>@Composable
  fun WelcomeScreen(modifier: Modifier = Modifier) {
  
      ConstraintLayout {
          val (brand, formSignIn) = createRefs()
  
          Brand(modifier = modifier.constrainAs(brand) {
              start.linkTo(parent.start)
              end.linkTo(parent.end)
              top.linkTo(parent.top)
          })
  
          SignInCreateAccount(modifier = modifier.constrainAs(formSignIn) {
              start.linkTo(brand.start)
              end.linkTo(brand.end)
              top.linkTo(brand.bottom)
          })
      }
  }
  </code></pre>
  <p>Result: Layout preview not show anything</p>
  <p>Usecase 2: <code>WelcomeScreen</code> using <code>Column</code>(<code>ConstrantLayout</code> inside <code>Column</code>)</p>
  <pre><code>@Composable
  fun WelcomeScreen(modifier: Modifier = Modifier) {
  
      Column {
          Brand()
          SignInCreateAccount()
      }
  }
  </code></pre>
  <p>Result: Layout preview show expected result</p>
  <p>Brand and SignInCreateAccount components</p>
  <pre><code>@Composable
  fun SignInCreateAccount(modifier: Modifier = Modifier) {
      ConstraintLayout {
          val (titleSignIn, email, buttonContinue, titleOr, buttonSignGuest) = createRefs()
  
          Text(
              text = stringResource(id = R.string.sign_in_create_account),
              modifier = modifier.constrainAs(titleSignIn) {
                  start.linkTo(parent.start)
                  end.linkTo(parent.end)
                  top.linkTo(parent.top)
              })
  
          Text(text = &quot;... Enter your mail&quot;, modifier = modifier.constrainAs(email) {
              start.linkTo(titleSignIn.start)
              end.linkTo(titleSignIn.end)
              top.linkTo(titleSignIn.bottom)
          })
      }
  }
  
  @Composable
  fun Brand(modifier: Modifier = Modifier) {
      ConstraintLayout {
          val (logo, slogan) = createRefs()
  
          Logo(modifier = modifier.constrainAs(logo) {
              start.linkTo(parent.start)
              end.linkTo(parent.end)
              top.linkTo(parent.top)
          })
  
          Text(text = stringResource(id = R.string.app_tagline),
              modifier = modifier.constrainAs(slogan) {
                  start.linkTo(logo.start)
                  end.linkTo(logo.end)
                  top.linkTo(logo.bottom)
              })
      }
  }
  
  @Composable
  fun Logo(
      modifier: Modifier = Modifier,
      lightTheme: Boolean = MaterialTheme.colors.isLight
  ) {
      val assetId = if (lightTheme) {
          R.drawable.ic_logo_light
      } else {
          R.drawable.ic_logo_dark
      }
  
      Image(
          painter = painterResource(id = assetId),
          modifier = modifier,
          contentDescription = null
      )
  }
  </code></pre>
  <p>I want to using <code>ConstraintLayout</code>(as hobby) as use case 1. But I don't know what I did wrong or is there something wrong with <code>ConstraintLayout</code>.</p>
  <p><strong>Update:</strong> I missed a modifier parameter to the inner constraint layouts. However, another problem arose. That layout rearanged correct, but it not show anything: text, image.</p>
  <p><a href="https://i.stack.imgur.com/bG4ff.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bG4ff.png" alt="enter image description here" /></a></p>
  <p><code>WelcomeScreen.kt</code></p>
  <pre><code>@Composable
  fun WelcomeScreen(modifier: Modifier = Modifier) {
  
      ConstraintLayout(modifier = modifier) {
          val (brand, formSignIn) = createRefs()
  
          Brand(modifier = modifier.constrainAs(brand) {
              start.linkTo(parent.start)
              end.linkTo(parent.end)
              top.linkTo(parent.top)
          })
  
          SignInCreateAccount(modifier = modifier.constrainAs(formSignIn) {
              start.linkTo(brand.start)
              end.linkTo(brand.end)
              top.linkTo(brand.bottom)
          })
      }
  }
  
  @Composable
  fun SignInCreateAccount(modifier: Modifier = Modifier) {
      ConstraintLayout(modifier = modifier) {
          val (titleSignIn, email, buttonContinue, titleOr, buttonSignGuest) = createRefs()
  
          Text(
              text = stringResource(id = R.string.sign_in_create_account),
              modifier = modifier.constrainAs(titleSignIn) {
                  start.linkTo(parent.start)
                  end.linkTo(parent.end)
                  top.linkTo(parent.top)
              })
  
          Text(text = &quot;... Enter your mail&quot;, modifier = modifier.constrainAs(email) {
              start.linkTo(titleSignIn.start)
              end.linkTo(titleSignIn.end)
              top.linkTo(titleSignIn.bottom)
          })
      }
  }
  
  @Composable
  fun Brand(modifier: Modifier = Modifier) {
      ConstraintLayout(modifier = modifier) {
          val (logo, slogan) = createRefs()
  
          Logo(modifier = modifier.constrainAs(logo) {
              start.linkTo(parent.start)
              end.linkTo(parent.end)
              top.linkTo(parent.top)
          })
  
          Text(text = stringResource(id = R.string.app_tagline),
              modifier = modifier.constrainAs(slogan) {
                  start.linkTo(logo.start)
                  end.linkTo(logo.end)
                  top.linkTo(logo.bottom)
              })
      }
  }
  
  @Composable
  fun Logo(
      modifier: Modifier = Modifier,
      lightTheme: Boolean = MaterialTheme.colors.isLight
  ) {
      val assetId = if (lightTheme) {
          R.drawable.ic_logo_light
      } else {
          R.drawable.ic_logo_dark
      }
  
      Image(
          painter = painterResource(id = assetId),
          modifier = modifier,
          contentDescription = null
      )
  }
  
  @Preview
  @Composable
  fun DevPreview() {
      JetsurveyTheme(darkTheme = false) {
          WelcomeScreen()
      }
  }
  </code></pre>