Navigation after API success in Now in Android architecture

[kuvandikov]

Hi everyone,

I’m currently building a project inspired by the Now in Android architecture and had a question about navigation and handling API results.

Context

In my authentication flow:

• User enters a phone number
• An OTP request (auth/otp) is sent from the ViewModel
• After a successful response, I need to navigate to the SMS confirmation screen

Current approach

Right now, I observe the UI state in Compose and trigger navigation like this:

LaunchedEffect(state) {
    if (state is Success) {
        onNavigateToOtp(state.phone)
    }
}

Concern

This approach doesn’t feel fully aligned with the Now in Android principles. It mixes UI state with navigation side effects and might lead to repeated navigation on recomposition.

Question

What would be the recommended way to handle this in the Now in Android architecture?

• Should navigation be triggered via a separate event stream from the ViewModel (e.g. SharedFlow)?
• Or should it be derived purely from UI state?
• How do you prevent navigation from being triggered multiple times?

I’d really appreciate any guidance or examples from the NIA approach.

Thanks!

[samyak2403]

In the Now in Android architecture, the recommended way to handle "one-time" side effects like navigation is to treat the navigation intent as a part of the UI state that must be explicitly "consumed" to prevent repeated triggers on recomposition or configuration changes.

1. Update UI State

Add a specific trigger (e.g. navigateToOtp) to your UiState. This makes it predictable and compatible with SavedStateHandle.

data class AuthUiState(
    val navigateToOtp: Boolean = false, 
    val isLoading: Boolean = false,
    val error: String? = null
)

2. ViewModel Logic

When the API succeeds, update the state. Also, provide a function to "consume" or reset this trigger.

class AuthViewModel(...) : ViewModel() {
    fun onNavigationHandled() {
        _uiState.update { it.copy(navigateToOtp = false) }
    }
}

3. UI Implementation (Compose)

Observe the trigger using LaunchedEffect and call the reset function immediately after navigating.

@Composable
fun AuthRoute(onNavigateToOtp: () -> Unit, viewModel: AuthViewModel) {
    val uiState by viewModel.uiState.collectAsStateWithLifecycle()

    LaunchedEffect(uiState.navigateToOtp) {
        if (uiState.navigateToOtp) {
            onNavigateToOtp()
            // Reset the state to prevent re-triggering on recomposition or process death
            viewModel.onNavigationHandled()
        }
    }
}

This approach maintains a Single Source of Truth and avoids the common pitfall of mixing navigation logic directly into the business logic layer.

[kuvandikov]

Thanks for your answer!

I might have overlooked it, but I couldn’t find where the "phoneNumber" is actually passed from the auth screen to the OTP screen.

Could you clarify that part? It seems like an important piece for completing the flow.