exceptionz-react-native-lingua 1.0.0

package/dist/index.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SUPPORTED_LANGUAGES = exports.useTranslate = exports.T = exports.LanguageSwitcher = exports.LanguageModal = exports.useI18n = exports.LinguaProvider = void 0;
+var LinguaContext_1 = require("./LinguaContext");
+Object.defineProperty(exports, "LinguaProvider", { enumerable: true, get: function () { return LinguaContext_1.LinguaProvider; } });
+Object.defineProperty(exports, "useI18n", { enumerable: true, get: function () { return LinguaContext_1.useI18n; } });
+var LanguageModal_1 = require("./components/LanguageModal");
+Object.defineProperty(exports, "LanguageModal", { enumerable: true, get: function () { return LanguageModal_1.LanguageModal; } });
+var LanguageSwitcher_1 = require("./components/LanguageSwitcher");
+Object.defineProperty(exports, "LanguageSwitcher", { enumerable: true, get: function () { return LanguageSwitcher_1.LanguageSwitcher; } });
+var T_1 = require("./components/T");
+Object.defineProperty(exports, "T", { enumerable: true, get: function () { return T_1.T; } });
+var useTranslate_1 = require("./hooks/useTranslate");
+Object.defineProperty(exports, "useTranslate", { enumerable: true, get: function () { return useTranslate_1.useTranslate; } });
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "SUPPORTED_LANGUAGES", { enumerable: true, get: function () { return constants_1.SUPPORTED_LANGUAGES; } });
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,iDAA0D;AAAjD,+GAAA,cAAc,OAAA;AAAE,wGAAA,OAAO,OAAA;AAChC,4DAA2D;AAAlD,8GAAA,aAAa,OAAA;AACtB,kEAAiE;AAAxD,oHAAA,gBAAgB,OAAA;AACzB,oCAAmC;AAA1B,sFAAA,CAAC,OAAA;AACV,qDAAoD;AAA3C,4GAAA,YAAY,OAAA;AACrB,yCAAkD;AAAzC,gHAAA,mBAAmB,OAAA"}

package/dist/utils/translator.d.ts

@@ -0,0 +1,2 @@
+export declare function translateText(text: string, targetLanguage: string): Promise<string>;
+//# sourceMappingURL=translator.d.ts.map

package/dist/utils/translator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"translator.d.ts","sourceRoot":"","sources":["../../src/utils/translator.ts"],"names":[],"mappings":"AAAA,wBAAsB,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAoCzF"}

package/dist/utils/translator.js

@@ -0,0 +1,51 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.translateText = translateText;
+function translateText(text, targetLanguage) {
+    return __awaiter(this, void 0, void 0, function* () {
+        if (!text || text.trim() === '')
+            return text;
+        if (!targetLanguage || targetLanguage === 'en')
+            return text;
+        try {
+            const url = `https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=${targetLanguage}&dt=t&q=${encodeURIComponent(text)}`;
+            const response = yield fetch(url);
+            if (!response.ok) {
+                console.warn(`Translation API returned status: ${response.status}`);
+                return text;
+            }
+            const contentType = response.headers.get('content-type');
+            if (!contentType || !contentType.includes('application/json')) {
+                const textResponse = yield response.text();
+                console.warn('Translation API returned non-JSON response:', textResponse.slice(0, 100));
+                return text;
+            }
+            let data;
+            try {
+                data = yield response.json();
+            }
+            catch (parseError) {
+                console.error('Failed to parse translation JSON:', parseError);
+                return text;
+            }
+            if (data && data[0] && Array.isArray(data[0])) {
+                return data[0].map((item) => item[0]).join('');
+            }
+            return text;
+        }
+        catch (error) {
+            console.error('Translation network/unexpected error:', error);
+            return text;
+        }
+    });
+}
+//# sourceMappingURL=translator.js.map

