feat: New Arc support (#106)

* feat: upgrade example to expo 52

* fix(new-arch): fix touchable

* fix(example): disable expo-autolinking in prebuild

* fix: move width updates to JS

* fix: scrollview handle

* chore: deps

* chore: deps

* chore: git rid of expo example

* chore: android build

* fix(android): container size change

* fix(ios): update size event

* chore: remove flunky ci

* chore: fix version

* feat: update example

* docs: add edgeToEdge guide

Author: lodev09

.github/actions/setup/action.yml

@@ -5,17 +5,13 @@ runs:
   using: composite
   steps:
     - name: Setup Node.js
-      uses: actions/setup-node@v4
+      uses: actions/setup-node@v3
       with:
         node-version-file: .nvmrc
 
-    - name: Enable Corepack
-      run: corepack enable
-      shell: bash
-
     - name: Cache dependencies
       id: yarn-cache
-      uses: actions/cache@v4
+      uses: actions/cache@v3
       with:
         path: |
           **/node_modules

.github/workflows/ci.yml

@@ -6,13 +6,16 @@ on:
   pull_request:
     branches:
       - main
+  merge_group:
+    types:
+      - checks_requested
 
 jobs:
   lint:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v3
 
       - name: Setup
         uses: ./.github/actions/setup
@@ -27,31 +30,19 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v3
 
       - name: Setup
         uses: ./.github/actions/setup
 
       - name: Run unit tests
         run: yarn test --maxWorkers=2 --coverage
 
-  verify:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Setup
-        uses: ./.github/actions/setup
-
-      - name: Run expo doctor
-        run: yarn example doctor
-
   build-library:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v3
 
       - name: Setup
         uses: ./.github/actions/setup

.gitignore

@@ -72,10 +72,15 @@ android/keystores/debug.keystore
 # Expo
 .expo/
 
+# Turborepo
+.turbo/
+
 # generated by bob
 lib/
 
-# Example
-example/ios
-example/android
+# React Native Codegen
+ios/generated
+android/generated
+
+# Docs
 .vercel

.yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs

@@ -1,6 +1,10 @@
-nmHoistingLimits: workspaces
-
 nodeLinker: node-modules
+nmHoistingLimits: workspaces
 
 plugins:
-  spec: "@yarnpkg/plugin-workspace-tools"
+  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+    spec: "@yarnpkg/plugin-interactive-tools"
+  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
+    spec: "@yarnpkg/plugin-workspace-tools"
+
+yarnPath: .yarn/releases/yarn-3.6.1.cjs

.yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs

@@ -23,14 +23,18 @@ The [example app](/example/) demonstrates usage of the library. You need to run
 
 It is configured to use the local version of the library, so any changes you make to the library's source code will be reflected in the example app. Changes to the library's JavaScript code will be reflected in the example app without a rebuild, but native code changes will require a rebuild of the example app.
 
-If you want to use Android Studio or XCode to edit the native code, you can open the `example/android` or `example/ios` directories respectively in those editors. To edit the Objective-C or Swift files, open `example/ios/TrueSheetExample.xcworkspace` in XCode and find the source files at `Pods > Development Pods > TrueSheet`.
+If you want to use Android Studio or XCode to edit the native code, you can open the `example/android` or `example/ios` directories respectively in those editors. To edit the Objective-C or Swift files, open `example/ios/TrueSheetExample.xcworkspace` in XCode and find the source files at `Pods > Development Pods > react-native-true-sheet`.
 
 To edit the Java or Kotlin files, open `example/android` in Android studio and find the source files at `react-native-true-sheet` under `Android`.
 
 You can use various commands from the root directory to work with the project.
 
 To start the packager:
 
+```sh
+yarn example start
+```
+
 To run the example app on Android:
 
 ```sh
@@ -43,7 +47,7 @@ To run the example app on iOS:
 yarn example ios
 ```
 
-Make sure your code passes TypeScript and ESLint. Run the following to verify:
+Make sure your code passes TypeScript and ESLint. Run the following to verify and fix:
 
 ```sh
 yarn tidy

.yarn/releases/yarn-3.6.1.cjs

@@ -14,6 +14,11 @@ buildscript {
   }
 }
 
+def reactNativeArchitectures() {
+  def value = rootProject.getProperties().get("reactNativeArchitectures")
+  return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"]
+}
+
 def isNewArchitectureEnabled() {
   return rootProject.hasProperty("newArchEnabled") && rootProject.getProperty("newArchEnabled") == "true"
 }
@@ -90,6 +95,6 @@ dependencies {
   //noinspection GradleDynamicVersion
   implementation "com.facebook.react:react-native:+"
   implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
-  implementation "com.google.android.material:material:1.11.0"
+  implementation 'com.google.android.material:material:1.12.0'
 }
 

.yarnrc.yml

@@ -76,9 +76,7 @@ class TrueSheetDialog(private val reactContext: ThemedReactContext, private val
     maxScreenHeight = Utils.screenHeight(reactContext, edgeToEdge)
   }
 
-  override fun getEdgeToEdgeEnabled(): Boolean {
-    return edgeToEdge || super.getEdgeToEdgeEnabled()
-  }
+  override fun getEdgeToEdgeEnabled(): Boolean = edgeToEdge || super.getEdgeToEdgeEnabled()
 
   override fun onStart() {
     super.onStart()
@@ -259,8 +257,8 @@ class TrueSheetDialog(private val reactContext: ThemedReactContext, private val
     })
   }
 
-  fun setOnSizeChangeListener(listener: RootSheetView.OnSizeChangeListener) {
-    rootSheetView.setOnSizeChangeListener(listener)
+  fun setOnSizeChangeListener(listener: (w: Int, h: Int) -> Unit) {
+    rootSheetView.sizeChangeListener = listener
   }
 
   /**

CONTRIBUTING.md

@@ -12,6 +12,8 @@ import com.facebook.react.uimanager.UIManagerHelper
 import com.facebook.react.uimanager.events.EventDispatcher
 import com.google.android.material.bottomsheet.BottomSheetBehavior
 import com.lodev09.truesheet.core.RootSheetView
+import com.lodev09.truesheet.core.Utils
+import com.lodev09.truesheet.events.ContainerSizeChangeEvent
 import com.lodev09.truesheet.events.DismissEvent
 import com.lodev09.truesheet.events.MountEvent
 import com.lodev09.truesheet.events.PresentEvent
@@ -67,6 +69,10 @@ class TrueSheetView(context: Context) :
 
     // Configure Sheet Dialog
     sheetDialog.apply {
+      setOnSizeChangeListener { w, h ->
+        eventDispatcher?.dispatchEvent(ContainerSizeChangeEvent(surfaceId, id, Utils.toDIP(w), Utils.toDIP(h)))
+      }
+
       // Setup listener when the dialog has been presented.
       setOnShowListener {
         registerKeyboardManager()

android/build.gradle

@@ -9,6 +9,7 @@ import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.ViewGroupManager
 import com.facebook.react.uimanager.annotations.ReactProp
 import com.lodev09.truesheet.core.Utils
+import com.lodev09.truesheet.events.ContainerSizeChangeEvent
 import com.lodev09.truesheet.events.DismissEvent
 import com.lodev09.truesheet.events.MountEvent
 import com.lodev09.truesheet.events.PresentEvent
@@ -30,6 +31,7 @@ class TrueSheetViewManager : ViewGroupManager<TrueSheetView>() {
       .put(PresentEvent.EVENT_NAME, MapBuilder.of("registrationName", "onPresent"))
       .put(DismissEvent.EVENT_NAME, MapBuilder.of("registrationName", "onDismiss"))
       .put(SizeChangeEvent.EVENT_NAME, MapBuilder.of("registrationName", "onSizeChange"))
+      .put(ContainerSizeChangeEvent.EVENT_NAME, MapBuilder.of("registrationName", "onContainerSizeChange"))
       .build()
 
   @ReactProp(name = "edgeToEdge")

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

@@ -4,13 +4,11 @@ import android.annotation.SuppressLint
 import android.content.Context
 import android.view.MotionEvent
 import android.view.View
-import com.facebook.react.bridge.GuardedRunnable
 import com.facebook.react.config.ReactFeatureFlags
 import com.facebook.react.uimanager.JSPointerDispatcher
 import com.facebook.react.uimanager.JSTouchDispatcher
 import com.facebook.react.uimanager.RootView
 import com.facebook.react.uimanager.ThemedReactContext
-import com.facebook.react.uimanager.UIManagerModule
 import com.facebook.react.uimanager.events.EventDispatcher
 import com.facebook.react.views.view.ReactViewGroup
 
@@ -35,14 +33,10 @@ class RootSheetView(private val context: Context?) :
 
   private val jSTouchDispatcher = JSTouchDispatcher(this)
   private var jSPointerDispatcher: JSPointerDispatcher? = null
-  private var sizeChangeListener: OnSizeChangeListener? = null
+  public var sizeChangeListener: ((w: Int, h: Int) -> Unit)? = null
 
   var eventDispatcher: EventDispatcher? = null
 
-  interface OnSizeChangeListener {
-    fun onSizeChange(width: Int, height: Int)
-  }
-
   init {
     if (ReactFeatureFlags.dispatchPointerEvents) {
       jSPointerDispatcher = JSPointerDispatcher(this)
@@ -55,30 +49,12 @@ class RootSheetView(private val context: Context?) :
     viewWidth = w
     viewHeight = h
     updateFirstChildView()
-
-    sizeChangeListener?.onSizeChange(w, h)
-  }
-
-  fun setOnSizeChangeListener(listener: OnSizeChangeListener) {
-    sizeChangeListener = listener
   }
 
   private fun updateFirstChildView() {
     if (childCount > 0) {
       hasAdjustedSize = false
-      val viewTag = getChildAt(0).id
-      reactContext.runOnNativeModulesQueueThread(
-        object : GuardedRunnable(reactContext) {
-          override fun runGuarded() {
-            val uiManager: UIManagerModule =
-              reactContext
-                .reactApplicationContext
-                .getNativeModule(UIManagerModule::class.java) ?: return
-
-            uiManager.updateNodeSize(viewTag, viewWidth, viewHeight)
-          }
-        }
-      )
+      sizeChangeListener?.let { it(viewWidth, viewHeight) }
     } else {
       hasAdjustedSize = true
     }

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

@@ -0,0 +1,23 @@
+package com.lodev09.truesheet.events
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+
+// onContainerSizeChange
+class ContainerSizeChangeEvent(surfaceId: Int, viewId: Int, private val width: Float, private val height: Float) :
+  Event<ContainerSizeChangeEvent>(surfaceId, viewId) {
+  override fun getEventName() = EVENT_NAME
+
+  override fun getEventData(): WritableMap {
+    val data = Arguments.createMap()
+    data.putDouble("width", width.toDouble())
+    data.putDouble("height", height.toDouble())
+
+    return data
+  }
+
+  companion object {
+    const val EVENT_NAME = "containerSizeChange"
+  }
+}

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

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ['module:@react-native/babel-preset'],
+  presets: [['module:react-native-builder-bob/babel-preset', { modules: 'commonjs' }]],
 }

android/src/main/java/com/lodev09/truesheet/core/RootSheetView.kt

@@ -0,0 +1,25 @@
+---
+title: Enable edge-to-edge
+description: Turning on edge-to-edge support for Android.
+keywords: [bottom sheet edge-to-edge, edge-to-edge, android]
+---
+
+Yes! TrueSheet does support [`edge-to-edge`](https://developer.android.com/develop/ui/views/layout/edge-to-edge).
+
+## How?
+
+It's easy, just set [`edgeToEdge`](/reference/props#edgetoedge) to `true`.
+
+```tsx {3}
+const App = () => {
+  return (
+    <TrueSheet edgeToEdge={true}>
+      <View />
+    </TrueSheet>
+  )
+}
+```
+
+## react-native-edge-to-edge
+
+[`react-native-edge-to-edge`](https://github.com/zoontek/react-native-edge-to-edge) is a cool tiny package that lets you effortlessly enable `edge-to-edge` display for your app. Go check it out!

android/src/main/java/com/lodev09/truesheet/events/ContainerSizeChangeEvent.kt

@@ -133,6 +133,14 @@ Shows a grabber (or handle). Native on IOS and styled `View` on Android.
 | - | - | - | - |
 | `boolean` | `true` | ✅ | ✅ |
 
+### `edgeToEdge`
+
+Supports edge-to-edge on Android. Turn this on if your app has it enabled.
+
+| Type | Default | 🍎 | 🤖 |
+| - | - | - | - |
+| `boolean` | | | ✅ |
+
 ### `grabberProps`
 
 Overrides the grabber props for android.

babel.config.js

@@ -3,7 +3,7 @@ source 'https://rubygems.org'
 # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
 ruby ">= 2.6.10"
 
-# Cocoapods 1.15 introduced a bug which break the build. We will remove the upper
-# bound in the template on Cocoapods with next React Native release.
-gem 'cocoapods', '>= 1.13', '< 1.15'
-gem 'activesupport', '>= 6.1.7.5', '< 7.1.0'
+# Exclude problematic versions of cocoapods and activesupport that causes build failures.
+gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
+gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
+gem 'xcodeproj', '< 1.26.0'