@lodev09/react-native-true-sheet 3.0.0-beta.5 → 3.0.0-beta.6

package/README.md

@@ -67,7 +67,6 @@ export const App = () => {
       <TrueSheet
         ref={sheet}
         detents={['auto', 1]}
-        cornerRadius={24}
       >
         <Button onPress={dismiss} title="Dismiss" />
       </TrueSheet>

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

@@ -4,6 +4,7 @@ import android.annotation.SuppressLint
 import android.graphics.Color
 import android.graphics.drawable.ShapeDrawable
 import android.graphics.drawable.shapes.RoundRectShape
+import android.util.TypedValue
 import android.view.MotionEvent
 import android.view.View
 import android.view.WindowManager
@@ -194,8 +195,8 @@ class TrueSheetViewController(private val reactContext: ThemedReactContext) :
       }
     }
 
-  var cornerRadius: Float = 0f
-  var sheetBackgroundColor: Int = Color.WHITE
+  var cornerRadius: Float = 28f.dpToPx()
+  var sheetBackgroundColor: Int = 0
   var detents = mutableListOf(0.5, 1.0)
 
   private var windowAnimation: Int = 0
@@ -205,6 +206,24 @@ class TrueSheetViewController(private val reactContext: ThemedReactContext) :
     jSPointerDispatcher = JSPointerDispatcher(this)
   }
 
+  /**
+   * Get the default background color from Material Design 3 theme.
+   * Uses colorSurfaceContainerLow which adapts to light/dark mode.
+   */
+  fun getDefaultBackgroundColor(): Int {
+    val typedValue = TypedValue()
+    return if (reactContext.theme.resolveAttribute(
+        com.google.android.material.R.attr.colorSurfaceContainerLow,
+        typedValue,
+        true
+      )
+    ) {
+      typedValue.data
+    } else {
+      Color.WHITE
+    }
+  }
+
   // ==================== Lifecycle ====================
 
   /**
@@ -497,8 +516,11 @@ class TrueSheetViewController(private val reactContext: ThemedReactContext) :
         0f
       )
 
+      // 0 (transparent) is used as sentinel for "use system default"
+      val backgroundColor = if (sheetBackgroundColor != 0) sheetBackgroundColor else getDefaultBackgroundColor()
+
       val background = ShapeDrawable(RoundRectShape(outerRadii, null, null))
-      background.paint.color = sheetBackgroundColor
+      background.paint.color = backgroundColor
 
       this.background = background
       this.clipToOutline = true

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

@@ -1,6 +1,5 @@
 package com.lodev09.truesheet
 
-import android.graphics.Color
 import android.view.WindowManager
 import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.module.annotations.ReactModule
@@ -84,7 +83,7 @@ class TrueSheetViewManager :
     view.setDetents(detents)
   }
 
-  @ReactProp(name = "background", defaultInt = Color.WHITE)
+  @ReactProp(name = "background", defaultInt = 0)
   override fun setBackground(view: TrueSheetView, color: Int) {
     view.setSheetBackgroundColor(color)
   }

package/common/cpp/react/renderer/components/TrueSheetSpec/TrueSheetContainerViewComponentDescriptor.h

@@ -0,0 +1,24 @@
+#pragma once
+
+#include <react/renderer/components/TrueSheetSpec/TrueSheetContainerViewShadowNode.h>
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+
+namespace facebook::react {
+
+/*
+ * Descriptor for <TrueSheetContainerView> component.
+ */
+class TrueSheetContainerViewComponentDescriptor final
+    : public ConcreteComponentDescriptor<TrueSheetContainerViewShadowNode> {
+  using ConcreteComponentDescriptor::ConcreteComponentDescriptor;
+
+  void adopt(ShadowNode &shadowNode) const override {
+    auto &concreteShadowNode =
+        static_cast<TrueSheetContainerViewShadowNode &>(shadowNode);
+    concreteShadowNode.adjustLayoutWithState();
+
+    ConcreteComponentDescriptor::adopt(shadowNode);
+  }
+};
+
+} // namespace facebook::react

package/common/cpp/react/renderer/components/TrueSheetSpec/TrueSheetContainerViewShadowNode.cpp

