@lodev09/react-native-true-sheet 0.1.0

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2024 lodev09
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,53 @@
+# React Native True Sheet
+
+The real native bottom sheet.
+
+## Features
+- ✅ Implemented on the native realm.
+- ✅ **_NOT_** your pure JS, (re)animated View.
+- ✅ Clean, fast and lightweight.
+- ✅ Handles your Sscrolling needs, easy.
+
+## Installation
+
+```sh
+yarn add @lodev09/react-native-true-sheet
+```
+
+## Usage
+
+```ts
+import { TrueSheet } from "@lodev09/react-native-true-sheet";
+
+// ...
+
+const sheet = useRef<TrueSheet>(null)
+
+const openSheet = () => {
+  sheet.current?.present()
+}
+
+return (
+  <View>
+    <Button onPress={openSheet} title="Open Sheet" />
+    <TrueSheet ref={sheet}>
+      // ...
+    </TrueSheet>
+  </View>
+)
+```
+
+## Options
+> TODO - laters
+
+## Contributing
+
+See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
+
+## License
+
+MIT
+
+---
+
+Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

package/TrueSheet.podspec

@@ -0,0 +1,42 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
+
+Pod::Spec.new do |s|
+  s.name         = "TrueSheet"
+  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}"
+
+  # Use install_modules_dependencies helper to install the dependencies if React Native version >=0.71.0.
+  # See https://github.com/facebook/react-native/blob/febf6b7f33fdb4904669f99d795eba4c0f95d7bf/scripts/cocoapods/new_architecture.rb#L79.
+  if respond_to?(:install_modules_dependencies, true)
+    install_modules_dependencies(s)
+  else
+  s.dependency "React-Core"
+
+  # Don't install the dependencies when we run `pod install` in the old architecture.
+  if ENV['RCT_NEW_ARCH_ENABLED'] == '1' then
+    s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
+    s.pod_target_xcconfig    = {
+        "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
+        "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1",
+        "CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
+    }
+    s.dependency "React-RCTFabric"
+    s.dependency "React-Codegen"
+    s.dependency "RCT-Folly"
+    s.dependency "RCTRequired"
+    s.dependency "RCTTypeSafety"
+    s.dependency "ReactCommon/turbomodule/core"
+   end
+  end    
+end

package/android/build.gradle

@@ -0,0 +1,94 @@
+buildscript {
+  // Buildscript is evaluated before everything else so we can't use getExtOrDefault
+  def kotlin_version = rootProject.ext.has("kotlinVersion") ? rootProject.ext.get("kotlinVersion") : project.properties["TrueSheet_kotlinVersion"]
+
+  repositories {
+    google()
+    mavenCentral()
+  }
+
+  dependencies {
+    classpath "com.android.tools.build:gradle:7.2.1"
+    // noinspection DifferentKotlinGradleVersion
+    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
+  }
+}
+
+def isNewArchitectureEnabled() {
+  return rootProject.hasProperty("newArchEnabled") && rootProject.getProperty("newArchEnabled") == "true"
+}
+
+apply plugin: "com.android.library"
+apply plugin: "kotlin-android"
+
+if (isNewArchitectureEnabled()) {
+  apply plugin: "com.facebook.react"
+}
+
+def getExtOrDefault(name) {
+  return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties["TrueSheet_" + name]
+}
+
+def getExtOrIntegerDefault(name) {
+  return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["TrueSheet_" + name]).toInteger()
+}
+
+def supportsNamespace() {
+  def parsed = com.android.Version.ANDROID_GRADLE_PLUGIN_VERSION.tokenize('.')
+  def major = parsed[0].toInteger()
+  def minor = parsed[1].toInteger()
+
+  // Namespace support was added in 7.3.0
+  return (major == 7 && minor >= 3) || major >= 8
+}
+
+android {
+  if (supportsNamespace()) {
+    namespace "com.lodev09.truesheet"
+
+    sourceSets {
+      main {
+        manifest.srcFile "src/main/AndroidManifestNew.xml"
+      }
+    }
+  }
+
+  compileSdkVersion getExtOrIntegerDefault("compileSdkVersion")
+
+  defaultConfig {
+    minSdkVersion getExtOrIntegerDefault("minSdkVersion")
+    targetSdkVersion getExtOrIntegerDefault("targetSdkVersion")
+
+  }
+
+  buildTypes {
+    release {
+      minifyEnabled false
+    }
+  }
+
+  lintOptions {
+    disable "GradleCompatible"
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_1_8
+    targetCompatibility JavaVersion.VERSION_1_8
+  }
+}
+
+repositories {
+  mavenCentral()
+  google()
+}
+
+def kotlin_version = getExtOrDefault("kotlinVersion")
+
+dependencies {
+  // For < 0.71, this will be from the local maven repo
+  // For > 0.71, this will be replaced by `com.facebook.react:react-android:$version` by react gradle plugin
+  //noinspection GradleDynamicVersion
+  implementation "com.facebook.react:react-native:+"
+  implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
+}
+

