@metacells/mcellui-core 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metacells/mcellui-core",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Core theme system and utilities for mcellui - React Native UI components",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/config/ConfigProvider.tsx

@@ -6,9 +6,20 @@
  *
  * @example
  * ```tsx
- * // App.tsx
+ * // App.tsx - with auto-config (requires metro-plugin)
  * import { ConfigProvider } from '@nativeui/core';
- * import config from './nativeui.config';
+ *
+ * export default function App() {
+ *   return (
+ *     <ConfigProvider>
+ *       <YourApp />
+ *     </ConfigProvider>
+ *   );
+ * }
+ *
+ * // App.tsx - with explicit config
+ * import { ConfigProvider } from '@nativeui/core';
+ * import config from './mcellui.config';
  *
  * export default function App() {
  *   return (
@@ -25,6 +36,17 @@ import { ThemeProvider, ThemeProviderProps } from '../theme/ThemeProvider';
 import { NativeUIConfig, ResolvedNativeUIConfig } from './types';
 import { resolveConfig } from './defineConfig';
 
+// Try to load auto-config from metro-plugin (if configured)
+let autoConfig: NativeUIConfig = {};
+try {
+  // This module is resolved by @metacells/mcellui-metro-plugin
+  // to either the user's config file or an empty default
+  autoConfig = require('@mcellui/auto-config').default ?? {};
+} catch {
+  // Metro plugin not configured, use empty default
+  autoConfig = {};
+}
+
 // Config context for accessing raw config values
 const ConfigContext = createContext<ResolvedNativeUIConfig | null>(null);
 
@@ -60,8 +82,11 @@ export interface ConfigProviderProps {
 }
 
 /**
- * ConfigProvider combines your nativeui.config.ts with ThemeProvider.
+ * ConfigProvider combines your mcellui.config.ts with ThemeProvider.
  * Use this as the root of your app for the easiest setup.
+ *
+ * If no config is provided and @metacells/mcellui-metro-plugin is set up,
+ * it will automatically load your mcellui.config.ts file.
  */
 export function ConfigProvider({
   config,
@@ -70,8 +95,11 @@ export function ConfigProvider({
   radius,
   children,
 }: ConfigProviderProps) {
+  // Use provided config, or fall back to auto-discovered config
+  const effectiveConfig = config ?? autoConfig;
+
   // Resolve config with defaults
-  const resolvedConfig = useMemo(() => resolveConfig(config), [config]);
+  const resolvedConfig = useMemo(() => resolveConfig(effectiveConfig), [effectiveConfig]);
 
   // Props can override config values
   const finalTheme = theme ?? resolvedConfig.theme;

package/src/theme/ThemeProvider.tsx

@@ -24,6 +24,7 @@ import React, { createContext, useContext, useMemo, useState, useCallback, useEf
 import { useColorScheme, ViewStyle } from 'react-native';
 import { lightColors, darkColors, ThemeColors } from './colors';
 import { setHapticsEnabled } from '../utils/haptics';
+import { setAnimationsDisabled, isExpoGo } from '../utils/expoGo';
 import { spacing } from './spacing';
 import {
   createRadius,
@@ -251,6 +252,24 @@ export interface ThemeProviderProps {
    */
   animationPreset?: AnimationPreset;
 
+  /**
+   * Enable or disable animations globally.
+   * - `true`: Force enable animations
+   * - `false`: Force disable animations (components will use static styles)
+   * - `'auto'`: Automatically detect - disable in Expo Go, enable in dev/prod builds
+   * @default 'auto'
+   *
+   * @example
+   * ```tsx
+   * // Auto-detect (disabled in Expo Go)
+   * <ThemeProvider animations="auto">
+   *
+   * // Force disable for testing or accessibility
+   * <ThemeProvider animations={false}>
+   * ```
+   */
+  animations?: boolean | 'auto';
+
   /** Children components */
   children: ReactNode;
 }
@@ -265,6 +284,7 @@ export function ThemeProvider({
   darkColors: darkColorOverrides,
   haptics = true,
   animationPreset = defaultAnimationPreset,
+  animations = 'auto',
   children,
 }: ThemeProviderProps) {
   const systemColorScheme = useColorScheme();
@@ -275,6 +295,17 @@ export function ThemeProvider({
     setHapticsEnabled(haptics);
   }, [haptics]);
 
+  // Set global animations enabled state
+  useEffect(() => {
+    if (animations === 'auto') {
+      // Use automatic detection (Expo Go = disabled)
+      setAnimationsDisabled(null);
+    } else {
+      // Use explicit override
+      setAnimationsDisabled(!animations);
+    }
+  }, [animations]);
+
   const setColorScheme = useCallback((newPreference: ColorSchemePreference) => {
     setPreference(newPreference);
   }, []);

package/src/theme/animations.ts

@@ -7,8 +7,6 @@
  * Inspired by iOS 17+ animations and Linear App micro-interactions.
  */
 
-import { Easing, EasingFunction } from 'react-native-reanimated';
-
 // Type definitions for Reanimated-compatible configs
 export interface SpringConfig {
   damping?: number;
@@ -20,15 +18,19 @@ export interface SpringConfig {
   velocity?: number;
 }
 
+// Generic easing function type that works with or without Reanimated
+type EasingFn = (t: number) => number;
+
 export interface TimingConfig {
   duration?: number;
-  easing?: EasingFunction;
+  easing?: EasingFn;
 }
 
-// Common easing functions using Reanimated's Easing module (worklet-compatible)
-const easeOutQuad = Easing.out(Easing.quad);
-const easeOutCubic = Easing.out(Easing.cubic);
-const easeInQuad = Easing.in(Easing.quad);
+// Simple easing functions that don't require Reanimated
+// These are compatible with both Reanimated and standard Animated API
+const easeOutQuad: EasingFn = (t) => t * (2 - t);
+const easeOutCubic: EasingFn = (t) => 1 - Math.pow(1 - t, 3);
+const easeInQuad: EasingFn = (t) => t * t;
 
 /**
  * Spring configurations for different animation contexts

package/src/utils/expoGo.ts

@@ -0,0 +1,72 @@
+/**
+ * Expo Go Detection Utility
+ *
+ * Provides detection for Expo Go environment to gracefully disable
+ * Reanimated animations when running in Expo Go client.
+ *
+ * @example
+ * ```tsx
+ * import { isExpoGo, areAnimationsDisabled } from '@nativeui/core';
+ *
+ * // Check environment
+ * if (isExpoGo()) {
+ *   console.log('Running in Expo Go');
+ * }
+ *
+ * // Check if animations should be disabled
+ * if (areAnimationsDisabled()) {
+ *   // Skip animation, use static styles
+ * }
+ * ```
+ */
+
+let executionEnvironment: string | undefined;
+
+// Try to load expo-constants at module load time
+try {
+  // Dynamic require to avoid bundler issues when expo-constants is not available
+  const Constants = require('expo-constants').default;
+  executionEnvironment = Constants?.executionEnvironment;
+} catch {
+  // expo-constants not available - not in Expo environment
+  executionEnvironment = undefined;
+}
+
+/**
+ * Check if the app is running in Expo Go client.
+ * Returns false in development builds, production builds, or non-Expo environments.
+ */
+export function isExpoGo(): boolean {
+  return executionEnvironment === 'storeClient';
+}
+
+// Internal state for animation override
+let animationsDisabledOverride: boolean | null = null;
+
+/**
+ * Manually override the animation disabled state.
+ * Set to `true` to force disable animations, `false` to force enable,
+ * or `null` to use automatic detection (Expo Go = disabled).
+ *
+ * @param disabled - Override value or null for automatic
+ */
+export function setAnimationsDisabled(disabled: boolean | null): void {
+  animationsDisabledOverride = disabled;
+}
+
+/**
+ * Check if animations should be disabled.
+ * Returns true if:
+ * - Manually overridden to true via setAnimationsDisabled(true)
+ * - Running in Expo Go (automatic detection)
+ *
+ * Returns false if:
+ * - Manually overridden to false via setAnimationsDisabled(false)
+ * - Running in development/production build
+ */
+export function areAnimationsDisabled(): boolean {
+  if (animationsDisabledOverride !== null) {
+    return animationsDisabledOverride;
+  }
+  return isExpoGo();
+}

package/src/utils/index.ts

@@ -26,3 +26,8 @@ export {
   hapticPresets,
   type HapticStyle,
 } from './haptics';
+export {
+  isExpoGo,
+  setAnimationsDisabled,
+  areAnimationsDisabled,
+} from './expoGo';