@lodev09/react-native-true-sheet 0.9.7 → 0.9.9

package/README.md

@@ -16,8 +16,7 @@ The true native bottom sheet 💩
 * ✅ Handles your _Footer_ needs, natively.
 * ✅ Handles your _Keyboard_ needs, natively.
 * ✅ Asynchronus `ref` [methods](#methods).
-* ✅ Works with Expo by default.
-* ✅ Bonus! [Blur](#blurtint) support on iOS 😎
+* ✅ Bonus! [Blur](#blurtint) support on IOS 😎
 
 ## Installation
 
@@ -29,9 +28,11 @@ yarn add @lodev09/react-native-true-sheet
 npm i @lodev09/react-native-true-sheet
 ```
 
+> This package is not compatible with [Expo Go](https://docs.expo.dev/get-started/expo-go/). Use this with [Expo CNG](https://docs.expo.dev/workflow/continuous-native-generation/) instead.
+
 ## Usage
 
-```ts
+```tsx
 import { TrueSheet } from "@lodev09/react-native-true-sheet"
 
 // ...
@@ -65,6 +66,7 @@ Extends `ViewProps`
 | Prop | Type | Default | Description | 🍎 | 🤖 |
 | - | - | - | - | - | - |
 | sizes | [`SheetSize[]`](#sheetsize) | `["medium", "large"]` | Array of sizes you want the sheet to support. Maximum of _**3 sizes**_ only! **_collapsed_**, **_half-expanded_**, and **_expanded_**. Example: `size={["auto", "60%", "large"]}`| ✅ | ✅ |
+| name | `string` | - | The name to reference this sheet. It has to be **_unique_**. You can then present this sheet globally using its name. | ✅ | ✅ |
 | backgroundColor | `ColorValue` | `"white"` | The sheet's background color. | ✅ | ✅ |
 | cornerRadius | `number` | - | the sheet corner radius. | ✅ | ✅ |
 | maxHeight | `number` | - | Overrides `"large"` or `"100%"` height. | ✅ | ✅ |
@@ -73,12 +75,12 @@ Extends `ViewProps`
 | dismissible | `boolean` | `true` | If set to `false`, the sheet will prevent interactive dismissal via dragging or clicking outside of it. | ✅ | ✅ |
 | grabber | `boolean` | `true` | Shows a grabber (or handle). Native on IOS and styled `View` on Android. | ✅ | ✅ |
 | grabberProps | [`TrueSheetGrabberProps`](#truesheetgrabberprops) | - | Overrides the grabber props for android. | | ✅ |
-| blurTint | [`BlurTint`](#blurtint) | - | The blur effect style on iOS. Overrides `backgroundColor` if set. Example: `"light"`, `"dark"`, etc. | ✅ | |
-| scrollRef | `RefObject<...>` | - | The main scrollable ref that the sheet should handle on iOS. | ✅ | |
+| blurTint | [`BlurTint`](#blurtint) | - | The blur effect style on IOS. Overrides `backgroundColor` if set. Example: `"light"`, `"dark"`, etc. | ✅ | |
+| scrollRef | `RefObject<...>` | - | The main scrollable ref that the sheet should handle on IOS. | ✅ | |
 
 ## Methods
 
-```ts
+```tsx
 const sheet = useRef<TrueSheet>(null)
 
 const resize = () => {
@@ -106,9 +108,40 @@ return (
 | resize | `index: number` | Resizes the sheet programmatically by `index`. This is an alias of the `present(index)` method. |
 | dismiss | - | Dismisses the sheet. |
 
-## Events
+### Static Methods
+
+You can also call the above methods statically without having access to a sheet's `ref`. This is particularly useful when you want to present a sheet from anywhere.
+
+The API is similar to the ref methods except for the required `name` prop.
 
 ```ts
+TrueSheet.present('SHEET-NAME')
+TrueSheet.dismiss('SHEET-NAME')
+TrueSheet.resize('SHEET-NAME', 1)
+```
+
+Example:
+```tsx
+// Define the sheet as usual
+<TrueSheet name="my-sheet">
+  // ...
+</TrueSheet>
+```
+```tsx
+// Somewhere in your screen
+const presentMySheet = async () => {
+  await TrueSheet.present('my-sheet')
+  console.log('🎉')
+}
+
+return (
+  <Button onPress={presentMySheet} />
+)
+```
+
+## Events
+
+```tsx
 const handleSizeChange = (info: SizeInfo) => {
   console.log(info)
 }
@@ -130,7 +163,7 @@ return (
 
 ### `SheetSize`
 
-```ts
+```tsx
 <TrueSheet sizes={['auto', '80%', 'large']}>
   // ...
 </TrueSheet>
@@ -142,8 +175,8 @@ return (
 | `"small"` | Translates to 25% | **_16+_** | ✅ |
 | `"medium"` | Translates to 50% | **_15+_** | ✅ |
 | `"large"` | Translates to 100% | ✅ | ✅ |
+| `"${number}%"` | Fixed height in % | **_16+_** | ✅ |
 | `number` | Fixed height | **_16+_** | ✅ |
-| `${number}%` | Fixed height in % | **_16+_** | ✅ |
 
 > [!NOTE]
 > `auto` is not guaranteed to be accurate if your content depends on various rendering logic. Experiment with it and try to keep your content size as fixed as possible.
@@ -164,9 +197,9 @@ Grabber props to be used for android grabber or handle.
 
 ### `BlurTint`
 
-Blur tint that is mapped into native values in iOS.
+Blur tint that is mapped into native values in IOS.
 
-```ts
+```tsx
 <TrueSheet blurTint="dark">
   // ...
 </TrueSheet>
@@ -200,7 +233,7 @@ Blur tint that is mapped into native values in iOS.
 
 `Object` that comes with some events.
 
-```ts
+```tsx
 {
   index: 1,
   value: 69
@@ -212,32 +245,101 @@ Blur tint that is mapped into native values in iOS.
 | index | `number` | The size index from the provided sizes. See `sizes` prop. |
 | value | `number` | The actual height value of the size. |
 
+## Testing
+
+When using `jest`, simply mock the entire package.
+
+```tsx
+jest.mock('@lodev09/react-native-true-sheet')
+```
+
 ## Troubleshooting
 
+### Presenting a sheet on top of an existing sheet on **IOS**
+
+On IOS, presenting a sheet on top of an existing sheet will cause error.
+
+```console
+Attempt to present <TrueSheet.TrueSheetViewController: 0x11829f800> on <UIViewController: 0x10900eb10> (from <RNSScreen: 0x117dbf400>) which is already presenting <TrueSheet.TrueSheetViewController: 0x11a0b9200>
+```
+
+There are _two_ ways to resolve this.
+
+1. Dismiss the "parent" sheet first
+    ```tsx
+    const presentSheet2 = async () => {
+      await sheet1.current?.dismiss() // Wait for sheet 1 to dismiss ✅
+      await sheet2.current?.present() // Sheet 2 will now present 🎉
+    }
+
+    return (
+      <>
+        <TrueSheet ref={sheet1}>
+          <Button onPress={presentSheet2} title="Present Sheet 2" />
+          // ...
+        </TrueSheet>
+
+        <TrueSheet ref={sheet2}>
+          // ...
+        </TrueSheet>
+      </>
+    )
+    ```
+2. Define the 2nd sheet within the "parent" sheet. IOS handles this automatically by default 😎.
+    ```tsx
+    const presentSheet2 = async () => {
+      await sheet2.current?.present() // Sheet 2 will now present 🎉
+    }
+
+    return (
+      <TrueSheet ref={sheet1}>
+        <Button onPress={presentSheet2} title="Present Sheet 2" />
+
+        // ...
+
+        <TrueSheet ref={sheet2}>
+          // ...
+        </TrueSheet>
+      </TrueSheet>
+    )
+    ```
+
+### Handling `ScrollView` on **Android**
+
+On Android, `nestedScrollEnabled` needs to be enabled so that scrolling works when the sheet is expanded to its `maxHeight`.
+
+```tsx
+<TrueSheet ref={sheet}>
+  <ScrollView nestedScrollEnabled>
+    // ...
+  </ScrollView>
+</TrueSheet>
+```
+
 ### Using `react-native-gesture-handler` on **Android**
 
 On Android, RNGH does not work by default because modals are not located under React Native Root view in native hierarchy. To fix that, components need to be wrapped with `GestureHandlerRootView`.
 
 Example:
-```ts
+```tsx
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
 ```
-```ts
+```tsx
 return (
   <TrueSheet ref={sheet}>
     <GestureHandlerRootView>
-      <MyComponent />
+      // ...
     </GestureHandlerRootView>
   </TrueSheet>
 )
 ```
 
-### Integrating `@react-navigation/native` on iOS
+### Integrating `@react-navigation/native` on **IOS**
 
-On iOS, navigating to a [React Navigation](https://reactnavigation.org) screen from within the Sheet can cause issues. To resolve this, dismiss the sheet before navigating!
+On IOS, navigating to a [React Navigation](https://reactnavigation.org) screen from within the Sheet can cause issues. To resolve this, dismiss the sheet before navigating!
 
 Example:
-```ts
+```tsx
 const sheet = useRef<TrueSheet>(null)
 
 const navigate = async () => {

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

@@ -3,38 +3,34 @@ package com.lodev09.truesheet
 import android.graphics.Color
 import android.view.ViewGroup
 import android.view.WindowManager
-import android.widget.LinearLayout
-import androidx.coordinatorlayout.widget.CoordinatorLayout
 import com.facebook.react.uimanager.ThemedReactContext
+import com.google.android.material.bottomsheet.BottomSheetBehavior
 import com.google.android.material.bottomsheet.BottomSheetDialog
 import com.lodev09.truesheet.core.KeyboardManager
-import com.lodev09.truesheet.core.RootViewGroup
+import com.lodev09.truesheet.core.RootSheetView
 import com.lodev09.truesheet.core.Utils
 
-class TrueSheetDialog(
-  private val reactContext: ThemedReactContext,
-  private val behavior: TrueSheetBehavior,
-  private val rootViewGroup: RootViewGroup
-) : BottomSheetDialog(reactContext) {
+data class SizeInfo(val index: Int, val value: Float)
+
+class TrueSheetDialog(private val reactContext: ThemedReactContext, private val rootSheetView: RootSheetView) :
+  BottomSheetDialog(reactContext) {
 
   private var keyboardManager = KeyboardManager(reactContext)
 
-  var sheetView: ViewGroup
+  var maxScreenHeight: Int = 0
+  var maxSheetHeight: Int? = null
 
-  init {
-    LinearLayout(reactContext).apply {
-      addView(rootViewGroup)
-      setContentView(this)
+  var contentView: ViewGroup? = null
+  var footerView: ViewGroup? = null
 
-      sheetView = parent as ViewGroup
+  var sizes: Array<Any> = arrayOf("medium", "large")
 
-      // Set to transparent background to support corner radius
-      sheetView.setBackgroundColor(Color.TRANSPARENT)
+  private var sheetView: ViewGroup
 
-      // Assign our main BottomSheetBehavior
-      val sheetViewParams = sheetView.layoutParams as CoordinatorLayout.LayoutParams
-      sheetViewParams.behavior = behavior
-    }
+  init {
+    setContentView(rootSheetView)
+    sheetView = rootSheetView.parent as ViewGroup
+    sheetView.setBackgroundColor(Color.TRANSPARENT)
 
     // Setup window params to adjust layout based on Keyboard state.
     window?.apply {
@@ -43,19 +39,111 @@ class TrueSheetDialog(
         WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE
       )
     }
+
+    // Update the usable sheet height
+    maxScreenHeight = Utils.screenHeight(reactContext)
   }
 
   fun show(sizeIndex: Int) {
     if (isShowing) {
-      behavior.setStateForSizeIndex(sizeIndex)
+      setStateForSizeIndex(sizeIndex)
     } else {
-      behavior.configure()
-      behavior.setStateForSizeIndex(sizeIndex)
+      configure()
+      setStateForSizeIndex(sizeIndex)
 
       this.show()
     }
   }
 
+  fun positionFooter() {
+    footerView?.apply {
+      y = (maxScreenHeight - sheetView.top - height).toFloat()
+    }
+  }
+
+  /**
+   * Set the state based on the given size index.
+   */
+  private fun setStateForSizeIndex(index: Int) {
+    behavior.state = getStateForSizeIndex(index)
+  }
+
+  /**
+   * Get the height value based on the size config value.
+   */
+  private fun getSizeHeight(size: Any, contentHeight: Int): Int {
+    val height =
+      when (size) {
+        is Double -> Utils.toPixel(size)
+
+        is Int -> Utils.toPixel(size.toDouble())
+
+        is String -> {
+          when (size) {
+            "auto" -> contentHeight
+
+            "large" -> maxScreenHeight
+
+            "medium" -> (maxScreenHeight * 0.50).toInt()
+
+            "small" -> (maxScreenHeight * 0.25).toInt()
+
+            else -> {
+              if (size.endsWith('%')) {
+                val percent = size.trim('%').toDoubleOrNull()
+                if (percent == null) {
+                  0
+                } else {
+                  ((percent / 100) * maxScreenHeight).toInt()
+                }
+              } else {
+                val fixedHeight = size.toDoubleOrNull()
+                if (fixedHeight == null) {
+                  0
+                } else {
+                  Utils.toPixel(fixedHeight)
+                }
+              }
+            }
+          }
+        }
+
+        else -> (maxScreenHeight * 0.5).toInt()
+      }
+
+    return when (maxSheetHeight) {
+      null -> height
+      else -> minOf(height, maxSheetHeight ?: maxScreenHeight)
+    }
+  }
+
+  /**
+   * Determines the state based on the given size index.
+   */
+  private fun getStateForSizeIndex(index: Int) =
+    when (sizes.size) {
+      1 -> BottomSheetBehavior.STATE_EXPANDED
+
+      2 -> {
+        when (index) {
+          0 -> BottomSheetBehavior.STATE_COLLAPSED
+          1 -> BottomSheetBehavior.STATE_EXPANDED
+          else -> BottomSheetBehavior.STATE_HIDDEN
+        }
+      }
+
+      3 -> {
+        when (index) {
+          0 -> BottomSheetBehavior.STATE_COLLAPSED
+          1 -> BottomSheetBehavior.STATE_HALF_EXPANDED
+          2 -> BottomSheetBehavior.STATE_EXPANDED
+          else -> BottomSheetBehavior.STATE_HIDDEN
+        }
+      }
+
+      else -> BottomSheetBehavior.STATE_HIDDEN
+    }
+
   /**
    * Handle keyboard state changes and adjust maxScreenHeight (sheet max height) accordingly.
    * Also update footer's Y position.
@@ -63,14 +151,12 @@ class TrueSheetDialog(
   fun registerKeyboardManager() {
     keyboardManager.registerKeyboardListener(object : KeyboardManager.OnKeyboardListener {
       override fun onKeyboardStateChange(isVisible: Boolean, visibleHeight: Int?) {
-        when (isVisible) {
-          true -> behavior.maxScreenHeight = visibleHeight ?: 0
-          else -> behavior.maxScreenHeight = Utils.screenHeight(reactContext)
+        maxScreenHeight = when (isVisible) {
+          true -> visibleHeight ?: 0
+          else -> Utils.screenHeight(reactContext)
         }
 
-        behavior.footerView?.apply {
-          y = (behavior.maxScreenHeight - (sheetView.top ?: 0) - height).toFloat()
-        }
+        positionFooter()
       }
     })
   }
@@ -82,6 +168,90 @@ class TrueSheetDialog(
     keyboardManager.unregisterKeyboardListener()
   }
 
+  /**
+   * Configure the sheet based on size preferences.
+   */
+  fun configure() {
+    var contentHeight = 0
+
+    contentView?.let { contentHeight = it.height }
+    footerView?.let { contentHeight += it.height }
+
+    // Configure sheet sizes
+    behavior.apply {
+      skipCollapsed = false
+      isFitToContents = true
+
+      // m3 max width 640dp
+      maxWidth = Utils.toPixel(640.0)
+
+      when (sizes.size) {
+        1 -> {
+          maxHeight = getSizeHeight(sizes[0], contentHeight)
+          setPeekHeight(maxHeight, isShowing)
+          skipCollapsed = true
+        }
+
+        2 -> {
+          setPeekHeight(getSizeHeight(sizes[0], contentHeight), isShowing)
+          maxHeight = getSizeHeight(sizes[1], contentHeight)
+        }
+
+        3 -> {
+          // Enables half expanded
+          isFitToContents = false
+
+          setPeekHeight(getSizeHeight(sizes[0], contentHeight), isShowing)
+          halfExpandedRatio = getSizeHeight(sizes[1], contentHeight).toFloat() / maxScreenHeight.toFloat()
+          maxHeight = getSizeHeight(sizes[2], contentHeight)
+        }
+      }
+    }
+  }
+
+  /**
+   * Get the SizeInfo data by state.
+   */
+  fun getSizeInfoForState(state: Int): SizeInfo? =
+    when (sizes.size) {
+      1 -> {
+        when (state) {
+          BottomSheetBehavior.STATE_EXPANDED -> SizeInfo(0, Utils.toDIP(behavior.maxHeight))
+          else -> null
+        }
+      }
+
+      2 -> {
+        when (state) {
+          BottomSheetBehavior.STATE_COLLAPSED -> SizeInfo(0, Utils.toDIP(behavior.peekHeight))
+          BottomSheetBehavior.STATE_EXPANDED -> SizeInfo(1, Utils.toDIP(behavior.maxHeight))
+          else -> null
+        }
+      }
+
+      3 -> {
+        when (state) {
+          BottomSheetBehavior.STATE_COLLAPSED -> SizeInfo(0, Utils.toDIP(behavior.peekHeight))
+
+          BottomSheetBehavior.STATE_HALF_EXPANDED -> {
+            val height = behavior.halfExpandedRatio * maxScreenHeight
+            SizeInfo(1, Utils.toDIP(height.toInt()))
+          }
+
+          BottomSheetBehavior.STATE_EXPANDED -> SizeInfo(2, Utils.toDIP(behavior.maxHeight))
+
+          else -> null
+        }
+      }
+
+      else -> null
+    }
+
+  /**
+   * Get SizeInfo data for given size index.
+   */
+  fun getSizeInfoForIndex(index: Int) = getSizeInfoForState(getStateForSizeIndex(index)) ?: SizeInfo(0, 0f)
+
   companion object {
     const val TAG = "TrueSheetView"
   }