package/android/gradle.properties

@@ -0,0 +1,5 @@
+TrueSheet_kotlinVersion=1.7.0
+TrueSheet_minSdkVersion=21
+TrueSheet_targetSdkVersion=31
+TrueSheet_compileSdkVersion=31
+TrueSheet_ndkversion=21.4.7075529

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,3 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+          package="com.lodev09.truesheet">
+</manifest>

package/android/src/main/AndroidManifestNew.xml

@@ -0,0 +1,2 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+</manifest>

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

@@ -0,0 +1,17 @@
+package com.lodev09.truesheet
+
+import com.facebook.react.ReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ViewManager
+
+
+class TrueSheetPackage : ReactPackage {
+  override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
+    return emptyList()
+  }
+
+  override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+    return listOf(TrueSheetViewManager())
+  }
+}

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

@@ -0,0 +1,20 @@
+package com.lodev09.truesheet
+
+import android.graphics.Color
+import android.view.View
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.annotations.ReactProp
+
+class TrueSheetViewManager : SimpleViewManager<View>() {
+  override fun getName() = "TrueSheetView"
+
+  override fun createViewInstance(reactContext: ThemedReactContext): View {
+    return View(reactContext)
+  }
+
+  @ReactProp(name = "color")
+  fun setColor(view: View, color: String) {
+    view.setBackgroundColor(Color.parseColor(color))
+  }
+}

package/ios/Extensions/UIView+pinTo.swift

@@ -0,0 +1,25 @@
+//
+//  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 UIView {
+  func pinTo(view: UIView, from edges: UIRectEdge = .all, with height: CGFloat? = nil) {
+    var constraints: [NSLayoutConstraint] = []
+
+    if edges.contains(.top) { constraints.append(topAnchor.constraint(equalTo: view.topAnchor)) }
+    if edges.contains(.bottom) { constraints.append(bottomAnchor.constraint(equalTo: view.bottomAnchor)) }
+    if edges.contains(.left) { constraints.append(leadingAnchor.constraint(equalTo: view.leadingAnchor)) }
+    if edges.contains(.right) { constraints.append(trailingAnchor.constraint(equalTo: view.trailingAnchor)) }
+
+    if let height { constraints.append(heightAnchor.constraint(equalToConstant: height)) }
+
+    if !constraints.isEmpty {
+      translatesAutoresizingMaskIntoConstraints = false
+      NSLayoutConstraint.activate(constraints)
+    }
+  }
+}

package/ios/Extensions/UIViewController+detentForSize.swift

