@apple-pie/slice-native 0.1.6 → 0.1.7

package/package.json

@@ -1,54 +1,54 @@
 {
 	"name": "@apple-pie/slice-native",
-	"version": "0.1.6",
-	"description": "React Native icons and design tokens for Slice",
+	"version": "0.1.7",
+	"description": "React Native components, icons and design tokens for Slice",
 	"author": "Uris Dacosta",
 	"license": "ISC",
 	"type": "commonjs",
 	"main": "./dist/cjs/index.js",
 	"module": "./dist/esm/index.mjs",
-	"react-native": "./dist/esm/index.mjs",
-	"types": "./dist/types/native/index.d.ts",
+	"react-native": "./dist/react-native/native/src/index.js",
+	"types": "./dist/types/native/src/index.d.ts",
 	"exports": {
 		".": {
-			"types": "./dist/types/native/index.d.ts",
-			"react-native": "./dist/esm/index.mjs",
+			"types": "./dist/types/native/src/index.d.ts",
+			"react-native": "./dist/react-native/native/src/index.js",
 			"import": "./dist/esm/index.mjs",
 			"require": "./dist/cjs/index.js"
 		},
 		"./package.json": "./package.json",
 		"./theme": {
 			"types": "./dist/types/native/src/theme/index.d.ts",
-			"react-native": "./dist/esm/theme.mjs",
+			"react-native": "./dist/react-native/native/src/theme/index.js",
 			"import": "./dist/esm/theme.mjs",
 			"require": "./dist/cjs/theme.js"
 		},
 		"./components": {
 			"types": "./dist/types/native/src/components/index.d.ts",
-			"react-native": "./dist/esm/components.mjs",
+			"react-native": "./dist/react-native/native/src/components/index.js",
 			"import": "./dist/esm/components.mjs",
 			"require": "./dist/cjs/components.js"
 		},
 		"./hooks": {
 			"types": "./dist/types/native/src/hooks/index.d.ts",
-			"react-native": "./dist/esm/hooks.mjs",
+			"react-native": "./dist/react-native/native/src/hooks/index.js",
 			"import": "./dist/esm/hooks.mjs",
 			"require": "./dist/cjs/hooks.js"
 		},
 		"./providers": {
 			"types": "./dist/types/native/src/providers/index.d.ts",
-			"react-native": "./dist/esm/providers.mjs",
+			"react-native": "./dist/react-native/native/src/providers/index.js",
 			"import": "./dist/esm/providers.mjs",
 			"require": "./dist/cjs/providers.js"
 		},
 		"./utils": {
 			"types": "./dist/types/native/src/utils/index.d.ts",
-			"react-native": "./dist/esm/utils.mjs",
+			"react-native": "./dist/react-native/native/src/utils/index.js",
 			"import": "./dist/esm/utils.mjs",
 			"require": "./dist/cjs/utils.js"
 		}
 	},
-	"files": ["dist"],
+	"files": ["dist", "platform", "src/specs", "SliceNative.podspec", "react-native.config.js"],
 	"sideEffects": false,
 	"scripts": {
 		"test": "vitest run --config vitest.config.mts",
@@ -60,7 +60,7 @@
 		"pack:tarball": "node scripts/pack.mjs",
 		"pack": "node scripts/pack.mjs",
 		"prepack": "npm run build",
-		"generate": "node scripts/generate-icons.mjs",
+		"generate": "node scripts/generate-icons.mjs && biome format --write src/components/SliceIcon/iconRegistry.tsx src/components/SliceIcon/icons.ts",
 		"typecheck": "tsc --noEmit -p tsconfig.json"
 	},
 	"publishConfig": {
@@ -77,5 +77,22 @@
 		"react-native": ">=0.80.0 <1.0.0",
 		"react-native-svg": "^15.0.0",
 		"react-native-reanimated": "^4.0.0"
+	},
+	"codegenConfig": {
+		"name": "SliceNativeSpec",
+		"type": "all",
+		"jsSrcsDir": "src/specs",
+		"ios": {
+			"componentProvider": {
+				"SliceLiquidGlassView": "RCTLiquidGlassView",
+				"SliceBackgroundBlur": "RCTBackgroundBlurView"
+			},
+			"modulesProvider": {
+				"SliceDeviceCapabilities": "SliceDeviceCapabilities"
+			}
+		},
+		"android": {
+			"javaPackageName": "com.slice"
+		}
 	}
 }

