achery-ui 0.8.1 → 0.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "achery-ui",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "description": "Achery Workshop design system — autumn alchemy, hard edges, botanical marginalia.",
   "repository": {
     "type": "git",

package/src/native/components/Glyph.tsx

@@ -2,11 +2,22 @@ import { View } from 'react-native'
 import type { ViewStyle } from 'react-native'
 import { useTheme } from '../theme/ThemeContext'
 import type { GlyphName } from '../../types/components'
-import * as NativeGlyphs from '../../glyphs/svg-components-native/index'
 
 const toComponentName = (name: GlyphName): string =>
   name.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join('')
 
+// Inline require() at render time — avoids the import* barrel forcing all
+// 396 react-native-svg component modules to initialise before native is ready.
+function getGlyphComponent(compName: string): React.ComponentType<{ size?: number; color?: string }> | null {
+  try {
+    // Metro resolves this as a static require map because the path prefix is constant.
+    const mod = require(`../../glyphs/svg-components-native/${compName}.tsx`)
+    return mod?.default ?? null
+  } catch {
+    return null
+  }
+}
+
 export interface NativeGlyphProps {
   /** Name of the glyph to render. */
   name: GlyphName
@@ -28,7 +39,7 @@ export const Glyph = ({ name, size = 24, color, accessibilityLabel, style }: Nat
   const { tokens } = useTheme()
   const resolvedColor = color ?? tokens.fg
   const compName = toComponentName(name)
-  const SvgComponent = (NativeGlyphs as Record<string, React.ComponentType<{ size?: number; color?: string }> | undefined>)[compName]
+  const SvgComponent = getGlyphComponent(compName)
 
   if (!SvgComponent) {
     return <View style={[{ width: size, height: size }, style]} accessibilityLabel={accessibilityLabel} />