I tried integrating Firebase in the Compose Multiplatform, check out what I found out.
I was looking for a Multiplatform libary for firebase and i found out this.
Multiplatform Library for Firebase:
The Firebase Kotlin SDK is a Kotlin-first SDK for Firebase. It’s API is similar to the Firebase Android SDK Kotlin Extensions but also supports multiplatform projects, enabling you to use Firebase directly from your common source targeting iOS, Android, Desktop or Web, enabling the use of Firebase as a backend for Compose Multiplatform, for example.
Let’s start with the implementation:
1. Create your Compose Multiplatform App — check out the blog for details
Note* Don’t use the Kotlin Multiplatform Wizard because it is creating a problem for the iOS Firebase setup so the correct way is to use the template driven approach for creating your Compose Multiplatform App
2. Download and launch the app in Android Studio.
3. Create a firebase project — check out the blog for details
4. Configure your Firebase project for Android App — check out the blog for details
5. Configure your Firebase project for iOS App — check out the blog for details
6. Add data to the Firestore to later show in the UI — check out the blog for details
7. Add the GitLive dependencies
Go to build.gradle.kts(:composeApp)
Create a User class:
Get the collection from Firebase Firestore
Update the App composable function as follows:
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.Button
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import dev.gitlive.firebase.Firebase
import dev.gitlive.firebase.firestore.firestore
import org.jetbrains.compose.resources.ExperimentalResourceApi
import org.jetbrains.compose.resources.painterResource
@OptIn(ExperimentalResourceApi::class)
@Composable
fun App() {
MaterialTheme {
var greetingText by remember { mutableStateOf("Firebase Compose Multiplatform!") }
var showImage by remember { mutableStateOf(false) }
Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
var list by remember { mutableStateOf(listOf<User>()) }
LaunchedEffect(Unit){
list = getUsers()
}
LazyColumn {
items(list) {
UserItem(it)
}
}
Button(onClick = {
greetingText = "Compose: ${getPlatformName()}"
showImage = !showImage
}) {
Text(greetingText)
}
AnimatedVisibility(showImage) {
Image(
painterResource("compose-multiplatform.xml"),
null
)
}
}
}
}
expect fun getPlatformName(): String
@Composable
fun UserItem(user: User){
Column {
Text(text = user.location)
Text(text = user.day)
}
}
suspend fun getUsers(): List<User> {
val firebaseFirestore = Firebase.firestore
try{
val userResponse = firebaseFirestore.collection("Users").get()
return userResponse.documents.map {
it.data()
}
} catch (e: Exception){
throw e
}
}Run your androidApp
Run also for iosApp
It loaded the data from the Cloud Firestore
Thanks;)
