README updated

README.md

@@ -47,7 +47,7 @@ export default function App() {
 
 - [Oliver Lopez](https://x.com/oliverloops)
 
-## To Do (WIP)
+## To Do
 
 - [x] Button
 - [x] Switch
@@ -69,10 +69,17 @@ export default function App() {
 - [x] Text
 - [x] Carousel
 - [x] Snackbar
-- [ ] Bottom Sheet
+- [x] Bottom Sheet
 - [x] Time/Date Picker (WIP...)
 - [x] LazyColumn/Row (just add a `lazy` prop to the existing components)
 - [x] LazyGrid (vertical and horizontal props from the same component)
 - [x] LazyStaggeredGrid (vertical and horizontal props from the same component)
 - [x] Box
+
+- ### We're currently adding more (feel free to suggest new composables)
+
+- [ ] DropdownMenu
+- [ ] NavigationRail
+- [ ] SearchBar
+- [ ] LinearWavyProgressIndicator
 - [ ] More modifiers!

android/build.gradle

@@ -17,6 +17,7 @@ if (useManagedAndroidSdkVersions) {
   useDefaultAndroidSdkVersions()
 } else {
   buildscript {
+    ext.kotlin_version = '1.9.24'
     // Simple helper that allows the root project to override versions declared by this library.
     ext.safeExtGet = { prop, fallback ->
       rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
@@ -37,7 +38,7 @@ android {
     compose true
   }
   composeOptions {
-    kotlinCompilerExtensionVersion = "1.5.14"
+    kotlinCompilerExtensionVersion = "1.5.10"
   }
   defaultConfig {
     versionCode 1

android/src/main/java/expo/modules/jetpackcomposereactnative/views/badge/BadgeView.kt

@@ -20,8 +20,6 @@ data class BadgeProps(
 class BadgeView(context: Context, appContext: AppContext) : ExpoView(context, appContext) {
     private var props = mutableStateOf(BadgeProps())
 
-    override val shouldUseAndroidLayout = true
-
     init {
         ComposeView(context).also {
             it.layoutParams = LayoutParams(WRAP_CONTENT, WRAP_CONTENT) // Allow the content to wrap

android/src/main/java/expo/modules/jetpackcomposereactnative/views/badged_box/BadgedBoxView.kt

@@ -41,8 +41,6 @@ class BadgedBoxView(context: Context, appContext: AppContext) : ExpoView(context
         }
     }
 
-    override val shouldUseAndroidLayout = true
-
     init {
         ComposeView(context).also {
             it.layoutParams = LayoutParams(WRAP_CONTENT, WRAP_CONTENT) // Allow the content to wrap

android/src/main/java/expo/modules/jetpackcomposereactnative/views/bottomsheet/BottomSheetModule.kt

@@ -0,0 +1,17 @@
+package expo.modules.jetpackcomposereactnative.views.bottomsheet
+
+import expo.modules.jetpackcomposereactnative.common.ModifierProp
+import expo.modules.kotlin.modules.Module
+import expo.modules.kotlin.modules.ModuleDefinition
+
+class BottomSheetModule : Module() {
+    override fun definition() = ModuleDefinition {
+        Name("BottomSheetView")
+        View(BottomSheetView::class) {
+            Events("onDismiss")
+            Prop("modifier") { view: BottomSheetView, prop: ModifierProp ->
+                view.updateModifier(prop)
+            }
+        }
+    }
+}

android/src/main/java/expo/modules/jetpackcomposereactnative/views/bottomsheet/BottomSheetView.kt

@@ -0,0 +1,86 @@
+package expo.modules.jetpackcomposereactnative.views.bottomsheet
+
+import android.content.Context
+import android.view.View
+import android.view.ViewGroup.LayoutParams.WRAP_CONTENT
+import androidx.compose.foundation.layout.*
+import androidx.compose.material3.*
+import androidx.compose.material3.ModalBottomSheet
+import androidx.compose.material3.BottomSheetDefaults
+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 BottomSheetProps(
+    var children: List<View> = emptyList(),
+    var modifier: ModifierProp = emptyList()
+)
+
+class BottomSheetView(context: Context, appContext: AppContext) : ExpoView(context, appContext) {
+    private var props = mutableStateOf(BottomSheetProps())
+    private val onDismiss by EventDispatcher()
+
+    override fun addView(child: View?, index: Int) {
+        if (child is ComposeView) {
+            super.addView(child, index)
+        } else {
+            if (child != null) {
+                props.value = props.value.copy(children = props.value.children + child)
+            }
+        }
+    }
+
+    init {
+        ComposeView(context).also {
+            it.layoutParams = LayoutParams(WRAP_CONTENT, WRAP_CONTENT)
+            it.setContent {
+                BottomSheetComposable(
+                    props = props.value,
+                    onDismissRequest = onDismiss 
+                )
+            }
+            addView(it)
+        }
+    }
+
+    fun updateModifier(modifier: ModifierProp) {
+        props.value = props.value.copy(modifier = modifier)
+    }
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun BottomSheetComposable(
+    props: BottomSheetProps,
+    onDismissRequest: ViewEventCallback<Map<String, Any>>
+){
+    val sheetState = rememberModalBottomSheetState()
+    val modifier: Modifier = props.modifier.toModifier()
+
+    ModalBottomSheet(
+        onDismissRequest = {
+            onDismissRequest(mapOf())
+        },
+        sheetState = sheetState,
+        sheetMaxWidth = BottomSheetDefaults.SheetMaxWidth,
+        containerColor = BottomSheetDefaults.ContainerColor,
+        shape = BottomSheetDefaults.ExpandedShape,
+        tonalElevation = 0.dp
+    ) {
+        props.children.map { child ->
+            AndroidView(
+                factory = { child },
+            )
+        }
+    }
+}

android/src/main/java/expo/modules/jetpackcomposereactnative/views/box/BoxView.kt

@@ -33,9 +33,6 @@ class BoxView(context: Context, appContext: AppContext) : ExpoView(context, appC
         }
     }
 
-    override val shouldUseAndroidLayout = true
-
-
     init {
         ComposeView(context).also {
             it.layoutParams = LayoutParams(WRAP_CONTENT, WRAP_CONTENT)

android/src/main/java/expo/modules/jetpackcomposereactnative/views/button/ButtonView.kt

@@ -26,8 +26,6 @@ class ButtonView(context: Context, appContext: AppContext) : ExpoView(context, a
     private var props = mutableStateOf(ButtonProps())
     private val onButtonClick by EventDispatcher()
 
-    override val shouldUseAndroidLayout = true
-
     init {
         ComposeView(context).also {
             it.layoutParams = LayoutParams(WRAP_CONTENT, WRAP_CONTENT) // Allow the content to wrap

android/src/main/java/expo/modules/jetpackcomposereactnative/views/card/CardView.kt

@@ -26,8 +26,6 @@ data class CardProps(
 class CardView(context: Context, appContext: AppContext) : ExpoView(context, appContext) {
     private var props = mutableStateOf(CardProps())
 
-    override val shouldUseAndroidLayout = true
-
     override fun addView(child: View?, index: Int) {
         if (child is ComposeView) {
             super.addView(child, index)

android/src/main/java/expo/modules/jetpackcomposereactnative/views/carousel/CarouselView.kt

@@ -34,9 +34,6 @@ data class CarouselProps(
 class CarouselView(context: Context, appContext: AppContext) : ExpoView(context, appContext) {
     private var props = mutableStateOf(CarouselProps())
 
-    override val shouldUseAndroidLayout = true
-
-
     init {
         ComposeView(context).also {
             it.layoutParams = LayoutParams(WRAP_CONTENT, WRAP_CONTENT) // Allow the content to wrap

android/src/main/java/expo/modules/jetpackcomposereactnative/views/checkbox/CheckboxView.kt

@@ -22,9 +22,6 @@ class CheckboxView(context: Context, appContext: AppContext) : ExpoView(context,
     private var props = mutableStateOf(CheckboxProps())
     private val onCheckedChange by EventDispatcher()
 
-    override val shouldUseAndroidLayout = true
-
-
     init {
         ComposeView(context).also {
             it.layoutParams = LayoutParams(WRAP_CONTENT, WRAP_CONTENT)

android/src/main/java/expo/modules/jetpackcomposereactnative/views/chip/ChipView.kt

@@ -30,8 +30,6 @@ class ChipView(context: Context, appContext: AppContext) : ExpoView(context, app
     private var props = mutableStateOf(ChipProps())
     private val onChipClick by EventDispatcher()
 
-    override val shouldUseAndroidLayout = true
-
     init {
         ComposeView(context).also {
             it.layoutParams = LayoutParams(WRAP_CONTENT, WRAP_CONTENT) // Allow the content to wrap

android/src/main/java/expo/modules/jetpackcomposereactnative/views/column/ColumnView.kt

@@ -29,8 +29,6 @@ data class ColumnProps(
 class ColumnView(context: Context, appContext: AppContext) : ExpoView(context, appContext) {
     private var props = mutableStateOf(ColumnProps())
 
-    override val shouldUseAndroidLayout = true
-
     override fun addView(child: View?, index: Int) {
         if (child is ComposeView) {
             super.addView(child, index)

android/src/main/java/expo/modules/jetpackcomposereactnative/views/dialog/DialogView.kt

@@ -40,8 +40,6 @@ class DialogView(context: Context, appContext: AppContext) : ExpoView(context, a
     private val onConfirm by EventDispatcher()
     private val onDismiss by EventDispatcher()
 
-    override val shouldUseAndroidLayout = true
-
     init {
         ComposeView(context).also {
             it.layoutParams = LayoutParams(WRAP_CONTENT, WRAP_CONTENT)

android/src/main/java/expo/modules/jetpackcomposereactnative/views/divider/DividerView.kt

@@ -28,8 +28,6 @@ class DividerView(context: Context, appContext: AppContext) : ExpoView(context,
     private var props = mutableStateOf(DividerProps())
     private val onDividerClick by EventDispatcher()
 
-    override val shouldUseAndroidLayout = true
-
     init {
         ComposeView(context).also {
             it.layoutParams = LayoutParams(WRAP_CONTENT, WRAP_CONTENT) // Allow the content to wrap

android/src/main/java/expo/modules/jetpackcomposereactnative/views/grid/GridView.kt

@@ -40,8 +40,6 @@ data class GridProps (
 class GridView(context: Context, appContext: AppContext) : ExpoView(context, appContext) {
     private var props = mutableStateOf(GridProps())
 
-    override val shouldUseAndroidLayout = true
-
     override fun addView(child: View?, index: Int) {
         if (child is ComposeView) {
             super.addView(child, index)

android/src/main/java/expo/modules/jetpackcomposereactnative/views/icon/IconView.kt

@@ -23,8 +23,6 @@ data class IconProps(
 class IconView(context: Context, appContext: AppContext) : ExpoView(context, appContext) {
     private var props = mutableStateOf(IconProps())
 
-    override val shouldUseAndroidLayout = true
-
     init {
         ComposeView(context).also {
             it.layoutParams = LayoutParams(WRAP_CONTENT, WRAP_CONTENT)

android/src/main/java/expo/modules/jetpackcomposereactnative/views/image/ImageView.kt

@@ -22,8 +22,6 @@ class ImageView(context: Context, appContext: AppContext) : ExpoView(context, ap
     private var props = mutableStateOf(ImageProps())
     private var composeView: ComposeView? = null
 
-    override val shouldUseAndroidLayout = true
-
     init {
         ComposeView(context).also {
             it.layoutParams = LayoutParams(MATCH_PARENT, MATCH_PARENT)

android/src/main/java/expo/modules/jetpackcomposereactnative/views/progress_indicator/ProgressIndicatorView.kt

@@ -22,8 +22,6 @@ data class ProgressIndicatorProps(
 class ProgressIndicatorView(context: Context, appContext: AppContext) : ExpoView(context, appContext) {
     private var props = mutableStateOf(ProgressIndicatorProps())
 
-    override val shouldUseAndroidLayout = true
-
     init {
         ComposeView(context).also {
             it.layoutParams = LayoutParams(WRAP_CONTENT, WRAP_CONTENT) // Allow the content to wrap

android/src/main/java/expo/modules/jetpackcomposereactnative/views/row/RowView.kt

@@ -29,8 +29,6 @@ data class RowProps(
 class RowView(context: Context, appContext: AppContext) : ExpoView(context, appContext) {
     private var props = mutableStateOf(RowProps())
 
-    override val shouldUseAndroidLayout = true
-
     override fun addView(child: View?, index: Int) {
         if (child is ComposeView) {
             super.addView(child, index)

android/src/main/java/expo/modules/jetpackcomposereactnative/views/scaffold/ScaffoldView.kt

@@ -25,8 +25,6 @@ data class ScaffoldProps(
 class ScaffoldView(context: Context, appContext: AppContext) : ExpoView(context, appContext) {
     private var props = mutableStateOf(ScaffoldProps())
 
-    override val shouldUseAndroidLayout = true
-
     override fun addView(child: View?, index: Int) {
         if (child is ComposeView) {
             super.addView(child, index)

android/src/main/java/expo/modules/jetpackcomposereactnative/views/slider/SliderView.kt

@@ -22,8 +22,6 @@ class SliderView(context: Context, appContext: AppContext) : ExpoView(context, a
     private var props = mutableStateOf(SliderProps())
     private val onValueChange by EventDispatcher()
 
-    override val shouldUseAndroidLayout = true
-
     init {
         ComposeView(context).also {
             it.layoutParams = LayoutParams(WRAP_CONTENT, WRAP_CONTENT)

android/src/main/java/expo/modules/jetpackcomposereactnative/views/snackbar/SnackbarView.kt

@@ -33,8 +33,6 @@ class SnackbarView(context: Context, appContext: AppContext) : ExpoView(context,
     private val onActionPerformed by EventDispatcher()
     private val onDismissed by EventDispatcher()
 
-    override val shouldUseAndroidLayout = true
-
     init {
         ComposeView(context).also {
             it.layoutParams = LayoutParams(WRAP_CONTENT, WRAP_CONTENT)

android/src/main/java/expo/modules/jetpackcomposereactnative/views/spacer/SpacerView.kt

@@ -20,8 +20,6 @@ class SpacerView(context: Context, appContext: AppContext) : ExpoView(context, a
     private var props = mutableStateOf(SpacerProps())
     private val onSpacerClick by EventDispatcher()
 
-    override val shouldUseAndroidLayout = true
-
     init {
         ComposeView(context).also {
             it.layoutParams = LayoutParams(WRAP_CONTENT, WRAP_CONTENT) // Allow the content to wrap

android/src/main/java/expo/modules/jetpackcomposereactnative/views/switch_/SwitchView.kt

@@ -22,8 +22,6 @@ class SwitchView(context: Context, appContext: AppContext) : ExpoView(context, a
     private var props = mutableStateOf(SwitchProps())
     private val onCheckedChange by EventDispatcher()
 
-    override val shouldUseAndroidLayout = true
-
     init {
         ComposeView(context).also {
             it.layoutParams = LayoutParams(WRAP_CONTENT, WRAP_CONTENT)

android/src/main/java/expo/modules/jetpackcomposereactnative/views/text/TextView.kt

@@ -45,8 +45,6 @@ class TextView(context: Context, appContext: AppContext) : ExpoView(context, app
     private var props = mutableStateOf(TextProps())
     private var composeView: ComposeView? = null
 
-    override val shouldUseAndroidLayout = true
-
     init {
         ComposeView(context).also {
             it.layoutParams = LayoutParams(WRAP_CONTENT, WRAP_CONTENT) // Allow the content to wrap

android/src/main/java/expo/modules/jetpackcomposereactnative/views/textfield/TextFieldView.kt

@@ -27,8 +27,6 @@ class TextFieldView(context: Context, appContext: AppContext) : ExpoView(context
     private var props = mutableStateOf(TextFieldProps())
     private val onValueChange by EventDispatcher()
 
-    override val shouldUseAndroidLayout = true
-
     init {
         ComposeView(context).also {
             it.layoutParams = LayoutParams(WRAP_CONTENT, WRAP_CONTENT)

example/android/build.gradle

@@ -6,7 +6,7 @@ buildscript {
         minSdkVersion = Integer.parseInt(findProperty('android.minSdkVersion') ?: '23')
         compileSdkVersion = Integer.parseInt(findProperty('android.compileSdkVersion') ?: '34')
         targetSdkVersion = Integer.parseInt(findProperty('android.targetSdkVersion') ?: '34')
-        kotlinVersion = findProperty('android.kotlinVersion') ?: '1.9.24'
+        kotlinVersion = '1.9.24'
 
         ndkVersion = "26.1.10909125"
     }