@lodev09/react-native-true-sheet 0.4.5 → 0.5.0

package/README.md

@@ -4,11 +4,13 @@
 ![GitHub Release](https://img.shields.io/github/v/release/lodev09/react-native-true-sheet)
 ![NPM Downloads](https://img.shields.io/npm/dw/%40lodev09%2Freact-native-true-sheet)
 
-The true native bottom sheet.
+The true native bottom sheet 💩
+
+![Preview](preview.gif)
 
 ## Features
 * ✅ Implemented on the native realm.
-* ✅ **_NOT_** your pure JS, (re)animated View.
+* ✅ **_NOT_** your pure JS, (re)animated View. But might integrate in the future 👀
 * ✅ Clean, fast and lightweight.
 * ✅ Handles your Sscrolling needs, easy.
 * ✅ Asynchronus `ref` methods.
@@ -35,7 +37,11 @@ const openSheet = () => {
 return (
   <View>
     <Button onPress={openSheet} title="Open Sheet" />
-    <TrueSheet sizes={['auto', 'large']} ref={sheet}>
+    <TrueSheet
+      ref={sheet}
+      sizes={['auto', 'large']}
+      cornerRadius={24}
+    >
       // ...
     </TrueSheet>
   </View>
@@ -43,7 +49,138 @@ return (
 ```
 
 ## Options
-> TODO - laters
+
+Extended from `ViewProps`
+
+| Prop | Type | Default | Description | 🍎 | 🤖 |
+| - | - | - | - | - | - |
+| sizes | [`SheetSize`](#sheetsize) | `['medium', 'large']` | The sizes you want the Sheet to support. Maximum of _**3 sizes**_ only! **_collapsed_**, **_half-expanded_** and **_expanded_**. Example: `size={['auto', '60%', 'large']}`| ✅ | ✅ |
+| backgroundColor | `ColorValue` | - | Main sheet background color. | ✅ | ✅ |
+| cornerRadius | `number` | - | The sheet corner radius. | ✅ | ✅ |
+| maxHeight | `number` | - | Overrides `large` or `100%` height. | ✅ | ✅ |
+| FooterComponent | `ReactNode` | - | A component that floats at the bottom of the Sheet. | ✅ | ✅ |
+| grabber | `boolean` | - | Shows native grabber (or handle) on IOS. | ✅ | |
+| blurStyle | [`BlurStyle`](#blurstyle) | - | The blur effect style on iOS. Overrides `backgroundColor` if set. Example: `light`, `dark`, etc. | ✅ | |
+| scrollRef | `RefObject<...>` | - | The main scrollable ref that Sheet should handle on IOS. | ✅ | |
+
+## Methods
+
+```ts
+const sheet = useRef<TrueSheet>(null)
+
+const open = () => {
+  // Presents 80%
+  sheet.current?.present(1)
+}
+
+const dismiss = () => {
+  sheet.current?.dismiss()
+}
+
+return (
+  <View>
+    <Button onPress={open} title="Open" />
+    <Button onPress={dismiss} title="Dimiss" />
+    <TrueSheet sizes={['auto', '80%']} ref={sheet}>
+      // ...
+    </TrueSheet>
+  </View>
+)
+```
+
+| Name | Parameters | Description |
+| - | - | - |
+| present | `index: number = 0` | Present the modal sheet at size index. See `sizes` prop. |
+| dismiss | - | Dismisses the Sheet. |
+
+## Events
+
+```ts
+const handleSizeChange = (info: SizeInfo) => {
+  console.log(info)
+}
+
+return (
+  <TrueSheet onSizeChange={handleSizeChange} sizes={['auto', '80%']} ref={sheet}>
+    // ...
+  </TrueSheet>
+)
+```
+
+| Name | Parameters | Description |
+| - | - | - |
+| onPresent | - | Called when the Sheet has been presented. Comes with the size index and value. |
+| onDismiss | - | Called when the Sheet has been dismissed. |
+| onSizeChange | [`SizeInfo`](#sizeinfo) | Called when the size of the sheet has changed. Either by dragging or programatically. |
+
+## Types
+
+### `SheetSize`
+
+```ts
+<TrueSheet sizes={['auto', '80%', 'large']}>
+  // ...
+</TrueSheet>
+```
+
+| Value | Description | 🍎 | 🤖 |
+| - | - | - | - |
+| `large` | Translates to 100% | ✅ | ✅ |
+| `medium` | Translates to 50% | **_15+_** | ✅ |
+| `auto` | Auto resize based on content height. | **_16+_** | ✅ |
+| `number` | Fixed height | **_16+_** | ✅ |
+| `${number}%` | Fixed height in % | **_16+_** | ✅ |
+| `small` | Translates to 25% | **_16+_** | ✅ |
+
+### `BlurStyle`
+
+Blur style mapped to native values in IOS.
+
+```ts
+<TrueSheet blurStyle="dark">
+  // ...
+</TrueSheet>
+```
+
+| Value |
+| - |
+| `"light"` |
+| `"dark"` |
+| `"default"` |
+| `"extraLight"` |
+| `"regular"` |
+| `"prominent"` |
+| `"systemUltraThinMaterial"` |
+| `"systemThinMaterial"` |
+| `"systemMaterial"` |
+| `"systemThickMaterial"` |
+| `"systemChromeMaterial"` |
+| `"systemUltraThinMaterialLight"` |
+| `"systemThinMaterialLight"` |
+| `"systemMaterialLight"` |
+| `"systemThickMaterialLight"` |
+| `"systemChromeMaterialLight"` |
+| `"systemUltraThinMaterialDark"` |
+| `"systemThinMaterialDark"` |
+| `"systemMaterialDark"` |
+| `"systemThickMaterialDark"` |
+| `"systemChromeMaterialDark"` |
+
+### `SizeInfo`
+
+`Object` that comes with some events.
+
+```ts
+{
+  index: 1,
+  value: 69
+}
+```
+
+| Property | Type | Description |
+| - | - | - |
+| index | `number` | The size index from the provided sizes. See `sizes` prop. |
+| value | `number` | The actual height value of the size. |
 
 ## Contributing
 

package/android/src/main/java/com/lodev09/truesheet/TrueSheetView.kt

@@ -1,6 +1,7 @@
 package com.lodev09.truesheet
 
 import android.content.Context
+import android.graphics.Color
 import android.view.View
 import android.view.ViewGroup
 import android.view.ViewStructure
@@ -17,8 +18,8 @@ import com.google.android.material.bottomsheet.BottomSheetDialog
 import com.lodev09.truesheet.core.DismissEvent
 import com.lodev09.truesheet.core.PresentEvent
 import com.lodev09.truesheet.core.RootViewGroup
-import com.lodev09.truesheet.core.SheetBehavior
 import com.lodev09.truesheet.core.SizeChangeEvent
+import com.lodev09.truesheet.core.TrueSheetBehavior
 import com.lodev09.truesheet.core.Utils
 
 class TrueSheetView(context: Context) :
@@ -32,14 +33,16 @@ class TrueSheetView(context: Context) :
   private val surfaceId: Int
     get() = UIManagerHelper.getSurfaceId(this)
 
-  private var sizeIndex: Int = 0
-  private var sizes: Array<Any> = arrayOf("medium", "large")
+  private var activeIndex: Int = 0
 
   private var presentPromise: (() -> Unit)? = null
   private var dismissPromise: (() -> Unit)? = null
 
   private val sheetDialog: BottomSheetDialog
-  private val sheetLayout: LinearLayout
+  private val sheetBehavior: TrueSheetBehavior
+  private val sheetView: ViewGroup
+
+  // React root view placeholder
   private val sheetRootView: RootViewGroup
 
   // 1st child of the container view
@@ -48,8 +51,6 @@ class TrueSheetView(context: Context) :
   // 2nd child of the container view
   private var footerView: ViewGroup? = null
 
-  private var sheetBehavior: SheetBehavior<ViewGroup>
-
   init {
     reactContext.addLifecycleEventListener(this)
     eventDispatcher = UIManagerHelper.getEventDispatcherForReactTag(reactContext, id)
@@ -58,58 +59,27 @@ class TrueSheetView(context: Context) :
     sheetRootView.eventDispatcher = eventDispatcher
 
     sheetDialog = BottomSheetDialog(context)
-    sheetBehavior = SheetBehavior()
-    sheetLayout = LinearLayout(context)
-
-    // Configure Sheet events
-    sheetBehavior.apply {
-
-      // Set our default max height
-      maxSheetSize = Utils.maxSize(context)
-
-      addBottomSheetCallback(
-        object : BottomSheetBehavior.BottomSheetCallback() {
-          override fun onSlide(sheetView: View, slideOffset: Float) {
-            footerView?.let {
-              it.y = (sheetView.height - sheetView.top - it.height).toFloat()
-            }
-          }
-
-          override fun onStateChanged(view: View, newState: Int) {
-            val sizeInfo = getSizeInfoForState(sizes.size, newState)
-            if (sizeInfo != null && sizeInfo.index != sizeIndex) {
-              sizeIndex = sizeInfo.index
-
-              // dispatch onSizeChange event
-              eventDispatcher?.dispatchEvent(SizeChangeEvent(surfaceId, id, sizeInfo))
-            }
+    sheetBehavior = TrueSheetBehavior()
 
-            when (newState) {
-              BottomSheetBehavior.STATE_HIDDEN -> sheetDialog.dismiss()
-              else -> {}
-            }
-          }
-        }
-      )
-    }
-
-    // Configure the sheet layout
-    sheetLayout.apply {
+    // Configure the sheet layout view
+    LinearLayout(context).apply {
       addView(sheetRootView)
       sheetDialog.setContentView(this)
 
-      val layoutParent = parent as ViewGroup
-      (layoutParent.layoutParams as CoordinatorLayout.LayoutParams).behavior = sheetBehavior
+      sheetView = parent as ViewGroup
+      sheetView.setBackgroundColor(Color.TRANSPARENT)
+
+      // Assign our main BottomSheetBehavior
+      val sheetViewParams = sheetView.layoutParams as CoordinatorLayout.LayoutParams
+      sheetViewParams.behavior = sheetBehavior
     }
 
     // Configure Sheet Dialog
     sheetDialog.apply {
       setOnShowListener {
-
         // Initialize footer y
         UiThreadUtil.runOnUiThread {
           footerView?.let {
-            val sheetView = sheetLayout.parent as ViewGroup
             it.y = (sheetView.height - sheetView.top - it.height).toFloat()
           }
         }
@@ -118,7 +88,7 @@ class TrueSheetView(context: Context) :
         presentPromise = null
 
         // dispatch onPresent event
-        eventDispatcher?.dispatchEvent(PresentEvent(surfaceId, id))
+        eventDispatcher?.dispatchEvent(PresentEvent(surfaceId, id, sheetBehavior.getSizeInfoForIndex(activeIndex)))
       }
 
       setOnDismissListener {
@@ -129,6 +99,37 @@ class TrueSheetView(context: Context) :
         eventDispatcher?.dispatchEvent(DismissEvent(surfaceId, id))
       }
     }
+
+    // Configure Sheet events
+    sheetBehavior.apply {
+
+      // Set our default max height
+      maxSheetSize = Utils.maxSize(context)
+
+      addBottomSheetCallback(
+        object : BottomSheetBehavior.BottomSheetCallback() {
+          override fun onSlide(sheetView: View, slideOffset: Float) {
+            footerView?.let {
+              it.y = (sheetView.height - sheetView.top - it.height).toFloat()
+            }
+          }
+
+          override fun onStateChanged(view: View, newState: Int) {
+            val sizeInfo = getSizeInfoForState(newState)
+            if (sizeInfo != null && sizeInfo.index != activeIndex) {
+              activeIndex = sizeInfo.index
+
+              // dispatch onSizeChange event
+              eventDispatcher?.dispatchEvent(SizeChangeEvent(surfaceId, id, sizeInfo))
+            }
+
+            if (newState == BottomSheetBehavior.STATE_HIDDEN) {
+              sheetDialog.dismiss()
+            }
+          }
+        }
+      )
+    }
   }
 
   override fun dispatchProvideStructure(structure: ViewStructure) {
@@ -211,21 +212,24 @@ class TrueSheetView(context: Context) :
 
   fun setMaxHeight(height: Int) {
     sheetBehavior.maxSheetHeight = height
-    sheetBehavior.configure(sizes)
+    sheetBehavior.configure()
   }
 
   fun setSizes(newSizes: Array<Any>) {
-    sizes = newSizes
-    sheetBehavior.configure(sizes)
+    sheetBehavior.sizes = newSizes
+    sheetBehavior.configure()
   }
 
   fun present(index: Int, promiseCallback: () -> Unit) {
-    sheetBehavior.setStateForSizeIndex(sizes.size, index)
-
     if (sheetDialog.isShowing) {
+      sheetBehavior.setStateForSizeIndex(index)
       promiseCallback()
     } else {
-      sheetBehavior.configure(sizes)
+      sheetBehavior.configure()
+
+      activeIndex = index
+      sheetBehavior.setStateForSizeIndex(index)
+
       presentPromise = promiseCallback
       sheetDialog.show()
     }

package/android/src/main/java/com/lodev09/truesheet/core/Events.kt

@@ -5,10 +5,16 @@ import com.facebook.react.bridge.WritableMap
 import com.facebook.react.uimanager.events.Event
 
 // onPresent
-class PresentEvent(surfaceId: Int, viewId: Int) : Event<PresentEvent>(surfaceId, viewId) {
+class PresentEvent(surfaceId: Int, viewId: Int, private val sizeInfo: SizeInfo) : Event<PresentEvent>(surfaceId, viewId) {
   override fun getEventName() = EVENT_NAME
 
-  override fun getEventData(): WritableMap = Arguments.createMap()
+  override fun getEventData(): WritableMap {
+    val data = Arguments.createMap()
+    data.putInt("index", sizeInfo.index)
+    data.putDouble("value", sizeInfo.value.toDouble())
+
+    return data
+  }
 
   companion object {
     const val EVENT_NAME = "present"

package/android/src/main/java/com/lodev09/truesheet/core/{SheetBehavior.kt → TrueSheetBehavior.kt}

@@ -9,14 +9,16 @@ import com.google.android.material.bottomsheet.BottomSheetBehavior
 
 data class SizeInfo(val index: Int, val value: Float)
 
-class SheetBehavior<T : ViewGroup> : BottomSheetBehavior<T>() {
+class TrueSheetBehavior : BottomSheetBehavior<ViewGroup>() {
   var maxSheetSize: Point = Point()
   var maxSheetHeight: Int? = null
 
   var contentView: ViewGroup? = null
   var footerView: ViewGroup? = null
 
-  override fun onInterceptTouchEvent(parent: CoordinatorLayout, child: T, event: MotionEvent): Boolean {
+  var sizes: Array<Any> = arrayOf("medium", "large")
+
+  override fun onInterceptTouchEvent(parent: CoordinatorLayout, child: ViewGroup, event: MotionEvent): Boolean {
     contentView?.let {
       val isDownEvent = (event.actionMasked == MotionEvent.ACTION_DOWN)
       val expanded = state == STATE_EXPANDED
@@ -54,7 +56,7 @@ class SheetBehavior<T : ViewGroup> : BottomSheetBehavior<T>() {
       event.action == MotionEvent.ACTION_CANCEL
   }
 
-  fun getSizeHeight(size: Any, contentHeight: Int): Int {
+  private fun getSizeHeight(size: Any, contentHeight: Int): Int {
     val height =
       when (size) {
         is Double -> Utils.toPixel(size)
@@ -97,7 +99,7 @@ class SheetBehavior<T : ViewGroup> : BottomSheetBehavior<T>() {
     return minOf(height, maxSheetHeight ?: maxSheetSize.y)
   }
 
-  fun configure(sizes: Array<Any>) {
+  fun configure() {
     var contentHeight = 0
 
     contentView?.let { contentHeight = it.height }
@@ -132,8 +134,32 @@ class SheetBehavior<T : ViewGroup> : BottomSheetBehavior<T>() {
     }
   }
 
-  fun getSizeInfoForState(sizeCount: Int, state: Int): SizeInfo? =
-    when (sizeCount) {
+  fun getStateForIndex(index: Int) =
+    when (sizes.size) {
+      1 -> STATE_EXPANDED
+
+      2 -> {
+        when (index) {
+          0 -> STATE_COLLAPSED
+          1 -> STATE_EXPANDED
+          else -> STATE_HIDDEN
+        }
+      }
+
+      3 -> {
+        when (index) {
+          0 -> STATE_COLLAPSED
+          1 -> STATE_HALF_EXPANDED
+          2 -> STATE_EXPANDED
+          else -> STATE_HIDDEN
+        }
+      }
+
+      else -> STATE_HIDDEN
+    }
+
+  fun getSizeInfoForState(state: Int): SizeInfo? =
+    when (sizes.size) {
       1 -> {
         when (state) {
           STATE_EXPANDED -> SizeInfo(0, Utils.toDIP(maxHeight))
@@ -167,29 +193,9 @@ class SheetBehavior<T : ViewGroup> : BottomSheetBehavior<T>() {
       else -> null
     }
 
-  fun setStateForSizeIndex(sizeCount: Int, index: Int) {
-    state =
-      when (sizeCount) {
-        1 -> STATE_EXPANDED
-
-        2 -> {
-          when (index) {
-            0 -> STATE_COLLAPSED
-            1 -> STATE_EXPANDED
-            else -> STATE_HIDDEN
-          }
-        }
-
-        3 -> {
-          when (index) {
-            0 -> STATE_COLLAPSED
-            1 -> STATE_HALF_EXPANDED
-            2 -> STATE_EXPANDED
-            else -> STATE_HIDDEN
-          }
-        }
+  fun getSizeInfoForIndex(index: Int) = getSizeInfoForState(getStateForIndex(index)) ?: SizeInfo(0, 0f)
 
-        else -> STATE_HIDDEN
-      }
+  fun setStateForSizeIndex(index: Int) {
+    state = getStateForIndex(index)
   }
 }

package/ios/Extensions/UIBlurEffect+withStyle.swift

@@ -0,0 +1,62 @@
+//
+//  Created by Jovanni Lo (@lodev09)
+//  Copyright (c) 2024-present. All rights reserved.
+//
+//  This source code is licensed under the MIT license found in the
+//  LICENSE file in the root directory of this source tree.
+//
+
+extension UIBlurEffect {
+  convenience init(with style: String) {
+    var blurStyle: Style
+
+    switch style {
+    case "default":
+      blurStyle = .regular
+    case "extraLight":
+      blurStyle = .extraLight
+    case "light":
+      blurStyle = .light
+    case "regular":
+      blurStyle = .regular
+    case "dark":
+      blurStyle = .dark
+    case "prominent":
+      blurStyle = .prominent
+    case "systemUltraThinMaterial":
+      blurStyle = .systemUltraThinMaterial
+    case "systemThinMaterial":
+      blurStyle = .systemThinMaterial
+    case "systemMaterial":
+      blurStyle = .systemMaterial
+    case "systemThickMaterial":
+      blurStyle = .systemThickMaterial
+    case "systemChromeMaterial":
+      blurStyle = .systemChromeMaterial
+    case "systemUltraThinMaterialLight":
+      blurStyle = .systemUltraThinMaterialLight
+    case "systemThickMaterialLight":
+      blurStyle = .systemThickMaterialLight
+    case "systemThinMaterialLight":
+      blurStyle = .systemThinMaterialLight
+    case "systemMaterialLight":
+      blurStyle = .systemMaterialLight
+    case "systemChromeMaterialLight":
+      blurStyle = .systemChromeMaterialLight
+    case "systemUltraThinMaterialDark":
+      blurStyle = .systemUltraThinMaterialDark
+    case "systemThinMaterialDark":
+      blurStyle = .systemThinMaterialDark
+    case "systemMaterialDark":
+      blurStyle = .systemMaterialDark
+    case "systemThickMaterialDark":
+      blurStyle = .systemThickMaterialDark
+    case "systemChromeMaterialDark":
+      blurStyle = .systemChromeMaterialDark
+    default:
+      blurStyle = .light
+    }
+
+    self.init(style: blurStyle)
+  }
+}

package/ios/TrueSheetView.swift

@@ -61,7 +61,6 @@ class TrueSheetView: UIView, RCTInvalidating, TrueSheetViewControllerDelegate {
 
     super.init(frame: .zero)
 
-    viewController.view.autoresizingMask = [.flexibleHeight, .flexibleWidth]
     viewController.delegate = self
   }
 
@@ -78,7 +77,8 @@ class TrueSheetView: UIView, RCTInvalidating, TrueSheetViewControllerDelegate {
       return
     }
 
-    viewController.view.insertSubview(subview, at: 0)
+    // viewController.view.insertSubview(subview, at: 0)
+    viewController.view.addSubview(subview)
 
     containerView = subview
     touchHandler.attach(to: subview)
@@ -141,10 +141,10 @@ class TrueSheetView: UIView, RCTInvalidating, TrueSheetViewControllerDelegate {
     onDismiss?(nil)
   }
 
-  func viewControllerSheetDidChangeSize(_ value: CGFloat, at index: Int) {
-    if index != activeIndex {
-      activeIndex = index
-      onSizeChange?(["index": index, "value": value])
+  func viewControllerSheetDidChangeSize(_ sizeInfo: SizeInfo) {
+    if sizeInfo.index != activeIndex {
+      activeIndex = sizeInfo.index
+      onSizeChange?(sizeInfoData(from: sizeInfo))
     }
   }
 
@@ -162,6 +162,31 @@ class TrueSheetView: UIView, RCTInvalidating, TrueSheetViewControllerDelegate {
     configureSheetIfPresented()
   }
 
+  @objc
+  func setBlurStyle(_ style: NSString?) {
+    guard let style else {
+      viewController.blurView.effect = nil
+      return
+    }
+
+    viewController.blurView.effect = UIBlurEffect(with: style as String)
+  }
+
+  @objc
+  func setGrabber(_ visible: Bool) {
+    viewController.grabber = visible
+  }
+
+  @objc
+  func setCornerRadius(_ radius: NSNumber?) {
+    guard let radius else {
+      viewController.cornerRadius = nil
+      return
+    }
+
+    viewController.cornerRadius = CGFloat(radius.floatValue)
+  }
+
   @objc
   func setScrollableHandle(_ tag: NSNumber?) {
     let view = bridge.uiManager.view(forReactTag: tag) as? RCTScrollView
@@ -174,6 +199,14 @@ class TrueSheetView: UIView, RCTInvalidating, TrueSheetViewControllerDelegate {
 
   // MARK: - Methods
 
+  private func sizeInfoData(from sizeInfo: SizeInfo?) -> [String: Any] {
+    guard let sizeInfo else {
+      return ["index": 0, "value": 0.0]
+    }
+
+    return ["index": sizeInfo.index, "value": sizeInfo.value]
+  }
+
   func configureSheetIfPresented() {
     // Resize sheet
     if #available(iOS 15.0, *), isPresented {
@@ -231,12 +264,8 @@ class TrueSheetView: UIView, RCTInvalidating, TrueSheetViewControllerDelegate {
 
     if #available(iOS 15.0, *) {
       viewController.configureSheet(at: index, with: contentHeight) {
-        if self.isPresented {
-          // Notify when size is changed programatically
-          let info = self.viewController.detentValues.first(where: { $0.value.index == index })
-          if let sizeValue = info?.value.value {
-            self.viewControllerSheetDidChangeSize(sizeValue, at: index)
-          }
+        if self.isPresented, let sizeInfo = self.viewController.selectedSizeInfo {
+          self.viewControllerSheetDidChangeSize(sizeInfo)
         }
       }
     }
@@ -249,8 +278,14 @@ class TrueSheetView: UIView, RCTInvalidating, TrueSheetViewControllerDelegate {
 
       rvc.present(viewController, animated: true) {
         self.isPresented = true
-        self.onPresent?(nil)
 
+        var data = ["index": 0, "value": 0.0]
+
+        if #available(iOS 15.0, *), let sizeInfo = self.viewController.selectedSizeInfo {
+          data = self.sizeInfoData(from: sizeInfo)
+        }
+
+        self.onPresent?(data)
         promise.resolve(nil)
       }
     }