package/platform/android/build.gradle

@@ -0,0 +1,22 @@
+buildscript {
+  repositories { google(); mavenCentral() }
+  dependencies { classpath 'com.android.tools.build:gradle:8.7.3' }
+}
+apply plugin: 'com.android.library'
+apply plugin: 'com.facebook.react'
+
+react {
+  jsRootDir = file('../../src')
+  libraryName = 'SliceNativeSpec'
+  codegenJavaPackageName = 'com.slice'
+}
+android {
+  namespace 'com.slice'
+  compileSdkVersion rootProject.ext.has('compileSdkVersion') ? rootProject.ext.compileSdkVersion : 35
+  defaultConfig {
+    minSdkVersion 24
+    targetSdkVersion rootProject.ext.has('targetSdkVersion') ? rootProject.ext.targetSdkVersion : 35
+  }
+}
+repositories { google(); mavenCentral() }
+dependencies { implementation 'com.facebook.react:react-android' }

package/platform/android/src/main/AndroidManifest.xml

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

package/platform/android/src/main/java/com/slice/SliceBackgroundBlurManager.java

@@ -0,0 +1,28 @@
+package com.slice;
+
+import androidx.annotation.Nullable;
+import com.facebook.react.uimanager.SimpleViewManager;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.ViewManagerDelegate;
+import com.facebook.react.uimanager.annotations.ReactProp;
+import com.facebook.react.viewmanagers.SliceBackgroundBlurManagerDelegate;
+import com.facebook.react.viewmanagers.SliceBackgroundBlurManagerInterface;
+
+public final class SliceBackgroundBlurManager extends SimpleViewManager<SliceBackgroundBlurView>
+    implements SliceBackgroundBlurManagerInterface<SliceBackgroundBlurView> {
+  private final ViewManagerDelegate<SliceBackgroundBlurView> delegate = new SliceBackgroundBlurManagerDelegate<>(this);
+  @Override protected ViewManagerDelegate<SliceBackgroundBlurView> getDelegate() { return delegate; }
+  @Override public String getName() { return "SliceBackgroundBlur"; }
+  @Override protected SliceBackgroundBlurView createViewInstance(ThemedReactContext context) {
+    return new SliceBackgroundBlurView(context);
+  }
+  @Override @ReactProp(name = "blurIntensity", defaultDouble = 12)
+  public void setBlurIntensity(SliceBackgroundBlurView view, double value) { view.setIntensity(value); }
+  @Override @ReactProp(name = "fallbackColor", customType = "Color")
+  public void setFallbackColor(SliceBackgroundBlurView view, @Nullable Integer value) { view.setFallbackColor(value); }
+  // Directional fading is intentionally iOS-only.
+  @Override @ReactProp(name = "fadeStop", defaultDouble = 0)
+  public void setFadeStop(SliceBackgroundBlurView view, double value) {}
+  @Override @ReactProp(name = "direction")
+  public void setDirection(SliceBackgroundBlurView view, @Nullable String value) {}
+}

package/platform/android/src/main/java/com/slice/SliceBackgroundBlurView.java