@@ -0,0 +1,112 @@
+//
+//  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.
+//
+
+@available(iOS 15.0, *)
+extension UISheetPresentationController.Detent.Identifier {
+  static let small = UISheetPresentationController.Detent.Identifier("small")
+}
+
+@available(iOS 15.0, *)
+extension UIViewController {
+  private func detentFor(identifier: UISheetPresentationController.Detent.Identifier,
+                         _ resolution: @escaping (CGFloat) -> Void) -> UISheetPresentationController.Detent {
+    switch identifier {
+    case .large:
+      if #available(iOS 16.0, *) {
+        return .custom(identifier: .large) { context in
+          let value = UISheetPresentationController.Detent.large().resolvedValue(in: context)
+          resolution(value ?? 0)
+          return value
+        }
+      } else {
+        resolution(view.frame.height)
+        return .large()
+      }
+    case .medium:
+      if #available(iOS 16.0, *) {
+        return .custom(identifier: .medium) { context in
+          let value = UISheetPresentationController.Detent.medium().resolvedValue(in: context)
+          resolution(value ?? 0)
+          return value
+        }
+      }
+    case .small:
+      if #available(iOS 16.0, *) {
+        return .custom { context in
+          let value = 0.25 * context.maximumDetentValue
+          resolution(value)
+          return value
+        }
+      }
+    default:
+      break
+    }
+
+    resolution(view.frame.height / 2)
+    return .medium()
+  }
+
+  /// Get the custom detent based on the given size and view frame size
+  func detentFor(_ anySize: Any, with height: CGFloat?, _ resolution: @escaping (String, CGFloat) -> Void) -> UISheetPresentationController.Detent {
+    let id = "custom-\(anySize)"
+
+    if let floatSize = anySize as? CGFloat {
+      if #available(iOS 16.0, *) {
+        return .custom(identifier: identifier(from: id)) { context in
+          let value = min(floatSize, context.maximumDetentValue)
+          resolution(id, value)
+          return value
+        }
+      }
+    }
+
+    if var stringSize = anySize as? String {
+      switch stringSize {
+      case "small":
+        return detentFor(identifier: .small) { value in
+          resolution(UISheetPresentationController.Detent.Identifier.small.rawValue, value)
+        }
+      case "medium":
+        return detentFor(identifier: .medium) { value in
+          resolution(UISheetPresentationController.Detent.Identifier.medium.rawValue, value)
+        }
+      case "large":
+        return detentFor(identifier: .large) { value in
+          resolution(UISheetPresentationController.Detent.Identifier.large.rawValue, value)
+        }
+      case "auto":
+        if #available(iOS 16.0, *), let height {
+          return .custom(identifier: identifier(from: id)) { context in
+            let value = min(height, context.maximumDetentValue)
+            resolution(id, value)
+            return value
+          }
+        }
+      default:
+        if #available(iOS 16.0, *) {
+          // Percent
+          stringSize.removeAll(where: { $0 == "%" })
+          let floatSize = CGFloat((stringSize as NSString).floatValue)
+          if floatSize > 0.0 {
+            return .custom(identifier: identifier(from: id)) { context in
+              let value = min((floatSize / 100) * context.maximumDetentValue, context.maximumDetentValue)
+              resolution(id, value)
+              return value
+            }
+          }
+        }
+      }
+    }
+
+    return .medium()
+  }
+
+  func identifier(from id: String) -> UISheetPresentationController.Detent.Identifier {
+    return UISheetPresentationController.Detent.Identifier(id)
+  }
+}

package/ios/TrueSheet-Bridging-Header.h

@@ -0,0 +1,9 @@
+//
+//  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.
+//
+
+#import <React/RCTViewManager.h>

package/ios/TrueSheetView.swift

