@symbiote-native/glass-effect 0.0.0-stage → 0.1.0

package/build-ngc/core/glass-effect.d.ts

@@ -0,0 +1,62 @@
+import type { IAccessibilityProps, IAriaProps, IDescriptor, IResponderProps } from '@symbiote-native/components';
+import type { IColorValue, IStyleProp, ISymbioteEvent, IViewStyle } from '@symbiote-native/engine';
+export declare const GLASS_EFFECT_MODULE_NAME = "ExpoGlassEffect";
+export type IGlassStyle = 'clear' | 'regular' | 'none';
+export type IGlassEffectStyleConfig = {
+    /** The glass effect style to apply */
+    style: IGlassStyle;
+    /**
+     * Whether to animate the style change
+     * @default false
+     */
+    animate?: boolean;
+    /** Duration of the animation in seconds, the system default when omitted */
+    animationDuration?: number;
+};
+export type IGlassColorScheme = 'auto' | 'light' | 'dark';
+type IViewSurface = IAccessibilityProps & IAriaProps & IResponderProps & {
+    style?: IStyleProp<IViewStyle>;
+    testID?: string;
+    nativeID?: string;
+    onLayout?: (event: ISymbioteEvent) => void;
+};
+export type IGlassViewProps = IViewSurface & {
+    /**
+     * A style name or a config object that controls the animation
+     * @default 'regular'
+     */
+    glassEffectStyle?: IGlassStyle | IGlassEffectStyleConfig;
+    tintColor?: IColorValue;
+    /**
+     * @default false
+     */
+    isInteractive?: boolean;
+    /**
+     * Overrides the system appearance when the app has its own theme toggle
+     * @default 'auto'
+     */
+    colorScheme?: IGlassColorScheme;
+};
+export type IGlassContainerProps = IViewSurface & {
+    /** The distance at which glass elements start affecting each other */
+    spacing?: number;
+};
+export declare const glassViewName: () => string;
+export declare const glassContainerName: () => string;
+export declare const ensureGlassViewRegistered: () => boolean;
+export declare const ensureGlassContainerRegistered: () => boolean;
+export declare function renderGlassView(props: object): IDescriptor;
+export declare function renderGlassContainer(props: object): IDescriptor;
+/**
+ * Whether the app renders with the Liquid Glass design, component availability only
+ * Accessibility settings can still limit the effect, see `AccessibilityInfo`
+ * @platform ios
+ */
+export declare function isLiquidGlassAvailable(): boolean;
+/**
+ * Whether the Liquid Glass API exists at runtime, some iOS 26 betas lack it and crash
+ * Check before using `GlassView` and `GlassContainer`
+ * @platform ios
+ */
+export declare function isGlassEffectAPIAvailable(): boolean;
+export {};

package/build-ngc/core/glass-effect.js