@@ -0,0 +1,98 @@
+package com.slice;
+
+import android.content.Context;
+import android.graphics.Canvas;
+import android.graphics.Color;
+import android.graphics.RenderEffect;
+import android.graphics.RenderNode;
+import android.graphics.Shader;
+import android.os.Build;
+import android.view.View;
+import java.lang.reflect.Method;
+
+/** Uniform, same-window backdrop blur. Older platforms draw only the fallback. */
+public final class SliceBackgroundBlurView extends View {
+  private double intensity = 12;
+  private int fallbackColor = Color.argb(46, 128, 128, 128);
+  private BackdropRenderer renderer;
+
+  public SliceBackgroundBlurView(Context context) {
+    super(context);
+    setWillNotDraw(false);
+    // Resolve a public API at runtime to avoid requiring SDK 37.2 to build consumers.
+    // SDK_INT alone cannot distinguish Android's minor API releases.
+    if (supportsNativeBlur()) {
+      try {
+        renderer = new BackdropRenderer();
+      } catch (ReflectiveOperationException | LinkageError ignored) {
+        renderer = null;
+      }
+    }
+  }
+
+  static boolean supportsNativeBlur() {
+    if (Build.VERSION.SDK_INT < 37) return false;
+    try {
+      RenderNode.class.getMethod("setBackdropRenderEffect", RenderEffect.class);
+      return true;
+    } catch (ReflectiveOperationException | RuntimeException | LinkageError ignored) {
+      return false;
+    }
+  }
+
+  public void setIntensity(double value) {
+    intensity = Double.isFinite(value) ? Math.max(0, Math.min(100, value)) : 12;
+    invalidate();
+  }
+
+  public void setFallbackColor(Integer value) {
+    fallbackColor = value == null ? Color.argb(46, 128, 128, 128) : value;
+    invalidate();
+  }
+
+  @Override protected void onDraw(Canvas canvas) {
+    super.onDraw(canvas);
+    if (intensity == 0) return;
+    if (renderer != null && canvas.isHardwareAccelerated() && isHardwareAccelerated()) {
+      try {
+        float radius = (float) intensity * getResources().getDisplayMetrics().density;
+        renderer.draw(canvas, getWidth(), getHeight(), radius);
+        return;
+      } catch (ReflectiveOperationException | RuntimeException | LinkageError ignored) {
+        renderer = null;
+      }
+    }
+    canvas.drawColor(fallbackColor);
+  }
+
+  @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) {
+    super.onSizeChanged(w, h, oldw, oldh);
+    if (renderer != null) renderer.node.discardDisplayList();
+  }
+
+  @Override protected void onDetachedFromWindow() {
+    if (renderer != null) renderer.node.discardDisplayList();
+    super.onDetachedFromWindow();
+  }
+
+  // Keep newer graphics classes out of the View's fields on older Android releases.
+  private static final class BackdropRenderer {
+    final RenderNode node = new RenderNode("SliceBackgroundBlur");
+    final Method setBackdropEffect;
+
+    BackdropRenderer() throws ReflectiveOperationException {
+      setBackdropEffect = RenderNode.class.getMethod("setBackdropRenderEffect", RenderEffect.class);
+      node.setClipToBounds(true);
+    }
+
+    void draw(Canvas canvas, int width, int height, float radius) throws ReflectiveOperationException {
+      setBackdropEffect.invoke(node, RenderEffect.createBlurEffect(radius, radius, Shader.TileMode.CLAMP));
+      node.setPosition(0, 0, width, height);
+      if (!node.hasDisplayList()) {
+        node.beginRecording(width, height);
+        node.endRecording();
+      }
+      canvas.drawRenderNode(node);
+    }
+  }
+}

package/platform/android/src/main/java/com/slice/SliceDeviceCapabilitiesModule.java

@@ -0,0 +1,25 @@
+package com.slice;
+
+import android.os.Build;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.module.annotations.ReactModule;
+import java.util.HashMap;
+import java.util.Map;
+
+@ReactModule(name = SliceDeviceCapabilitiesModule.NAME)
+public final class SliceDeviceCapabilitiesModule extends NativeDeviceCapabilitiesSpec {
+  public static final String NAME = "SliceDeviceCapabilities";
+
+  public SliceDeviceCapabilitiesModule(ReactApplicationContext context) { super(context); }
+
+  @Override public String getName() { return NAME; }
+
+  @Override protected Map<String, Object> getTypedExportedConstants() {
+    Map<String, Object> result = new HashMap<>();
+    result.put("supportsLiquidGlass", false);
+    result.put("supportsNativeBlur", SliceBackgroundBlurView.supportsNativeBlur());
+    result.put("deviceName", Build.MODEL);
+    result.put("deviceModel", Build.MODEL);
+    return result;
+  }
+}