package/dist/utils/translator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"translator.js","sourceRoot":"","sources":["../../src/utils/translator.ts"],"names":[],"mappings":";;;;;;;;;;;AAAA,sCAoCC;AApCD,SAAsB,aAAa,CAAC,IAAY,EAAE,cAAsB;;QACtE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE;YAAE,OAAO,IAAI,CAAC;QAC7C,IAAI,CAAC,cAAc,IAAI,cAAc,KAAK,IAAI;YAAE,OAAO,IAAI,CAAC;QAE5D,IAAI,CAAC;YACH,MAAM,GAAG,GAAG,6EAA6E,cAAc,WAAW,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC;YAC7I,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,GAAG,CAAC,CAAC;YAElC,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC;gBACjB,OAAO,CAAC,IAAI,CAAC,oCAAoC,QAAQ,CAAC,MAAM,EAAE,CAAC,CAAC;gBACpE,OAAO,IAAI,CAAC;YACd,CAAC;YAED,MAAM,WAAW,GAAG,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;YACzD,IAAI,CAAC,WAAW,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,kBAAkB,CAAC,EAAE,CAAC;gBAC9D,MAAM,YAAY,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;gBAC3C,OAAO,CAAC,IAAI,CAAC,6CAA6C,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC;gBACxF,OAAO,IAAI,CAAC;YACd,CAAC;YAED,IAAI,IAAI,CAAC;YACT,IAAI,CAAC;gBACH,IAAI,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;YAC/B,CAAC;YAAC,OAAO,UAAU,EAAE,CAAC;gBACpB,OAAO,CAAC,KAAK,CAAC,mCAAmC,EAAE,UAAU,CAAC,CAAC;gBAC/D,OAAO,IAAI,CAAC;YACd,CAAC;YAED,IAAI,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;gBAC9C,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAS,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YACtD,CAAC;YACD,OAAO,IAAI,CAAC;QACd,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,KAAK,CAAC,uCAAuC,EAAE,KAAK,CAAC,CAAC;YAC9D,OAAO,IAAI,CAAC;QACd,CAAC;IACH,CAAC;CAAA"}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "exceptionz-react-native-lingua",
+  "version": "1.0.0",
+  "description": "A React Native translation library that auto-translates text nodes and displays a language selector modal.",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch"
+  },
+  "keywords": [
+    "react-native",
+    "translate",
+    "i18n",
+    "google-translate"
+  ],
+  "author": "Antigravity",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-native": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "react": "^18.2.0",
+    "react-native": "*",
+    "tsup": "^8.0.2",
+    "typescript": "^5.4.3",
+    "@react-native-async-storage/async-storage": "^1.23.1"
+  }
+}

package/src/LinguaContext.tsx

@@ -0,0 +1,72 @@
+import React, { createContext, useContext, useState, ReactNode, useEffect } from 'react';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { SUPPORTED_LANGUAGES } from './constants';
+
+interface LinguaContextProps {
+  currentLanguage: string;
+  setLanguage: (lang: string) => Promise<void>;
+  availableLanguages: string[];
+  isLoading: boolean;
+}
+
+const LinguaContext = createContext<LinguaContextProps | undefined>(undefined);
+
+export const useI18n = () => {
+  const context = useContext(LinguaContext);
+  if (!context) throw new Error('useI18n must be used within a LinguaProvider');
+  return context;
+};
+
+interface LinguaProviderProps {
+  children: ReactNode;
+  defaultLang?: string;
+  languages?: string[];
+}
+
+export const translationCache = new Map<string, string>();
+export const getCacheKey = (text: string, lang: string) => `${lang}:${text}`;
+
+export const LinguaProvider: React.FC<LinguaProviderProps> = ({ 
+  children, 
+  defaultLang = 'en',
+  languages = SUPPORTED_LANGUAGES.map(l => l.code) 
+}) => {
+  const [currentLanguage, setCurrentLanguage] = useState(defaultLang);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const loadLanguage = async () => {
+      try {
+        const saved = await AsyncStorage.getItem('app-language-preference');
+        if (saved) {
+          setCurrentLanguage(saved);
+        }
+      } catch (e) {
+        console.error('Failed to load language preference', e);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    loadLanguage();
+  }, []);
+
+  const handleSetLanguage = async (lang: string) => {
+    try {
+      setCurrentLanguage(lang);
+      await AsyncStorage.setItem('app-language-preference', lang);
+    } catch (e) {
+      console.error('Failed to save language preference', e);
+    }
+  };
+
+  return (
+    <LinguaContext.Provider value={{ 
+      currentLanguage, 
+      setLanguage: handleSetLanguage, 
+      availableLanguages: languages,
+      isLoading
+    }}>
+      {children}
+    </LinguaContext.Provider>
+  );
+};

