Simplify Network Management with CMPConnectivityMonitor in Compose Multiplatform

Hey there, fellow developers! 🚀 Have you ever found yourself shouting at your screen, wondering why your app suddenly goes offline? Do you wish your app could magically sense when the internet is back, all without you writing a ton of boilerplate code? Well, sit tight, because we’ve got something awesome for you!

Meet CMPConnectivityMonitor, a Compose Multiplatform library that promises to make network connectivity issues a thing of the past for both Android and iOS. Today, we’ll take a fun and easy dive into what this library does, how to set it up, and how it can save you from connectivity nightmares. Ready? Let’s go!

Why Should You Care About Connectivity?

Before we jump in, let’s answer this: Why is monitoring network connectivity so crucial? Picture this: Your app user is in the middle of an epic game, a crucial online purchase, or a life-saving medical alert, and BAM! The internet drops. Frustrating, right? Having a reliable way to monitor and handle connectivity changes ensures that your app remains smooth and user-friendly.

Why CMPConnectivityMonitor?

Managing network connectivity in mobile apps is crucial for data synchronization and user experience. CMPConnectivityMonitor simplifies this with:

• Real-time Monitoring: Detects and updates UI on network status changes instantly.
• Cross-Platform Support: Works seamlessly on both Android and iOS.
• Connectivity Types: Differentiates between Wi-Fi and Cellular connections.
• Simple API: Easy to integrate into Compose Multiplatform apps.

Getting Started

Installation

Add the necessary dependencies to your build.gradle.kts:

commonMain.dependencies {
    implementation("network.chaintech:compose-connectivity-monitor:1.0.0")
}

Setup

Android

In your AppActivity, initialize the ConnectivityMonitor:

class AppActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        ConnectivityMonitor.initialize(this)
    }
}

Usage

Initialize the Connectivity Monitor

Create an instance of ConnectivityMonitor in your shared code:

val connectivityMonitor = ConnectivityMonitor.instance

Start Monitoring

Start monitoring network connectivity:

connectivityMonitor.startMonitoring()

Stop Monitoring

Stop monitoring network connectivity when it is no longer needed:

connectivityMonitor.stopMonitoring()

Hard Refresh

Perform a hard refresh to recheck the current network status:

connectivityMonitor.refresh()

Observe Connectivity Status

Use a StateFlow to observe the connectivity status:

val connectivityStatus: StateFlow<ConnectivityStatus> = connectivityMonitor.status

You can then use this state in your Compose UI:

@Composable
fun ConnectivityStatusView() {
    val status by connectivityMonitor.status.collectAsState()

    when (status) {
        ConnectivityStatus.CONNECTED,
        ConnectivityStatus.CONNECTED_VIA_CELLULAR,
        ConnectivityStatus.CONNECTED_VIA_WIFI -> {
            // Show connected UI
        }
        ConnectivityStatus.NOT_CONNECTED,
        ConnectivityStatus.CONNECTED_VIA_CELLULAR_WITHOUT_INTERNET,
        ConnectivityStatus.CONNECTED_VIA_WIFI_WITHOUT_INTERNET -> {
            // Show disconnected UI
        }
        ConnectivityStatus.DETERMINING -> {
            // Show loading or determining UI
        }
    }
}

Connectivity Status

The ConnectivityStatus enum provides various states to represent the connectivity status:

• CONNECTED
• CONNECTED_VIA_CELLULAR
• CONNECTED_VIA_CELLULAR_WITHOUT_INTERNET
• CONNECTED_VIA_WIFI
• CONNECTED_VIA_WIFI_WITHOUT_INTERNET
• DETERMINING
• NOT_CONNECTED

Wrapping Up

With CMPConnectivityMonitor, you can wave goodbye to frustrating connectivity issues and hello to a seamless user experience. Whether you’re a seasoned developer or just starting out, this library is your ticket to robust, connectivity-aware applications. So, what are you waiting for? Dive in, and make your app internet-savvy today!

Feel free to share your thoughts, questions, or any funny connectivity mishaps in the comments below. Happy coding! 😄

All the code and examples it is in this repository.

Connect with us 👇

Linkedin

GitHub