@@ -0,0 +1,46 @@
+#include "TrueSheetContainerViewShadowNode.h"
+
+#include <yoga/style/StyleSizeLength.h>
+
+namespace facebook::react {
+
+extern const char TrueSheetContainerViewComponentName[] = "TrueSheetContainerView";
+
+void TrueSheetContainerViewShadowNode::adjustLayoutWithState() {
+  ensureUnsealed();
+
+  auto state = std::static_pointer_cast<
+      const TrueSheetContainerViewShadowNode::ConcreteState>(getState());
+  auto stateData = state->getData();
+
+  // If container dimensions are set from native, override Yoga's dimensions
+  if (stateData.containerWidth > 0 || stateData.containerHeight > 0) {
+    auto &props = getConcreteProps();
+    yoga::Style adjustedStyle = props.yogaStyle;
+    auto currentStyle = yogaNode_.style();
+    bool needsUpdate = false;
+
+    // Set width if provided
+    if (stateData.containerWidth > 0) {
+      adjustedStyle.setDimension(yoga::Dimension::Width, yoga::StyleSizeLength::points(stateData.containerWidth));
+      if (adjustedStyle.dimension(yoga::Dimension::Width) != currentStyle.dimension(yoga::Dimension::Width)) {
+        needsUpdate = true;
+      }
+    }
+
+    // Set height if provided
+    if (stateData.containerHeight > 0) {
+      adjustedStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeLength::points(stateData.containerHeight));
+      if (adjustedStyle.dimension(yoga::Dimension::Height) != currentStyle.dimension(yoga::Dimension::Height)) {
+        needsUpdate = true;
+      }
+    }
+
+    if (needsUpdate) {
+      yogaNode_.setStyle(adjustedStyle);
+      yogaNode_.setDirty(true);
+    }
+  }
+}
+
+} // namespace facebook::react

package/common/cpp/react/renderer/components/TrueSheetSpec/TrueSheetContainerViewShadowNode.h

@@ -0,0 +1,28 @@
+#pragma once
+
+#include <jsi/jsi.h>
+#include <react/renderer/components/TrueSheetSpec/EventEmitters.h>
+#include <react/renderer/components/TrueSheetSpec/Props.h>
+#include <react/renderer/components/TrueSheetSpec/TrueSheetContainerViewState.h>
+#include <react/renderer/components/view/ConcreteViewShadowNode.h>
+
+namespace facebook::react {
+
+JSI_EXPORT extern const char TrueSheetContainerViewComponentName[];
+
+/*
+ * `ShadowNode` for <TrueSheetContainerView> component.
+ */
+class JSI_EXPORT TrueSheetContainerViewShadowNode final
+    : public ConcreteViewShadowNode<
+          TrueSheetContainerViewComponentName,
+          TrueSheetContainerViewProps,
+          TrueSheetContainerViewEventEmitter,
+          TrueSheetContainerViewState> {
+  using ConcreteViewShadowNode::ConcreteViewShadowNode;
+
+ public:
+  void adjustLayoutWithState();
+};
+
+} // namespace facebook::react

package/common/cpp/react/renderer/components/TrueSheetSpec/TrueSheetContainerViewState.cpp

@@ -0,0 +1,11 @@
+#include "TrueSheetContainerViewState.h"
+
+namespace facebook::react {
+
+#ifdef ANDROID
+folly::dynamic TrueSheetContainerViewState::getDynamic() const {
+  return folly::dynamic::object("containerWidth", containerWidth)("containerHeight", containerHeight);
+}
+#endif
+
+} // namespace facebook::react

package/common/cpp/react/renderer/components/TrueSheetSpec/TrueSheetContainerViewState.h

@@ -0,0 +1,42 @@
+#pragma once
+
+#include <memory>
+
+#ifdef ANDROID
+#include <folly/dynamic.h>
+#include <react/renderer/mapbuffer/MapBuffer.h>
+#include <react/renderer/mapbuffer/MapBufferBuilder.h>
+#endif
+
+namespace facebook::react {
+
+/*
+ * State for <TrueSheetContainerView> component.
+ * Contains the container dimensions from native.
+ */
+class TrueSheetContainerViewState final {
+ public:
+  using Shared = std::shared_ptr<const TrueSheetContainerViewState>;
+
+  TrueSheetContainerViewState() = default;
+
+#ifdef ANDROID
+  TrueSheetContainerViewState(
+      TrueSheetContainerViewState const &previousState,
+      folly::dynamic data)
+      : containerWidth(static_cast<float>(data["containerWidth"].getDouble())),
+        containerHeight(static_cast<float>(data["containerHeight"].getDouble())) {}
+#endif
+
+  float containerWidth{0};
+  float containerHeight{0};
+
+#ifdef ANDROID
+  folly::dynamic getDynamic() const;
+  MapBuffer getMapBuffer() const {
+    return MapBufferBuilder::EMPTY();
+  }
+#endif
+};
+
+} // namespace facebook::react

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lodev09/react-native-true-sheet",
-  "version": "3.0.0-beta.5",
+  "version": "3.0.0-beta.6",
   "description": "The true native bottom sheet experience for your React Native Apps.",
   "source": "./src/index.ts",
   "main": "./lib/module/index.js",
@@ -18,7 +18,7 @@
     "lib",
     "android",
     "ios",
-    "cpp",
+    "common",
     "*.podspec",
     "react-native.config.js",
     "!ios/build",