10

I have a login scren and when the login is successful and the view model updates the mutable state variable, my expectation is that a new composable function is called to show a new screen and the login one is removed. The problem is that when the new screen (aka Screen.AccountsScreen) is shown, its content keeps flashing/redrawing and same thing happen with the login form which never gets destroyed (I know this because the log message 'Recomponing...' gets printed endless). I assume this happens because the isLoginSuccessful state is always true. It seems I need an event that can be consumed only once, is this correct? If so, how can I do that?

LoginViewModel.kt

@HiltViewModel
class LoginViewModel @Inject constructor() : ViewModel() {

  var isLoginSuccessful by mutableStateOf(false)
  var errorMessage by mutableStateOf("")
  
  fun onLoginClick(email: String, password:String) {
    errorMessage = ""
    if (credentialsValid(email, password)) {
      isLoginSuccessful = true
    } else {
      errorMessage = "Email or password invalid"
      isLoginSuccessful = false
    }
  }
}

LoginScreen.kt

@Composable
fun loginScreen(
  navController: NavController,
  viewModel: LoginViewModel = hiltViewModel()
) {
  println("Recomponing...")
  // Here gos the code for the login form
  
  if (viewModel.isLoginSuccessful) {
    navController.navigate(Screen.AccountsScreen.route) {
      popUpTo(Screen.LoginScreen.route) { inclusive = true }
    }
  }
}
Phil Dukhov
  • 67,741
  • 15
  • 184
  • 220
Androider2
  • 427
  • 1
  • 5
  • 8
  • Hi! Did my answer solve your question? If so, please accept it using a checkmark under the votes counter. Otherwise, let me know if you have any problems with it. – Phil Dukhov Oct 18 '21 at 16:11
  • @Pylyp Dukhov My screens also flash sometimes and I have not yet found out the reason. in my case the action to navigate happens inside a lambda on button click. Afaik I dont need to use a Launched effect in this case as the lambda is not part of the composition but when it happens the state of my composition is lost and I get a screen flash. not sure what I am missing – quealegriamasalegre Apr 01 '22 at 19:30
  • @quealegriamasalegre it's hard to say, please reduce your code to a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) and post an other question, as it doesn't seems to be related to this one. – Phil Dukhov Apr 02 '22 at 01:28
  • The thing Is I am not able to reproduce it consistently. I will try to create the conditions to make it happen consistently and post the question then – quealegriamasalegre Apr 02 '22 at 15:02

2 Answers2

15

Composite navigation recomposes both disappearing and appearing views during transition. This is the expected behavior.

You're calling navigate on each recomposition. Your problem lays in these lines:

if (viewModel.isLoginSuccessful) {
    navController.navigate(Screen.AccountsScreen.route) {
        popUpTo(Screen.LoginScreen.route) { inclusive = true }
    }
}

You shouldn't change state directly from view builders. In this case LaunchedEffect should be used:

if (viewModel.isLoginSuccessful) {
    LaunchedEffect(Unit) {
        navController.navigate(Screen.AccountsScreen.route) {
            popUpTo(Screen.LoginScreen.route) { inclusive = true }
        }
    }
}

Check out more in side effects documentation.

Phil Dukhov
  • 67,741
  • 15
  • 184
  • 220
1

For me, I see flicker because the activity background is white, but I am on dark mode.

Change your app theme to daynight, try adding

implementation 'com.google.android.material:material:1.5.0'

and change your theme to

<style name="Theme.MyStockApp" parent="Theme.Material3.DayNight.NoActionBar" />
Jeffrey Liu
  • 1,063
  • 1
  • 9
  • 18