I’m trying to do something a little different and ...

# compose

[Cicero]

I’m trying to do something a little different and I’m having a very weird “Composition requires an active composition context” 🧵

[Cicero]

This is where I call my compose function. I know this is fine because I had another composable that was working in the same place as TestView before.

class TFragment : BaseFragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        (requireActivity() as AppCompatActivity).supportActionBar?.hide()
        return ComposeView(requireContext()).apply {
            setContent {
                TestView(
                    externalNavigation = findNavController(),
                )
            }
        }
    }
}

[Cicero]

Than I have the navigation wrapper:

@Composable
fun TestView(externalNavigation: NavController) {
    val _testState: State<Test?> = flow {
        TestImpl().getTest().collect {
            emit(it)
        }
    }.collectAsState(
        initial = null,
        context = EmptyCoroutineContext
    )

    fun createTest(): Test {
        return Test(
            final = 0,
            empty = 0,
            date = LocalDateTime.now(),
            uuid = "TEST_TEST"
        )
    }

    val testState = _testState.value ?: createTest()

    val step by rememberSaveable { mutableStateOf(getStep(testState)) }
    val navHostController = NavigationHostController()
    val testAction = TestActions(
        navController = navHostController,
        externalNavigation = externalNavigation
    )

    GuidedTestLayout(
        onClickNext = {
            getNextDestinationByStep(
                step = step,
                action = testAction,
                testState = testState
            )
        },
        onClickBack = { testAction.popBack() }, step = 0,
        testState = testState,
        navHostController = navHostController,
    )
}

[Cicero]

And here is where my app crashes:

@Composable
fun TestLayout(
    onClickNext: () -> Unit,
    onClickBack: () -> Unit,
    step: Int,
    testState: Test,
    navHostController: NavHostController
) {
    ProcessTemplate(
        onClickNext = onClickNext,
        onClickBack = onClickBack,
        step = step,
        title = stringResource(R.string.add_test_title),
        enabled = isWaitForFinishingTestDone(testState.date)
    ) {
        NavHost(
            navController = navHostController,
            startDestination = INTRO.toString()
        ) {
            composable(INTRO.toString()) {
                TestIntroduction()
            }

            composable(START_TEST.toString()) {
                TestStart(testState.emptyWeight)
            }
        }
    }
}

[Cicero]

And this is the content of this intro:

@Composable
fun TestIntroduction(){
    Column {
        Text(text = "Intro")
    }
}

[Cicero]

Now I’m a little confused because I tried to find the minimal problem and it’s inside of my set content.

When I have other layouts there it works but as soon as I have something like:

setContent {
            Text("Hello world!")
        }

Which I copied from the compose tutorials it breaks. I’m challenging my basic knowledge of compose here 😓

[Cicero]

Now this is a little crazy, I’m having: java.lang.IllegalStateException: Composition requires an active composition context

In this code:

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.compose.ui.platform.ComposeView
import androidx.fragment.app.Fragment
import androidx.ui.core.Text

class TestFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return ComposeView(requireContext()).apply {
            setContent {
                Text(text = "Hello world.")
            }
        }
    }
}

[Cicero]

My question now is, is this code supposed to work: https://developer.android.com/jetpack/compose/tutorial ?

[Cicero]

Because for me it only works as soon as I wrap it in a Scaffold, which I totally forgot because some months ago I wrote all the scaffold styles and wrappers my app needed, and the weirder part is that the navigation is actually wrapped in a scaffold in the code I wrote, so now I find myself really confused.

How does this work?

[Cicero]

ProcessTemplate -> is a Scaffold

[Cicero]

I have a progress bar and instead of changing everything I just wanted to change the content of the scaffold, so I wrote this navigation inside.
I know I don’t need navigation there but I thought it could be practical as this screen changes a lot depending on the state of the information.

[Cicero]

Bottom line was the damn wrong imports from androidx.ui.core

Just sad

[Jorge Cordero]

hehe it happens sometimes, happy you found the spot

[Cicero]

I just wish I could submit a PR to improve the message