Merge pull request #1 from intergalacticspacehighway/v1

release 0.1.0 🚀
intergalacticspacehighway · Oct 2, 2022 · e88fa32 · e88fa32
2 parents d34bf5e + 5ae3712
commit e88fa32
Show file tree

Hide file tree

Showing 12 changed files with 10,584 additions and 112 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,122 @@
-# Native android bottomsheet (WIP)
+# React Native Android Bottomsheet (alpha)
+
+## Why?
+
+This library uses native Bottomsheet. Biggest wins are on accessibility. Styling can also be customised.
+
+## Installation
+
+```
+yarn add react-native-android-bottomsheet
+```
+
+## API
+
+### Simple usage
+
+```jsx
+import { BottomSheet } from 'react-native-android-bottomsheet';
+
+<BottomSheet
+  peekHeight={400}
+  visible={visible}
+  onDismiss={() => {
+    setVisible(false);
+  }}
+>
+  <View
+    style={{
+      flex: 1,
+      backgroundColor: 'white',
+    }}
+  >
+    <Text>Hello from bottomsheet</Text>
+  </View>
+</BottomSheet>;
+```
+
+- BottomSheet has no background by default. So, setting `backgroundColor` on view is important.
+
+### BottomSheet with ScrollView
+
+```jsx
+import { ScrollView } from 'react-native';
+import { BottomSheet } from 'react-native-android-bottomsheet';
+
+<BottomSheet
+  visible={visible}
+  onDismiss={() => {
+    setVisible(false);
+  }}
+>
+  <ScrollView style={{ backgroundColor: 'white' }} nestedScrollEnabled>
+    <Boxes />
+  </ScrollView>
+</BottomSheet>;
+```
+
+- For drag-to-close/expand gesture to work, make sure to add `nestedScrollEnabled` to the ScrollView
+
+### BottomSheet with ScrollView and pull to refresh
+
+```jsx
+import { ScrollView, RefreshControl } from 'react-native';
+import { BottomSheet } from 'react-native-android-bottomsheet';
+
+<BottomSheet
+  visible={visible}
+  onDismiss={() => {
+    setVisible(false);
+  }}
+>
+  <ScrollView
+    style={{ backgroundColor: 'white' }}
+    refreshControl={
+      <RefreshControl
+        onRefresh={() => {
+          setRefreshing(true);
+          setTimeout(() => {
+            setRefreshing(false);
+          }, 2000);
+        }}
+        refreshing={refreshing}
+      />
+    }
+  >
+    <Boxes />
+  </ScrollView>
+</BottomSheet>;
+```
+
+## Props
+
+```ts
+type AndroidBottomsheetProps = {
+  // To show/hide bottomsheet
+  'visible': boolean;
+
+  // gets called when bottomsheet is dismissed. Use this to reset visible state
+  'onDismiss'?: () => void;
+
+  // Collapsed bottomsheet height
+  'peekHeight'?: number;
+
+  // Expanded bottomsheet height
+  'maxHeight'?: number;
+
+  // Gets announced when bottomsheet is opened with TalkBack
+  'aria-label'?: string;
+
+  // To set backdrop dim ammount. Accepts value 0 to 1. 0 would make the backdrop transparent.
+  'backdropDimAmount'?: number;
+
+  // Determines whether bottomsheet can be cancelled by swiping or back button
+  'cancelable'?: boolean;
+};
+```
+
+## To run examples
 
-## To run example
 - Clone the repo
 - Go to example/
-- yarn && yarn android
+- yarn && yarn android
diff --git a/android/build.gradle b/android/build.gradle
@@ -133,7 +133,6 @@ dependencies {
     //noinspection GradleDynamicVersion
   implementation "com.facebook.react:react-native:+"
   implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
-  implementation "androidx.coordinatorlayout:coordinatorlayout:1.2.0"
   implementation "com.google.android.material:material:1.5.0"
 
 

diff --git a/android/src/main/java/com/reactnativeandroidbottomsheet/AndroidBottomsheetPackage.kt b/android/src/main/java/com/reactnativeandroidbottomsheet/AndroidBottomsheetPackage.kt
@@ -11,6 +11,6 @@ class AndroidBottomsheetPackage : ReactPackage {
     }
 
     override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
-        return listOf(AndroidBottomsheetViewManager())
+        return listOf(BottomsheetViewManager())
     }
 }
diff --git a/android/src/main/java/com/reactnativeandroidbottomsheet/BottomSheetView.kt b/android/src/main/java/com/reactnativeandroidbottomsheet/BottomSheetView.kt
@@ -1,6 +1,7 @@
 package com.reactnativeandroidbottomsheet
 
 import android.content.Context
+import android.graphics.Color
 import android.view.MotionEvent
 import android.view.View
 import android.view.ViewGroup
