react-native-tinyui 0.4.0 → 0.5.0

package/src/LiquidGlassText/LiquidGlassTextNativeComponent.ts

@@ -1,23 +1,13 @@
 import {
   codegenNativeComponent,
+  type CodegenTypes,
   type ColorValue,
   type ViewProps,
 } from 'react-native';
-import type {
-  DirectEventHandler,
-  Double,
-} from 'react-native/Libraries/Types/CodegenTypes';
 
 export interface NativeLiquidGlassTextProps extends ViewProps {
-  configuration: string;
+  configuration: CodegenTypes.UnsafeMixed;
   tintColor?: ColorValue;
-  onContentSizeChange?: DirectEventHandler<
-    Readonly<{
-      width: Double;
-      height: Double;
-      configuration: string;
-    }>
-  >;
 }
 
 export default codegenNativeComponent<NativeLiquidGlassTextProps>(

package/src/LiquidGlassText/index.tsx

@@ -1,21 +1,63 @@
-import { forwardRef, useState, type ComponentRef } from 'react';
-import type { View } from 'react-native';
+import { forwardRef, type ComponentRef } from 'react';
+import { StyleSheet, type TextStyle, type View } from 'react-native';
 
 import { assertComponentEnabled } from '../utils';
 import type { LiquidGlassTextProps } from './types';
 import NativeLiquidGlassTextView from './LiquidGlassTextNativeComponent';
 
+function normalizeFontWeight(
+  fontWeight: TextStyle['fontWeight']
+): string | undefined {
+  if (fontWeight == null) {
+    return undefined;
+  }
+
+  const value = String(fontWeight);
+  const aliases: Readonly<Record<string, string>> = {
+    'normal': 'regular',
+    'ultralight': 'ultraLight',
+    'condensed': 'regular',
+    'condensedBold': 'bold',
+    '100': 'ultraLight',
+    '200': 'thin',
+    '300': 'light',
+    '400': 'regular',
+    '500': 'medium',
+    '600': 'semibold',
+    '700': 'bold',
+    '800': 'heavy',
+    '900': 'black',
+  };
+  return aliases[value] ?? value;
+}
+
+function resolveAlignment(
+  textAlign: TextStyle['textAlign']
+): 'leading' | 'center' | 'trailing' | undefined {
+  switch (textAlign) {
+    case 'center':
+      return 'center';
+    case 'right':
+      return 'trailing';
+    case 'left':
+      return 'leading';
+    default:
+      return undefined;
+  }
+}
+
 export const LiquidGlassText = forwardRef<
   ComponentRef<typeof View>,
   LiquidGlassTextProps
 >(function LiquidGlassTextRoot(
   {
     text,
-    glass = 'clear',
-    font = 'body',
-    fontWeight,
+    effect = 'clear',
+    tint,
+    interactive = false,
     fontDesign,
-    multilineTextAlignment = 'leading',
+    textStyle,
+    multilineTextAlignment,
     style,
     accessibilityLabel,
     accessible = true,
@@ -26,20 +68,29 @@ export const LiquidGlassText = forwardRef<
 ) {
   assertComponentEnabled('LiquidGlassText');
 
-  const [measurement, setMeasurement] = useState({
-    width: 0,
-    height: 0,
-  });
-  const configuration = JSON.stringify({
+  const flattenedTextStyle = StyleSheet.flatten(textStyle);
+  const normalizedTextStyle = flattenedTextStyle
+    ? {
+        fontSize: flattenedTextStyle.fontSize,
+        fontFamily: flattenedTextStyle.fontFamily,
+        fontWeight: normalizeFontWeight(flattenedTextStyle.fontWeight),
+        fontStyle: flattenedTextStyle.fontStyle,
+        letterSpacing: flattenedTextStyle.letterSpacing,
+      }
+    : undefined;
+  const resolvedAlignment =
+    multilineTextAlignment ??
+    resolveAlignment(flattenedTextStyle?.textAlign) ??
+    'leading';
+
+  const configuration = {
     text,
-    glass: typeof glass === 'string' ? glass : (glass.effect ?? 'clear'),
-    interactive: typeof glass === 'object' && (glass.interactive ?? false),
-    font: typeof font === 'string' ? { style: font } : font,
-    fontWeight,
+    effect,
+    interactive,
     fontDesign,
-    multilineTextAlignment,
-  });
-
+    ...(normalizedTextStyle ? { textStyle: normalizedTextStyle } : {}),
+    multilineTextAlignment: resolvedAlignment,
+  };
   return (
     <NativeLiquidGlassTextView
       {...viewProps}
@@ -48,32 +99,15 @@ export const LiquidGlassText = forwardRef<
       accessibilityRole={accessibilityRole}
       accessibilityLabel={accessibilityLabel ?? text}
       configuration={configuration}
-      tintColor={typeof glass === 'object' ? glass.tint : undefined}
-      style={[{ width: measurement.width, height: measurement.height }, style]}
-      onContentSizeChange={({ nativeEvent }) => {
-        // Ignore measurements queued before a newer text/font update.
-        if (nativeEvent.configuration !== configuration) {
-          return;
-        }
-        setMeasurement((previous) =>
-          previous.width === nativeEvent.width &&
-          previous.height === nativeEvent.height
-            ? previous
-            : {
-                width: nativeEvent.width,
-                height: nativeEvent.height,
-              }
-        );
-      }}
+      tintColor={tint ?? flattenedTextStyle?.color}
+      style={style}
     />
   );
 });
 
 export type {
-  LiquidGlassTextFont,
   LiquidGlassTextFontDesign,
-  LiquidGlassTextFontStyle,
-  LiquidGlassTextFontWeight,
-  LiquidGlassTextGlass,
+  LiquidGlassTextEffect,
   LiquidGlassTextProps,
+  LiquidGlassTextStyle,
 } from './types';

package/src/LiquidGlassText/types.ts

@@ -1,63 +1,37 @@
-import type { ColorValue, ViewProps } from 'react-native';
+import type { ColorValue, StyleProp, TextStyle, ViewProps } from 'react-native';
 
 export type LiquidGlassTextFontDesign =
   'default' | 'serif' | 'monospaced' | 'rounded';
 
-export type LiquidGlassTextFontWeight =
-  | 'ultraLight'
-  | 'thin'
-  | 'light'
-  | 'regular'
-  | 'medium'
-  | 'semibold'
-  | 'bold'
-  | 'heavy'
-  | 'black';
+export type LiquidGlassTextEffect = 'clear' | 'regular' | 'identity';
 
-export type LiquidGlassTextFontStyle =
-  | 'largeTitle'
-  | 'title'
-  | 'title2'
-  | 'title3'
-  | 'headline'
-  | 'subheadline'
-  | 'body'
-  | 'callout'
-  | 'footnote'
-  | 'caption'
-  | 'caption2';
-
-export type LiquidGlassTextFont =
-  | LiquidGlassTextFontStyle
-  | Readonly<{
-      size: number;
-      weight?: LiquidGlassTextFontWeight;
-      design?: LiquidGlassTextFontDesign;
-      /** PostScript name of a font installed in the containing app. */
-      family?: string;
-    }>;
-
-export type LiquidGlassTextGlass =
-  | 'clear'
-  | 'regular'
-  | 'identity'
-  | Readonly<{
-      effect?: 'clear' | 'regular' | 'identity';
-      tint?: ColorValue;
-      interactive?: boolean;
-    }>;
+/** React Native text styles supported by the native glass renderer. */
+export type LiquidGlassTextStyle = Readonly<
+  Pick<
+    TextStyle,
+    | 'color'
+    | 'fontFamily'
+    | 'fontSize'
+    | 'fontStyle'
+    | 'fontWeight'
+    | 'letterSpacing'
+    | 'textAlign'
+  >
+>;
 
 export interface LiquidGlassTextProps extends Omit<ViewProps, 'children'> {
   /** Text to display. Pass translated strings from JavaScript if needed. */
   text: string;
-  /** Defaults to clear. Native glass requires iOS 26+. */
-  glass?: LiquidGlassTextGlass;
-  /** SwiftUI text style or an explicit system/custom font. Defaults to body. */
-  font?: LiquidGlassTextFont;
-  /** Overrides the weight specified in font. */
-  fontWeight?: LiquidGlassTextFontWeight;
-  /** Overrides the design specified in font. */
+  /** Glass effect. Defaults to clear. Native glass requires iOS 26+. */
+  effect?: LiquidGlassTextEffect;
+  /** Glass tint and fallback text color. */
+  tint?: ColorValue;
+  /** Whether the glass responds to pointer and touch interaction. */
+  interactive?: boolean;
+  /** Overrides the system font design. */
   fontDesign?: LiquidGlassTextFontDesign;
+  /** Familiar React Native text styles. Explicit alignment takes precedence. */
+  textStyle?: StyleProp<LiquidGlassTextStyle>;
   /** Aligns explicit newline-separated lines. Defaults to leading. */
   multilineTextAlignment?: 'leading' | 'center' | 'trailing';
 }

package/src/Menu/MenuNativeComponent.ts

@@ -1,8 +1,12 @@
-import { codegenNativeComponent, type ViewProps } from 'react-native';
+import {
+  codegenNativeComponent,
+  type CodegenTypes,
+  type ViewProps,
+} from 'react-native';
 import type { DirectEventHandler } from 'react-native/Libraries/Types/CodegenTypes';
 
 export interface NativeMenuProps extends ViewProps {
-  menuConfig: string;
+  menuConfig: CodegenTypes.UnsafeMixed;
   title?: string;
   disabled?: boolean;
   hasPrimaryAction?: boolean;

package/src/Menu/options.ts

@@ -48,8 +48,12 @@ type NativeMenuElement =
   | NativeMenuSection
   | NativeMenuSeparator;
 
+interface NativeMenuConfiguration {
+  items: NativeMenuElement[];
+}
+
 export interface SerializedMenuOptions {
-  config: string;
+  config: NativeMenuConfiguration;
   callbacks: Map<string, () => void>;
 }
 
@@ -65,7 +69,7 @@ export function serializeMenuOptions(
 
   return {
     callbacks,
-    config: JSON.stringify({ items }),
+    config: { items },
   };
 }
 

package/src/index.tsx

@@ -24,10 +24,8 @@ export type { TinyuiComponent } from './utils';
 
 export { LiquidGlassText } from './LiquidGlassText';
 export type {
-  LiquidGlassTextFont,
   LiquidGlassTextFontDesign,
-  LiquidGlassTextFontStyle,
-  LiquidGlassTextFontWeight,
-  LiquidGlassTextGlass,
+  LiquidGlassTextEffect,
   LiquidGlassTextProps,
+  LiquidGlassTextStyle,
 } from './LiquidGlassText';