@lodev09/react-native-true-sheet 2.0.6 → 4.0.0-beta.0

package/README.md

@@ -1,7 +1,6 @@
 # React Native True Sheet
 
 [![CI](https://github.com/lodev09/react-native-true-sheet/actions/workflows/ci.yml/badge.svg)](https://github.com/lodev09/react-native-true-sheet/actions/workflows/ci.yml)
-[![Maintainability](https://api.codeclimate.com/v1/badges/0bd49973c6c61d85e2be/maintainability)](https://codeclimate.com/github/lodev09/react-native-true-sheet/maintainability)
 [![NPM Downloads](https://img.shields.io/npm/d18m/%40lodev09%2Freact-native-true-sheet)](https://www.npmjs.com/package/@lodev09/react-native-true-sheet)
 
 The true native bottom sheet experience for your React Native Apps. 💩
@@ -10,14 +9,24 @@ The true native bottom sheet experience for your React Native Apps. 💩
 
 ## Features
 
-* Implemented in the native realm.
-* Clean, fast, and lightweight.
-* Asynchronus `ref` [methods](https://sheet.lodev09.com/reference/methods#ref-methods).
-* Bonus! [Blur](https://sheet.lodev09.com/reference/types#blurtint) support on IOS 😎
+* ⚡ **Powered by Fabric** - Built on React Native's new architecture for maximum performance
+* 🎯 **Type-safe** - Full TypeScript support with Codegen-generated native interfaces
+* 🚀 **Blazing fast** - Direct C++ communication, no bridge overhead
+* 🎨 **Native** - Implemented in the native realm
+* 🔄 **Imperative API** - Asynchronus `ref` [methods](https://sheet.lodev09.com/reference/methods#ref-methods)
 
 ## Installation
 
-You can install the package by using either `yarn` or `npm`.
+> [!IMPORTANT]
+> **Version 3.0+ requires React Native's New Architecture (Fabric)**
+> For the old architecture, use version 2.x. See the [Migration Guide (v2 → v3)](https://sheet.lodev09.com/migration) for upgrading.
+
+### Prerequisites
+
+- React Native >= 0.81
+- New Architecture enabled (`RCT_NEW_ARCH_ENABLED=1` for iOS, `newArchEnabled=true` for Android)
+
+### Install
 
 ```sh
 yarn add @lodev09/react-native-true-sheet
@@ -26,18 +35,25 @@ yarn add @lodev09/react-native-true-sheet
 npm i @lodev09/react-native-true-sheet
 ```
 
-Next, run the following to install it on IOS.
+### iOS Setup
 
 ```sh
 cd ios && pod install
 ```
 
+> **Note:** If you need old architecture support, use version 2.x:
+> ```sh
+> yarn add @lodev09/react-native-true-sheet@^2.0.0
+> ```
+
 ## Documentation
 
 - [Example](example)
 - [Guides](https://sheet.lodev09.com/category/guides)
 - [Reference](https://sheet.lodev09.com/category/reference)
+- [Migration Guide (v2 → v3)](https://sheet.lodev09.com/migration)
 - [Troubleshooting](https://sheet.lodev09.com/troubleshooting)
+- [Testing with Jest](https://sheet.lodev09.com/guides/jest)
 
 ## Usage
 
@@ -64,7 +80,7 @@ export const App = () => {
       <Button onPress={present} title="Present" />
       <TrueSheet
         ref={sheet}
-        sizes={['auto', 'large']}
+        detents={['auto', 1]}
         cornerRadius={24}
       >
         <Button onPress={dismiss} title="Dismiss" />
@@ -74,6 +90,18 @@ export const App = () => {
 }
 ```
 
+## Testing
+
+TrueSheet includes built-in Jest mocks for easy testing. Simply mock the package in your tests:
+
+```tsx
+jest.mock('@lodev09/react-native-true-sheet');
+```
+
+All methods (`present`, `dismiss`, `resize`) are mocked as Jest functions, allowing you to test your components without native dependencies.
+
+**[Full Testing Guide](https://sheet.lodev09.com/guides/jest)**
+
 ## Contributing
 
 See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

package/RNTrueSheet.podspec

@@ -0,0 +1,20 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "RNTrueSheet"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => min_ios_version_supported }
+  s.source       = { :git => "https://github.com/lodev09/react-native-true-sheet.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm,swift,cpp}"
+  s.private_header_files = "ios/**/*.h"
+
+  install_modules_dependencies(s)
+end

package/android/build.gradle

@@ -16,24 +16,19 @@ buildscript {
 }
 
 
-def isNewArchitectureEnabled() {
-  return rootProject.hasProperty("newArchEnabled") && rootProject.getProperty("newArchEnabled") == "true"
-}
-
 apply plugin: "com.android.library"
 apply plugin: "kotlin-android"
-
-// TODO:
-// When running example, comment this block!
-// Not sure what's going on but we are getting multiple definition error when this is enabled.
-if (isNewArchitectureEnabled()) {
-  apply plugin: "com.facebook.react"
-}
+apply plugin: "com.facebook.react"
 
 def getExtOrIntegerDefault(name) {
   return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["TrueSheet_" + name]).toInteger()
 }
 
+def getEdgeToEdgeEnabled() {
+  def edgeToEdge = project.findProperty("edgeToEdgeEnabled")
+  return edgeToEdge != null ? edgeToEdge.toBoolean() : false
+}
+
 def supportsNamespace() {
   def parsed = com.android.Version.ANDROID_GRADLE_PLUGIN_VERSION.tokenize('.')
   def major = parsed[0].toInteger()
@@ -59,7 +54,7 @@ android {
   defaultConfig {
     minSdkVersion getExtOrIntegerDefault("minSdkVersion")
     targetSdkVersion getExtOrIntegerDefault("targetSdkVersion")
-
+    buildConfigField "boolean", "EDGE_TO_EDGE_ENABLED", "${getEdgeToEdgeEnabled()}"
   }
 
   buildTypes {
@@ -73,8 +68,25 @@ android {
   }
 
   compileOptions {
-    sourceCompatibility JavaVersion.VERSION_1_8
-    targetCompatibility JavaVersion.VERSION_1_8
+    sourceCompatibility JavaVersion.VERSION_17
+    targetCompatibility JavaVersion.VERSION_17
+  }
+
+  kotlinOptions {
+    jvmTarget = "17"
+  }
+
+  buildFeatures {
+    buildConfig = true
+  }
+
+  sourceSets {
+    main {
+      java.srcDirs += [
+        "generated/java",
+        "generated/jni"
+      ]
+    }
   }
 }
 

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

@@ -0,0 +1,108 @@
+package com.lodev09.truesheet
+
+import android.annotation.SuppressLint
+import android.view.View
+import androidx.core.view.isNotEmpty
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.views.view.ReactViewGroup
+
+/**
+ * Delegate interface for container view changes
+ */
+interface TrueSheetContainerViewDelegate {
+  fun containerViewContentDidChangeSize(width: Int, height: Int)
+  fun containerViewFooterDidChangeSize(width: Int, height: Int)
+}
+
+/**
+ * Container view that manages the bottom sheet content and holds content and footer views.
+ * Simplified to be a lightweight content manager - events are now handled via dialog delegate.
+ */
+@SuppressLint("ViewConstructor")
+class TrueSheetContainerView(private val reactContext: ThemedReactContext) :
+  ReactViewGroup(reactContext),
+  TrueSheetContentViewDelegate,
+  TrueSheetFooterViewDelegate {
+
+  var delegate: TrueSheetContainerViewDelegate? = null
+
+  /**
+   * Reference to content view (first child)
+   */
+  val contentView: TrueSheetContentView?
+    get() = if (isNotEmpty() && getChildAt(0) is TrueSheetContentView) {
+      getChildAt(0) as TrueSheetContentView
+    } else {
+      null
+    }
+
+  /**
+   * Reference to footer view (second child)
+   */
+  val footerView: TrueSheetFooterView?
+    get() = if (childCount > 1 && getChildAt(1) is TrueSheetFooterView) {
+      getChildAt(1) as TrueSheetFooterView
+    } else {
+      null
+    }
+
+  /**
+   * The content view height
+   */
+  val contentHeight: Int
+    get() = contentView?.height ?: 0
+
+  /**
+   * The footer view height
+   */
+  val footerHeight: Int
+    get() = footerView?.height ?: 0
+
+  init {
+    // Container should not clip children to allow footer to position absolutely
+    clipChildren = false
+    clipToPadding = false
+  }
+
+  override fun addView(child: View?, index: Int) {
+    super.addView(child, index)
+
+    // Set up delegate when content view is added
+    if (child is TrueSheetContentView) {
+      child.delegate = this
+    }
+
+    // Set up delegate when footer view is added
+    if (child is TrueSheetFooterView) {
+      child.delegate = this
+    }
+  }
+
+  override fun removeView(view: View?) {
+    // Clean up delegate when content view is removed
+    if (view is TrueSheetContentView) {
+      view.delegate = null
+    }
+
+    // Clean up delegate when footer view is removed
+    if (view is TrueSheetFooterView) {
+      view.delegate = null
+    }
+
+    super.removeView(view)
+  }
+
+  // ==================== TrueSheetContentViewDelegate Implementation ====================
+
+  override fun contentViewDidChangeSize(width: Int, height: Int) {
+    // Forward content size changes to controller for sheet resizing
+    delegate?.containerViewContentDidChangeSize(width, height)
+  }
+
+  // ==================== TrueSheetFooterViewDelegate Implementation ====================
+
+  override fun footerViewDidChangeSize(width: Int, height: Int) {
+    // Forward footer size changes to host view for repositioning
+    delegate?.containerViewFooterDidChangeSize(width, height)
+  }
+}

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

@@ -0,0 +1,21 @@
+package com.lodev09.truesheet
+
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+
+/**
+ * ViewManager for TrueSheetContainerView
+ * Container that holds content and footer views
+ */
+@ReactModule(name = TrueSheetContainerViewManager.REACT_CLASS)
+class TrueSheetContainerViewManager : ViewGroupManager<TrueSheetContainerView>() {
+
+  override fun getName(): String = REACT_CLASS
+
+  override fun createViewInstance(reactContext: ThemedReactContext): TrueSheetContainerView = TrueSheetContainerView(reactContext)
+
+  companion object {
+    const val REACT_CLASS = "TrueSheetContainerView"
+  }
+}

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

@@ -0,0 +1,46 @@
+package com.lodev09.truesheet
+
+import android.annotation.SuppressLint
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.views.view.ReactViewGroup
+
+/**
+ * Delegate interface for content view size changes
+ */
+interface TrueSheetContentViewDelegate {
+  fun contentViewDidChangeSize(width: Int, height: Int)
+}
+
+/**
+ * Content view that holds the main sheet content
+ * This is the first child of TrueSheetContainerView
+ */
+@SuppressLint("ViewConstructor")
+class TrueSheetContentView(context: ThemedReactContext) : ReactViewGroup(context) {
+  var delegate: TrueSheetContentViewDelegate? = null
+
+  private var lastWidth = 0
+  private var lastHeight = 0
+
+  override fun onLayout(
+    changed: Boolean,
+    left: Int,
+    top: Int,
+    right: Int,
+    bottom: Int
+  ) {
+    super.onLayout(changed, left, top, right, bottom)
+
+    // Notify delegate when content size changes
+    val newWidth = right - left
+    val newHeight = bottom - top
+
+    if (newWidth != lastWidth || newHeight != lastHeight) {
+      lastWidth = newWidth
+      lastHeight = newHeight
+
+      // Notify delegate of size change
+      delegate?.contentViewDidChangeSize(newWidth, newHeight)
+    }
+  }
+}

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

@@ -0,0 +1,21 @@
+package com.lodev09.truesheet
+
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+
+/**
+ * ViewManager for TrueSheetContentView
+ * Manages the main content area of the sheet
+ */
+@ReactModule(name = TrueSheetContentViewManager.REACT_CLASS)
+class TrueSheetContentViewManager : ViewGroupManager<TrueSheetContentView>() {
+
+  override fun getName(): String = REACT_CLASS
+
+  override fun createViewInstance(reactContext: ThemedReactContext): TrueSheetContentView = TrueSheetContentView(reactContext)
+
+  companion object {
+    const val REACT_CLASS = "TrueSheetContentView"
+  }
+}

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

@@ -0,0 +1,47 @@
+package com.lodev09.truesheet
+
+import android.annotation.SuppressLint
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.views.view.ReactViewGroup
+
+/**
+ * Delegate interface for footer view size changes
+ */
+interface TrueSheetFooterViewDelegate {
+  fun footerViewDidChangeSize(width: Int, height: Int)
+}
+
+/**
+ * Footer view that holds the footer content
+ * This is the second child of TrueSheetContainerView
+ * Positioned absolutely at the bottom of the sheet
+ */
+@SuppressLint("ViewConstructor")
+class TrueSheetFooterView(context: ThemedReactContext) : ReactViewGroup(context) {
+  var delegate: TrueSheetFooterViewDelegate? = null
+
+  private var lastWidth = 0
+  private var lastHeight = 0
+
+  override fun onLayout(
+    changed: Boolean,
+    left: Int,
+    top: Int,
+    right: Int,
+    bottom: Int
+  ) {
+    super.onLayout(changed, left, top, right, bottom)
+
+    // Notify delegate when footer size changes
+    val newWidth = right - left
+    val newHeight = bottom - top
+
+    if (newWidth != lastWidth || newHeight != lastHeight) {
+      lastWidth = newWidth
+      lastHeight = newHeight
+
+      // Notify delegate of size change
+      delegate?.footerViewDidChangeSize(newWidth, newHeight)
+    }
+  }
+}

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

@@ -0,0 +1,21 @@
+package com.lodev09.truesheet
+
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+
+/**
+ * ViewManager for TrueSheetFooterView
+ * Manages the footer area of the sheet
+ */
+@ReactModule(name = TrueSheetFooterViewManager.REACT_CLASS)
+class TrueSheetFooterViewManager : ViewGroupManager<TrueSheetFooterView>() {
+
+  override fun getName(): String = REACT_CLASS
+
+  override fun createViewInstance(reactContext: ThemedReactContext): TrueSheetFooterView = TrueSheetFooterView(reactContext)
+
+  companion object {
+    const val REACT_CLASS = "TrueSheetFooterView"
+  }
+}

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

@@ -0,0 +1,165 @@
+package com.lodev09.truesheet
+
+import android.os.Handler
+import android.os.Looper
+import com.facebook.react.bridge.Promise
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReactMethod
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.turbomodule.core.interfaces.TurboModule
+import com.facebook.react.uimanager.UIManagerHelper
+import java.util.concurrent.ConcurrentHashMap
+
+/**
+ * TurboModule for TrueSheet imperative API
+ * Provides promise-based async operations using view references
+ */
+@ReactModule(name = TrueSheetModule.NAME)
+class TrueSheetModule(reactContext: ReactApplicationContext) :
+  com.facebook.react.bridge.ReactContextBaseJavaModule(reactContext),
+  TurboModule {
+
+  override fun getName(): String = NAME
+
+  override fun initialize() {
+    super.initialize()
+  }
+
+  override fun invalidate() {
+    super.invalidate()
+    // Clear all registered views on module invalidation
+    synchronized(viewRegistry) {
+      viewRegistry.clear()
+    }
+  }
+
+  /**
+   * Present a sheet by reference
+   *
+   * @param viewTag Native view tag of the sheet component
+   * @param index Detent index to present at
+   * @param promise Promise that resolves when sheet is fully presented
+   * @throws VIEW_NOT_FOUND if the view with the given tag is not found
+   * @throws INVALID_VIEW_TYPE if the view is not a TrueSheetView
+   * @throws OPERATION_FAILED if the operation fails for any other reason
+   */
+  @ReactMethod
+  fun presentByRef(viewTag: Double, index: Double, promise: Promise) {
+    val tag = viewTag.toInt()
+    val detentIndex = index.toInt()
+
+    withTrueSheetView(tag, promise) { view ->
+      view.present(detentIndex) {
+        promise.resolve(null)
+      }
+    }
+  }
+
+  /**
+   * Dismiss a sheet by reference
+   *
+   * @param viewTag Native view tag of the sheet component
+   * @param promise Promise that resolves when sheet is fully dismissed
+   * @throws VIEW_NOT_FOUND if the view with the given tag is not found
+   * @throws INVALID_VIEW_TYPE if the view is not a TrueSheetView
+   * @throws OPERATION_FAILED if the operation fails for any other reason
+   */
+  @ReactMethod
+  fun dismissByRef(viewTag: Double, promise: Promise) {
+    val tag = viewTag.toInt()
+
+    withTrueSheetView(tag, promise) { view ->
+      view.dismiss {
+        promise.resolve(null)
+      }
+    }
+  }
+
+  /**
+   * Resize a sheet to a different index by reference
+   *
+   * @param viewTag Native view tag of the sheet component
+   * @param index New detent index
+   * @param promise Promise that resolves when resize is complete
+   * @throws VIEW_NOT_FOUND if the view with the given tag is not found
+   * @throws INVALID_VIEW_TYPE if the view is not a TrueSheetView
+   * @throws OPERATION_FAILED if the operation fails for any other reason
+   */
+  @ReactMethod
+  fun resizeByRef(viewTag: Double, index: Double, promise: Promise) {
+    // Resize is just an alias for present
+    presentByRef(viewTag, index, promise)
+  }
+
+  /**
+   * Helper method to get TrueSheetView by tag and execute closure
+   */
+  private fun withTrueSheetView(tag: Int, promise: Promise, closure: (view: TrueSheetView) -> Unit) {
+    Handler(Looper.getMainLooper()).post {
+      try {
+        // First try to get from registry (faster)
+        val view = getSheetByTag(tag)
+
+        if (view != null) {
+          closure(view)
+        } else {
+          // Fallback to UIManager resolution
+          val manager = UIManagerHelper.getUIManagerForReactTag(reactApplicationContext, tag)
+          val resolvedView = manager?.resolveView(tag)
+
+          if (resolvedView == null) {
+            promise.reject("VIEW_NOT_FOUND", "TrueSheetView with tag $tag not found")
+            return@post
+          }
+
+          if (resolvedView is TrueSheetView) {
+            closure(resolvedView)
+          } else {
+            promise.reject(
+              "INVALID_VIEW_TYPE",
+              "View with tag $tag is not a TrueSheetView (got ${resolvedView::class.simpleName})"
+            )
+          }
+        }
+      } catch (e: Exception) {
+        promise.reject("OPERATION_FAILED", "Failed to execute operation: ${e.message}", e)
+      }
+    }
+  }
+
+  companion object {
+    const val NAME = "TrueSheetModule"
+
+    /**
+     * Registry to keep track of TrueSheetView instances by their view tag
+     * This provides fast lookup for ref-based operations
+     */
+    private val viewRegistry = ConcurrentHashMap<Int, TrueSheetView>()
+
+    /**
+     * Register a TrueSheetView instance
+     * Called automatically by TrueSheetView during initialization
+     */
+    @JvmStatic
+    fun registerView(view: TrueSheetView, tag: Int) {
+      viewRegistry[tag] = view
+    }
+
+    /**
+     * Unregister a TrueSheetView instance
+     * Called automatically by TrueSheetView during cleanup
+     */
+    @JvmStatic
+    fun unregisterView(tag: Int) {
+      viewRegistry.remove(tag)
+    }
+
+    /**
+     * Get a TrueSheetView by its tag
+     * @param tag - The React native tag of the view
+     * @return The TrueSheetView instance, or null if not found
+     */
+    @JvmStatic
+    fun getSheetByTag(tag: Int): TrueSheetView? = viewRegistry[tag]
+  }
+}

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

@@ -1,12 +1,44 @@
 package com.lodev09.truesheet
 
-import com.facebook.react.ReactPackage
+import com.facebook.react.TurboReactPackage
 import com.facebook.react.bridge.NativeModule
 import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.module.model.ReactModuleInfo
+import com.facebook.react.module.model.ReactModuleInfoProvider
 import com.facebook.react.uimanager.ViewManager
 
-class TrueSheetPackage : ReactPackage {
-  override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> = listOf(TrueSheetViewModule(reactContext))
+/**
+ * TrueSheet package for Fabric architecture
+ * Registers all view managers and the TurboModule
+ */
+class TrueSheetPackage : TurboReactPackage() {
 
-  override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> = listOf(TrueSheetViewManager())
+  override fun getModule(name: String, reactContext: ReactApplicationContext): NativeModule? =
+    when (name) {
+      TrueSheetModule.NAME -> TrueSheetModule(reactContext)
+      else -> null
+    }
+
+  override fun getReactModuleInfoProvider(): ReactModuleInfoProvider =
+    ReactModuleInfoProvider {
+      mapOf(
+        TrueSheetModule.NAME to ReactModuleInfo(
+          TrueSheetModule.NAME,
+          TrueSheetModule::class.java.name,
+          false, // canOverrideExistingModule
+          false, // needsEagerInit
+          true, // hasConstants
+          false, // isCxxModule
+          true // isTurboModule
+        )
+      )
+    }
+
+  override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> =
+    listOf(
+      TrueSheetViewManager(),
+      TrueSheetContainerViewManager(),
+      TrueSheetContentViewManager(),
+      TrueSheetFooterViewManager()
+    )
 }