diff --git a/README.md b/README.md index de5dc7c..60a8e7f 100644 --- a/README.md +++ b/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! diff --git a/android/build.gradle b/android/build.gradle index c31f96c..a66335d 100644 --- a/android/build.gradle +++ b/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 diff --git a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/badge/BadgeView.kt b/android/src/main/java/expo/modules/jetpackcomposereactnative/views/badge/BadgeView.kt index 9f511a9..3067293 100644 --- a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/badge/BadgeView.kt +++ b/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 diff --git a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/badged_box/BadgedBoxView.kt b/android/src/main/java/expo/modules/jetpackcomposereactnative/views/badged_box/BadgedBoxView.kt index dbbd1c6..fc6fe08 100644 --- a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/badged_box/BadgedBoxView.kt +++ b/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 diff --git a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/bottomsheet/BottomSheetModule.kt b/android/src/main/java/expo/modules/jetpackcomposereactnative/views/bottomsheet/BottomSheetModule.kt new file mode 100644 index 0000000..b480c3f --- /dev/null +++ b/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) + } + } + } +} diff --git a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/bottomsheet/BottomSheetView.kt b/android/src/main/java/expo/modules/jetpackcomposereactnative/views/bottomsheet/BottomSheetView.kt new file mode 100644 index 0000000..d3e780a --- /dev/null +++ b/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 = 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> +){ + 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 }, + ) + } + } +} \ No newline at end of file diff --git a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/box/BoxView.kt b/android/src/main/java/expo/modules/jetpackcomposereactnative/views/box/BoxView.kt index dd2f633..9eff7c2 100644 --- a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/box/BoxView.kt +++ b/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) diff --git a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/button/ButtonView.kt b/android/src/main/java/expo/modules/jetpackcomposereactnative/views/button/ButtonView.kt index 2b1946a..b8866e4 100644 --- a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/button/ButtonView.kt +++ b/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 diff --git a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/card/CardView.kt b/android/src/main/java/expo/modules/jetpackcomposereactnative/views/card/CardView.kt index 91ca318..733157a 100644 --- a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/card/CardView.kt +++ b/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) diff --git a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/carousel/CarouselView.kt b/android/src/main/java/expo/modules/jetpackcomposereactnative/views/carousel/CarouselView.kt index 4fdc546..e9fe746 100644 --- a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/carousel/CarouselView.kt +++ b/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 diff --git a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/checkbox/CheckboxView.kt b/android/src/main/java/expo/modules/jetpackcomposereactnative/views/checkbox/CheckboxView.kt index 699bb1f..c386792 100644 --- a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/checkbox/CheckboxView.kt +++ b/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) diff --git a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/chip/ChipView.kt b/android/src/main/java/expo/modules/jetpackcomposereactnative/views/chip/ChipView.kt index 1181d42..dc89389 100644 --- a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/chip/ChipView.kt +++ b/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 diff --git a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/column/ColumnView.kt b/android/src/main/java/expo/modules/jetpackcomposereactnative/views/column/ColumnView.kt index 831b874..62895c7 100644 --- a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/column/ColumnView.kt +++ b/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) diff --git a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/dialog/DialogView.kt b/android/src/main/java/expo/modules/jetpackcomposereactnative/views/dialog/DialogView.kt index 4d6f0aa..6e50191 100644 --- a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/dialog/DialogView.kt +++ b/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) diff --git a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/divider/DividerView.kt b/android/src/main/java/expo/modules/jetpackcomposereactnative/views/divider/DividerView.kt index 28266b7..5673cb6 100644 --- a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/divider/DividerView.kt +++ b/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 diff --git a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/grid/GridView.kt b/android/src/main/java/expo/modules/jetpackcomposereactnative/views/grid/GridView.kt index e9ba0f6..b0e5a9c 100644 --- a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/grid/GridView.kt +++ b/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) diff --git a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/icon/IconView.kt b/android/src/main/java/expo/modules/jetpackcomposereactnative/views/icon/IconView.kt index 65e941d..48a2032 100644 --- a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/icon/IconView.kt +++ b/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) diff --git a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/image/ImageView.kt b/android/src/main/java/expo/modules/jetpackcomposereactnative/views/image/ImageView.kt index 290976d..2055917 100644 --- a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/image/ImageView.kt +++ b/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) diff --git a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/progress_indicator/ProgressIndicatorView.kt b/android/src/main/java/expo/modules/jetpackcomposereactnative/views/progress_indicator/ProgressIndicatorView.kt index efcaaaa..1d556d6 100644 --- a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/progress_indicator/ProgressIndicatorView.kt +++ b/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 diff --git a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/row/RowView.kt b/android/src/main/java/expo/modules/jetpackcomposereactnative/views/row/RowView.kt index a771af0..9bfaa21 100644 --- a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/row/RowView.kt +++ b/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) diff --git a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/scaffold/ScaffoldView.kt b/android/src/main/java/expo/modules/jetpackcomposereactnative/views/scaffold/ScaffoldView.kt index 894b7c7..94dd086 100644 --- a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/scaffold/ScaffoldView.kt +++ b/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) diff --git a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/slider/SliderView.kt b/android/src/main/java/expo/modules/jetpackcomposereactnative/views/slider/SliderView.kt index ae4c3d2..9f2a209 100644 --- a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/slider/SliderView.kt +++ b/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) diff --git a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/snackbar/SnackbarView.kt b/android/src/main/java/expo/modules/jetpackcomposereactnative/views/snackbar/SnackbarView.kt index 97455c5..6420a63 100644 --- a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/snackbar/SnackbarView.kt +++ b/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) diff --git a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/spacer/SpacerView.kt b/android/src/main/java/expo/modules/jetpackcomposereactnative/views/spacer/SpacerView.kt index da91264..0dc2bf0 100644 --- a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/spacer/SpacerView.kt +++ b/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 diff --git a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/switch_/SwitchView.kt b/android/src/main/java/expo/modules/jetpackcomposereactnative/views/switch_/SwitchView.kt index 9b32317..5212251 100644 --- a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/switch_/SwitchView.kt +++ b/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) diff --git a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/text/TextView.kt b/android/src/main/java/expo/modules/jetpackcomposereactnative/views/text/TextView.kt index ec2325d..1b3ce82 100644 --- a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/text/TextView.kt +++ b/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 diff --git a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/textfield/TextFieldView.kt b/android/src/main/java/expo/modules/jetpackcomposereactnative/views/textfield/TextFieldView.kt index 4372869..8f51fe1 100644 --- a/android/src/main/java/expo/modules/jetpackcomposereactnative/views/textfield/TextFieldView.kt +++ b/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) diff --git a/example/android/build.gradle b/example/android/build.gradle index 17da0fd..45d6f5a 100644 --- a/example/android/build.gradle +++ b/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" } diff --git a/example/app/bottomsheet.tsx b/example/app/bottomsheet.tsx new file mode 100644 index 0000000..ac09991 --- /dev/null +++ b/example/app/bottomsheet.tsx @@ -0,0 +1,30 @@ +import React from "react"; +import { ScrollView, StyleSheet, View, Text } from "react-native"; +import { BottomSheet, Column } from "jetpack-compose-react-native"; + +export default function DialogsExample() { + return ( + + BottomSheet Example + console.log("BottomSheet dismissed")}> + + Hello I'm a BottomSheet + Hello I'm a BottomSheet + Hello I'm a BottomSheet + + + + ); +} + +const styles = StyleSheet.create({ + header: { + fontSize: 30, + fontWeight: "bold", + marginVertical: 20, + }, + title: { + fontSize: 32, + fontWeight: "500", + }, +}); diff --git a/example/app/index.tsx b/example/app/index.tsx index 2de1ec6..d1cbe1e 100644 --- a/example/app/index.tsx +++ b/example/app/index.tsx @@ -32,6 +32,7 @@ const examples = [ "images", "carousel", "scaffold", + "bottomsheet", "modifiers", ]; diff --git a/example/package.json b/example/package.json index 8dcd157..343b58d 100644 --- a/example/package.json +++ b/example/package.json @@ -16,6 +16,7 @@ "expo-status-bar": "~1.12.1", "react": "18.2.0", "react-native": "0.74.5", + "react-native-gradle-plugin": "^0.71.19", "react-native-safe-area-context": "4.10.5", "react-native-screens": "3.31.1" }, diff --git a/example/yarn.lock b/example/yarn.lock index 1a11dd8..a227f24 100644 --- a/example/yarn.lock +++ b/example/yarn.lock @@ -5664,6 +5664,11 @@ react-is@^17.0.1: resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== +react-native-gradle-plugin@^0.71.19: + version "0.71.19" + resolved "https://registry.yarnpkg.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.71.19.tgz#3379e28341fcd189bc1f4691cefc84c1a4d7d232" + integrity sha512-1dVk9NwhoyKHCSxcrM6vY6cxmojeATsBobDicX0ZKr7DgUF2cBQRTKsimQFvzH8XhOVXyH8p4HyDSZNIFI8OlQ== + react-native-helmet-async@2.0.4: version "2.0.4" resolved "https://registry.yarnpkg.com/react-native-helmet-async/-/react-native-helmet-async-2.0.4.tgz#93f53a1ff22d6898039688a541653a2d6b6866bb" diff --git a/expo-module.config.json b/expo-module.config.json index 9c6f206..20a0521 100644 --- a/expo-module.config.json +++ b/expo-module.config.json @@ -26,6 +26,7 @@ "expo.modules.jetpackcomposereactnative.views.snackbar.SnackbarModule", "expo.modules.jetpackcomposereactnative.views.image.ImageModule", "expo.modules.jetpackcomposereactnative.views.carousel.CarouselModule", + "expo.modules.jetpackcomposereactnative.views.bottomsheet.BottomSheetModule", "expo.modules.jetpackcomposereactnative.views.scaffold.ScaffoldModule" ] } diff --git a/src/index.ts b/src/index.ts index 054aa28..9020409 100644 --- a/src/index.ts +++ b/src/index.ts @@ -22,4 +22,5 @@ export { Snackbar } from "./views/Snackbar/Snackbar"; export { Image } from "./views/Image/Image"; export { Carousel } from "./views/Carousel/Carousel"; export { Scaffold } from "./views/Scaffold/Scaffold"; +export { BottomSheet } from "./views/BottomSheet/BottomSheet"; export { Modifier } from "./utils/modifier"; diff --git a/src/views/BottomSheet/BottomSheet.android.tsx b/src/views/BottomSheet/BottomSheet.android.tsx new file mode 100644 index 0000000..5bc7dac --- /dev/null +++ b/src/views/BottomSheet/BottomSheet.android.tsx @@ -0,0 +1,26 @@ +import { requireNativeViewManager } from "expo-modules-core"; +import * as React from "react"; +import { ViewStyle } from "react-native"; +import { Modifier } from "../../utils/modifier"; + +export type BottomSheetProps = { + style?: ViewStyle; + tonalElevation?: number; + onDismiss?: () => void; + children?: React.ReactNode; + modifier?: typeof Modifier; +}; + +const NativeView: React.ComponentType = + requireNativeViewManager("BottomSheetView"); + +export function BottomSheet({ style, onDismiss, ...rest }: BottomSheetProps) { + return ( + + ); +} diff --git a/src/views/BottomSheet/BottomSheet.tsx b/src/views/BottomSheet/BottomSheet.tsx new file mode 100644 index 0000000..0122bac --- /dev/null +++ b/src/views/BottomSheet/BottomSheet.tsx @@ -0,0 +1,5 @@ +import { BottomSheetProps } from "./BottomSheet.android"; + +export function BottomSheet(props: BottomSheetProps) { + return null; +} diff --git a/src/views/Carousel/Carousel.android.tsx b/src/views/Carousel/Carousel.android.tsx index 684f8bf..fc19c99 100644 --- a/src/views/Carousel/Carousel.android.tsx +++ b/src/views/Carousel/Carousel.android.tsx @@ -20,7 +20,9 @@ export function Carousel({ return ( Image.resolveAssetSource(item).uri)} + items={itemRequires.map( + (item: any) => Image.resolveAssetSource(item).uri + )} style={{ height: 100, width: "100%", ...(style as any) }} modifier={(rest.modifier as any)?.build()} />