package/src/components/LanguageModal.tsx

@@ -0,0 +1,141 @@
+import React, { useState, useEffect } from 'react';
+import { 
+  Modal, 
+  View, 
+  Text, 
+  TouchableOpacity, 
+  FlatList, 
+  StyleSheet, 
+  SafeAreaView 
+} from 'react-native';
+import { useI18n } from '../LinguaContext';
+import { SUPPORTED_LANGUAGES } from '../constants';
+
+export const LanguageModal: React.FC = () => {
+  const { setLanguage, currentLanguage, isLoading } = useI18n();
+  const [modalVisible, setModalVisible] = useState(false);
+
+  useEffect(() => {
+    if (!isLoading && !currentLanguage) {
+      setModalVisible(true);
+    }
+  }, [isLoading, currentLanguage]);
+
+  const handleSelectLanguage = async (code: string) => {
+    await setLanguage(code);
+    setModalVisible(false);
+  };
+
+  return (
+    <Modal
+      animationType="slide"
+      transparent={true}
+      visible={modalVisible}
+      onRequestClose={() => setModalVisible(false)}
+    >
+      <View style={styles.centeredView}>
+        <View style={styles.modalView}>
+          <Text style={styles.modalTitle}>Select Language</Text>
+          <Text style={styles.modalSubtitle}>Choose your preferred language.</Text>
+          
+          <FlatList
+            data={SUPPORTED_LANGUAGES}
+            keyExtractor={(item) => item.code}
+            renderItem={({ item }) => (
+              <TouchableOpacity
+                style={[
+                  styles.languageItem,
+                  currentLanguage === item.code && styles.selectedItem
+                ]}
+                onPress={() => handleSelectLanguage(item.code)}
+              >
+                <Text style={styles.icon}>{item.icon}</Text>
+                <Text style={[
+                  styles.label,
+                  currentLanguage === item.code && styles.selectedLabel
+                ]}>
+                  {item.label}
+                </Text>
+              </TouchableOpacity>
+            )}
+            style={styles.list}
+          />
+          
+          <TouchableOpacity
+            style={styles.closeButton}
+            onPress={() => setModalVisible(false)}
+          >
+            <Text style={styles.closeButtonText}>Close</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  centeredView: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0,0,0,0.5)',
+  },
+  modalView: {
+    width: '85%',
+    backgroundColor: '#1e293b',
+    borderRadius: 20,
+    padding: 20,
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+    maxHeight: '80%',
+  },
+  modalTitle: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: '#f8fafc',
+    marginBottom: 8,
+  },
+  modalSubtitle: {
+    fontSize: 14,
+    color: '#94a3b8',
+    marginBottom: 20,
+  },
+  list: {
+    width: '100%',
+  },
+  languageItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 15,
+    borderRadius: 12,
+    backgroundColor: 'rgba(255,255,255,0.05)',
+    marginBottom: 8,
+    gap: 12,
+  },
+  selectedItem: {
+    backgroundColor: '#3b82f6',
+  },
+  icon: {
+    fontSize: 18,
+  },
+  label: {
+    fontSize: 14,
+    color: '#cbd5e1',
+    fontWeight: '500',
+  },
+  selectedLabel: {
+    color: '#fff',
+  },
+  closeButton: {
+    marginTop: 20,
+    padding: 10,
+  },
+  closeButtonText: {
+    color: '#3b82f6',
+    fontWeight: '600',
+  },
+});

package/src/components/LanguageSwitcher.tsx

