Implemented IOS native button;

Author: raheemadamboev

composeApp/build.gradle.kts

@@ -1,4 +1,3 @@
-import org.jetbrains.kotlin.gradle.ExperimentalKotlinGradlePluginApi
 import org.jetbrains.kotlin.gradle.dsl.JvmTarget
 
 plugins {
@@ -10,7 +9,6 @@ plugins {
 
 kotlin {
     androidTarget {
-        @OptIn(ExperimentalKotlinGradlePluginApi::class)
         compilerOptions {
             jvmTarget.set(JvmTarget.JVM_11)
         }

composeApp/src/androidMain/kotlin/xyz/teamgravity/kmpsharingnativeuicomponent/NativeButton.android.kt

@@ -0,0 +1,22 @@
+package xyz.teamgravity.kmpsharingnativeuicomponent
+
+import androidx.compose.material.Button
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+
+@Composable
+actual fun NativeButton(
+    onClick: () -> Unit,
+    modifier: Modifier
+) {
+    Button(
+        onClick = onClick,
+        modifier = modifier
+    ) {
+        Text(
+            text = stringResource(R.string.android_native_button)
+        )
+    }
+}

composeApp/src/androidMain/kotlin/xyz/teamgravity/kmpsharingnativeuicomponent/Platform.android.kt

@@ -1,3 +1,4 @@
 <resources>
     <string name="app_name">KMPSharingNativeUIComponent</string>
+    <string name="android_native_button">Android Native button</string>
 </resources>

composeApp/src/androidMain/res/values/strings.xml

@@ -1,37 +1,37 @@
 package xyz.teamgravity.kmpsharingnativeuicomponent
 
-import androidx.compose.animation.AnimatedVisibility
-import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.material.Button
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
-import androidx.compose.runtime.*
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import org.jetbrains.compose.resources.painterResource
 import org.jetbrains.compose.ui.tooling.preview.Preview
 
-import kmpsharingnativeuicomponent.composeapp.generated.resources.Res
-import kmpsharingnativeuicomponent.composeapp.generated.resources.compose_multiplatform
-
 @Composable
 @Preview
 fun App() {
     MaterialTheme {
-        var showContent by remember { mutableStateOf(false) }
-        Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
-            Button(onClick = { showContent = !showContent }) {
-                Text("Click me!")
-            }
-            AnimatedVisibility(showContent) {
-                val greeting = remember { Greeting().greet() }
-                Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
-                    Image(painterResource(Res.drawable.compose_multiplatform), null)
-                    Text("Compose: $greeting")
+        Column(
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.Center,
+            modifier = Modifier.fillMaxSize()
+        ) {
+            var counter by rememberSaveable { mutableIntStateOf(0) }
+            NativeButton(
+                onClick = {
+                    counter++
                 }
-            }
+            )
+            Text(
+                text = "Counter: $counter"
+            )
         }
     }
 }

composeApp/src/commonMain/kotlin/xyz/teamgravity/kmpsharingnativeuicomponent/App.kt

@@ -0,0 +1,10 @@
+package xyz.teamgravity.kmpsharingnativeuicomponent
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+
+@Composable
+expect fun NativeButton(
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier
+)

composeApp/src/commonMain/kotlin/xyz/teamgravity/kmpsharingnativeuicomponent/Greeting.kt

@@ -1,5 +1,19 @@
 package xyz.teamgravity.kmpsharingnativeuicomponent
 
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.ProvidableCompositionLocal
+import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.window.ComposeUIViewController
+import platform.UIKit.UIViewController
 
-fun MainViewController() = ComposeUIViewController { App() }
+val LocalNativeViewFactory: ProvidableCompositionLocal<NativeViewFactory> = staticCompositionLocalOf {
+    error("No view factory provided.")
+}
+
+fun MainViewController(
+    nativeViewFactory: NativeViewFactory
+): UIViewController = ComposeUIViewController {
+    CompositionLocalProvider(LocalNativeViewFactory provides nativeViewFactory) {
+        App()
+    }
+}

composeApp/src/commonMain/kotlin/xyz/teamgravity/kmpsharingnativeuicomponent/NativeButton.kt

@@ -0,0 +1,27 @@
+package xyz.teamgravity.kmpsharingnativeuicomponent
+
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.width
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.viewinterop.UIKitViewController
+
+@Composable
+actual fun NativeButton(
+    onClick: () -> Unit,
+    modifier: Modifier
+) {
+    val factory = LocalNativeViewFactory.current
+    UIKitViewController(
+        factory = {
+            factory.createButtonView(
+                label = "IOS Native button",
+                onClick = onClick
+            )
+        },
+        modifier = modifier
+            .width(150.dp)
+            .height(50.dp)
+    )
+}