react-native-nitro-modal 0.1.0

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2026 Mohammad Navabi
+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/NitroModal.podspec

@@ -0,0 +1,29 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "NitroModal"
+  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/mohamadnavabi/react-native-nitro-modal.git", :tag => "#{s.version}" }
+
+  s.source_files = [
+    "ios/**/*.{swift}",
+    "ios/**/*.{m,mm}",
+    "cpp/**/*.{hpp,cpp}",
+  ]
+
+  s.dependency 'React-jsi'
+  s.dependency 'React-callinvoker'
+
+  load 'nitrogen/generated/ios/NitroModal+autolinking.rb'
+  add_nitrogen_files(s)
+
+  install_modules_dependencies(s)
+end

package/README.md

@@ -0,0 +1,39 @@
+# react-native-nitro-modal
+
+react native native modal
+
+## Installation
+
+
+```sh
+npm install react-native-nitro-modal react-native-nitro-modules
+
+> `react-native-nitro-modules` is required as this library relies on [Nitro Modules](https://nitro.margelo.com/).
+```
+
+
+## Usage
+
+
+```js
+import { NitroModalView } from "react-native-nitro-modal";
+
+// ...
+
+<NitroModalView color="tomato" />
+```
+
+
+## Contributing
+
+- [Development workflow](CONTRIBUTING.md#development-workflow)
+- [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request)
+- [Code of conduct](CODE_OF_CONDUCT.md)
+
+## License
+
+MIT
+
+---
+
+Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

package/android/CMakeLists.txt

@@ -0,0 +1,24 @@
+project(nitromodal)
+cmake_minimum_required(VERSION 3.9.0)
+
+set(PACKAGE_NAME nitromodal)
+set(CMAKE_VERBOSE_MAKEFILE ON)
+set(CMAKE_CXX_STANDARD 20)
+
+# Define C++ library and add all sources
+add_library(${PACKAGE_NAME} SHARED src/main/cpp/cpp-adapter.cpp)
+
+# Add Nitrogen specs :)
+include(${CMAKE_SOURCE_DIR}/../nitrogen/generated/android/nitromodal+autolinking.cmake)
+
+# Set up local includes
+include_directories("src/main/cpp" "../cpp")
+
+find_library(LOG_LIB log)
+
+# Link all libraries together
+target_link_libraries(
+        ${PACKAGE_NAME}
+        ${LOG_LIB}
+        android # <-- Android core
+)

package/android/build.gradle

@@ -0,0 +1,124 @@
+buildscript {
+  ext.NitroModal = [
+    kotlinVersion: "2.0.21",
+    minSdkVersion: 24,
+    compileSdkVersion: 36
+  ]
+
+  ext.getExtOrDefault = { prop ->
+    if (rootProject.ext.has(prop)) {
+      return rootProject.ext.get(prop)
+    }
+
+    return NitroModal[prop]
+  }
+
+  repositories {
+    google()
+    mavenCentral()
+  }
+
+  dependencies {
+    classpath "com.android.tools.build:gradle:8.7.2"
+    // noinspection DifferentKotlinGradleVersion
+    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:${getExtOrDefault('kotlinVersion')}"
+  }
+}
+
+def reactNativeArchitectures() {
+  def value = rootProject.getProperties().get("reactNativeArchitectures")
+  return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"]
+}
+
+apply plugin: "com.android.library"
+
+if (project.extensions.findByName("kotlin") == null) {
+  apply plugin: "kotlin-android"
+}
+
+apply from: '../nitrogen/generated/android/nitromodal+autolinking.gradle'
+
+apply plugin: "com.facebook.react"
+
+android {
+  namespace "com.margelo.nitro.nitromodal"
+
+  compileSdkVersion getExtOrDefault("compileSdkVersion")
+
+  defaultConfig {
+    minSdkVersion getExtOrDefault("minSdkVersion")
+
+    externalNativeBuild {
+      cmake {
+        cppFlags "-frtti -fexceptions -Wall -fstack-protector-all"
+        arguments "-DANDROID_STL=c++_shared", "-DANDROID_SUPPORT_FLEXIBLE_PAGE_SIZES=ON"
+        abiFilters (*reactNativeArchitectures())
+
+        buildTypes {
+          debug {
+            cppFlags "-O1 -g"
+          }
+          release {
+            cppFlags "-O2"
+          }
+        }
+      }
+    }
+  }
+
+  if (rootProject.ext.has("ndkVersion")) {
+    ndkVersion rootProject.ext.ndkVersion
+  }
+
+  externalNativeBuild {
+    cmake {
+      path "CMakeLists.txt"
+    }
+  }
+
+  packaging {
+    resources {
+      excludes += [
+        "META-INF",
+        "META-INF/**"
+      ]
+    }
+
+    jniLibs {
+      excludes += [
+        "**/libc++_shared.so",
+        "**/libfbjni.so",
+        "**/libjsi.so",
+        "**/libfolly_json.so",
+        "**/libfolly_runtime.so",
+        "**/libglog.so",
+        "**/libhermes.so",
+        "**/libhermes-executor-debug.so",
+        "**/libhermes_executor.so",
+        "**/libreactnative.so",
+        "**/libreactnativejni.so",
+        "**/libturbomodulejsijni.so",
+        "**/libreact_nativemodule_core.so",
+        "**/libjscexecutor.so"
+      ]
+    }
+  }
+
+  buildFeatures {
+    prefab true
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_17
+    targetCompatibility JavaVersion.VERSION_17
+  }
+}
+
+dependencies {
+  implementation "com.facebook.react:react-android"
+  implementation project(":react-native-nitro-modules")
+  // BottomSheetBehavior + CoordinatorLayout for `bottomSheet` mode.
+  implementation "com.google.android.material:material:1.12.0"
+  implementation "androidx.activity:activity-ktx:1.9.3"
+  implementation "androidx.core:core-ktx:1.13.1"
+}

package/android/src/main/AndroidManifest.xml

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

package/android/src/main/cpp/cpp-adapter.cpp

@@ -0,0 +1,11 @@
+#include <jni.h>
+#include "nitromodalOnLoad.hpp"
+
+#include <fbjni/fbjni.h>
+
+
+JNIEXPORT jint JNICALL JNI_OnLoad(JavaVM* vm, void*) {
+  return facebook::jni::initialize(vm, []() {
+    margelo::nitro::nitromodal::registerAllNatives();
+  });
+}

package/android/src/main/java/com/margelo/nitro/nitromodal/BottomSheetPresenter.kt

@@ -0,0 +1,284 @@
+package com.margelo.nitro.nitromodal
+
+import android.app.Activity
+import android.content.res.ColorStateList
+import android.graphics.Color
+import android.graphics.drawable.GradientDrawable
+import android.view.Gravity
+import android.view.View
+import android.view.ViewGroup
+import android.view.ViewOutlineProvider
+import android.widget.FrameLayout
+import androidx.coordinatorlayout.widget.CoordinatorLayout
+import androidx.core.graphics.Insets
+import androidx.core.view.doOnLayout
+import com.facebook.react.uimanager.ThemedReactContext
+import com.google.android.material.bottomsheet.BottomSheetBehavior
+import com.google.android.material.shape.MaterialShapeDrawable
+import com.google.android.material.shape.ShapeAppearanceModel
+
+/**
+ * `bottomSheet` mode, driven by [BottomSheetBehavior]. Dragging, flinging,
+ * snapping and the backdrop fade all run on the UI thread with no JS.
+ *
+ * `BottomSheetBehavior` supports up to three resting states, so detents map
+ * onto collapsed / half-expanded / expanded, smallest first.
+ */
+internal class BottomSheetPresenter(
+  activity: Activity,
+  reactContext: ThemedReactContext,
+  contentRoot: ModalContentRoot,
+  config: ModalConfig,
+  listener: Listener,
+) : ModalPresenter(activity, reactContext, contentRoot, config, listener) {
+
+  private class Detent(val index: Int, val height: Int)
+
+  private val coordinator = CoordinatorLayout(activity)
+  private val sheet = FrameLayout(activity)
+  private val grabber = View(activity)
+  private val behavior = BottomSheetBehavior<FrameLayout>()
+  private val sheetBackground = MaterialShapeDrawable()
+
+  /** Resting detents sorted by height; position i maps to [states][i]. */
+  private var sortedDetents: List<Detent> = emptyList()
+  private var maxContentHeight = 0
+  private var presented = false
+  private var lastDetentIndex = -1
+
+  private val callback = object : BottomSheetBehavior.BottomSheetCallback() {
+    override fun onStateChanged(bottomSheet: View, newState: Int) {
+      if (newState == BottomSheetBehavior.STATE_HIDDEN) {
+        finishUserDismissal(DismissReason.SWIPE)
+        return
+      }
+      val position = states().indexOf(newState)
+      if (position < 0 || isDismissing) return
+      if (!presented) {
+        presented = true
+        behavior.isHideable = this@BottomSheetPresenter.config.dismissOnSwipe
+        notifyPresented()
+      }
+      val index = sortedDetents.getOrNull(position)?.index ?: return
+      if (index != lastDetentIndex) {
+        lastDetentIndex = index
+        listener.onDetentChange(index)
+      }
+    }
+
+    override fun onSlide(bottomSheet: View, slideOffset: Float) {
+      // slideOffset is -1 when hidden and 0 at the lowest detent.
+      backdrop.alpha = (1f + slideOffset).coerceIn(0f, 1f)
+    }
+  }
+
+  override fun createLayout(): ViewGroup {
+    coordinator.addView(backdrop, CoordinatorLayout.LayoutParams(MATCH, MATCH))
+    coordinator.addOnLayoutChangeListener { _, l, t, r, b, oldL, oldT, oldR, oldB ->
+      // Rotation / window resize. Posted: detents change the sheet's layout params.
+      if (r - l != oldR - oldL || b - t != oldB - oldT) coordinator.post { updateDetents() }
+    }
+
+    sheet.background = sheetBackground
+    sheet.outlineProvider = ViewOutlineProvider.BACKGROUND
+    sheet.clipToOutline = true
+    sheet.addView(contentRoot, FrameLayout.LayoutParams(MATCH, MATCH))
+    sheet.addView(
+      grabber,
+      FrameLayout.LayoutParams(dp(32f), dp(4f), Gravity.TOP or Gravity.CENTER_HORIZONTAL).apply {
+        topMargin = dp(8f)
+      },
+    )
+    applyAppearance()
+
+    behavior.isGestureInsetBottomIgnored = true
+    behavior.maxWidth = dp(MAX_WIDTH_DP)
+    behavior.isHideable = true
+    behavior.state = BottomSheetBehavior.STATE_HIDDEN
+    // Registered after the initial HIDDEN state so it doesn't read as a dismissal.
+    behavior.addBottomSheetCallback(callback)
+
+    coordinator.addView(
+      sheet,
+      CoordinatorLayout.LayoutParams(MATCH, 0).apply {
+        gravity = Gravity.CENTER_HORIZONTAL
+        behavior = this@BottomSheetPresenter.behavior
+      },
+    )
+    return coordinator
+  }
+
+  override fun animateIn() {
+    coordinator.doOnLayout {
+      updateDetents()
+      // Settles from HIDDEN with the behavior's own animation.
+      behavior.state = stateFor(config.clampedInitialDetentIndex)
+    }
+  }
+
+  override fun animateOut(onEnd: () -> Unit) {
+    if (behavior.state == BottomSheetBehavior.STATE_HIDDEN || !coordinator.isLaidOut) {
+      onEnd()
+      return
+    }
+    behavior.isHideable = true
+    behavior.state = BottomSheetBehavior.STATE_HIDDEN
+    // STATE_HIDDEN reaches finishUserDismissal(), which keeps our reason.
+  }
+
+  override fun onConfigChanged(previous: ModalConfig) {
+    applyAppearance()
+    if (presented) behavior.isHideable = config.dismissOnSwipe
+    if (previous.detents != config.detents || previous.keyboardBehavior != config.keyboardBehavior) {
+      updateDetents()
+    }
+  }
+
+  override fun onInsetsChanged() {
+    sheet.setPadding(systemInsets.left, 0, systemInsets.right, systemInsets.bottom)
+    updateDetents()
+    applyKeyboardOffset()
+  }
+
+  override fun onKeyboardProgress() = applyKeyboardOffset()
+
+  override fun onContentSizeChanged() {
+    if (config.detents.contains(SheetDetent.FITCONTENT)) updateDetents()
+  }
+
+  override fun snapToDetent(index: Int) {
+    if (!presented || isDismissing) return
+    behavior.state = stateFor(index)
+  }
+
+  private fun applyAppearance() {
+    val radius = activity.dpToPx(config.cornerRadius ?: DEFAULT_CORNER_RADIUS_DP)
+    sheetBackground.shapeAppearanceModel = ShapeAppearanceModel.builder()
+      .setTopLeftCornerSize(radius)
+      .setTopRightCornerSize(radius)
+      .build()
+    sheetBackground.fillColor = ColorStateList.valueOf(config.surfaceColor(activity))
+    grabber.visibility = if (config.grabberVisible) View.VISIBLE else View.GONE
+    grabber.background = GradientDrawable().apply {
+      cornerRadius = activity.dpToPx(2f)
+      setColor(Color.argb(0x66, 0x80, 0x80, 0x80))
+    }
+  }
+
+  /** Recomputes detent heights and maps them onto the behavior's states. */
+  private fun updateDetents() {
+    val parentHeight = coordinator.height
+    if (parentHeight == 0) return
+    val bottomInset = systemInsets.bottom
+    maxContentHeight = (parentHeight - systemInsets.top - bottomInset).coerceAtLeast(1)
+
+    val requested = config.detents.ifEmpty { listOf(SheetDetent.FITCONTENT) }
+    val detents = requested
+      .mapIndexed { index, detent -> Detent(index, contentHeightFor(detent) + bottomInset) }
+      .distinctBy { it.height }
+      .sortedBy { it.height }
+    sortedDetents = when {
+      detents.size <= 3 -> detents
+      // BottomSheetBehavior only has three resting states.
+      else -> listOf(detents.first(), detents[detents.size / 2], detents.last())
+    }
+
+    val sheetHeight = sortedDetents.last().height
+    val params = sheet.layoutParams
+    if (params.height != sheetHeight) {
+      params.height = sheetHeight
+      sheet.layoutParams = params
+    }
+
+    val heights = sortedDetents.map { it.height }
+    when (heights.size) {
+      1 -> {
+        behavior.isFitToContents = true
+        behavior.skipCollapsed = true
+        behavior.peekHeight = sheetHeight
+      }
+      2 -> {
+        behavior.isFitToContents = true
+        behavior.skipCollapsed = false
+        behavior.peekHeight = heights[0]
+      }
+      else -> {
+        behavior.isFitToContents = false
+        behavior.skipCollapsed = false
+        behavior.peekHeight = heights[0]
+        behavior.halfExpandedRatio = (heights[1].toFloat() / parentHeight).coerceIn(0.01f, 0.99f)
+        behavior.expandedOffset = parentHeight - heights[2]
+      }
+    }
+
+    val areaHeight = sheetHeight - bottomInset -
+      if (config.keyboardBehavior == KeyboardBehavior.RESIZE) keyboardOverlap else 0
+    val sheetWidth = minOf(coordinator.width, behavior.maxWidth.takeIf { it > 0 } ?: Int.MAX_VALUE)
+    reportContentArea(sheetWidth - systemInsets.left - systemInsets.right, areaHeight)
+  }
+
+  private fun contentHeightFor(detent: SheetDetent): Int = when (detent) {
+    SheetDetent.SMALL -> (maxContentHeight * 0.25f).toInt()
+    SheetDetent.MEDIUM -> (maxContentHeight * 0.5f).toInt()
+    SheetDetent.LARGE -> maxContentHeight
+    SheetDetent.FITCONTENT -> contentRoot.contentHeight.coerceIn(1, maxContentHeight)
+  }
+
+  private fun states(): List<Int> = when (sortedDetents.size) {
+    0 -> emptyList()
+    1 -> listOf(BottomSheetBehavior.STATE_EXPANDED)
+    2 -> listOf(BottomSheetBehavior.STATE_COLLAPSED, BottomSheetBehavior.STATE_EXPANDED)
+    else -> listOf(
+      BottomSheetBehavior.STATE_COLLAPSED,
+      BottomSheetBehavior.STATE_HALF_EXPANDED,
+      BottomSheetBehavior.STATE_EXPANDED,
+    )
+  }
+
+  /** Resting state for `detents[index]`, falling back to the nearest height. */
+  private fun stateFor(index: Int): Int {
+    val states = states()
+    if (states.isEmpty()) return BottomSheetBehavior.STATE_EXPANDED
+    val target = config.detents.getOrNull(index)?.let { contentHeightFor(it) + systemInsets.bottom }
+    val position = if (target == null) {
+      states.lastIndex
+    } else {
+      sortedDetents.indices.minBy { kotlin.math.abs(sortedDetents[it].height - target) }
+    }
+    return states[position]
+  }
+
+  /** Lifts the sheet above the keyboard without relayout (`pan` and `resize`). */
+  private fun applyKeyboardOffset() {
+    if (config.keyboardBehavior == KeyboardBehavior.NONE) {
+      sheet.translationY = 0f
+      return
+    }
+    val headroom = (sheet.top - systemInsets.top).coerceAtLeast(0)
+    sheet.translationY = -keyboardOverlap.coerceAtMost(headroom).toFloat()
+  }
+
+  companion object {
+    private const val MATCH = ViewGroup.LayoutParams.MATCH_PARENT
+    private const val DEFAULT_CORNER_RADIUS_DP = 28f
+    private const val MAX_WIDTH_DP = 640f
+
+    /** Content area before the sheet is on screen, in px. */
+    fun estimateContentArea(
+      activity: Activity,
+      detents: List<SheetDetent>,
+      width: Int,
+      height: Int,
+      insets: Insets,
+    ): Pair<Int, Int> {
+      val maxContent = height - insets.top - insets.bottom
+      val fraction = when {
+        detents.isEmpty() || SheetDetent.LARGE in detents || SheetDetent.FITCONTENT in detents -> 1f
+        SheetDetent.MEDIUM in detents -> 0.5f
+        else -> 0.25f
+      }
+      val sheetWidth = minOf(width, activity.dpToPx(MAX_WIDTH_DP).toInt())
+      return Pair(sheetWidth - insets.left - insets.right, (maxContent * fraction).toInt())
+    }
+  }
+}