@@ -0,0 +1,142 @@
+import React, { useState } from 'react';
+import { 
+  View, 
+  Text, 
+  TouchableOpacity, 
+  StyleSheet, 
+  ScrollView, 
+  Modal, 
+  TouchableWithoutFeedback 
+} from 'react-native';
+import { useI18n } from '../LinguaContext';
+import { SUPPORTED_LANGUAGES } from '../constants';
+
+export const LanguageSwitcher: React.FC = () => {
+  const { currentLanguage, setLanguage, availableLanguages } = useI18n();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const langMap = SUPPORTED_LANGUAGES.reduce((acc, lang) => {
+    acc[lang.code] = { label: lang.label, icon: lang.icon };
+    return acc;
+  }, {} as Record<string, { label: string, icon: string }>);
+
+  const handleSelect = async (lang: string) => {
+    await setLanguage(lang);
+    setIsOpen(false);
+  };
+
+  return (
+    <View style={styles.container}>
+      {isOpen && (
+        <Modal
+          transparent={true}
+          visible={isOpen}
+          animationType="fade"
+          onRequestClose={() => setIsOpen(false)}
+        >
+          <TouchableWithoutFeedback onPress={() => setIsOpen(false)}>
+            <View style={styles.overlay}>
+              <View style={styles.dropdown}>
+                <ScrollView bounces={false} style={{ maxHeight: 350 }}>
+                  {availableLanguages.map((lang) => (
+                    <TouchableOpacity
+                      key={lang}
+                      onPress={() => handleSelect(lang)}
+                      style={[
+                        styles.menuItem,
+                        currentLanguage === lang && styles.selectedMenuItem
+                      ]}
+                    >
+                      <Text style={styles.icon}>{langMap[lang]?.icon || '🌐'}</Text>
+                      <Text style={[
+                        styles.label,
+                        currentLanguage === lang && styles.selectedLabel
+                      ]}>
+                        {langMap[lang]?.label || lang}
+                      </Text>
+                    </TouchableOpacity>
+                  ))}
+                </ScrollView>
+              </View>
+            </View>
+          </TouchableWithoutFeedback>
+        </Modal>
+      )}
+
+      <TouchableOpacity
+        style={styles.floatingButton}
+        onPress={() => setIsOpen(true)}
+      >
+        <Text style={styles.buttonIcon}>
+          {langMap[currentLanguage]?.icon || '🌐'}
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    bottom: 24,
+    right: 24,
+    zIndex: 99999,
+  },
+  floatingButton: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    backgroundColor: '#3b82f6',
+    justifyContent: 'center',
+    alignItems: 'center',
+    shadowColor: '#3b82f6',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 12,
+    elevation: 8,
+  },
+  buttonIcon: {
+    fontSize: 20,
+    color: '#fff',
+  },
+  overlay: {
+    flex: 1,
+    backgroundColor: 'transparent',
+    justifyContent: 'flex-end',
+    alignItems: 'flex-end',
+    paddingBottom: 80,
+    paddingRight: 24,
+  },
+  dropdown: {
+    backgroundColor: '#1e293b',
+    borderRadius: 12,
+    padding: 6,
+    width: 180,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 10 },
+    shadowOpacity: 0.3,
+    shadowRadius: 20,
+    elevation: 10,
+  },
+  menuItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 10,
+    borderRadius: 8,
+    gap: 10,
+  },
+  selectedMenuItem: {
+    backgroundColor: '#3b82f6',
+  },
+  icon: {
+    fontSize: 16,
+  },
+  label: {
+    fontSize: 13,
+    fontWeight: '500',
+    color: '#cbd5e1',
+  },
+  selectedLabel: {
+    color: '#fff',
+  },
+});

package/src/components/T.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Text, TextProps } from 'react-native';
+import { useTranslate } from '../hooks/useTranslate';
+
+interface TProps extends TextProps {
+  children: string;
+}
+
+export const T: React.FC<TProps> = ({ children, ...props }) => {
+  const translatedText = useTranslate(children);
+  return <Text {...props}>{translatedText}</Text>;
+};

package/src/constants.ts

