TabNavigator not Allowing Theme change

[RaheemJnr]

I have been trying to implement theme change in 2 of my app but it being a hassle after extensive debug period I figured the common thing between them is that both app uses Voyager because they are a multiplatform app, I figured after a successful theme change and the state changes Voyager doesn't recompose to reflect the current (newly) selected theme until I close the app and open again, so my question now is had anyone faced similar issue and what advice will you give me on how to overcome it or probably a code example.

note: After lot of time spent debugging i found out it's the ### TabNavigator causing it. in two separate example where i use and didn't use the tab navigator the issue persist in the former and not the latter.

` @composable
override fun Content() {
val vm: ProfileViewmodel = koinScreenModel()
val modifier = Modifier
val isDark = remember { mutableStateOf(false) }

    TabNavigator(
        tab = TodayTab(),
        key = isDark.value.toString(),
        content = {
            Surface(
                modifier = modifier
                    .fillMaxSize()
                    .background(MaterialTheme.colorScheme.background)
                    .padding(top = 50.dp),
            ) {
                Box {
                    Icon(
                        imageVector = Icons.Rounded.WbSunny,
                        contentDescription = null,
                        modifier = modifier
                            .padding(16.dp)
                            .align(Alignment.TopEnd)
                            .size(32.dp)
                            .clickable {
                                isDark.value = !isDark.value
                                vm.toggleTheme(isDark = isDark.value)
                            }
                    )
                    Column(
                        modifier = modifier.fillMaxSize(),
                        verticalArrangement = Arrangement.Center,
                        horizontalAlignment = Alignment.CenterHorizontally,
                    ) {
                        Spacer(modifier = Modifier.height(16.dp))
                        Column(
                            horizontalAlignment = Alignment.CenterHorizontally,
                            verticalArrangement = Arrangement.spacedBy(62.dp),
                            modifier = modifier.padding(12.dp)
                        ) {
                            val text = buildAnnotatedString {
                                append("Just start with a ")
                                withStyle(
                                    style = SpanStyle(
                                        textDecoration = TextDecoration.Underline,
                                        color = MaterialTheme.colorScheme.primary
                                    )
                                ) {
                                    append("Goal")
                                }
                                append(" and we help break it down into ")
                                withStyle(style = SpanStyle(color = MaterialTheme.colorScheme.primary)) {
                                    append("actionable tasks")
                                }
                                append(" and ")
                                withStyle(style = SpanStyle(color = MaterialTheme.colorScheme.primary)) {
                                    append("time frame")
                                }
                            }
                            Text(
                                text = text,
                                style = MaterialTheme.typography.titleLarge.copy(
                                    fontWeight = FontWeight.Bold,
                                    textAlign = TextAlign.Center,
                                    letterSpacing = 2.sp
                                ),
                            )
                        }
                    }

                    SkipIcon {
                        //onSkipClick()
                    }
                }
            }
        }
    )

}`

the second example

`@Composable
override fun Content() {
val vm: ProfileViewmodel = koinScreenModel()
val modifier = Modifier
val isDark = remember { mutableStateOf(false) }

    Surface(
        modifier = modifier
            .fillMaxSize()
            .background(MaterialTheme.colorScheme.background)
            .padding(top = 50.dp),
    ) {
        Box {
            Icon(
                imageVector = Icons.Rounded.WbSunny,
                contentDescription = null,
                modifier = modifier
                    .padding(16.dp)
                    .align(Alignment.TopEnd)
                    .size(32.dp)
                    .clickable {
                        isDark.value = !isDark.value
                        vm.toggleTheme(isDark = isDark.value)
                    }
            )
            Column(
                modifier = modifier.fillMaxSize(),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally,
            ) {
                Spacer(modifier = Modifier.height(16.dp))
                Column(
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.spacedBy(62.dp),
                    modifier = modifier.padding(12.dp)
                ) {
                    val text = buildAnnotatedString {
                        append("Just start with a ")
                        withStyle(
                            style = SpanStyle(
                                textDecoration = TextDecoration.Underline,
                                color = MaterialTheme.colorScheme.primary
                            )
                        ) {
                            append("Goal")
                        }
                        append(" and we help break it down into ")
                        withStyle(style = SpanStyle(color = MaterialTheme.colorScheme.primary)) {
                            append("actionable tasks")
                        }
                        append(" and ")
                        withStyle(style = SpanStyle(color = MaterialTheme.colorScheme.primary)) {
                            append("time frame")
                        }
                    }
                    Text(
                        text = text,
                        style = MaterialTheme.typography.titleLarge.copy(
                            fontWeight = FontWeight.Bold,
                            textAlign = TextAlign.Center,
                            letterSpacing = 2.sp
                        ),
                    )
                }
            }

            SkipIcon {
                //onSkipClick()
            }
        }
    }
}`

[kotlin-compose-multiplatform]

I downgrade my voyager version and problem fixed:

• my current version: 1.1.0-alpha04
• same problem on this version: 1.1.0-beta02

[RaheemJnr]

I downgrade my voyager version and problem fixed:

• my current version: 1.1.0-alpha04
• same problem on this version: 1.1.0-beta02

I'll downgrade and try it out

[RaheemJnr]

@shageldi-dev Thank you so much! It finally worked after downgrading my voyager version.

[jayesh94]

@RaheemJnr did this work for you in iOS as well? Downgrading version works on Android, but doesn't work on iOS.

I have the below versions with another fix to make voyager work with kotlin 2.1.0 as suggested in iOS Doesn't build with kotlin 2.1.0 and voyager 1.1.0-beta03 or lower

I have also tried upgrading the compose version to 1.8.0-alpha06, still the same result.

compose = "1.7.6" 
compose-plugin = "1.7.3"
kotlin = "2.1.0"
voyager = "1.1.0-alpha04"

[RaheemJnr]

I haven't tried it out on IOS yet

…

On Sat, 4 Jan 2025, 12:40 am Jayesh Nair, ***@***.***> wrote: @RaheemJnr <https://github.com/RaheemJnr> did this work for you in iOS as well? Downgrading version works on Android, but doesn't work on iOS. I have the below versions with another fix to make voyager work with kotlin 2.1.0 as suggested in iOS Doesn't build with kotlin 2.1.0 and voyager 1.1.0-beta03 or lower <#515 (comment)> I have also tried upgrading the compose version to 1.8.0-alpha06 <https://issuetracker.google.com/u/1/issues/374263387>, still the same result. compose = "1.7.6" compose-plugin = "1.7.3" kotlin = "2.1.0" voyager = "1.1.0-alpha04" — Reply to this email directly, view it on GitHub <#480 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/APZFSRMH5LKO4OKRDBVN5UD2I4NVJAVCNFSM6AAAAABNN6OG6OVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKNRZHEZTOMBTHA> . You are receiving this because you were mentioned.Message ID: ***@***.***>