@apple-pie/slice-native 0.1.4 → 0.1.7

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>;

package/src/specs/LiquidGlassNativeComponent.ts

@@ -0,0 +1,18 @@
+import {
+	type CodegenTypes,
+	type ColorValue,
+	type HostComponent,
+	type ViewProps,
+	codegenNativeComponent,
+} from 'react-native';
+
+export interface NativeProps extends ViewProps {
+	glassStyle?: CodegenTypes.WithDefault<'regular' | 'clear', 'regular'>;
+	glassTintColor?: ColorValue;
+	interactive?: CodegenTypes.WithDefault<boolean, false>;
+	cornerRadius?: CodegenTypes.WithDefault<CodegenTypes.Double, 24>;
+}
+
+export default codegenNativeComponent<NativeProps>('SliceLiquidGlassView', {
+	excludedPlatforms: ['android'],
+}) as HostComponent<NativeProps>;

package/src/specs/NativeDeviceCapabilities.ts

@@ -0,0 +1,13 @@
+import type { TurboModule } from 'react-native';
+import { TurboModuleRegistry } from 'react-native';
+
+export interface Spec extends TurboModule {
+	readonly getConstants: () => {
+		supportsLiquidGlass: boolean;
+		supportsNativeBlur: boolean;
+		deviceName: string;
+		deviceModel: string;
+	};
+}
+
+export default TurboModuleRegistry.get<Spec>('SliceDeviceCapabilities');

package/dist/types/native/components/Icon/NativeIcon.d.ts

@@ -1,2 +0,0 @@
-import type { IconProps } from './_types';
-export declare const NativeIcon: import("react").MemoExoticComponent<(props: IconProps) => import("react").JSX.Element | null>;

package/dist/types/native/components/Icon/index.d.ts

@@ -1,3 +0,0 @@
-export { NativeIcon, NativeIcon as Icon } from './NativeIcon';
-export type { IconProps } from './_types';
-export { SliceIcons } from './icons';

package/dist/types/native/index.d.ts

@@ -1,4 +0,0 @@
-export { Icon, NativeIcon, SliceIcons } from './components/Icon';
-export type { IconProps } from './components/Icon';
-export { lightTheme, darkTheme, createTypography } from './theme';
-export type { SliceNativeTheme, SliceTheme } from './theme';