package/platform/android/src/main/java/com/slice/SlicePackage.java

@@ -0,0 +1,25 @@
+package com.slice;
+
+import androidx.annotation.Nullable;
+import com.facebook.react.BaseReactPackage;
+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;
+import java.util.Collections;
+import java.util.List;
+
+public final class SlicePackage extends BaseReactPackage {
+  @Override @Nullable public NativeModule getModule(String name, ReactApplicationContext context) {
+    return SliceDeviceCapabilitiesModule.NAME.equals(name) ? new SliceDeviceCapabilitiesModule(context) : null;
+  }
+  @Override public ReactModuleInfoProvider getReactModuleInfoProvider() {
+    return () -> Collections.singletonMap(SliceDeviceCapabilitiesModule.NAME, new ReactModuleInfo(
+        SliceDeviceCapabilitiesModule.NAME, SliceDeviceCapabilitiesModule.NAME,
+        false, false, false, true));
+  }
+  @Override public List<ViewManager> createViewManagers(ReactApplicationContext context) {
+    return Collections.singletonList(new SliceBackgroundBlurManager());
+  }
+}

package/platform/ios/BackgroundBlurSurface.swift

@@ -0,0 +1,89 @@
+import UIKit
+
+@objc(SliceBackgroundBlurSurface)
+public final class BackgroundBlurSurface: UIView {
+    private let effectView = UIVisualEffectView(effect: nil)
+    private var animator: UIViewPropertyAnimator?
+    private var intensity: Double = 12
+    private var fadeStop: Double = 0
+    private var direction = "down"
+    private var fallbackColor: UIColor = .secondarySystemBackground
+    private var observer: NSObjectProtocol?
+
+    public override init(frame: CGRect) {
+        super.init(frame: frame)
+        isUserInteractionEnabled = false
+        addSubview(effectView)
+        observer = NotificationCenter.default.addObserver(
+            forName: UIAccessibility.reduceTransparencyStatusDidChangeNotification,
+            object: nil, queue: .main
+        ) { [weak self] _ in
+            MainActor.assumeIsolated { self?.updateEffect() }
+        }
+    }
+
+    public required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") }
+
+    deinit {
+        animator?.stopAnimation(true)
+        if let observer { NotificationCenter.default.removeObserver(observer) }
+    }
+
+    @objc public func configure(intensity: Double, fadeStop: Double, direction: String, fallbackColor: UIColor?) {
+        self.intensity = intensity.isFinite ? min(100, max(0, intensity)) : 12
+        self.fadeStop = fadeStop.isFinite ? min(1, max(0, fadeStop)) : 0
+        self.direction = direction
+        self.fallbackColor = fallbackColor ?? .secondarySystemBackground
+        updateEffect()
+        setNeedsLayout()
+    }
+
+    public override func didMoveToWindow() {
+        super.didMoveToWindow()
+        updateEffect()
+    }
+
+    private func updateEffect() {
+        setNeedsLayout()
+        animator?.stopAnimation(true)
+        animator = nil
+        effectView.effect = nil
+        effectView.backgroundColor = .clear
+        if UIAccessibility.isReduceTransparencyEnabled {
+            effectView.backgroundColor = fallbackColor
+        } else if intensity > 0, window != nil {
+            let animator = UIViewPropertyAnimator(duration: 1, curve: .linear) { [weak self] in
+                self?.effectView.effect = UIBlurEffect(style: .regular)
+            }
+            animator.pausesOnCompletion = true
+            animator.startAnimation()
+            animator.pauseAnimation()
+            animator.fractionComplete = CGFloat(intensity / 100)
+            self.animator = animator
+        }
+    }
+
+    public override func layoutSubviews() {
+        super.layoutSubviews()
+        effectView.frame = bounds
+        guard fadeStop > 0, !UIAccessibility.isReduceTransparencyEnabled else {
+            effectView.mask = nil
+            return
+        }
+        // Mask the effect view directly, never its parent. Reassign after resizing
+        // so UIKit refreshes its internal copies of the mask.
+        let mask = UIView(frame: effectView.bounds)
+        let gradient = CAGradientLayer()
+        gradient.frame = mask.bounds
+        gradient.colors = [UIColor.clear.cgColor, UIColor.black.cgColor, UIColor.black.cgColor]
+        gradient.locations = [0, NSNumber(value: fadeStop), 1]
+        switch direction {
+        case "up": gradient.startPoint = CGPoint(x: 0.5, y: 1); gradient.endPoint = CGPoint(x: 0.5, y: 0)
+        case "left": gradient.startPoint = CGPoint(x: 1, y: 0.5); gradient.endPoint = CGPoint(x: 0, y: 0.5)
+        case "right": gradient.startPoint = CGPoint(x: 0, y: 0.5); gradient.endPoint = CGPoint(x: 1, y: 0.5)
+        default: gradient.startPoint = CGPoint(x: 0.5, y: 0); gradient.endPoint = CGPoint(x: 0.5, y: 1)
+        }
+        mask.layer.addSublayer(gradient)
+        effectView.mask = mask
+    }
+}

