react-native-tinyui 0.4.0 → 1.0.0

package/src/ConcentricView/types.ts

@@ -0,0 +1,6 @@
+import type { ViewProps } from 'react-native';
+
+export interface ConcentricViewProps extends ViewProps {
+  /** Fixed fallback radius on iOS < 26. Defaults to 0. Ignored on iOS 26+. */
+  minimumRadius?: number;
+}

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,13 +1,15 @@
-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;
-  onItemPress?: DirectEventHandler<Readonly<{ id: string }>>;
-  onPrimaryAction?: DirectEventHandler<null>;
+  onActionPress?: DirectEventHandler<Readonly<{ id: string; title: string }>>;
 }
 
 export default codegenNativeComponent<NativeMenuProps>('TinyuiMenuView', {

package/src/Menu/index.tsx

@@ -11,7 +11,7 @@ const MenuRoot = forwardRef<ComponentRef<typeof View>, MenuProps>(function Menu(
     accessibilityLabel,
     children,
     disabled,
-    onPrimaryAction,
+    onActionPress,
     options,
     title,
     testID,
@@ -21,17 +21,15 @@ const MenuRoot = forwardRef<ComponentRef<typeof View>, MenuProps>(function Menu(
 ) {
   assertComponentEnabled('Menu');
 
-  const { config, callbacks } = serializeMenuOptions(options);
+  const menuConfig = serializeMenuOptions(options);
 
   return (
     <View {...viewProps} ref={ref} collapsable={false}>
       <NativeMenuView
         accessibilityLabel={accessibilityLabel}
         disabled={disabled}
-        hasPrimaryAction={onPrimaryAction != null}
-        menuConfig={config}
-        onItemPress={(event) => callbacks.get(event.nativeEvent.id)?.()}
-        onPrimaryAction={onPrimaryAction}
+        menuConfig={menuConfig}
+        onActionPress={onActionPress}
         testID={testID}
         title={title}
       >
@@ -45,6 +43,8 @@ export const Menu = MenuRoot as MenuComponent;
 
 export type {
   MenuActionOption,
+  MenuActionPressEvent,
+  MenuActionPressEventData,
   MenuDividerOption,
   MenuItemState,
   MenuOption,

package/src/Menu/options.ts

@@ -48,9 +48,8 @@ type NativeMenuElement =
   | NativeMenuSection
   | NativeMenuSeparator;
 
-export interface SerializedMenuOptions {
-  config: string;
-  callbacks: Map<string, () => void>;
+interface NativeMenuConfiguration {
+  items: NativeMenuElement[];
 }
 
 function serializeColor(color: ColorValue | undefined): NativeMenuColor {
@@ -59,19 +58,12 @@ function serializeColor(color: ColorValue | undefined): NativeMenuColor {
 
 export function serializeMenuOptions(
   options: readonly MenuOption[]
-): SerializedMenuOptions {
-  const callbacks = new Map<string, () => void>();
-  const items = serializeOptions(options, callbacks, new Set(), 'root');
-
-  return {
-    callbacks,
-    config: JSON.stringify({ items }),
-  };
+): NativeMenuConfiguration {
+  return { items: serializeOptions(options, new Set(), 'root') };
 }
 
 function serializeOptions(
   options: readonly MenuOption[],
-  callbacks: Map<string, () => void>,
   usedIds: Set<string>,
   path: string
 ): NativeMenuElement[] {
@@ -97,7 +89,6 @@ function serializeOptions(
         displayInline: option.displayInline ?? false,
         children: serializeOptions(
           option.options,
-          callbacks,
           usedIds,
           `${optionPath}.submenu`
         ),
@@ -110,7 +101,6 @@ function serializeOptions(
         title: option.title,
         children: serializeOptions(
           option.options,
-          callbacks,
           usedIds,
           `${optionPath}.section`
         ),
@@ -123,10 +113,6 @@ function serializeOptions(
     }
     usedIds.add(id);
 
-    if (option.onSelect) {
-      callbacks.set(id, option.onSelect);
-    }
-
     return {
       type: 'action',
       id,

package/src/Menu/types.ts

@@ -17,7 +17,11 @@ interface MenuOptionLabel {
   icon?: string;
   /** Tint applied to `icon` or `systemImage`. */
   iconColor?: ColorValue;
-  /** Foreground color applied to the option title. */
+  /**
+   * Retained for source compatibility. UIKit menu elements don't expose a
+   * public custom title-color API; use `destructive` for system red styling.
+   * @deprecated UIKit ignores custom menu title colors.
+   */
   titleColor?: ColorValue;
 }
 
@@ -32,7 +36,6 @@ export interface MenuActionOption extends MenuOptionLabel {
   hidden?: boolean;
   /** Keep the menu visible after selection on iOS 16 and newer. */
   keepOpen?: boolean;
-  onSelect?: () => void;
 }
 
 export interface MenuSubmenuOption extends MenuOptionLabel {
@@ -61,6 +64,17 @@ export interface MenuDividerOption {
 export type MenuOption =
   MenuActionOption | MenuSubmenuOption | MenuSectionOption | MenuDividerOption;
 
+export interface MenuActionPressEventData {
+  /** The selected action's explicit id, or its generated menu-path id. */
+  id: string;
+  /** The selected action's displayed title. */
+  title: string;
+}
+
+export type MenuActionPressEvent = Readonly<{
+  nativeEvent: Readonly<MenuActionPressEventData>;
+}>;
+
 export interface MenuProps extends Omit<ViewProps, 'children'> {
   /** The trigger element. */
   children: ReactNode;
@@ -70,8 +84,8 @@ export interface MenuProps extends Omit<ViewProps, 'children'> {
   options: readonly MenuOption[];
   /** Prevents the trigger from opening the menu. */
   disabled?: boolean;
-  /** Called on a normal tap. When set, a long press opens the menu. */
-  onPrimaryAction?: () => void;
+  /** Called whenever an enabled action is selected. */
+  onActionPress?: (event: MenuActionPressEvent) => void;
 }
 
 export interface MenuComponent extends ForwardRefExoticComponent<

package/src/NativeTinyui.ts

@@ -7,6 +7,8 @@ export interface Spec extends TurboModule {
    * based on the `react-native-tinyui.components` array in package.json.
    */
   getEnabledComponents(): ReadonlyArray<string>;
+  configureTips(displayFrequency: string): Promise<void>;
+  invalidateTip(tipId: string, reason: string): Promise<void>;
 }
 
 export default TurboModuleRegistry.get<Spec>('Tinyui');

package/src/Popover/index.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, useCallback, useState, type ComponentRef } from 'react';
 import type { ReactNode } from 'react';
-import { PlatformColor, Pressable, StyleSheet, View } from 'react-native';
+import { Pressable, StyleSheet, View } from 'react-native';
 
 import { assertComponentEnabled } from '../utils';
 import { PopoverClose } from './PopoverClose';
@@ -59,7 +59,11 @@ const PopoverRoot = forwardRef<ComponentRef<typeof View>, PopoverProps>(
           }}
         >
           <Pressable onPress={() => setOpen(true)}>{children}</Pressable>
-          <View style={styles.content} pointerEvents="box-none">
+          <View
+            collapsable={false}
+            style={styles.content}
+            pointerEvents="box-none"
+          >
             {renderedContent}
           </View>
         </NativePopoverView>
@@ -78,7 +82,8 @@ function renderContent(
 const styles = StyleSheet.create({
   content: {
     position: 'absolute',
-    backgroundColor: PlatformColor('systemBackground'),
+    top: 0,
+    left: 0,
     overflow: 'hidden',
   },
 });

package/src/Popover/types.ts

@@ -27,6 +27,8 @@ export interface PopoverProps extends Omit<ViewProps, 'children'> {
   /**
    * Content shown inside the popover. Pass a node, or a render function that
    * receives `{ close }` to dismiss the popover from within the content.
+   * The content's layout determines the popover size, including live updates.
+   * Leave its background transparent to reveal the system popover material.
    */
   content: PopoverContent;
   /** Controlled presentation state. */

package/src/SFSymbol/SFSymbolNativeComponent.ts

@@ -0,0 +1,20 @@
+import {
+  codegenNativeComponent,
+  type CodegenTypes,
+  type ViewProps,
+} from 'react-native';
+
+export interface NativeSFSymbolProps extends ViewProps {
+  configuration: CodegenTypes.UnsafeMixed;
+  effects: CodegenTypes.UnsafeMixed;
+  contentTransition: CodegenTypes.UnsafeMixed;
+  resizeMode?: CodegenTypes.WithDefault<string, 'center'>;
+  respectReduceMotion?: CodegenTypes.WithDefault<boolean, true>;
+}
+
+export default codegenNativeComponent<NativeSFSymbolProps>(
+  'TinyuiSFSymbolView',
+  {
+    excludedPlatforms: ['android'],
+  }
+);

package/src/SFSymbol/index.tsx

@@ -0,0 +1,89 @@
+import { forwardRef, type ComponentRef } from 'react';
+import { StyleSheet, useWindowDimensions, type View } from 'react-native';
+
+import { assertComponentEnabled } from '../utils';
+import NativeSFSymbolView from './SFSymbolNativeComponent';
+import { serializeSFSymbol } from './options';
+import type { SFSymbolProps } from './types';
+
+export const SFSymbol = forwardRef<ComponentRef<typeof View>, SFSymbolProps>(
+  function SFSymbolRoot(
+    {
+      name,
+      source,
+      size,
+      weight,
+      scale,
+      textStyle,
+      fontFamily,
+      allowFontScaling,
+      maxFontSizeMultiplier,
+      renderingMode,
+      color,
+      paletteColors,
+      variableValue,
+      variableValueMode,
+      colorRenderingMode,
+      effect,
+      contentTransition,
+      respectReduceMotion = true,
+      resizeMode = 'center',
+      style,
+      accessible = false,
+      accessibilityRole = 'image',
+      ...viewProps
+    },
+    ref
+  ) {
+    assertComponentEnabled('SFSymbol');
+    const { fontScale } = useWindowDimensions();
+    const serialized = serializeSFSymbol(
+      {
+        name,
+        source,
+        size,
+        weight,
+        scale,
+        textStyle,
+        fontFamily,
+        allowFontScaling,
+        maxFontSizeMultiplier,
+        renderingMode,
+        color,
+        paletteColors,
+        variableValue,
+        variableValueMode,
+        colorRenderingMode,
+        effect,
+        contentTransition,
+      },
+      fontScale
+    );
+
+    return (
+      <NativeSFSymbolView
+        {...viewProps}
+        {...serialized}
+        ref={ref}
+        accessible={accessible}
+        accessibilityRole={accessibilityRole}
+        respectReduceMotion={respectReduceMotion}
+        resizeMode={resizeMode}
+        style={[styles.symbol, style]}
+      />
+    );
+  }
+);
+
+const styles = StyleSheet.create({ symbol: { alignSelf: 'flex-start' } });
+
+export type {
+  SFSymbolContentTransition,
+  SFSymbolEffect,
+  SFSymbolEffectOptions,
+  SFSymbolProps,
+  SFSymbolRenderingMode,
+  SFSymbolScale,
+  SFSymbolTextStyle,
+  SFSymbolWeight,
+} from './types';