@@ -20,19 +21,18 @@ import com.google.android.material.bottomsheet.BottomSheetDialog
 // https://github.com/facebook/react-native/blob/f1645560376b734a87f0eba1fef69f6cba312cc1/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostView.java
 
 class BottomSheetView: ViewGroup, FabricViewStateManager.HasFabricViewStateManager {
-  lateinit var mHostView: BottomSheetViewGroup;
+  var mHostView: BottomSheetViewGroup;
   @Nullable
   private var bottomSheetDialog: BottomSheetDialog? = null;
 
-
   constructor(context: Context) : super(context) {
       mHostView = BottomSheetViewGroup(context)
       bottomSheetDialog = BottomSheetDialog(context)
   }
 
   override fun addView(child: View?, index: Int) {
     UiThreadUtil.assertOnUiThread()
-      mHostView.addView(child)
+    mHostView.addView(child)
   }
 
 
@@ -66,21 +66,26 @@ class BottomSheetView: ViewGroup, FabricViewStateManager.HasFabricViewStateManag
     frameLayout.addView(mHostView)
     frameLayout.fitsSystemWindows = true
     bottomSheetDialog?.setContentView(frameLayout);
-    // TODO: export a prop for this
-    // We make background transparent and let styles be handled with a React native view. (useful for setting rounded border radius)
-//    (frameLayout.getParent() as View).setBackgroundColor(Color.TRANSPARENT)
-    // bottomSheetDialog?.dismissWithAnimation = true;
-
-  // Todo:  color/backdrop changes
-  //    val cd = ColorDrawable(-0x43ff6433)
-//    bottomSheetDialog?.window?.setDimAmount(0.2f)
+
+    // Keep it completely unstyled in v1
+    (frameLayout.parent as View).setBackgroundColor(Color.TRANSPARENT)
+
     bottomSheetDialog?.show();
   }
 
   fun isVisible(): Boolean? {
     return bottomSheetDialog?.isShowing
   }
 
+  fun setBackdropDimAmount(dimAmount: Float) {
+    bottomSheetDialog?.window?.setDimAmount(dimAmount)
+  }
+
+
+  fun setCancelable(cancelable: Boolean) {
+    bottomSheetDialog?.setCancelable(cancelable)
+  }
+
   fun hideBottomSheet() {
     UiThreadUtil.assertOnUiThread()
     if (bottomSheetDialog != null) {

diff --git a/...tomsheet/AndroidBottomsheetViewManager.kt → ...roidbottomsheet/BottomsheetViewManager.kt b/...tomsheet/AndroidBottomsheetViewManager.kt → ...roidbottomsheet/BottomsheetViewManager.kt
@@ -1,15 +1,13 @@
 package com.reactnativeandroidbottomsheet
 import androidx.annotation.Nullable
-import com.facebook.react.bridge.ReactContext
 import com.facebook.react.common.MapBuilder
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.UIManagerHelper
 import com.facebook.react.uimanager.ViewGroupManager
 import com.facebook.react.uimanager.annotations.ReactProp
 
-//import com.google.android.material.bottomsheet.BottomSheetDialog
 
-class AndroidBottomsheetViewManager : ViewGroupManager<BottomSheetView>() {
+class BottomsheetViewManager : ViewGroupManager<BottomSheetView>() {
   override fun getName() = "AndroidBottomsheetView"
   override fun createViewInstance(reactContext: ThemedReactContext): BottomSheetView {
     return BottomSheetView(reactContext)
@@ -31,6 +29,11 @@ class AndroidBottomsheetViewManager : ViewGroupManager<BottomSheetView>() {
       view.setBottomSheetPeekHeight(peekHeight)
   }
 
+  @ReactProp(name = "cancelable")
+  fun setCancelable(view: BottomSheetView, cancelable: Boolean) {
+    view.setCancelable(cancelable)
+  }
+
   @ReactProp(name = "aria-label")
   fun setAriaLabel(view: BottomSheetView, title: String) {
     view.setAriaLabel(title)
@@ -41,10 +44,9 @@ class AndroidBottomsheetViewManager : ViewGroupManager<BottomSheetView>() {
     view.setBottomSheetMaxHeight(maxHeight)
   }
 
-
-  @ReactProp(name = "minHeight")
-  fun setMinHeight(view: BottomSheetView, maxHeight: Int) {
-    view.setBottomSheetMaxHeight(maxHeight)
+  @ReactProp(name = "backdropDimAmount")
+  fun setBackdropDimAmount(view: BottomSheetView, dimAmount: Float) {
+    view.setBackdropDimAmount(dimAmount)
   }
 
   override fun addEventEmitters(reactContext: ThemedReactContext, view: BottomSheetView) {

diff --git a/example/ios/AndroidBottomsheetExample.xcodeproj/project.pbxproj b/example/ios/AndroidBottomsheetExample.xcodeproj/project.pbxproj
@@ -295,7 +295,7 @@
 					"-ObjC",
 					"-lc++",
 				);
-				PRODUCT_BUNDLE_IDENTIFIER = "com.example.reactnativeandroidbottomsheet";
+				PRODUCT_BUNDLE_IDENTIFIER = com.example.reactnativeandroidbottomsheet;
 				PRODUCT_NAME = AndroidBottomsheetExample;
 				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
 				SWIFT_VERSION = 5.0;
@@ -320,7 +320,7 @@
 					"-ObjC",
 					"-lc++",
 				);
-				PRODUCT_BUNDLE_IDENTIFIER = "com.example.reactnativeandroidbottomsheet";
+				PRODUCT_BUNDLE_IDENTIFIER = com.example.reactnativeandroidbottomsheet;
 				PRODUCT_NAME = AndroidBottomsheetExample;
 				SWIFT_VERSION = 5.0;
 				VERSIONING_SYSTEM = "apple-generic";