@crystin001/theme-settings-lib 1.0.0

package/README.md

@@ -0,0 +1,368 @@
+# Theme & Settings Library
+
+A reusable library for theme management, settings, and internationalization that can be shared across multiple React Native applications.
+
+## Features
+
+- 🎨 **Multiple Theme Families** - 8 theme families with light and dark variants
+- 🌍 **Internationalization** - Built-in i18n support with extensible translations
+- 💾 **Persistent Settings** - Theme and language preferences saved automatically
+- ♿ **Accessibility** - WCAG-compliant contrast utilities
+- 🔧 **Type-Safe** - Full TypeScript support with declaration files
+
+## Installation
+
+### Option A: Git Repository (Recommended)
+
+Add to your `package.json`:
+
+```json
+{
+  "dependencies": {
+    "@crystin001/theme-settings-lib": "git+https://github.com/trial-and-code/theme-settings-lib.git"
+  }
+}
+```
+
+Then run `npm install`.
+
+To install a specific version or branch:
+
+```json
+{
+  "dependencies": {
+    "@crystin001/theme-settings-lib": "git+https://github.com/trial-and-code/theme-settings-lib.git#v1.0.0"
+  }
+}
+```
+
+### Option B: Local Package (Monorepo)
+
+If the library is in the same repository:
+
+```json
+{
+  "dependencies": {
+    "@crystin001/theme-settings-lib": "file:../packages/theme-settings-lib"
+  }
+}
+```
+
+### Option C: npm Package (Future)
+
+```bash
+npm install @crystin001/theme-settings-lib
+```
+
+## Usage
+
+### 1. Wrap Your App with SettingsProvider
+
+Wrap your root component with `SettingsProvider` to enable theme and settings management:
+
+```tsx
+// app/_layout.tsx or App.tsx
+import { SettingsProvider } from '@crystin001/theme-settings-lib';
+import { Stack } from 'expo-router';
+
+export default function RootLayout() {
+  return (
+    <SettingsProvider>
+      <Stack>
+        {/* Your app screens */}
+      </Stack>
+    </SettingsProvider>
+  );
+}
+```
+
+### 2. Use Theme Hooks in Your Components
+
+Access theme colors and settings in your components:
+
+```tsx
+import { View, Text, Button } from 'react-native';
+import { useTheme, useSettings } from '@crystin001/theme-settings-lib';
+
+function MyComponent() {
+  const colors = useTheme();
+  const { setThemeFamily } = useSettings();
+
+  return (
+    <View style={{ backgroundColor: colors.background }}>
+      <Text style={{ color: colors.text }}>Hello World</Text>
+      <Button 
+        onPress={() => setThemeFamily('neon-surf')} 
+        title="Change to Neon Surf" 
+      />
+    </View>
+  );
+}
+```
+
+### 3. Use Translations
+
+Access translations using the `useTranslation` hook:
+
+```tsx
+import { Text } from 'react-native';
+import { useTranslation } from '@crystin001/theme-settings-lib';
+
+function MyComponent() {
+  const { t } = useTranslation();
+
+  return (
+    <Text>{t('common.welcome')}</Text>
+  );
+}
+```
+
+### 4. Get Specific Theme Colors
+
+Use `useThemeColor` to get specific colors from the current theme:
+
+```tsx
+import { View, Text } from 'react-native';
+import { useThemeColor } from '@crystin001/theme-settings-lib';
+
+function MyComponent() {
+  const backgroundColor = useThemeColor({}, 'background');
+  const textColor = useThemeColor({}, 'text');
+  const primaryColor = useThemeColor({}, 'primary');
+
+  return (
+    <View style={{ backgroundColor }}>
+      <Text style={{ color: textColor }}>Primary: {primaryColor}</Text>
+    </View>
+  );
+}
+```
+
+### 5. Extend Translations
+
+Add app-specific translations by extending the i18n instance:
+
+```tsx
+import { i18n } from '@crystin001/theme-settings-lib';
+
+// Add custom translations
+i18n.addResourceBundle('en-US', 'translation', {
+  myFeature: {
+    title: 'My Feature',
+    description: 'This is my feature',
+  },
+}, true, true);
+```
+
+### 6. Complete Example: Integration with React Navigation
+
+Here's a complete example showing integration with React Navigation:
+
+```tsx
+// app/_layout.tsx
+import { Stack } from 'expo-router';
+import { StatusBar } from 'expo-status-bar';
+import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
+import { SettingsProvider, useSettings } from '@crystin001/theme-settings-lib';
+
+function RootLayoutNav() {
+  const { currentTheme } = useSettings();
+  const isDarkTheme = currentTheme.endsWith('-dark');
+
+  return (
+    <ThemeProvider value={isDarkTheme ? DarkTheme : DefaultTheme}>
+      <Stack>
+        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+      </Stack>
+      <StatusBar style={isDarkTheme ? 'light' : 'dark'} />
+    </ThemeProvider>
+  );
+}
+
+export default function RootLayout() {
+  return (
+    <SettingsProvider>
+      <RootLayoutNav />
+    </SettingsProvider>
+  );
+}
+```
+
+## Available Theme Families
+
+- **System** - Follows device theme preference (default)
+- **Neon Surf** - Vibrant neon colors (hot pink, cyan, yellow, orange)
+- **Pink & Purple** - Soft purple and pink tones
+- **Pastel** - Gentle pastel colors
+- **GitHub** - GitHub-inspired theme
+- **High Contrast** - Maximum contrast for accessibility
+- **Solarized** - Solarized color scheme
+- **Dark Plus** - Dark theme with blue accents
+
+Each theme family has both light and dark variants that automatically switch based on device settings.
+
+## API Reference
+
+### Hooks
+
+#### `useTheme()`
+
+Returns all colors from the current theme.
+
+```tsx
+const colors = useTheme();
+// Returns: { text, background, tint, icon, ... }
+```
+
+#### `useThemeColor(props?, colorName?)`
+
+Get a specific color from the current theme.
+
+```tsx
+const backgroundColor = useThemeColor({}, 'background');
+const textColor = useThemeColor({ light: '#000', dark: '#fff' }, 'text');
+```
+
+#### `useSettings()`
+
+Access theme and language settings.
+
+```tsx
+const {
+  selectedThemeFamily,
+  currentTheme,
+  setThemeFamily,
+  language,
+  setLanguage,
+  availableThemeFamilies,
+  availableLanguages
+} = useSettings();
+```
+
+#### `useTranslation()`
+
+Get the translation function.
+
+```tsx
+const { t } = useTranslation();
+const welcomeText = t('common.welcome');
+```
+
+### Settings Context
+
+The `useSettings()` hook returns:
+
+- `selectedThemeFamily` - Currently selected theme family (e.g., `'neon-surf'`)
+- `currentTheme` - Effective theme being used (includes variant, e.g., `'neon-surf-light'`)
+- `setThemeFamily(family)` - Change theme family
+- `language` - Current language code (e.g., `'en-US'`)
+- `setLanguage(lang)` - Change language
+- `availableThemeFamilies` - Array of all available theme families with metadata
+- `availableLanguages` - Array of all available languages
+
+### Color Utilities
+
+#### `getContrastRatio(color1, color2)`
+
+Calculate the contrast ratio between two colors (returns 1-21).
+
+```tsx
+import { getContrastRatio } from '@crystin001/theme-settings-lib';
+
+const ratio = getContrastRatio('#000000', '#FFFFFF'); // Returns ~21
+```
+
+#### `getContrastTextColor(backgroundColor, lightColor?, darkColor?, minContrast?)`
+
+Get a readable text color for a given background.
+
+```tsx
+import { getContrastTextColor } from '@crystin001/theme-settings-lib';
+
+const textColor = getContrastTextColor('#000000'); // Returns '#FFFFFF'
+```
+
+#### `meetsContrastRequirement(foreground, background, level?)`
+
+Check if a color combination meets WCAG contrast requirements.
+
+```tsx
+import { meetsContrastRequirement } from '@crystin001/theme-settings-lib';
+
+const isAccessible = meetsContrastRequirement('#000000', '#FFFFFF', 'AA'); // Returns true
+```
+
+#### `ensureContrast(foreground, background, level?)`
+
+Ensure a color combination has readable contrast, adjusting if needed.
+
+```tsx
+import { ensureContrast } from '@crystin001/theme-settings-lib';
+
+const readableColor = ensureContrast('#888888', '#FFFFFF', 'AA');
+```
+
+## Development
+
+### Building the Library
+
+```bash
+npm run build
+```
+
+This compiles TypeScript to JavaScript and generates type declaration files in the `dist/` folder.
+
+### Project Structure
+
+```
+theme-settings-lib/
+├── src/
+│   ├── hooks/          # React hooks
+│   ├── theme.ts        # Theme definitions
+│   ├── i18n.ts         # Internationalization setup
+│   ├── settings-context.tsx  # Settings provider
+│   ├── color-utils.ts  # Color utility functions
+│   └── index.ts        # Main exports
+├── dist/               # Compiled output (generated)
+├── package.json
+└── tsconfig.json
+```
+
+## Updating the Library
+
+To update themes or translations across all apps:
+
+1. Make changes in `src/` directory
+2. Run `npm run build` to compile
+3. Update the version in `package.json`
+4. Commit and push to the repository
+5. In each app, update the dependency version and run `npm install`
+6. Apps will automatically get the latest themes and translations
+
+## Versioning
+
+The library follows [Semantic Versioning](https://semver.org/):
+
+- **Major** (x.0.0) - Breaking API changes
+- **Minor** (0.x.0) - New themes, features, or languages
+- **Patch** (0.0.x) - Bug fixes and theme adjustments
+
+## Peer Dependencies
+
+This library requires the following peer dependencies (installed by your app):
+
+- `react` - React library
+- `react-native` - React Native framework
+- `i18next` - Internationalization framework
+- `react-i18next` - React bindings for i18next
+- `expo-localization` - Expo localization utilities
+- `@react-native-async-storage/async-storage` - Async storage for persistence
+- `color` (optional) - Color manipulation library
+
+## License
+
+MIT
+
+## Repository
+
+[https://github.com/trial-and-code/theme-settings-lib](https://github.com/trial-and-code/theme-settings-lib)

package/dist/color-utils.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Calculate the contrast ratio between two colors
+ * Returns a value between 1 (no contrast) and 21 (maximum contrast)
+ * WCAG requires at least 4.5:1 for normal text and 3:1 for large text
+ */
+export declare function getContrastRatio(color1: string, color2: string): number;
+/**
+ * Determine if text should be light (white) or dark (black) based on background color
+ * Uses WCAG contrast guidelines to ensure readability
+ */
+export declare function getContrastTextColor(backgroundColor: string, lightColor?: string, darkColor?: string, minContrast?: number): string;
+/**
+ * Check if a color combination meets WCAG contrast requirements
+ * @param foreground - Text color
+ * @param background - Background color
+ * @param level - 'AA' (4.5:1) or 'AAA' (7:1) for normal text, or 'AALarge' (3:1) for large text
+ */
+export declare function meetsContrastRequirement(foreground: string, background: string, level?: 'AA' | 'AAA' | 'AALarge'): boolean;
+/**
+ * Get a color that meets contrast requirements with a background
+ * Tries to find a readable version of the foreground color
+ */
+export declare function ensureContrast(foreground: string, background: string, level?: 'AA' | 'AAA' | 'AALarge'): string;
+//# sourceMappingURL=color-utils.d.ts.map

package/dist/color-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-utils.d.ts","sourceRoot":"","sources":["../src/color-utils.ts"],"names":[],"mappings":"AAeA;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAavE;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,eAAe,EAAE,MAAM,EACvB,UAAU,GAAE,MAAkB,EAC9B,SAAS,GAAE,MAAkB,EAC7B,WAAW,GAAE,MAAY,GACxB,MAAM,CAgCR;AAED;;;;;GAKG;AACH,wBAAgB,wBAAwB,CACtC,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,MAAM,EAClB,KAAK,GAAE,IAAI,GAAG,KAAK,GAAG,SAAgB,GACrC,OAAO,CAQT;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAC5B,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,MAAM,EAClB,KAAK,GAAE,IAAI,GAAG,KAAK,GAAG,SAAgB,GACrC,MAAM,CAOR"}

package/dist/color-utils.js

@@ -0,0 +1,104 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getContrastRatio = getContrastRatio;
+exports.getContrastTextColor = getContrastTextColor;
+exports.meetsContrastRequirement = meetsContrastRequirement;
+exports.ensureContrast = ensureContrast;
+const color_1 = __importDefault(require("color"));
+/**
+ * Calculate the relative luminance of a color (0-1)
+ * Based on WCAG 2.1 guidelines
+ */
+function getLuminance(color) {
+    const rgb = color.rgb().array();
+    const [r, g, b] = rgb.map((val) => {
+        val = val / 255;
+        return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
+    });
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+/**
+ * Calculate the contrast ratio between two colors
+ * Returns a value between 1 (no contrast) and 21 (maximum contrast)
+ * WCAG requires at least 4.5:1 for normal text and 3:1 for large text
+ */
+function getContrastRatio(color1, color2) {
+    try {
+        const c1 = (0, color_1.default)(color1);
+        const c2 = (0, color_1.default)(color2);
+        const l1 = getLuminance(c1);
+        const l2 = getLuminance(c2);
+        const lighter = Math.max(l1, l2);
+        const darker = Math.min(l1, l2);
+        return (lighter + 0.05) / (darker + 0.05);
+    }
+    catch (error) {
+        console.warn('Failed to calculate contrast ratio:', error);
+        return 1; // Return minimum contrast on error
+    }
+}
+/**
+ * Determine if text should be light (white) or dark (black) based on background color
+ * Uses WCAG contrast guidelines to ensure readability
+ */
+function getContrastTextColor(backgroundColor, lightColor = '#FFFFFF', darkColor = '#000000', minContrast = 4.5) {
+    try {
+        const bgColor = (0, color_1.default)(backgroundColor);
+        const lightContrast = getContrastRatio(backgroundColor, lightColor);
+        const darkContrast = getContrastRatio(backgroundColor, darkColor);
+        // If both meet minimum contrast, choose the one with better contrast
+        if (lightContrast >= minContrast && darkContrast >= minContrast) {
+            return lightContrast > darkContrast ? lightColor : darkColor;
+        }
+        // If only one meets minimum contrast, use that one
+        if (lightContrast >= minContrast) {
+            return lightColor;
+        }
+        if (darkContrast >= minContrast) {
+            return darkColor;
+        }
+        // If neither meets minimum, choose the one with better contrast anyway
+        return lightContrast > darkContrast ? lightColor : darkColor;
+    }
+    catch (error) {
+        console.warn('Failed to determine contrast text color:', error);
+        // Fallback: use light text for dark backgrounds, dark text for light backgrounds
+        try {
+            const bgColor = (0, color_1.default)(backgroundColor);
+            const luminance = getLuminance(bgColor);
+            return luminance > 0.5 ? darkColor : lightColor;
+        }
+        catch {
+            return lightColor; // Ultimate fallback
+        }
+    }
+}
+/**
+ * Check if a color combination meets WCAG contrast requirements
+ * @param foreground - Text color
+ * @param background - Background color
+ * @param level - 'AA' (4.5:1) or 'AAA' (7:1) for normal text, or 'AALarge' (3:1) for large text
+ */
+function meetsContrastRequirement(foreground, background, level = 'AA') {
+    const ratio = getContrastRatio(foreground, background);
+    const requirements = {
+        AA: 4.5,
+        AAA: 7,
+        AALarge: 3,
+    };
+    return ratio >= requirements[level];
+}
+/**
+ * Get a color that meets contrast requirements with a background
+ * Tries to find a readable version of the foreground color
+ */
+function ensureContrast(foreground, background, level = 'AA') {
+    if (meetsContrastRequirement(foreground, background, level)) {
+        return foreground;
+    }
+    // If contrast is insufficient, return the opposite contrast color
+    return getContrastTextColor(background);
+}

package/dist/hooks/use-theme-color.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Hook to get theme colors from the current theme
+ * Uses the settings context to get the active theme
+ */
+import { ThemeColors } from '../theme';
+export declare function useThemeColor(props?: {
+    light?: string;
+    dark?: string;
+    [key: string]: string | undefined;
+}, colorName?: keyof ThemeColors): string | ThemeColors;
+/**
+ * Hook to get all colors from the current theme
+ */
+export declare function useTheme(): ThemeColors;
+//# sourceMappingURL=use-theme-color.d.ts.map

package/dist/hooks/use-theme-color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-theme-color.d.ts","sourceRoot":"","sources":["../../src/hooks/use-theme-color.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAC;AAG/C,wBAAgB,aAAa,CAC3B,KAAK,CAAC,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;CAAE,EAC5E,SAAS,CAAC,EAAE,MAAM,WAAW,wBAoB9B;AAED;;GAEG;AACH,wBAAgB,QAAQ,gBAGvB"}

package/dist/hooks/use-theme-color.js

@@ -0,0 +1,34 @@
+"use strict";
+/**
+ * Hook to get theme colors from the current theme
+ * Uses the settings context to get the active theme
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useThemeColor = useThemeColor;
+exports.useTheme = useTheme;
+const theme_1 = require("../theme");
+const settings_context_1 = require("../settings-context");
+function useThemeColor(props, colorName) {
+    const { currentTheme } = (0, settings_context_1.useSettings)();
+    const themeColors = theme_1.Themes[currentTheme];
+    // If props are provided, check for theme-specific override
+    if (props && colorName) {
+        const colorFromProps = props[currentTheme] || props[colorName];
+        if (colorFromProps) {
+            return colorFromProps;
+        }
+    }
+    // Return the color from the current theme
+    if (colorName) {
+        return themeColors[colorName];
+    }
+    // If no color name provided, return the theme colors object
+    return themeColors;
+}
+/**
+ * Hook to get all colors from the current theme
+ */
+function useTheme() {
+    const { currentTheme } = (0, settings_context_1.useSettings)();
+    return theme_1.Themes[currentTheme];
+}

package/dist/hooks/use-translation.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Custom hook for translations with type safety
+ * Usage: const t = useTranslation(); t('common.welcome')
+ */
+export declare function useTranslation(): {
+    t: (key: string, options?: Record<string, string | number>) => string;
+    changeLanguage: (language: string) => Promise<import("i18next").TFunction<"translation", undefined>>;
+    currentLanguage: string;
+};
+//# sourceMappingURL=use-translation.d.ts.map

package/dist/hooks/use-translation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-translation.d.ts","sourceRoot":"","sources":["../../src/hooks/use-translation.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,wBAAgB,cAAc;aAIjB,MAAM,YAAY,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;+BAE/B,MAAM;;EAGpC"}

package/dist/hooks/use-translation.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTranslation = useTranslation;
+const react_i18next_1 = require("react-i18next");
+/**
+ * Custom hook for translations with type safety
+ * Usage: const t = useTranslation(); t('common.welcome')
+ */
+function useTranslation() {
+    const { t, i18n } = (0, react_i18next_1.useTranslation)();
+    return {
+        t: (key, options) => t(key, options),
+        changeLanguage: (language) => i18n.changeLanguage(language),
+        currentLanguage: i18n.language,
+    };
+}

package/dist/i18n.d.ts

@@ -0,0 +1,23 @@
+import i18n from 'i18next';
+export declare const SUPPORTED_LANGUAGES: readonly [{
+    readonly code: "en-US";
+    readonly name: "English (US)";
+}, {
+    readonly code: "es-ES";
+    readonly name: "Español (ES)";
+}, {
+    readonly code: "fr-FR";
+    readonly name: "Français (FR)";
+}, {
+    readonly code: "de-DE";
+    readonly name: "Deutsch (DE)";
+}, {
+    readonly code: "ja-JP";
+    readonly name: "日本語 (JP)";
+}, {
+    readonly code: "zh-CN";
+    readonly name: "中文 (简体)";
+}];
+export type SupportedLanguage = (typeof SUPPORTED_LANGUAGES)[number]['code'];
+export default i18n;
+//# sourceMappingURL=i18n.d.ts.map

package/dist/i18n.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../src/i18n.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,SAAS,CAAC;AAK3B,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;EAOtB,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AA+D7E,eAAe,IAAI,CAAC"}

package/dist/i18n.js

@@ -0,0 +1,76 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SUPPORTED_LANGUAGES = void 0;
+const i18next_1 = __importDefault(require("i18next"));
+const react_i18next_1 = require("react-i18next");
+const expo_localization_1 = require("expo-localization");
+// Supported languages
+exports.SUPPORTED_LANGUAGES = [
+    { code: 'en-US', name: 'English (US)' },
+    { code: 'es-ES', name: 'Español (ES)' },
+    { code: 'fr-FR', name: 'Français (FR)' },
+    { code: 'de-DE', name: 'Deutsch (DE)' },
+    { code: 'ja-JP', name: '日本語 (JP)' },
+    { code: 'zh-CN', name: '中文 (简体)' },
+];
+// Default translations - can be extended by apps
+const defaultTranslations = {
+    'en-US': {
+        translation: {
+            common: {
+                welcome: 'Welcome',
+                hello: 'Hello',
+                save: 'Save',
+                cancel: 'Cancel',
+                delete: 'Delete',
+                edit: 'Edit',
+                done: 'Done',
+                loading: 'Loading...',
+                error: 'Error',
+                success: 'Success',
+            },
+            settings: {
+                title: 'Settings',
+                theme: 'Theme',
+                language: 'Language',
+                selectTheme: 'Select Theme',
+                selectLanguage: 'Select Language',
+                light: 'Light',
+                dark: 'Dark',
+                system: 'System',
+                themeMode: 'Theme Mode',
+            },
+            home: {
+                title: 'Welcome!',
+                step1: 'Step 1: Try it',
+                step2: 'Step 2: Explore',
+                step3: 'Step 3: Get a fresh start',
+                editFile: 'Edit {file} to see changes.',
+                pressKey: 'Press {key} to open developer tools.',
+                tapExplore: "Tap the Explore tab to learn more about what's included in this starter app.",
+                resetProject: "When you're ready, run {command} to get a fresh {directory} directory.",
+            },
+            errors: {
+                somethingWentWrong: 'Something went wrong',
+                tryAgain: 'Try again',
+            },
+        },
+    },
+};
+// Initialize i18n
+// Apps can extend translations by calling i18n.addResourceBundle
+i18next_1.default.use(react_i18next_1.initReactI18next).init({
+    compatibilityJSON: 'v3',
+    resources: defaultTranslations,
+    lng: (0, expo_localization_1.getLocales)()[0]?.languageTag || 'en-US',
+    fallbackLng: 'en-US',
+    interpolation: {
+        escapeValue: false, // React already escapes values
+        prefix: '{',
+        suffix: '}',
+    },
+});
+exports.default = i18next_1.default;