Jetpack Compose Uninterrupted Connectivity: A Network Status Monitor Without The ‘Try Again’ Button!

Jetpack Compose Animation Network Status Screen Observing Connectivity

The ConnectivityStatus sealed class in Jetpack Compose acts as a state holder for network availability. It defines two states, Available and Unavailable, representing the presence or absence of an internet connection.

sealed class ConnectivityStatus {
    data object Available : ConnectivityStatus()
    data object Unavailable : ConnectivityStatus()
}

The ConnectivityCheck @Composable checks the internet connection and switches between the main app interface and a no-connection screen based on its availability.

@Composable
fun ConnectivityCheck(
    viewModel: SettingsViewModel
) {
    val connectivityStatus = observeConnectivityStatus()
    when (connectivityStatus) {
        ConnectivityStatus.Available -> NhlNavHost(viewModel.hasSeenPermissionsScreen)
        ConnectivityStatus.Unavailable -> ConnectivityScreen()
    }
}

The observeConnectivityStatus function is a component that monitors the network status in real-time using Android’s ConnectivityManager. It leverages the NetworkCallback to update the ConnectivityStatus , ensuring the UI components react to changes in network connectivity. Don’t forget to dispose the ConnectivityManager or memory leaks will happen!

@Composable
fun observeConnectivityStatus(): ConnectivityStatus {
    val ctx = LocalContext.current
    val connectivityManager = ctx.getSystemService(Context.CONNECTIVITY_SERVICE) as ConnectivityManager
    val connectivityStatus = remember { mutableStateOf<ConnectivityStatus>(ConnectivityStatus.Available) }
    DisposableEffect(connectivityManager) {
        val networkCallback = object : ConnectivityManager.NetworkCallback() {
            override fun onAvailable(network: Network) {
                connectivityStatus.value = ConnectivityStatus.Available
            }
            override fun onLost(network: Network) {
                connectivityStatus.value = ConnectivityStatus.Unavailable
            }
        }
        connectivityManager.registerDefaultNetworkCallback(networkCallback)
        onDispose {
            connectivityManager.unregisterNetworkCallback(networkCallback)
        }
    }
    return connectivityStatus.value
}

Usage in MainActivity.kt

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        MaterialTheme {
            ConnectivityCheck(settingsViewModel)
        }
    }
}

In conclusion, managing connectivity status is essential for providing a seamless user experience. Utilizing Jetpack Compose’s reactive programming model, we can efficiently handle network changes and guide users through different states of connectivity within their apps.

Try my animated network monitor in Jetpack Compose on GooglePlay 🥳
https://play.google.com/store/apps/details?id=com.brickyard.nhl

🗣️: reach out on X or Insta

Best,
RC