@octopus-community/react-native 1.0.2 → 1.0.4

package/src/internals/colorSchemeManager.ts

@@ -0,0 +1,113 @@
+import { Appearance, AppState } from 'react-native';
+import { OctopusReactNativeSdk } from './nativeModule';
+import type { OctopusTheme } from '../initialize';
+
+let isListening = false;
+let currentColorScheme: string | null | undefined = null;
+
+/**
+ * Internal color scheme manager that automatically handles appearance changes
+ * and updates the native modules accordingly.
+ */
+export class ColorSchemeManager {
+  private static instance: ColorSchemeManager;
+  private appearanceSubscription: any = null;
+  private appStateSubscription: any = null;
+
+  private constructor() {}
+
+  static getInstance(): ColorSchemeManager {
+    if (!ColorSchemeManager.instance) {
+      ColorSchemeManager.instance = new ColorSchemeManager();
+    }
+    return ColorSchemeManager.instance;
+  }
+
+  /**
+   * Set the current theme for color scheme management
+   * Note: This is kept for API compatibility but theme updates are not used
+   * when the Octopus UI is open since the React Native app is backgrounded.
+   */
+  setTheme(_theme: OctopusTheme | null): void {
+    // Theme is set during initialization and applied when UI opens
+    // No need to store it here since updates can't happen while UI is open
+  }
+
+  /**
+   * Start listening to appearance changes and automatically update native modules
+   */
+  startListening(): void {
+    if (isListening) {
+      return;
+    }
+
+    isListening = true;
+    currentColorScheme = Appearance.getColorScheme();
+
+    // Listen to appearance changes
+    this.appearanceSubscription = Appearance.addChangeListener(
+      ({ colorScheme }) => {
+        currentColorScheme = colorScheme;
+        this.updateNativeColorScheme();
+      }
+    );
+
+    // Listen to app state changes to ensure we have the latest color scheme
+    this.appStateSubscription = AppState.addEventListener(
+      'change',
+      (nextAppState) => {
+        // Only check color scheme when app becomes active (foreground)
+        if (nextAppState === 'active') {
+          const newColorScheme = Appearance.getColorScheme();
+          if (newColorScheme !== currentColorScheme) {
+            currentColorScheme = newColorScheme;
+            this.updateNativeColorScheme();
+          }
+        }
+      }
+    );
+  }
+
+  /**
+   * Stop listening to appearance changes
+   */
+  stopListening(): void {
+    if (this.appearanceSubscription) {
+      this.appearanceSubscription.remove();
+      this.appearanceSubscription = null;
+    }
+
+    if (this.appStateSubscription) {
+      this.appStateSubscription.remove();
+      this.appStateSubscription = null;
+    }
+
+    isListening = false;
+  }
+
+  /**
+   * Get the current color scheme
+   */
+  getCurrentColorScheme(): string | null | undefined {
+    return currentColorScheme;
+  }
+
+  /**
+   * Update the native modules with the current color scheme
+   * Note: This is only called when the app becomes active (foreground).
+   * When the Octopus UI is open, the React Native app is backgrounded,
+   * so theme updates are not possible during UI display.
+   */
+  private updateNativeColorScheme(): void {
+    // Both platforms handle theme updates when the app becomes active
+    // iOS uses adaptive colors, Android applies the theme when UI reopens
+    try {
+      OctopusReactNativeSdk.updateColorScheme(currentColorScheme || undefined);
+    } catch (error) {
+      this.stopListening();
+    }
+  }
+}
+
+// Export singleton instance
+export const colorSchemeManager = ColorSchemeManager.getInstance();

package/src/internals/fontParser.ts

@@ -0,0 +1,64 @@
+import type { OctopusFonts } from '../initialize';
+
+/**
+ * Parsed font configuration for native platforms
+ */
+export interface ParsedFontConfig {
+  textStyles: Record<
+    string,
+    {
+      fontType?: string;
+      fontSize?: number;
+    }
+  >;
+}
+
+/**
+ * Parse font configuration from the theme and return a simplified structure
+ * that can be easily consumed by native platforms.
+ *
+ * This centralizes the font parsing logic to avoid duplication across platforms.
+ */
+export function parseFontConfig(fonts?: OctopusFonts): ParsedFontConfig | null {
+  if (!fonts?.textStyles) {
+    return null;
+  }
+
+  const textStyles: Record<string, { fontType?: string; fontSize?: number }> =
+    {};
+
+  // Define the text style keys that are supported
+  const supportedTextStyles = [
+    'title1',
+    'title2',
+    'body1',
+    'body2',
+    'caption1',
+    'caption2',
+  ];
+
+  for (const key of supportedTextStyles) {
+    const textStyle = fonts.textStyles[key as keyof typeof fonts.textStyles];
+    if (textStyle) {
+      const parsedStyle: { fontType?: string; fontSize?: number } = {};
+
+      // Parse font type
+      if (textStyle.fontType) {
+        parsedStyle.fontType = textStyle.fontType;
+      }
+
+      // Parse font size
+      if (textStyle.fontSize?.size) {
+        parsedStyle.fontSize = textStyle.fontSize.size;
+      }
+
+      // Only include the style if it has at least one property
+      if (parsedStyle.fontType || parsedStyle.fontSize) {
+        textStyles[key] = parsedStyle;
+      }
+    }
+  }
+
+  // Return null if no text styles were parsed
+  return Object.keys(textStyles).length > 0 ? { textStyles } : null;
+}