@@ -0,0 +1,21 @@
+export const SUPPORTED_LANGUAGES = [
+  { code: 'en', label: 'English', icon: '🇺🇸' },
+  { code: 'hi', label: 'हिन्दी', icon: '🇮🇳' },
+  { code: 'bn', label: 'বাংলা', icon: '🇮🇳' },
+  { code: 'gu', label: 'ગુજરાતી', icon: '🇮🇳' },
+  { code: 'kn', label: 'ಕನ್ನಡ', icon: '🇮🇳' },
+  { code: 'ks', label: 'کٲشُر', icon: '🇮🇳' },
+  { code: 'kok', label: 'कोंकणी', icon: '🇮🇳' },
+  { code: 'ml', label: 'മലയാളം', icon: '🇮🇳' },
+  { code: 'mr', label: 'मराठी', icon: '🇮🇳' },
+  { code: 'ne', label: 'नेपाली', icon: '🇮🇳' },
+  { code: 'or', label: 'ଓଡ଼ିଆ', icon: '🇮🇳' },
+  { code: 'pa', label: 'ਪੰਜਾਬੀ', icon: '🇮🇳' },
+  { code: 'sa', label: 'संस्कृतम्', icon: '🇮🇳' },
+  { code: 'sat', label: 'ᱥᱟᱱᱛᱟᱲᱤ', icon: '🇮🇳' },
+  { code: 'sd', label: 'سنڌي', icon: '🇮🇳' },
+  { code: 'ta', label: 'தமிழ்', icon: '🇮🇳' },
+  { code: 'te', label: 'తెలుగు', icon: '🇮🇳' },
+  { code: 'ur', label: 'اردو', icon: '🇮🇳' },
+  { code: 'fr', label: 'Français', icon: '🇫🇷' },
+];

package/src/hooks/useTranslate.ts

@@ -0,0 +1,36 @@
+import { useState, useEffect } from 'react';
+import { useI18n, translationCache, getCacheKey } from '../LinguaContext';
+import { translateText } from '../utils/translator';
+
+export function useTranslate(text: string): string {
+  const { currentLanguage } = useI18n();
+  const [translated, setTranslated] = useState<string>(text);
+
+  useEffect(() => {
+    if (!text) return;
+    if (currentLanguage === 'en') {
+      setTranslated(text);
+      return;
+    }
+
+    const key = getCacheKey(text, currentLanguage);
+    if (translationCache.has(key)) {
+      setTranslated(translationCache.get(key)!);
+      return;
+    }
+
+    let isMounted = true;
+    translateText(text, currentLanguage).then((res) => {
+      if (isMounted) {
+        translationCache.set(key, res);
+        setTranslated(res);
+      }
+    });
+
+    return () => {
+      isMounted = false;
+    };
+  }, [text, currentLanguage]);
+
+  return translated;
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+export { LinguaProvider, useI18n } from './LinguaContext';
+export { LanguageModal } from './components/LanguageModal';
+export { LanguageSwitcher } from './components/LanguageSwitcher';
+export { T } from './components/T';
+export { useTranslate } from './hooks/useTranslate';
+export { SUPPORTED_LANGUAGES } from './constants';

package/src/utils/translator.ts

@@ -0,0 +1,37 @@
+export async function translateText(text: string, targetLanguage: string): Promise<string> {
+  if (!text || text.trim() === '') return text;
+  if (!targetLanguage || targetLanguage === 'en') return text;
+
+  try {
+    const url = `https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=${targetLanguage}&dt=t&q=${encodeURIComponent(text)}`;
+    const response = await fetch(url);
+    
+    if (!response.ok) {
+      console.warn(`Translation API returned status: ${response.status}`);
+      return text;
+    }
+
+    const contentType = response.headers.get('content-type');
+    if (!contentType || !contentType.includes('application/json')) {
+      const textResponse = await response.text();
+      console.warn('Translation API returned non-JSON response:', textResponse.slice(0, 100));
+      return text;
+    }
+
+    let data;
+    try {
+      data = await response.json();
+    } catch (parseError) {
+      console.error('Failed to parse translation JSON:', parseError);
+      return text;
+    }
+    
+    if (data && data[0] && Array.isArray(data[0])) {
+      return data[0].map((item: any) => item[0]).join('');
+    }
+    return text;
+  } catch (error) {
+    console.error('Translation network/unexpected error:', error);
+    return text;
+  }
+}

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES6",
+    "module": "CommonJS",
+    "moduleResolution": "node",
+    "lib": ["ES6"],
+    "jsx": "react-native",
+    "strict": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "dist",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    "paths": {
+      "*": ["src/*"]
+    }
+  },
+  "include": ["src"]
+}

package/tsup.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: ['src/index.ts'],
+  format: ['cjs', 'esm'],
+  dts: true,
+  clean: false, // Fix dynamic require of "fs" error
+  external: ['react', 'react-native', '@react-native-async-storage/async-storage'],
+  minify: true,
+});