package/platform/ios/LiquidGlassSurface.swift

@@ -0,0 +1,82 @@
+import UIKit
+
+/// UIKit surface owned by the Fabric component. React children live in contentView.
+@objc(SliceLiquidGlassSurface)
+public final class LiquidGlassSurface: UIView {
+    private let effectView = UIVisualEffectView(effect: nil)
+    private var usesClearGlass = false
+    private var glassTint: UIColor?
+    private var interactive = false
+    private var radius: CGFloat = 24
+    private var reduceTransparencyObserver: NSObjectProtocol?
+
+    @objc public var reactContentView: UIView { effectView.contentView }
+
+    public override init(frame: CGRect) {
+        super.init(frame: frame)
+        backgroundColor = .clear
+        addSubview(effectView)
+        effectView.frame = bounds
+        effectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
+        reduceTransparencyObserver = NotificationCenter.default.addObserver(
+            forName: UIAccessibility.reduceTransparencyStatusDidChangeNotification,
+            object: nil,
+            queue: .main
+        ) { [weak self] _ in
+            MainActor.assumeIsolated { self?.updateEffect() }
+        }
+        updateEffect()
+    }
+
+    public required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    deinit {
+        if let observer = reduceTransparencyObserver {
+            NotificationCenter.default.removeObserver(observer)
+        }
+    }
+
+    @objc public func configure(
+        clear: Bool,
+        tint: UIColor?,
+        interactive: Bool,
+        cornerRadius: CGFloat
+    ) {
+        let nextRadius = cornerRadius.isFinite ? max(0, cornerRadius) : 24
+        guard usesClearGlass != clear || glassTint != tint || self.interactive != interactive || radius != nextRadius else {
+            return
+        }
+        usesClearGlass = clear
+        glassTint = tint
+        self.interactive = interactive
+        radius = nextRadius
+        updateEffect()
+    }
+
+    private func updateEffect() {
+        if UIAccessibility.isReduceTransparencyEnabled {
+            effectView.effect = nil
+            effectView.backgroundColor = .secondarySystemBackground
+        } else {
+            effectView.backgroundColor = .clear
+            if #available(iOS 26.0, *) {
+                let effect = UIGlassEffect(style: usesClearGlass ? .clear : .regular)
+                effect.tintColor = glassTint
+                effect.isInteractive = interactive
+                effectView.effect = effect
+            } else {
+                effectView.effect = UIBlurEffect(style: .systemUltraThinMaterial)
+            }
+        }
+
+        if #available(iOS 26.0, *) {
+            effectView.cornerConfiguration = .corners(radius: .fixed(radius))
+        } else {
+            effectView.layer.cornerRadius = radius
+            effectView.layer.cornerCurve = .continuous
+        }
+        effectView.clipsToBounds = true
+    }
+}

package/platform/ios/RCTBackgroundBlurView.h

@@ -0,0 +1,3 @@
+#import <React/RCTViewComponentView.h>
+@interface RCTBackgroundBlurView : RCTViewComponentView
+@end

