DatePicker composable added (#23)

Author: oliverloops

README.md

@@ -82,5 +82,5 @@ dependencies {
   // Optional - Add window size utils
   implementation 'androidx.compose.material3.adaptive:adaptive'
   // Reflect API
-  implementation 'org.jetbrains.kotlin:kotlin-reflect:1.9.23'
+  implementation 'org.jetbrains.kotlin:kotlin-reflect:1.9.24'
 }

android/build.gradle

@@ -0,0 +1,29 @@
+package expo.modules.jetpackcomposereactnative.views.datepicker
+
+import expo.modules.jetpackcomposereactnative.common.ModifierProp
+import expo.modules.kotlin.modules.Module
+import expo.modules.kotlin.modules.ModuleDefinition
+
+class DatePickerModule : Module() {
+    override fun definition() = ModuleDefinition {
+        Name("DatePickerView")
+        View(DatePickerView::class) {
+            Events("onConfirm", "onDismiss")
+            Prop("showModeToggle") { view: DatePickerView, prop: Boolean -> 
+                view.updateShowModeToggle(prop)
+            }
+            Prop("tonalElevation") { view: DatePickerView, prop: Int ->
+                view.updateTonalElevation(prop)
+            }
+            Prop("confirmText") { view: DatePickerView, prop: String ->
+                view.updateConfirmText(prop)
+            }
+            Prop("dismissText") { view: DatePickerView, prop: String ->
+                view.updateDismissText(prop)
+            }
+            Prop("modifier") { view: DatePickerView, prop: ModifierProp ->
+                view.updateModifier(prop)
+            }
+        }
+    }
+}

android/src/main/java/expo/modules/jetpackcomposereactnative/views/datepicker/DatePickerModule.kt

@@ -0,0 +1,110 @@
+package expo.modules.jetpackcomposereactnative.views.datepicker
+
+import android.content.Context
+import android.view.View
+import android.view.ViewGroup.LayoutParams.WRAP_CONTENT
+import androidx.compose.material3.DatePicker
+import androidx.compose.material3.DatePickerDialog
+import androidx.compose.material3.*
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.viewinterop.AndroidView
+import expo.modules.jetpackcomposereactnative.common.ModifierProp
+import expo.modules.jetpackcomposereactnative.common.toModifier
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.views.ExpoView
+import expo.modules.kotlin.viewevent.EventDispatcher
+import expo.modules.kotlin.viewevent.ViewEventCallback
+
+data class DatePickerProps(
+    var modifier: ModifierProp = emptyList(),
+    var confirmText: String? = null,
+    var dismissText: String? = null,
+    var tonalElevation: Int? = null,
+    var showModeToggle: Boolean? = null,
+)
+
+class DatePickerView(context: Context, appContext: AppContext) : ExpoView(context, appContext) {
+    private var props = mutableStateOf(DatePickerProps())
+    private val onConfirm by EventDispatcher()
+    private val onDismiss by EventDispatcher()
+
+    init {
+        ComposeView(context).also {
+            it.layoutParams = LayoutParams(WRAP_CONTENT, WRAP_CONTENT)
+            it.setContent {
+                DatePickerComposable(
+                    props = props.value, 
+                    onConfirmation = onConfirm,
+                    onDismissRequest = onDismiss
+                )
+            }
+            addView(it)
+        }
+    }
+
+    fun updateShowModeToggle(showModeToggle: Boolean){
+        props.value = props.value.copy(showModeToggle = showModeToggle)
+    }
+
+    fun updateTonalElevation(tonalElevation: Int) {
+        props.value = props.value.copy(tonalElevation = tonalElevation)
+    }
+
+    fun updateConfirmText(confirmText: String) {
+        props.value = props.value.copy(confirmText = confirmText)
+    }
+
+    fun updateDismissText(dismissText: String) {
+        props.value = props.value.copy(dismissText = dismissText)
+    }
+
+    fun updateModifier(modifier: ModifierProp) {
+        props.value = props.value.copy(modifier = modifier)
+    }
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun DatePickerComposable(
+    props: DatePickerProps,
+    onConfirmation: ViewEventCallback<Map<String, Any>>,
+    onDismissRequest: ViewEventCallback<Map<String, Any>>
+) {
+    val modifier: Modifier = props.modifier.toModifier()
+    val datePickerState = rememberDatePickerState()
+
+    DatePickerDialog(
+        onDismissRequest = {
+            onDismissRequest(mapOf())
+        },
+        confirmButton = {
+            TextButton(
+                onClick = {
+                    onConfirmation(mapOf())
+                }
+            ) {
+                Text(props.confirmText ?: "OK")
+            }
+        },
+        dismissButton = {
+        TextButton(
+            onClick = {
+                onDismissRequest(mapOf())
+                }
+            ) {
+                Text(props.dismissText ?: "Cancel")
+            }
+        },
+        tonalElevation = props.tonalElevation?.dp ?: AlertDialogDefaults.TonalElevation
+    ) {
+        DatePicker(
+            state = datePickerState,
+            showModeToggle = props.showModeToggle ?: true,
+        )
+    }    
+}

android/src/main/java/expo/modules/jetpackcomposereactnative/views/datepicker/DatePickerView.kt

@@ -4,6 +4,27 @@ apply plugin: "com.facebook.react"
 
 def projectRoot = rootDir.getAbsoluteFile().getParentFile().getAbsolutePath()
 
+static def versionToNumber(major, minor, patch) {
+  return patch * 100 + minor * 10000 + major * 1000000
+}
+
+def getRNVersion() {
+  def version = providers.exec {
+    workingDir(projectDir)
+    commandLine("node", "-e", "console.log(require('react-native/package.json').version);")
+  }.standardOutput.asText.get().trim()
+
+  def coreVersion = version.split("-")[0]
+  def (major, minor, patch) = coreVersion.tokenize('.').collect { it.toInteger() }
+
+  return versionToNumber(
+      major,
+      minor,
+      patch
+  )
+}
+def rnVersion = getRNVersion()
+
 /**
  * This is the configuration block to customize your React Native Android app.
  * By default you don't need to apply any configuration, just uncomment the lines you need.
@@ -20,12 +41,12 @@ react {
     bundleCommand = "export:embed"
 
     /* Folders */
-     //   The root of your project, i.e. where "package.json" lives. Default is '../..'
-    // root = file("../../")
-    //   The folder where the react-native NPM package is. Default is ../../node_modules/react-native
-    // reactNativeDir = file("../../node_modules/react-native")
-    //   The folder where the react-native Codegen package is. Default is ../../node_modules/@react-native/codegen
-    // codegenDir = file("../../node_modules/@react-native/codegen")
+    //   The root of your project, i.e. where "package.json" lives. Default is '..'
+    // root = file("../")
+    //   The folder where the react-native NPM package is. Default is ../node_modules/react-native
+    // reactNativeDir = file("../node_modules/react-native")
+    //   The folder where the react-native Codegen package is. Default is ../node_modules/@react-native/codegen
+    // codegenDir = file("../node_modules/@react-native/codegen")
 
     /* Variants */
     //   The list of variants to that are debuggable. For those we're going to
@@ -58,8 +79,10 @@ react {
     //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
     // hermesFlags = ["-O", "-output-source-map"]
 
-    /* Autolinking */
-    autolinkLibrariesWithApp()
+    if (rnVersion >= versionToNumber(0, 75, 0)) {
+        /* Autolinking */
+        autolinkLibrariesWithApp()
+    }
 }
 
 /**
@@ -121,9 +144,6 @@ android {
             useLegacyPackaging (findProperty('expo.useLegacyPackaging')?.toBoolean() ?: false)
         }
     }
-    androidResources {
-        ignoreAssetsPattern '!.svn:!.git:!.ds_store:!*.scc:!CVS:!thumbs.db:!picasa.ini:!*~'
-    }
 }
 
 // Apply static values from `gradle.properties` to the `android.packagingOptions`
@@ -174,3 +194,8 @@ dependencies {
         implementation jscFlavor
     }
 }
+
+if (rnVersion < versionToNumber(0, 75, 0)) {
+    apply from: new File(["node", "--print", "require.resolve('@react-native-community/cli-platform-android/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim(), "../native_modules.gradle");
+    applyNativeModulesAppBuildGradle(project)
+}

example/android/app/build.gradle

@@ -11,7 +11,7 @@
       <data android:scheme="https"/>
     </intent>
   </queries>
-  <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="true" android:theme="@style/AppTheme" android:supportsRtl="true">
+  <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="true" android:theme="@style/AppTheme">
     <meta-data android:name="expo.modules.updates.ENABLED" android:value="false"/>
     <meta-data android:name="expo.modules.updates.EXPO_UPDATES_CHECK_ON_LAUNCH" android:value="ALWAYS"/>
     <meta-data android:name="expo.modules.updates.EXPO_UPDATES_LAUNCH_WAIT_MS" android:value="0"/>
@@ -28,5 +28,6 @@
         <data android:scheme="expo.modules.jetpackcomposereactnative.example"/>
       </intent-filter>
     </activity>
+    <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" android:exported="false"/>
   </application>
 </manifest>

example/android/app/src/main/AndroidManifest.xml

@@ -10,7 +10,6 @@ import com.facebook.react.ReactPackage
 import com.facebook.react.ReactHost
 import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
 import com.facebook.react.defaults.DefaultReactNativeHost
-import com.facebook.react.soloader.OpenSourceMergedSoMapping
 import com.facebook.soloader.SoLoader
 
 import expo.modules.ApplicationLifecycleDispatcher
@@ -22,10 +21,9 @@ class MainApplication : Application(), ReactApplication {
         this,
         object : DefaultReactNativeHost(this) {
           override fun getPackages(): List<ReactPackage> {
-            val packages = PackageList(this).packages
             // Packages that cannot be autolinked yet can be added manually here, for example:
             // packages.add(new MyReactNativePackage());
-            return packages
+            return PackageList(this).packages
           }
 
           override fun getJSMainModuleName(): String = ".expo/.virtual-metro-entry"
@@ -42,7 +40,7 @@ class MainApplication : Application(), ReactApplication {
 
   override fun onCreate() {
     super.onCreate()
-    SoLoader.init(this, OpenSourceMergedSoMapping)
+    SoLoader.init(this, false)
     if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
       // If you opted-in for the New Architecture, we load the native entry point for this app.
       load()