@@ -0,0 +1,72 @@
+// Ядро `GlassView` и `GlassContainer`, порт expo-glass-effect, нативное только на iOS
+import { Platform, requireNativeModule, requireNativeViewManager, } from 'expo-modules-core';
+import { el } from '@symbiote-native/components';
+import { defineExpoNativeViews } from '@symbiote-native/engine';
+export const GLASS_EFFECT_MODULE_NAME = 'ExpoGlassEffect';
+const GLASS_VIEW_NAME = 'GlassView';
+const GLASS_CONTAINER_NAME = 'GlassContainer';
+// Эти ключи имеют смысл только у нативного view, у обычного View их быть не должно
+const GLASS_VIEW_KEYS = new Set([
+    'glassEffectStyle',
+    'tintColor',
+    'isInteractive',
+    'colorScheme',
+]);
+const GLASS_CONTAINER_KEYS = new Set(['spacing']);
+// Регистрация идёт при рендере: побочный эффект барреля теряется в release
+const views = defineExpoNativeViews(requireNativeViewManager, GLASS_EFFECT_MODULE_NAME, { glass: GLASS_VIEW_NAME, container: GLASS_CONTAINER_NAME });
+export const glassViewName = views.glass.name;
+export const glassContainerName = views.container.name;
+export const ensureGlassViewRegistered = views.glass.ensureRegistered;
+export const ensureGlassContainerRegistered = views.container.ensureRegistered;
+function runsOnIos() {
+    return Platform.select({ ios: true, default: false });
+}
+function withoutKeys(props, keys) {
+    return Object.fromEntries(Object.entries(props).filter(([key]) => !keys.has(key)));
+}
+// `object`, а не тип пропсов: Vue и Angular отдают нетипизированный набор атрибутов
+export function renderGlassView(props) {
+    if (!runsOnIos())
+        return el('view', withoutKeys(props, GLASS_VIEW_KEYS));
+    if (!ensureGlassViewRegistered()) {
+        console.warn('GlassView is not available on this platform');
+        return el('view', withoutKeys(props, GLASS_VIEW_KEYS));
+    }
+    return el(glassViewName(), { ...props });
+}
+export function renderGlassContainer(props) {
+    if (!runsOnIos()) {
+        return el('view', withoutKeys(props, GLASS_CONTAINER_KEYS));
+    }
+    if (!ensureGlassContainerRegistered()) {
+        console.warn('GlassContainer is not available on this platform');
+        return el('view', withoutKeys(props, GLASS_CONTAINER_KEYS));
+    }
+    return el(glassContainerName(), { ...props });
+}
+let isLiquidGlass;
+let isGlassApi;
+/**
+ * Whether the app renders with the Liquid Glass design, component availability only
+ * Accessibility settings can still limit the effect, see `AccessibilityInfo`
+ * @platform ios
+ */
+export function isLiquidGlassAvailable() {
+    if (!runsOnIos())
+        return false;
+    isLiquidGlass ??= !!Reflect.get(requireNativeModule(GLASS_EFFECT_MODULE_NAME), 'isLiquidGlassAvailable');
+    return isLiquidGlass;
+}
+/**
+ * Whether the Liquid Glass API exists at runtime, some iOS 26 betas lack it and crash
+ * Check before using `GlassView` and `GlassContainer`
+ * @platform ios
+ */
+export function isGlassEffectAPIAvailable() {
+    if (!runsOnIos())
+        return false;
+    isGlassApi ??= !!Reflect.get(requireNativeModule(GLASS_EFFECT_MODULE_NAME), 'isGlassEffectAPIAvailable');
+    return isGlassApi;
+}
+//# sourceMappingURL=glass-effect.js.map

package/build-ngc/core/glass-effect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"glass-effect.js","sourceRoot":"","sources":["../../src/core/glass-effect.ts"],"names":[],"mappings":"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"}

package/build-ngc/core/index.d.ts

@@ -0,0 +1 @@
+export { GLASS_EFFECT_MODULE_NAME, ensureGlassContainerRegistered, ensureGlassViewRegistered, glassContainerName, glassViewName, isGlassEffectAPIAvailable, isLiquidGlassAvailable, renderGlassContainer, renderGlassView, type IGlassColorScheme, type IGlassContainerProps, type IGlassEffectStyleConfig, type IGlassStyle, type IGlassViewProps, } from './glass-effect';

package/build-ngc/core/index.js

@@ -0,0 +1,2 @@
+export { GLASS_EFFECT_MODULE_NAME, ensureGlassContainerRegistered, ensureGlassViewRegistered, glassContainerName, glassViewName, isGlassEffectAPIAvailable, isLiquidGlassAvailable, renderGlassContainer, renderGlassView, } from './glass-effect';
+//# sourceMappingURL=index.js.map

package/build-ngc/core/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,wBAAwB,EACxB,8BAA8B,EAC9B,yBAAyB,EACzB,kBAAkB,EAClB,aAAa,EACb,yBAAyB,EACzB,sBAAsB,EACtB,oBAAoB,EACpB,eAAe,GAMhB,MAAM,gBAAgB,CAAC"}

package/native-link.json

@@ -0,0 +1,5 @@
+{
+  "ios": {
+    "upstreamPackage": "expo-glass-effect"
+  }
+}

package/package.json