@@ -0,0 +1,249 @@
+//
+//  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.
+//
+
+@objc(TrueSheetView)
+class TrueSheetView: UIView, RCTInvalidating, TrueSheetViewControllerDelegate {
+  // MARK: - React properties
+
+  @objc var sizes: [Any] = []
+
+  // Events
+  @objc var onDismiss: RCTDirectEventBlock?
+  @objc var onPresent: RCTDirectEventBlock?
+  @objc var onSizeChange: RCTDirectEventBlock?
+
+  // MARK: - Private properties
+
+  private var isPresented = false
+  private var activeIndex: Int?
+  private var bridge: RCTBridge
+  private var touchHandler: RCTTouchHandler
+  private var viewController: TrueSheetViewController
+
+  // MARK: - Content properties
+
+  private var containerView: UIView?
+
+  private var contentView: UIView?
+  private var footerView: UIView?
+  private var rctScrollView: RCTScrollView?
+
+  private var isContentMounted: Bool {
+    return contentView != nil
+  }
+
+  // Content height minus the footer height for `auto` layout
+  private var contentHeight: CGFloat {
+    guard let contentView else { return 0 }
+
+    // Exclude bottom safe area for consistency with a Scrollable content
+    let window = UIApplication.shared.windows.first(where: { $0.isKeyWindow })
+    let bottomInset = window?.safeAreaInsets.bottom ?? 0
+
+    return contentView.frame.height - bottomInset
+  }
+
+  // MARK: - Setup
+
+  init(with bridge: RCTBridge) {
+    self.bridge = bridge
+
+    viewController = TrueSheetViewController()
+    touchHandler = RCTTouchHandler(bridge: bridge)
+
+    super.init(frame: .zero)
+
+    viewController.view.autoresizingMask = [.flexibleHeight, .flexibleWidth]
+    viewController.delegate = self
+  }
+
+  @available(*, unavailable)
+  required init?(coder _: NSCoder) {
+    fatalError("init(coder:) has not been implemented")
+  }
+
+  func viewDidChangeWidth(_ width: CGFloat) {
+    guard let containerView else { return }
+
+    let size = CGSize(width: width, height: containerView.bounds.height)
+    bridge.uiManager.setSize(size, for: containerView)
+
+    if let footerView {
+      bridge.uiManager.setSize(size, for: footerView)
+    }
+  }
+
+  func didDismiss() {
+    isPresented = false
+    activeIndex = nil
+
+    onDismiss?(nil)
+  }
+
+  func didChangeSize(_ value: CGFloat, at index: Int) {
+    if index != activeIndex {
+      activeIndex = index
+      onSizeChange?(["index": index, "value": value])
+    }
+  }
+
+  override func insertReactSubview(_ subview: UIView!, at index: Int) {
+    super.insertReactSubview(subview, at: index)
+
+    guard containerView == nil else {
+      Logger.error("Sheet can only have one content view.")
+      return
+    }
+
+    viewController.view.insertSubview(subview, at: 0)
+    viewController.view.backgroundColor = backgroundColor ?? .white
+    backgroundColor = .clear
+
+    containerView = subview
+    touchHandler.attach(to: subview)
+  }
+
+  override func removeReactSubview(_ subview: UIView!) {
+    guard subview == containerView else {
+      Logger.error("Cannot remove view other than sheet view")
+      return
+    }
+
+    super.removeReactSubview(subview)
+
+    touchHandler.detach(from: subview)
+
+    containerView = nil
+    contentView = nil
+    footerView = nil
+  }
+
+  override func didUpdateReactSubviews() {
+    // Do nothing, as subviews are managed by `insertReactSubview`
+  }
+
+  override func layoutSubviews() {
+    super.layoutSubviews()
+
+    if let containerView, contentView == nil {
+      contentView = containerView.subviews.first
+      setupContentIfNeeded()
+    }
+  }
+
+  // MARK: - Prop setters
+
+  @objc
+  func setScrollableHandle(_ tag: NSNumber?) {
+    let view = bridge.uiManager.view(forReactTag: tag) as? RCTScrollView
+    rctScrollView = view
+    setupContentIfNeeded()
+  }
+
+  @objc
+  func setFooterHandle(_ tag: NSNumber?) {
+    let view = bridge.uiManager.view(forReactTag: tag)
+    footerView = view
+    setupContentIfNeeded()
+
+    if #available(iOS 16.0, *) {
+      viewController.sheet?.invalidateDetents()
+    }
+  }
+
+  func invalidate() {
+    viewController.dismiss(animated: true)
+  }
+
+  // MARK: - Methods
+
+  func setupContentIfNeeded() {
+    guard isContentMounted, let containerView else { return }
+
+    containerView.pinTo(view: viewController.view)
+
+    // Add constraints to fix weirdness and support ScrollView
+    if let contentView, let rctScrollView {
+      contentView.pinTo(view: containerView)
+      rctScrollView.pinTo(view: contentView)
+    }
+
+    // Pin footer at the bottom
+    if let footerView {
+      containerView.bringSubviewToFront(footerView)
+      footerView.pinTo(
+        view: viewController.view,
+        from: [.bottom, .left, .right],
+        with: footerView.frame.height
+      )
+    }
+  }
+
+  func dismiss(promise: Promise) {
+    if isPresented {
+      viewController.dismiss(animated: true) {
+        promise.resolve(true)
+      }
+    }
+  }
+
+  func present(at index: Int, promise: Promise) {
+    let rvc = reactViewController()
+
+    guard let rvc else {
+      promise.reject(message: "No react view controller present.")
+      return
+    }
+
+    if #available(iOS 15.0, *), let sheet = viewController.sheet {
+      viewController.configureSheet(for: sizes, with: contentHeight)
+
+      guard sizes.indices.contains(index) else {
+        promise.reject(message: "Size at \(index) is not configured.")
+        return
+      }
+
+      var identifier: UISheetPresentationController.Detent.Identifier = .medium
+
+      if sheet.detents.indices.contains(index) {
+        let detent = sheet.detents[index]
+        if #available(iOS 16.0, *) {
+          identifier = detent.identifier
+        } else if detent == .large() {
+          identifier = .large
+        }
+      }
+
+      if isPresented {
+        sheet.animateChanges {
+          sheet.selectedDetentIdentifier = identifier
+
+          // Notify when size is changed programatically
+          let info = viewController.detentValues.first(where: { $0.value.index == index })
+          if let sizeValue = info?.value.value {
+            self.didChangeSize(sizeValue, at: index)
+          }
+        }
+      } else {
+        sheet.selectedDetentIdentifier = identifier
+      }
+    }
+
+    if !isPresented {
+      // Keep track of the active index
+      activeIndex = index
+
+      rvc.present(viewController, animated: true) {
+        self.isPresented = true
+        self.onPresent?(nil)
+
+        promise.resolve(true)
+      }
+    }
+  }
+}