package/platform/ios/RCTBackgroundBlurView.mm

@@ -0,0 +1,42 @@
+#import "RCTBackgroundBlurView.h"
+#import "SliceNative-Swift.h"
+#import <React/RCTConversions.h>
+#import <react/renderer/components/SliceNativeSpec/ComponentDescriptors.h>
+#import <react/renderer/components/SliceNativeSpec/Props.h>
+#import <react/renderer/components/SliceNativeSpec/RCTComponentViewHelpers.h>
+
+using namespace facebook::react;
+@interface RCTBackgroundBlurView () <RCTSliceBackgroundBlurViewProtocol>
+@end
+@implementation RCTBackgroundBlurView {
+  SliceBackgroundBlurSurface *_surface;
+}
++ (ComponentDescriptorProvider)componentDescriptorProvider {
+  return concreteComponentDescriptorProvider<SliceBackgroundBlurComponentDescriptor>();
+}
+- (instancetype)initWithFrame:(CGRect)frame {
+  if (self = [super initWithFrame:frame]) {
+    _props = std::make_shared<const SliceBackgroundBlurProps>();
+    _surface = [[SliceBackgroundBlurSurface alloc] initWithFrame:self.bounds];
+    self.contentView = _surface;
+  }
+  return self;
+}
+- (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps {
+  const auto &p = *std::static_pointer_cast<const SliceBackgroundBlurProps>(props);
+  NSString *direction = @"down";
+  switch (p.direction) {
+    case SliceBackgroundBlurDirection::Up: direction = @"up"; break;
+    case SliceBackgroundBlurDirection::Left: direction = @"left"; break;
+    case SliceBackgroundBlurDirection::Right: direction = @"right"; break;
+    default: break;
+  }
+  [_surface configureWithIntensity:p.blurIntensity fadeStop:p.fadeStop direction:direction fallbackColor:RCTUIColorFromSharedColor(p.fallbackColor)];
+  [super updateProps:props oldProps:oldProps];
+}
+- (void)prepareForRecycle {
+  [super prepareForRecycle];
+  [_surface configureWithIntensity:12 fadeStop:0 direction:@"down" fallbackColor:nil];
+}
+@end
+Class<RCTComponentViewProtocol> SliceBackgroundBlurCls(void) { return RCTBackgroundBlurView.class; }

package/platform/ios/RCTLiquidGlassView.h

@@ -0,0 +1,8 @@
+#import <React/RCTViewComponentView.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RCTLiquidGlassView : RCTViewComponentView
+@end
+
+NS_ASSUME_NONNULL_END

package/platform/ios/RCTLiquidGlassView.mm

@@ -0,0 +1,73 @@
+#import "RCTLiquidGlassView.h"
+#import "SliceNative-Swift.h"
+#import <React/RCTConversions.h>
+
+#import <react/renderer/components/SliceNativeSpec/ComponentDescriptors.h>
+#import <react/renderer/components/SliceNativeSpec/Props.h>
+#import <react/renderer/components/SliceNativeSpec/RCTComponentViewHelpers.h>
+#import <react/renderer/graphics/Color.h>
+
+using namespace facebook::react;
+
+@interface RCTLiquidGlassView () <RCTSliceLiquidGlassViewViewProtocol>
+@end
+
+@implementation RCTLiquidGlassView {
+  SliceLiquidGlassSurface *_surface;
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider
+{
+  return concreteComponentDescriptorProvider<SliceLiquidGlassViewComponentDescriptor>();
+}
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+  if (self = [super initWithFrame:frame]) {
+    _props = std::make_shared<const SliceLiquidGlassViewProps>();
+    _surface = [[SliceLiquidGlassSurface alloc] initWithFrame:self.bounds];
+    [self addSubview:_surface];
+  }
+  return self;
+}
+
+- (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps
+{
+  const auto &newProps = *std::static_pointer_cast<const SliceLiquidGlassViewProps>(props);
+  [_surface configureWithClear:newProps.glassStyle == SliceLiquidGlassViewGlassStyle::Clear
+                         tint:RCTUIColorFromSharedColor(newProps.glassTintColor)
+                  interactive:newProps.interactive
+                 cornerRadius:newProps.cornerRadius];
+  [super updateProps:props oldProps:oldProps];
+}
+
+- (void)layoutSubviews
+{
+  [super layoutSubviews];
+  // Fill the entire view, including Yoga padding. Child frames already include padding.
+  _surface.frame = self.bounds;
+}
+
+- (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
+{
+  [_surface.reactContentView insertSubview:childComponentView atIndex:index];
+}
+
+- (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
+{
+  [childComponentView removeFromSuperview];
+}
+
+- (void)prepareForRecycle
+{
+  [super prepareForRecycle];
+  [_surface configureWithClear:NO tint:nil interactive:NO cornerRadius:24];
+}
+
+@end
+
+// Also supports component discovery in React Native versions using the class provider.
+Class<RCTComponentViewProtocol> SliceLiquidGlassViewCls(void)
+{
+  return RCTLiquidGlassView.class;
+}

package/platform/ios/SliceDeviceCapabilities.h

@@ -0,0 +1,4 @@
+#import <SliceNativeSpec/SliceNativeSpec.h>
+
+@interface SliceDeviceCapabilities : NSObject <NativeDeviceCapabilitiesSpec>
+@end

package/platform/ios/SliceDeviceCapabilities.mm

@@ -0,0 +1,35 @@
+#import "SliceDeviceCapabilities.h"
+#import <UIKit/UIKit.h>
+#import <sys/utsname.h>
+#import <cstdlib>
+
+@implementation SliceDeviceCapabilities
+RCT_EXPORT_MODULE(SliceDeviceCapabilities)
+
++ (BOOL)requiresMainQueueSetup { return NO; }
+
+- (facebook::react::ModuleConstants<JS::NativeDeviceCapabilities::Constants>)constantsToExport {
+  return [self getConstants];
+}
+
+- (facebook::react::ModuleConstants<JS::NativeDeviceCapabilities::Constants>)getConstants {
+  struct utsname systemInfo;
+  NSString *model = uname(&systemInfo) == 0 ? [NSString stringWithUTF8String:systemInfo.machine] : @"";
+  // Simulator uname reports the host architecture; use the simulated device instead.
+  const char *simulatorModel = getenv("SIMULATOR_MODEL_IDENTIFIER");
+  if (simulatorModel != nullptr) { model = [NSString stringWithUTF8String:simulatorModel]; }
+  BOOL supportsGlass = NO;
+  if (@available(iOS 26.0, *)) { supportsGlass = YES; }
+  return facebook::react::typedConstants<JS::NativeDeviceCapabilities::Constants>({
+    .supportsLiquidGlass = (bool)supportsGlass,
+    .supportsNativeBlur = true,
+    .deviceName = [UIDevice currentDevice].name,
+    .deviceModel = model ?: @"",
+  });
+}
+
+- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
+    (const facebook::react::ObjCTurboModule::InitParams &)params {
+  return std::make_shared<facebook::react::NativeDeviceCapabilitiesSpecJSI>(params);
+}
+@end

package/react-native.config.js

@@ -0,0 +1 @@
+module.exports = { dependency: { platforms: { android: { sourceDir: './platform/android' } } } };

package/src/specs/BackgroundBlurNativeComponent.ts

@@ -0,0 +1,16 @@
+import {
+	type CodegenTypes,
+	type ColorValue,
+	type HostComponent,
+	type ViewProps,
+	codegenNativeComponent,
+} from 'react-native';
+
+export interface NativeProps extends ViewProps {
+	blurIntensity?: CodegenTypes.WithDefault<CodegenTypes.Double, 12>;
+	fadeStop?: CodegenTypes.WithDefault<CodegenTypes.Double, 0>;
+	direction?: CodegenTypes.WithDefault<'down' | 'up' | 'left' | 'right', 'down'>;
+	fallbackColor?: ColorValue;
+}
+
+export default codegenNativeComponent<NativeProps>('SliceBackgroundBlur') as HostComponent<NativeProps>;