@@ -1,6 +1,148 @@
 {
   "name": "@symbiote-native/glass-effect",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "expo-glass-effect wrapped for SymbioteNative — one framework-agnostic core, built once and reachable from the React, Vue, Svelte, Solid, and Angular adapters. Liquid Glass native views for iOS 26 and a plain View elsewhere.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/OneEyed1366/symbiote-native.git",
+    "directory": "packages/glass-effect"
+  },
+  "homepage": "https://github.com/OneEyed1366/symbiote-native/tree/master/packages/glass-effect#readme",
+  "bugs": {
+    "url": "https://github.com/OneEyed1366/symbiote-native/issues"
+  },
+  "author": "Andrey Prokopenko <psevdoproger@gmail.com>",
+  "keywords": [
+    "react-native",
+    "symbiote-native",
+    "expo-glass-effect",
+    "react",
+    "vue",
+    "svelte",
+    "solid",
+    "angular",
+    "liquid-glass",
+    "glass-effect"
+  ],
+  "type": "module",
+  "main": "./build/core/index.js",
+  "module": "./build/core/index.js",
+  "types": "./build/core/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./build/core/index.d.ts",
+      "default": "./build/core/index.js"
+    },
+    "./vue": {
+      "types": "./build/vue/index.d.ts",
+      "default": "./build/vue/index.js"
+    },
+    "./react": {
+      "types": "./build/react/index.d.ts",
+      "default": "./build/react/index.js"
+    },
+    "./svelte": "./src/svelte/index.ts",
+    "./solid": {
+      "types": "./build/solid/index.d.ts",
+      "default": "./build/solid/index.js"
+    },
+    "./angular": {
+      "types": "./build-ngc/angular/index.d.ts",
+      "react-native": "./build-ngc/angular/index.js",
+      "default": "./src/angular/index.ts"
+    }
+  },
+  "files": [
+    "src",
+    "build",
+    "build-ngc",
+    "native-link.json",
+    "!src/**/*.test.*",
+    "!src/**/*.spec.*",
+    "!src/**/*.detox.*"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "expo-glass-effect": "57.0.4",
+    "expo-modules-core": "57.0.20",
+    "@symbiote-native/components": "3.2.0"
+  },
+  "peerDependencies": {
+    "@angular/core": ">=20",
+    "@vue/runtime-core": "^3.5.13",
+    "react": ">=19.0.0",
+    "react-native": ">=0.86",
+    "solid-js": ">=1.9.0",
+    "svelte": ">=5.56.0",
+    "vue": ">=3.5.0",
+    "@symbiote-native/angular": "^3.3.0",
+    "@symbiote-native/engine": "^1.6.0",
+    "@symbiote-native/react": "^3.3.0",
+    "@symbiote-native/solid": "^3.2.0",
+    "@symbiote-native/svelte": "^3.2.0",
+    "@symbiote-native/vue": "^3.3.0"
+  },
+  "peerDependenciesMeta": {
+    "@symbiote-native/angular": {
+      "optional": true
+    },
+    "@symbiote-native/react": {
+      "optional": true
+    },
+    "@symbiote-native/solid": {
+      "optional": true
+    },
+    "@symbiote-native/svelte": {
+      "optional": true
+    },
+    "@symbiote-native/vue": {
+      "optional": true
+    },
+    "@angular/core": {
+      "optional": true
+    },
+    "@vue/runtime-core": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "solid-js": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@angular/compiler": "~22.0.8",
+    "@angular/compiler-cli": "~22.0.8",
+    "@angular/core": "~22.0.8",
+    "@types/node": "^26.0.0",
+    "@types/react": "^19.2.0",
+    "@vue/runtime-core": "^3.5.13",
+    "react": "19.2.3",
+    "solid-js": "^1.9.14",
+    "svelte": "^5.56.0",
+    "typescript": "~6.0.0",
+    "@symbiote-native/angular": "3.3.0",
+    "@symbiote-native/engine": "1.6.0",
+    "@symbiote-native/react": "3.3.0",
+    "@symbiote-native/solid": "3.2.0",
+    "@symbiote-native/svelte": "3.2.0",
+    "@symbiote-native/test-utils": "0.4.7",
+    "@symbiote-native/vue": "3.3.0"
+  },
+  "scripts": {
+    "typecheck": "tsc --build",
+    "clean": "rm -rf build-ngc",
+    "ng:build": "pnpm run clean && ngc -p tsconfig.angular.json",
+    "format": "prettier --write \"src/**/*.{ts,tsx}\""
+  }
 }

package/src/angular/glass/index.android.ts

@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { DescriptorHost } from '@symbiote-native/angular';
+import { GlassContainerBase, GlassViewBase } from './shared';
+
+/** Angular twin of `expo-glass-effect`'s `GlassView`, a plain View off iOS */
+@Component({
+  selector: 'GlassView',
+  standalone: true,
+  imports: [DescriptorHost],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `@if (descriptor; as node) {
+    <symbiote-descriptor-host [node]="node"
+      ><ng-content
+    /></symbiote-descriptor-host>
+  }`,
+})
+export class GlassView extends GlassViewBase {}
+
+/** Angular twin of `expo-glass-effect`'s `GlassContainer`, a plain View off iOS */
+@Component({
+  selector: 'GlassContainer',
+  standalone: true,
+  imports: [DescriptorHost],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `@if (descriptor; as node) {
+    <symbiote-descriptor-host [node]="node"
+      ><ng-content
+    /></symbiote-descriptor-host>
+  }`,
+})
+export class GlassContainer extends GlassContainerBase {}

package/src/angular/glass/index.ios.ts

@@ -0,0 +1,61 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  NO_ERRORS_SCHEMA,
+} from '@angular/core';
+import { SymbioteHostPropsDirective } from '@symbiote-native/angular';
+import { warnIfViewNameIsDynamic } from '@symbiote-native/engine';
+import { GLASS_EFFECT_MODULE_NAME } from '../../core';
+import { GlassContainerBase, GlassViewBase } from './shared';
+
+const VIEW_TAG = 'ViewManagerAdapter_ExpoGlassEffect_GlassView';
+const CONTAINER_TAG = 'ViewManagerAdapter_ExpoGlassEffect_GlassContainer';
+
+/** Angular twin of `expo-glass-effect`'s `GlassView`, content goes inside the native view */
+@Component({
+  selector: 'GlassView',
+  standalone: true,
+  imports: [SymbioteHostPropsDirective],
+  schemas: [NO_ERRORS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  // Имя тега это нативное имя view, его нельзя собрать динамически
+  template: `@if (descriptor; as node) {
+    <ViewManagerAdapter_ExpoGlassEffect_GlassView
+      [symbioteHostProps]="node.props"
+    >
+      <ng-content />
+    </ViewManagerAdapter_ExpoGlassEffect_GlassView>
+  }`,
+})
+export class GlassView extends GlassViewBase {
+  constructor() {
+    super();
+    warnIfViewNameIsDynamic(VIEW_TAG, GLASS_EFFECT_MODULE_NAME, 'GlassView');
+  }
+}
+
+/** Angular twin of `expo-glass-effect`'s `GlassContainer`, merges the glass views it holds */
+@Component({
+  selector: 'GlassContainer',
+  standalone: true,
+  imports: [SymbioteHostPropsDirective],
+  schemas: [NO_ERRORS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `@if (descriptor; as node) {
+    <ViewManagerAdapter_ExpoGlassEffect_GlassContainer
+      [symbioteHostProps]="node.props"
+    >
+      <ng-content />
+    </ViewManagerAdapter_ExpoGlassEffect_GlassContainer>
+  }`,
+})
+export class GlassContainer extends GlassContainerBase {
+  constructor() {
+    super();
+    warnIfViewNameIsDynamic(
+      CONTAINER_TAG,
+      GLASS_EFFECT_MODULE_NAME,
+      'GlassContainer',
+    );
+  }
+}

package/src/angular/glass/index.ts

@@ -0,0 +1,2 @@
+// Базовая точка для headless и tsc, Metro берёт `index.ios` или `index.android`
+export { GlassContainer, GlassView } from './index.ios';

package/src/angular/glass/shared.ts

@@ -0,0 +1,38 @@
+import { Directive, Input } from '@angular/core';
+import { NativeViewBase } from '@symbiote-native/angular';
+import type { IDescriptor } from '@symbiote-native/components';
+import { renderGlassContainer, renderGlassView } from '../../core';
+import type { IGlassContainerProps, IGlassViewProps } from '../../core';
+
+// Inputs и сборка дескриптора общие, платформы различаются только шаблоном
+@Directive()
+export abstract class GlassViewBase extends NativeViewBase {
+  @Input() glassEffectStyle?: IGlassViewProps['glassEffectStyle'];
+  @Input() tintColor?: IGlassViewProps['tintColor'];
+  @Input() isInteractive?: IGlassViewProps['isInteractive'];
+  @Input() colorScheme?: IGlassViewProps['colorScheme'];
+
+  protected override readonly propNames = [
+    'glassEffectStyle',
+    'tintColor',
+    'isInteractive',
+    'colorScheme',
+  ] as const satisfies readonly (keyof GlassViewBase)[];
+
+  protected override renderView(props: object): IDescriptor {
+    return renderGlassView(props);
+  }
+}
+
+@Directive()
+export abstract class GlassContainerBase extends NativeViewBase {
+  @Input() spacing?: IGlassContainerProps['spacing'];
+
+  protected override readonly propNames = [
+    'spacing',
+  ] as const satisfies readonly (keyof GlassContainerBase)[];
+
+  protected override renderView(props: object): IDescriptor {
+    return renderGlassContainer(props);
+  }
+}

package/src/angular/index.ts

@@ -0,0 +1,15 @@
+// @symbiote-native/glass-effect/angular: компоненты `GlassView` и `GlassContainer` поверх общего ядра
+
+export { GlassContainer, GlassView } from './glass';
+export {
+  GLASS_EFFECT_MODULE_NAME,
+  glassContainerName,
+  glassViewName,
+  isGlassEffectAPIAvailable,
+  isLiquidGlassAvailable,
+  type IGlassColorScheme,
+  type IGlassContainerProps,
+  type IGlassEffectStyleConfig,
+  type IGlassStyle,
+  type IGlassViewProps,
+} from '../core';

package/src/core/glass-effect.ts

@@ -0,0 +1,160 @@
+// Ядро `GlassView` и `GlassContainer`, порт expo-glass-effect, нативное только на iOS
+import {
+  Platform,
+  requireNativeModule,
+  requireNativeViewManager,
+} from 'expo-modules-core';
+import { el } from '@symbiote-native/components';
+import type {
+  IAccessibilityProps,
+  IAriaProps,
+  IDescriptor,
+  IResponderProps,
+} from '@symbiote-native/components';
+import { defineExpoNativeViews } from '@symbiote-native/engine';
+import type {
+  IColorValue,
+  IStyleProp,
+  ISymbioteEvent,
+  IViewStyle,
+} from '@symbiote-native/engine';
+
+export const GLASS_EFFECT_MODULE_NAME = 'ExpoGlassEffect';
+const GLASS_VIEW_NAME = 'GlassView';
+const GLASS_CONTAINER_NAME = 'GlassContainer';
+
+export type IGlassStyle = 'clear' | 'regular' | 'none';
+
+export type IGlassEffectStyleConfig = {
+  /** The glass effect style to apply */
+  style: IGlassStyle;
+  /**
+   * Whether to animate the style change
+   * @default false
+   */
+  animate?: boolean;
+  /** Duration of the animation in seconds, the system default when omitted */
+  animationDuration?: number;
+};
+
+export type IGlassColorScheme = 'auto' | 'light' | 'dark';
+
+type IViewSurface = IAccessibilityProps &
+  IAriaProps &
+  IResponderProps & {
+    style?: IStyleProp<IViewStyle>;
+    testID?: string;
+    nativeID?: string;
+    onLayout?: (event: ISymbioteEvent) => void;
+  };
+
+export type IGlassViewProps = IViewSurface & {
+  /**
+   * A style name or a config object that controls the animation
+   * @default 'regular'
+   */
+  glassEffectStyle?: IGlassStyle | IGlassEffectStyleConfig;
+  tintColor?: IColorValue;
+  /**
+   * @default false
+   */
+  isInteractive?: boolean;
+  /**
+   * Overrides the system appearance when the app has its own theme toggle
+   * @default 'auto'
+   */
+  colorScheme?: IGlassColorScheme;
+};
+
+export type IGlassContainerProps = IViewSurface & {
+  /** The distance at which glass elements start affecting each other */
+  spacing?: number;
+};
+
+// Эти ключи имеют смысл только у нативного view, у обычного View их быть не должно
+const GLASS_VIEW_KEYS: ReadonlySet<string> = new Set<keyof IGlassViewProps>([
+  'glassEffectStyle',
+  'tintColor',
+  'isInteractive',
+  'colorScheme',
+]);
+const GLASS_CONTAINER_KEYS: ReadonlySet<string> = new Set<
+  keyof IGlassContainerProps
+>(['spacing']);
+
+// Регистрация идёт при рендере: побочный эффект барреля теряется в release
+const views = defineExpoNativeViews(
+  requireNativeViewManager,
+  GLASS_EFFECT_MODULE_NAME,
+  { glass: GLASS_VIEW_NAME, container: GLASS_CONTAINER_NAME },
+);
+
+export const glassViewName = views.glass.name;
+export const glassContainerName = views.container.name;
+export const ensureGlassViewRegistered = views.glass.ensureRegistered;
+export const ensureGlassContainerRegistered = views.container.ensureRegistered;
+
+function runsOnIos(): boolean {
+  return Platform.select({ ios: true, default: false });
+}
+
+function withoutKeys(
+  props: object,
+  keys: ReadonlySet<string>,
+): Record<string, unknown> {
+  return Object.fromEntries(
+    Object.entries(props).filter(([key]) => !keys.has(key)),
+  );
+}
+
+// `object`, а не тип пропсов: Vue и Angular отдают нетипизированный набор атрибутов
+export function renderGlassView(props: object): IDescriptor {
+  if (!runsOnIos()) return el('view', withoutKeys(props, GLASS_VIEW_KEYS));
+  if (!ensureGlassViewRegistered()) {
+    console.warn('GlassView is not available on this platform');
+    return el('view', withoutKeys(props, GLASS_VIEW_KEYS));
+  }
+  return el(glassViewName(), { ...props });
+}
+
+export function renderGlassContainer(props: object): IDescriptor {
+  if (!runsOnIos()) {
+    return el('view', withoutKeys(props, GLASS_CONTAINER_KEYS));
+  }
+  if (!ensureGlassContainerRegistered()) {
+    console.warn('GlassContainer is not available on this platform');
+    return el('view', withoutKeys(props, GLASS_CONTAINER_KEYS));
+  }
+  return el(glassContainerName(), { ...props });
+}
+
+let isLiquidGlass: boolean | undefined;
+let isGlassApi: boolean | undefined;
+
+/**
+ * Whether the app renders with the Liquid Glass design, component availability only
+ * Accessibility settings can still limit the effect, see `AccessibilityInfo`
+ * @platform ios
+ */
+export function isLiquidGlassAvailable(): boolean {
+  if (!runsOnIos()) return false;
+  isLiquidGlass ??= !!Reflect.get(
+    requireNativeModule(GLASS_EFFECT_MODULE_NAME),
+    'isLiquidGlassAvailable',
+  );
+  return isLiquidGlass;
+}
+
+/**
+ * Whether the Liquid Glass API exists at runtime, some iOS 26 betas lack it and crash
+ * Check before using `GlassView` and `GlassContainer`
+ * @platform ios
+ */
+export function isGlassEffectAPIAvailable(): boolean {
+  if (!runsOnIos()) return false;
+  isGlassApi ??= !!Reflect.get(
+    requireNativeModule(GLASS_EFFECT_MODULE_NAME),
+    'isGlassEffectAPIAvailable',
+  );
+  return isGlassApi;
+}

package/src/core/index.ts

@@ -0,0 +1,16 @@
+export {
+  GLASS_EFFECT_MODULE_NAME,
+  ensureGlassContainerRegistered,
+  ensureGlassViewRegistered,
+  glassContainerName,
+  glassViewName,
+  isGlassEffectAPIAvailable,
+  isLiquidGlassAvailable,
+  renderGlassContainer,
+  renderGlassView,
+  type IGlassColorScheme,
+  type IGlassContainerProps,
+  type IGlassEffectStyleConfig,
+  type IGlassStyle,
+  type IGlassViewProps,
+} from './glass-effect';

package/src/react/glass-effect.ts

@@ -0,0 +1,34 @@
+import { createElement } from 'react';
+import type { ReactElement, ReactNode, RefObject } from 'react';
+import type { IHostInstance, IViewProps } from '@symbiote-native/react';
+import { renderGlassContainer, renderGlassView } from '../core';
+import type { IGlassContainerProps, IGlassViewProps } from '../core';
+
+// Поверхность View как у `ViewProps` в upstream, дети и `className` свои у React
+export type IGlassViewReactProps = IGlassViewProps &
+  Omit<IViewProps, keyof IGlassViewProps | 'children' | 'ref'> & {
+    ref?: RefObject<IHostInstance | null>;
+    children?: ReactNode;
+    className?: string;
+  };
+
+export type IGlassContainerReactProps = IGlassContainerProps &
+  Omit<IViewProps, keyof IGlassContainerProps | 'children' | 'ref'> & {
+    ref?: RefObject<IHostInstance | null>;
+    children?: ReactNode;
+    className?: string;
+  };
+
+/** React twin of `expo-glass-effect`'s `GlassView`, native on iOS and a plain View elsewhere */
+export function GlassView(props: IGlassViewReactProps): ReactElement {
+  const { children, ...rest } = props;
+  const descriptor = renderGlassView(rest);
+  return createElement(descriptor.type, descriptor.props, children);
+}
+
+/** React twin of `expo-glass-effect`'s `GlassContainer`, merges the glass views it holds */
+export function GlassContainer(props: IGlassContainerReactProps): ReactElement {
+  const { children, ...rest } = props;
+  const descriptor = renderGlassContainer(rest);
+  return createElement(descriptor.type, descriptor.props, children);
+}