template_0205

RN_TEMPLATE/app/i18n/ar.ts

@@ -0,0 +1,297 @@
+import demoAr from "./demo-ar"
+import { Translations } from "./en"
+
+const ar: Translations = {
+  common: {
+    ok: "نعم",
+    cancel: "حذف",
+    save: "حفظ",
+    back: "خلف",
+    logOut: "تسجيل خروج",
+    copied: "تم النسخ",
+  },
+  welcomeScreen: {
+    postscript:
+      "ربما لا يكون هذا هو الشكل الذي يبدو عليه تطبيقك مالم يمنحك المصمم هذه الشاشات وشحنها في هذه الحالة",
+    readyForLaunch: "تطبيقك تقريبا جاهز للتشغيل",
+    exciting: "اوه هذا مثير",
+    letsGo: "لنذهب",
+  },
+  errorScreen: {
+    title: "هناك خطأ ما",
+    friendlySubtitle:
+      "هذه هي الشاشة التي سيشاهدها المستخدمون في عملية الانتاج عند حدوث خطأ. سترغب في تخصيص هذه الرسالة ( الموجودة في 'ts.en/i18n/app') وربما التخطيط ايضاً ('app/screens/ErrorScreen'). إذا كنت تريد إزالة هذا بالكامل، تحقق من 'app/app.tsp' من اجل عنصر <ErrorBoundary>.",
+    reset: "اعادة تعيين التطبيق",
+    traceTitle: "خطأ من مجموعة %{name}",
+  },
+  emptyStateComponent: {
+    generic: {
+      heading: "فارغة جداً....حزين",
+      content: "لا توجد بيانات حتى الآن. حاول النقر فوق الزر لتحديث التطبيق او اعادة تحميله.",
+      button: "لنحاول هذا مرّة أخرى",
+    },
+  },
+
+  errors: {
+    invalidEmail: "عنوان البريد الالكتروني غير صالح",
+  },
+  authErrors: {
+    timeout: "Request timed out. Please try again.",
+    cannotConnect: "Cannot connect to server. Please check your network.",
+    serverError: "Server error. Please try again later.",
+    badData: "Invalid response from server.",
+    unknownError: "An unknown error occurred.",
+    E001: "Username already exists.",
+    E002: "Email is already registered.",
+    E003: "Invalid referral code.",
+    E004: "No pending registration request.",
+    E005: "Invalid verification code.",
+    E006: "Referral code already bound.",
+    E007: "Cannot use your own referral code.",
+    E011: "Invalid email or password.",
+    E012: "Account temporarily locked. Please try again later.",
+    E013: "No pending login request.",
+    E014: "User does not exist or has been disabled.",
+    E015: "Invalid verification code.",
+    E016: "Invalid Telegram authentication.",
+    E017: "Invalid Telegram data format.",
+    E018: "Google authentication failed.",
+    E019: "Please provide Google token.",
+    E021: "Current password is incorrect.",
+    E022: "New password cannot be the same as current password.",
+    E023: "Email is not registered.",
+    E024: "Account has been disabled.",
+    E025: "No pending password reset request.",
+    E026: "Password reset code has expired.",
+    E027: "Invalid password reset code.",
+    E028: "User does not exist.",
+    E029: "No fields provided to update.",
+    E041: "Sending verification code too frequently. Please wait.",
+    E042: "Email verification code has expired.",
+    E043: "Invalid email verification code.",
+    E044: "Email is already verified.",
+    E045: "Email is already used by another user.",
+    E046: "No verified email address.",
+    E047: "Please send verification code to current email first.",
+    E048: "Please verify current email first.",
+    E049: "Please send verification code to new email first.",
+    E050: "Invalid action parameter.",
+  },
+  loginScreen: {
+    logIn: "تسجيل الدخول",
+    enterDetails:
+      ".ادخل التفاصيل الخاصة بك ادناه لفتح معلومات سرية للغاية. لن تخمن ابداً ما الذي ننتظره. او ربما ستفعل انها انها ليست علم الصواريخ",
+    emailFieldLabel: "البريد الالكتروني",
+    passwordFieldLabel: "كلمة السر",
+    emailFieldPlaceholder: "ادخل بريدك الالكتروني",
+    passwordFieldPlaceholder: "كلمة السر هنا فائقة السر",
+    tapToLogIn: "انقر لتسجيل الدخول!",
+    hint: "(: تلميح: يمكنك استخدام اي عنوان بريد الكتروني وكلمة السر المفضلة لديك",
+  },
+  navigator: {
+    componentsTab: "عناصر",
+    debugTab: "تصحيح",
+    communityTab: "واصل اجتماعي",
+    podcastListTab: "البودكاست",
+    profileTab: "الملف الشخصي",
+  },
+  profileScreen: {
+    title: "الملف الشخصي",
+    guest: "ضيف",
+    uid: "UID",
+    username: "اسم المستخدم",
+    referralCode: "رمز الإحالة",
+    settings: "الإعدادات",
+    darkMode: "الوضع الداكن",
+    notifications: "الإشعارات",
+    security: "الأمان",
+    account: "الحساب",
+    accountStatus: "حالة الحساب",
+    active: "نشط",
+    inactive: "غير نشط",
+    regular: "عادي",
+    emailVerified: "البريد الإلكتروني موثق",
+    verified: "موثق",
+    unverified: "غير موثق",
+    loginMethods: "طرق تسجيل الدخول",
+    version: "الإصدار",
+    changePassword: "تغيير كلمة المرور",
+    changeEmail: "تغيير البريد الإلكتروني",
+    editNickname: "تعديل الاسم المستعار",
+    editProfile: "تعديل الملف الشخصي",
+    nicknamePlaceholder: "أدخل اسمك المستعار",
+    nickname: "الاسم المستعار",
+    tapToChangeAvatar: "اضغط لتغيير الصورة الرمزية",
+    about: "حول",
+  },
+  changePasswordScreen: {
+    title: "تغيير كلمة المرور",
+    description: "أدخل كلمة المرور الحالية واختر كلمة مرور جديدة.",
+    oldPassword: "كلمة المرور الحالية",
+    newPassword: "كلمة المرور الجديدة",
+    confirmPassword: "تأكيد كلمة المرور الجديدة",
+    logoutOtherDevices: "تسجيل الخروج من الأجهزة الأخرى",
+    submit: "تغيير كلمة المرور",
+    success: "نجاح",
+    successMessage: "تم تغيير كلمة المرور بنجاح.",
+    oldPasswordRequired: "كلمة المرور الحالية مطلوبة.",
+    newPasswordRequired: "كلمة المرور الجديدة مطلوبة.",
+    passwordTooShort: "يجب أن تتكون كلمة المرور من 6 أحرف على الأقل.",
+    passwordMismatch: "كلمتا المرور غير متطابقتين.",
+    samePassword: "لا يمكن أن تكون كلمة المرور الجديدة مثل الحالية.",
+  },
+  changeEmailScreen: {
+    title: "تغيير البريد الإلكتروني",
+    step1Label: "تحقق",
+    step2Label: "ربط",
+    step1Title: "الخطوة 1: تحقق من البريد الإلكتروني الحالي",
+    step1Description: "سنرسل رمز التحقق إلى بريدك الإلكتروني الحالي.",
+    step2Title: "الخطوة 2: ربط البريد الإلكتروني الجديد",
+    step2Description: "أدخل عنوان بريدك الإلكتروني الجديد وتحقق منه.",
+    currentEmail: "البريد الإلكتروني الحالي",
+    newEmail: "عنوان البريد الإلكتروني الجديد",
+    verificationCode: "رمز التحقق",
+    sendCode: "إرسال رمز التحقق",
+    sendCodeToNewEmail: "إرسال الرمز إلى البريد الجديد",
+    verify: "تحقق",
+    confirmNewEmail: "تأكيد البريد الإلكتروني الجديد",
+    resendCode: "إعادة إرسال الرمز",
+    success: "نجاح",
+    successMessage: "تم تغيير بريدك الإلكتروني بنجاح.",
+    codeRequired: "رمز التحقق مطلوب.",
+    codeInvalid: "يجب أن يتكون رمز التحقق من 6 أرقام.",
+    newEmailRequired: "عنوان البريد الإلكتروني الجديد مطلوب.",
+    emailInvalid: "يرجى إدخال عنوان بريد إلكتروني صالح.",
+    sameEmail: "لا يمكن أن يكون البريد الجديد مثل البريد الحالي.",
+  },
+  settingsScreen: {
+    title: "الإعدادات",
+    appearance: "المظهر",
+    theme: "المظهر",
+    darkMode: "الوضع الداكن",
+    language: "اللغة",
+    currentLanguage: "اللغة",
+  },
+  languageScreen: {
+    title: "اللغة",
+    selectHint: "اختر لغتك المفضلة",
+  },
+  themeScreen: {
+    title: "المظهر",
+    selectHint: "اختر المظهر المفضل لديك",
+    system: "النظام",
+    light: "فاتح",
+    dark: "داكن",
+  },
+  securityScreen: {
+    title: "الأمان",
+    description: "إدارة إعدادات أمان حسابك.",
+    changePassword: "تغيير كلمة المرور",
+    changeEmail: "تغيير البريد الإلكتروني",
+    // Session management
+    activeSessions: "Active Sessions",
+    activeSessionsDescription: "Devices currently logged into your account",
+    currentDevice: "Current Device",
+    lastActive: "Last active",
+    loginMethod: "Login via",
+    logoutDevice: "Logout",
+    logoutAllOther: "Logout All Other Devices",
+    logoutAllOtherDescription: "This will log out all devices except the current one.",
+    noOtherSessions: "No other active sessions",
+    sessionRevoked: "Device has been logged out",
+    sessionsRevoked: "{{count}} devices have been logged out",
+    confirmLogout: "Confirm Logout",
+    confirmLogoutMessage: "Are you sure you want to log out this device?",
+    confirmLogoutAllMessage: "Are you sure you want to log out all other devices?",
+    deviceTypes: {
+      desktop: "Desktop",
+      mobile: "Mobile",
+      tablet: "Tablet",
+      unknown: "Unknown Device",
+    },
+  },
+  aboutScreen: {
+    title: "حول",
+    appInfo: "معلومات التطبيق",
+    appName: "اسم التطبيق",
+    version: "الإصدار",
+    buildVersion: "إصدار البناء",
+    appId: "معرف التطبيق",
+    appVersion: "إصدار التطبيق",
+    legal: "قانوني",
+    privacyPolicy: "سياسة الخصوصية",
+    termsOfService: "شروط الخدمة",
+  },
+  communityScreen: {
+    title: "تواصل مع المجتمع",
+    tagLine:
+      "قم بالتوصيل لمنتدى Infinite Red الذي يضم تفاعل المهندسين المحلّيين ورفع مستوى تطوير تطبيقك معنا",
+    joinUsOnSlackTitle: "انضم الينا على Slack",
+    joinUsOnSlack:
+      "هل ترغب في وجود مكان للتواصل مع مهندسي React Native حول العالم؟ الانضمام الى المحادثة في سلاك المجتمع الاحمر اللانهائي! مجتمعناالمتنامي هو مساحةآمنة لطرح الاسئلة والتعلم من الآخرين وتنمية شبكتك.",
+    joinSlackLink: "انضم الي مجتمع Slack",
+    makeIgniteEvenBetterTitle: "اجعل Ignite افضل",
+    makeIgniteEvenBetter:
+      "هل لديك فكرة لجعل Ignite افضل؟ نحن سعداء لسماع ذلك! نحن نبحث دائماً عن الآخرين الذين يرغبون في مساعدتنا في بناء افضل الادوات المحلية التفاعلية المتوفرة هناك. انضم الينا عبر GitHub للانضمام الينا في بناء مستقبل Ignite",
+    contributeToIgniteLink: "ساهم في Ignite",
+    theLatestInReactNativeTitle: "الاحدث في React Native",
+    theLatestInReactNative: "نخن هنا لنبقيك محدثاً على جميع React Native التي تعرضها",
+    reactNativeRadioLink: "راديو React Native",
+    reactNativeNewsletterLink: "نشرة اخبار React Native",
+    reactNativeLiveLink: "مباشر React Native",
+    chainReactConferenceLink: "مؤتمر Chain React",
+    hireUsTitle: "قم بتوظيف Infinite Red لمشروعك القادم",
+    hireUs:
+      "سواء كان الامر يتعلّق بتشغيل مشروع كامل او اعداد الفرق بسرعة من خلال التدريب العلمي لدينا، يمكن ان يساعد Infinite Red اللامتناهي في اي مشروع محلي يتفاعل معه.",
+    hireUsLink: "ارسل لنا رسالة",
+  },
+  showroomScreen: {
+    jumpStart: "مكونات او عناصر لبدء مشروعك",
+    lorem2Sentences:
+      "عامل الناس بأخلاقك لا بأخلاقهم. عامل الناس بأخلاقك لا بأخلاقهم. عامل الناس بأخلاقك لا بأخلاقهم",
+    demoHeaderTxExample: "ياي",
+    demoViaTxProp: "عبر `tx` Prop",
+    demoViaSpecifiedTxProp: "Prop `{{prop}}Tx` عبر",
+  },
+  demoDebugScreen: {
+    howTo: "كيف",
+    title: "التصحيح",
+    tagLine: "مبروك، لديك نموذج اصلي متقدم للغاية للتفاعل هنا. الاستفادة من هذه النمذجة",
+    reactotron: "Reactotron ارسل إلى",
+    reportBugs: "الابلاغ عن اخطاء",
+    demoList: "قائمة تجريبية",
+    demoPodcastList: "قائمة البودكاست التجريبي",
+    androidReactotronHint:
+      "اذا لم ينجح ذللك، فتأكد من تشغيل تطبيق الحاسوب الخاص Reactotron، وقم بتشغيل عكس adb tcp:9090 \ntcp:9090 من جهازك الطرفي ، واعد تحميل التطبيق",
+    iosReactotronHint:
+      "اذا لم ينجح ذلك، فتأكد من تشغيل تطبيق الحاسوب الخاص ب Reactotron وأعد تحميل التطبيق",
+    macosReactotronHint: "اذا لم ينجح ذلك، فتأكد من تشغيل الحاسوب ب Reactotron وأعد تحميل التطبيق",
+    webReactotronHint: "اذا لم ينجح ذلك، فتأكد من تشغيل الحاسوب ب Reactotron وأعد تحميل التطبيق",
+    windowsReactotronHint:
+      "اذا لم ينجح ذلك، فتأكد من تشغيل الحاسوب ب Reactotron وأعد تحميل التطبيق",
+  },
+  demoPodcastListScreen: {
+    title: "حلقات إذاعية React Native",
+    onlyFavorites: "المفضلة فقط",
+    favoriteButton: "المفضل",
+    unfavoriteButton: "غير مفضل",
+    accessibility: {
+      cardHint: "انقر مرّتين للاستماع على الحلقة. انقر مرّتين وانتظر لتفعيل {{action}} هذه الحلقة.",
+      switch: "قم بالتبديل لاظهار المفضّلة فقط.",
+      favoriteAction: "تبديل المفضلة",
+      favoriteIcon: "الحلقة الغير مفضّلة",
+      unfavoriteIcon: "الحلقة المفضّلة",
+      publishLabel: "نشرت {{date}}",
+      durationLabel: "المدّة: {{hours}} ساعات {{minutes}} دقائق {{seconds}} ثواني",
+    },
+    noFavoritesEmptyState: {
+      heading: "هذا يبدو فارغاً بعض الشيء.",
+      content:
+        "لم تتم اضافة اي مفضلات حتى الان. اضغط على القلب في إحدى الحلقات لإضافته الى المفضلة.",
+    },
+  },
+
+  ...demoAr,
+}
+
+export default ar

RN_TEMPLATE/app/i18n/demo-ar.ts

@@ -0,0 +1,462 @@
+import { DemoTranslations } from "./demo-en"
+
+export const demoAr: DemoTranslations = {
+  demoIcon: {
+    description:
+      "مكون لعرض أيقونة مسجلة.يتم تغليفه في <TouchableOpacity> يتم توفير 'OnPress'، وإلا يتم توفير <View",
+    useCase: {
+      icons: {
+        name: "Icons",
+        description: "قائمة الرموز المسجلة داخل المكون.",
+      },
+      size: {
+        name: "Size",
+        description: "هناك حجم الدعامة.",
+      },
+      color: {
+        name: "لون",
+        description: "هناك لون الدعامة.",
+      },
+      styling: {
+        name: "التصميم",
+        description: "يمكن تصميم المكون بسهولة.",
+      },
+    },
+  },
+  demoTextField: {
+    description: "TextField يسمح المكون بإدخال النص وتحريره.",
+    useCase: {
+      statuses: {
+        name: "الحالات",
+        description:
+          "هناك حالة مماثلة ل 'preset' في المكونات الأخرى، ولكنها تؤثر على وظيفة المكون ايضاً.",
+        noStatus: {
+          label: "لا يوجد حالات",
+          helper: "هذه هي الحالة الافتراضية",
+          placeholder: "النص يذهب هنا",
+        },
+        error: {
+          label: "حالة الخطأ",
+          helper: "الحالة التي يجب استخدامها عند وجود خطأ",
+          placeholder: "النص يذهب هنا",
+        },
+        disabled: {
+          label: "حالة الإعاقة",
+          helper: "يعطل إمكانية التحرير ويكتم النص",
+          placeholder: "النص يذهب هنا",
+        },
+      },
+      passingContent: {
+        name: "محتوى عابر",
+        description: "هناك عدة طرق مختلفة لتمرير المحتوى",
+        viaLabel: {
+          labelTx: "عبر 'label' الدعامة",
+          helper: "عبر 'helper' الدعامة",
+          placeholder: "عبر 'placeholder' الدعامة",
+        },
+        rightAccessory: {
+          label: "RightAccessory",
+          helper: "هذه الدعامة تأخذ دالة تقوم بإرجاع عنصر React",
+        },
+        leftAccessory: {
+          label: "LeftAccessory",
+          helper: "هذه الدعامة تأخذ دالة تقوم بإرجاع عنصر React",
+        },
+        supportsMultiline: {
+          label: "يدعم Multiline",
+          helper: "يتيح إدخالا اطول للنص متعدد الأسطر.",
+        },
+      },
+      styling: {
+        name: "التصميم",
+        description: "يمكن تصميم المكون بسهولة",
+        styleInput: {
+          label: "أسلوب الإدخال",
+          helper: "عبر دعامة 'Style'",
+        },
+        styleInputWrapper: {
+          label: "غلاف ادخال النمط",
+          helper: "عبر دعامة 'InputWrapperStyle'",
+        },
+        styleContainer: {
+          label: "حاوية النمط",
+          helper: "عبر دعامة 'containerstyle'",
+        },
+        styleLabel: {
+          label: "تسمية النمط والمساعد",
+          helper: "عبر أسلوب الدعامة 'LabelTextProps' & 'HelperTextProps'",
+        },
+        styleAccessories: {
+          label: "اكسسورات الاناقة",
+          helper: "عبر أسلوب الدعامة 'RightAccessory' & 'LeftAccessory'",
+        },
+      },
+    },
+  },
+  demoToggle: {
+    description:
+      "يقوم بعرض ادخال منطقي.هذا مكون خاضع للتحكم ويتطلب استدعاء OnValueChanger الذي يقوم بتحديث خاصية القيمة حتى يعكس المكون إجراءات المستخدم. إذا لم يتم تحديث خاصية القيمة، فسيستمر المكون في عرض خاصية القيمة المقدمة بدلا من النتيجة المتوقعة لأي إجراءات مستخدم.",
+    useCase: {
+      variants: {
+        name: "المتغيرات",
+        description:
+          "تدعم المكونات عددا قليلا من المتغيرات المختلفة. اذا كانت هناك حاجة إلى تخصيص كبير لمتغير معين، فيمكن إعادة صياغته بسهولة. الافتراضي هو 'checkbox'",
+        checkbox: {
+          label: "'checkbox' متغير",
+          helper: "يمكن استخدامه كمدخل تشغيل \\ إيقاف واحد",
+        },
+        radio: {
+          label: "'radio' متغير",
+          helper: "استخدام هذا عندما يكون لديك خيارات متعددة",
+        },
+        switch: {
+          label: "'switch' متغير",
+          helper: "مدخل تشغيل/إيقاف أكثر بروزا. يتمتع بدعم إمكانية الوصول بشكل أفضل.",
+        },
+      },
+      statuses: {
+        name: "الحالات",
+        description:
+          "هناك دعامة حالة مشابهة ل 'preset' في المكونات الأخرى، لكنها تؤثر على وظائف المكونات ايضاً",
+        noStatus: "لا توجد حالات- هذا هو الوضع الافتراضي",
+        errorStatus: "حالة الخطأ - استخدمها عندما يكون هناك خطأ",
+        disabledStatus: "حالة معطلة- تعطيل إمكانية التحرير وكتم صوت الإدخال",
+      },
+      passingContent: {
+        name: "محتوى عابر",
+        description: "هناك عدة طرق مختلفة لتمرير المحتوى",
+        useCase: {
+          checkBox: {
+            label: "عبر دعامة 'labelTx'",
+            helper: "عبر دعامة 'helpertx'",
+          },
+          checkBoxMultiLine: {
+            helper: "يدعم خطوط متعددة-Nulla provident consectetur labore sunt ea labore ",
+          },
+          radioChangeSides: {
+            helper: "يمكنك تغيير الجانبين - Laborum labore adipisicing in eu ipsum deserunt.",
+          },
+          customCheckBox: {
+            label: "مرر أيقونة مربع الاختيار المخصص",
+          },
+          switch: {
+            label: "يمكن قراءة المفاتيح كنص",
+            helper:
+              "بشكل افتراضي، لا يستخدم هذا الخيار \"text' نظرا لأنه اعتمادا على الخط، قد تبدو الأحرف التي يتم تشغيلها/ايقافها غريبة. قم بالتخصيص حسب الحاجة",
+          },
+          switchAid: {
+            label: "او بمساعدة أيقونة",
+          },
+        },
+      },
+      styling: {
+        name: "التصميم",
+        description: "يمكن تصميم المكون بسهولة",
+        outerWrapper: "١- تصميم الغلاف الخارجي للإدخال",
+        innerWrapper: "٢- تصميم الغلاف الداخلي للإدخال",
+        inputDetail: "٣- تصميم تفاصيل الإدخال",
+        labelTx: "يمكنك ايضاً تصميم الملصق labelTx",
+        styleContainer: "او، قم بتصميم الحاوية بأكملها",
+      },
+    },
+  },
+  demoButton: {
+    description:
+      "مكون يسمح للمستخدمين بإتخاذ الإجراءات والاختيارات. يلف مكون النص بمكون قابل للضغط",
+    useCase: {
+      presets: {
+        name: "الإعدادات المسبقة",
+        description: "هناك عدد قليل من الإعدادات المسبقة التي تم تكوينها مسبقاً",
+      },
+      passingContent: {
+        name: "محتوى عابر",
+        description: "هناك عدة طرق مختلفة لتمرير المحتوى",
+        viaTextProps: "عبر الدعامة 'text'- Billum In",
+        children: "أولاد- Irure Reprehenderit",
+        rightAccessory: "RightAccessory - Duis Quis",
+        leftAccessory: "LeftAccessory - Duis Proident",
+        nestedChildren: "الأطفال المتداخلون-\tprovident genial",
+        nestedChildren2: "Ullamco cupidatat officia exercitation velit non ullamco nisi..",
+        nestedChildren3: "Occaecat aliqua irure proident veniam.",
+        multiLine:
+          "Multiline - consequat veniam veniam reprehenderit. Fugiat id nisi quis duis sunt proident mollit dolor mollit adipisicing proident deserunt.",
+      },
+      styling: {
+        name: "التصميم",
+        description: "يمكن تصميم المكون بسهولة",
+        styleContainer: "حاوية الأسلوب- الإثارة",
+        styleText: "نص النمط- ِEa Anim",
+        styleAccessories: "اكسسوارات الاناقة - enim ea id fugiat anim ad.",
+        pressedState: "نمط الحالة المضغوطة - fugiat anim",
+      },
+      disabling: {
+        name: "تعطيل",
+        description: "يمكن تعطيل المكون، وتصميمه بناء على ذلك. سيتم تعطيل سلوك الضغط",
+        standard: "إبطال - معيار",
+        filled: "إبطال - مملوء",
+        reversed: "إبطال- معكوس",
+        accessory: "نمط الملحق المعطل",
+        textStyle: "نمط النص المعطل",
+      },
+    },
+  },
+  demoListItem: {
+    description: "مكون صف مصمم يمكن استخدامه في FlatList او SectionList او بمفرده",
+    useCase: {
+      height: {
+        name: "علو",
+        description: "يمكن ان يكون الصف بارتفاعات مختلفة",
+        defaultHeight: "الارتفاع الافتراضي (56px)",
+        customHeight: "ارتفاع مخصص عبر دعامة 'height'",
+        textHeight:
+          "الارتفاع يتم تحديده من خلال محتوى النص - Reprehenderit incididunt deserunt do do ea labore.",
+        longText: "تحديد النص إلى سطر واحد - Reprehenderit incididunt deserunt do do ea labore.",
+      },
+      separators: {
+        name: "الفواصل",
+        description: "الفاصل/ المقسم مهيّأ مسبقاً وهو اختياري",
+        topSeparator: "فقط فاصل علوي",
+        topAndBottomSeparator: "الفواصل العلوية والسفلية",
+        bottomSeparator: "فقط فاصل سفلي",
+      },
+      icons: {
+        name: "الأيقونات",
+        description: "يمكنك تخصيص الرموز على اليسار أو اليمين",
+        leftIcon: "أيقونة اليسار",
+        rightIcon: "أيقونة اليمين",
+        leftRightIcons: "أيقونة اليمين واليسار",
+      },
+      customLeftRight: {
+        name: "مكونات مخصصة لليسار /اليمين",
+        description: "اذا كنت بحاجة إلى مخصص لليسار/اليمين فيمكنك تمريره",
+        customLeft: "مكون يسار مخصص",
+        customRight: "مكون يمين مخصص",
+      },
+      passingContent: {
+        name: "محتوى عابر",
+        description: "هناك عدة طرق مختلفة لتمرير المحتوى",
+        text: "عبر دعامة 'text' - reprehenderit sint",
+        children: "أولاد- mostrud mollit",
+        nestedChildren1: "الأولاد المتداخلون - proident veniam.",
+        nestedChildren2: "Ullamco cupidatat officia exercitation velit non ullamco nisi..",
+      },
+      listIntegration: {
+        name: "دمج مع/ FlatList",
+        description: "يمكن دمج المكون بسهولة مع واجهة القائمة المفضلة لديك",
+      },
+      styling: {
+        name: "التصميم",
+        description: "يمكن تصميم المكون بسهولة.",
+        styledText: "نص مصمم",
+        styledContainer: "حاوية مصممة (فواصل)",
+        tintedIcons: "أيقونات ملونة",
+      },
+    },
+  },
+  demoCard: {
+    description:
+      "البطاقات مفيدة لعرض المعلومات ذات الصلة بطريقة محددة. اذا كان ListItem يعرض المحتوى أفقياً، فيمكن استخدام البطاقة لعرض المحتوى رأسياً.",
+    useCase: {
+      presets: {
+        name: "الإعدادات المسبقة",
+        description: "هناك عدد قليل من الإعدادات المسبقة التي تم تكوينها مسبقاً",
+        default: {
+          heading: "الأعداد المسبق الافتراضي ( تقصير)",
+          content: "Incididunt magna ut aliquip consectetur mollit dolor.",
+          footer: "Consectetur nulla non aliquip velit.",
+        },
+        reversed: {
+          heading: "الأعداد المسبق المعكوس",
+          content: "Reprehenderit occaecat proident amet id laboris.",
+          footer: "Consectetur tempor ea non labore anim .",
+        },
+      },
+      verticalAlignment: {
+        name: "انحياز عمودي",
+        description:
+          "اعتمادا على ما هو مطلوب، تأتي البطاقة مهيأة مسبقاً باستراتيجيات محاذاة مختلفة",
+        top: {
+          heading: "قمة (تقصير)",
+          content: "يتم محاذاة كل محتوى تلقائياً إلى الأعلى",
+          footer: "حتى التذييل",
+        },
+        center: {
+          heading: "مركز",
+          content: "يتم تركيز المحتوى بالنسبة لارتفاع البطاقة",
+          footer: "أنا ايضاً!",
+        },
+        spaceBetween: {
+          heading: "مسافة بين الكلمات",
+          content: "يتم توزيع جميع المحتويات بالتساوي",
+          footer: "أنا حيث أريد ان أكون",
+        },
+        reversed: {
+          heading: "Force Footer Bottom",
+          content: "يؤدي هذا إلى دفع التذييل إلى المكان الذي ينتمي اليه.",
+          footer: "أنا وحد جداًهنا",
+        },
+      },
+      passingContent: {
+        name: "محتوى عابر",
+        description: "هناك عدة طرق مختلفة لتمرير المحتوى.",
+        heading: "عبر دعم 'heading'",
+        content: "عبر دعم 'content'",
+        footer: "أنا وحيد هنا.",
+      },
+      customComponent: {
+        name: "مكونات مخصصة",
+        description:
+          "يمكن استبدال اي من المكونات المعدة مسبقاً بمكوناتك الخاصة. يمكنك ايضاً اضافة مكونات إضافية.",
+        rightComponent: "RightComponent",
+        leftComponent: "LeftComponent",
+      },
+      style: {
+        name: "التصميم",
+        description: "يمكن تصميم المكون بسهولة.",
+        heading: "صمم العنوان",
+        content: "صمم المحتوى",
+        footer: "صمم التذييل",
+      },
+    },
+  },
+  demoAutoImage: {
+    description: "مكون صورة يحدد حجم الصورة البعيدة او صورة data-uri",
+    useCase: {
+      remoteUri: {
+        name: "عن بعد URI",
+      },
+      base64Uri: {
+        name: "Base64 URI",
+      },
+      scaledToFitDimensions: {
+        name: "تم قياسها لتناسب الأبعاد",
+        description:
+          " توفيرعرض  'maxWidth' و\\او 'maxHeight' ، سيتم عرض الصورة بنسبة عرض الى ارتفاع. كيف يختلف هذا عن 'resizeMode': 'contain'? اولاً،يمكنك تحديد حجم جانب واحد فقط. (ليس كلاهما). ثانياً، سيتم تغيير الصورة لتناسب الأبعاد المطلوبة بدلاً من مجرد احتوائها داخل حاوية الصورة الخاصة بها.",
+        heightAuto: " عرض : ٦٠ / طول:  auto",
+        widthAuto: "عرض: auto / طول: ٣٢",
+        bothManual: "عرض :٦٠ / طول : ٦٠",
+      },
+    },
+  },
+  demoText: {
+    description:
+      "لتلبية احتياجاتك في عرض النصوص. هذا المكون عبارة عن HOC فوق المكون المدمج Native React.",
+    useCase: {
+      presets: {
+        name: "الإعدادات المسبقة",
+        description: "هناك عدد قليل من الإعدادات المسبقة التي تم تكوينها مسبقاً.",
+        default:
+          "الأعداد المسبق الافتراضي - Cillum eu laboris in labore. Excepteur mollit tempor reprehenderit fugiat elit et eu consequat laborum.",
+        bold: "bold preset - Tempor et ullamco cupidatat in officia. Nulla ea duis elit id sunt ipsum cillum duis deserunt nostrud ut nostrud id.",
+        subheading: "subheading preset - In Cupidatat Cillum.",
+        heading: "heading preset - Voluptate Adipis.",
+      },
+      sizes: {
+        name: "قياسات",
+        description: "هناك حجم الدعامة",
+        xs: "xs - Ea ipsum est ea ex sunt.",
+        sm: "sm - Lorem sunt adipisicin.",
+        md: "md - Consequat id do lorem.",
+        lg: "lg - Nostrud ipsum ea.",
+        xl: "xl - Eiusmod ex excepteur.",
+        xxl: "xxl - Cillum eu laboris.",
+      },
+      weights: {
+        name: "أوزان",
+        description: "هناك وزن الدعامة",
+        light:
+          "light - Nulla magna incididunt excepteur est occaecat duis culpa dolore cupidatat enim et.",
+        normal:
+          "normal - Magna incididunt dolor ut veniam veniam laboris aliqua velit ea incididunt.",
+        medium: "medium - Non duis laborum quis laboris occaecat culpa cillum.",
+        semibold: "semiBold - Exercitation magna nostrud pariatur laborum occaecat aliqua.",
+        bold: "bold - Eiusmod ullamco magna exercitation est excepteur.",
+      },
+      passingContent: {
+        name: "محتوى عابر",
+        description: "هناك عدة طرق مختلفة لتمرير المحتوى.",
+        viaText:
+          "via `text` prop - Billum in aute fugiat proident nisi pariatur est. Cupidatat anim cillum eiusmod ad. Officia eu magna aliquip labore dolore consequat.",
+        viaTx: "عبر دعامة 'tx'",
+        children: "childrenreprehenderit eu qui amet veniam consectetur.",
+        nestedChildren: "الأطفال المتداخلون",
+        nestedChildren2: "Occaecat aliqua irure proident veniam.",
+        nestedChildren3: "Ullamco cupidatat officia exercitation velit non ullamco nisi..",
+        nestedChildren4: "Occaecat aliqua irure proident veniam.",
+      },
+      styling: {
+        name: "التصميم",
+        description: "يمكن تصميم المكون بسهولة.",
+        text: "Consequat ullamco veniam velit mollit proident excepteur aliquip id culpa ipsum velit sint nostrud.",
+        text2:
+          "Eiusmod occaecat laboris eu ex veniam ipsum adipisicing consectetur. Magna ullamco adipisicing tempor adipisicing.",
+        text3:
+          "Eiusmod occaecat laboris eu ex veniam ipsum adipisicing consectetur. Magna ullamco adipisicing tempor adipisicing.",
+      },
+    },
+  },
+  demoHeader: {
+    description: "المكون الذي يظهر على العديد من الشاشات، سيحمل ازرار التنقل وعنوان الشاشة.",
+    useCase: {
+      actionIcons: {
+        name: "أيقونة الإجرائات ",
+        description: "يمكنك بسهولة تمرير الرموزالى مكونات الاجراء اليسرى او اليمنى.",
+        leftIconTitle: "الرمز الأيسر",
+        rightIconTitle: "الرمز الأيمن ",
+        bothIconsTitle: "كلا الرمزين",
+      },
+      actionText: {
+        name: "نص العمل",
+        description: "يمكنك بسهولة تمرير النص الى مكونات الاجراء اليسرى او اليمنى.",
+        leftTxTitle: "عبر 'leftTx' ",
+        rightTextTitle: "عبر `rightText`",
+      },
+      customActionComponents: {
+        name: "مكونات الاجراء المخصص",
+        description:
+          "اذا لم تكن خيارات الرمز او النسكافية، فيمكنك تمرير مكون الاجراء المخصص الخاص بك.",
+        customLeftActionTitle: "عمل يسار مخصص ",
+      },
+      titleModes: {
+        name: "اوضاع العنوان",
+        description:
+          "يمكن اجبار العنوان على البقاء غي المنتصف ولكن قد يتم قطعه اذا كان طويلاً للغاية. يمكنك بشكل اختياري تعديله وفقاً لأزرار الإجراء.",
+        centeredTitle: "عنوان مركزي",
+        flexTitle: "عنوان مرن",
+      },
+      styling: {
+        name: "التصميم",
+        description: "يمكن تصميم المكون بسهولة",
+        styledTitle: "عنوان مصمم",
+        styledWrapperTitle: "غلاف مصمم",
+        tintedIconsTitle: "أيقونات ملونة",
+      },
+    },
+  },
+  demoEmptyState: {
+    description:
+      "مكون يتم استخدامه عندما لا يكون هناك بيانات لعرضها. ويمكن استخدامه لتوجيه المستخدم الى ما يجب فعله بعد ذلك.",
+    useCase: {
+      presets: {
+        name: "الإعدادات المسبقة",
+        description:
+          "يمكن إنشاء نص/صورة مختلفة مجموعات. واحد محدد مسبقاً يسمى 'generic'. لاحظ انه لا يوجد اي خيار افتراضي في حال رغبتك في الحصول على كامل  EmptyState مخصصة.",
+      },
+      passingContent: {
+        name: "محتوى عابر",
+        description: "هناك عدة طرق مختلفة لتمرير المحتوى.",
+        customizeImageHeading: "تخصيص الصورة",
+        customizeImageContent: "يمكنك تمرير اي مصدر للصورة",
+        viaHeadingProp: "عبر دعامة 'heading'",
+        viaContentProp: "عبر دعامة 'content'",
+        viaButtonProp: "عبر دعامة 'button'",
+      },
+      styling: {
+        name: "التصميم",
+        description: "يمكن تصميم المكون بسهولة.",
+      },
+    },
+  },
+}
+
+export default demoAr

RN_TEMPLATE/app/i18n/demo-en.ts

@@ -0,0 +1,460 @@
+export const demoEn = {
+  demoIcon: {
+    description:
+      "A component to render a registered icon. It is wrapped in a <TouchableOpacity /> if `onPress` is provided, otherwise a <View />.",
+    useCase: {
+      icons: {
+        name: "Icons",
+        description: "List of icons registered inside the component.",
+      },
+      size: {
+        name: "Size",
+        description: "There's a size prop.",
+      },
+      color: {
+        name: "Color",
+        description: "There's a color prop.",
+      },
+      styling: {
+        name: "Styling",
+        description: "The component can be styled easily.",
+      },
+    },
+  },
+  demoTextField: {
+    description: "TextField component allows for the entering and editing of text.",
+    useCase: {
+      statuses: {
+        name: "Statuses",
+        description:
+          "There is a status prop - similar to `preset` in other components, but affects component functionality as well.",
+        noStatus: {
+          label: "No Status",
+          helper: "This is the default status",
+          placeholder: "Text goes here",
+        },
+        error: {
+          label: "Error Status",
+          helper: "Status to use when there is an error",
+          placeholder: "Text goes here",
+        },
+        disabled: {
+          label: "Disabled Status",
+          helper: "Disables the editability and mutes text",
+          placeholder: "Text goes here",
+        },
+      },
+      passingContent: {
+        name: "Passing Content",
+        description: "There are a few different ways to pass content.",
+        viaLabel: {
+          labelTx: "Via `label` prop",
+          helper: "Via `helper` prop",
+          placeholder: "Via `placeholder` prop",
+        },
+        rightAccessory: {
+          label: "RightAccessory",
+          helper: "This prop takes a function that returns a React element.",
+        },
+        leftAccessory: {
+          label: "LeftAccessory",
+          helper: "This prop takes a function that returns a React element.",
+        },
+        supportsMultiline: {
+          label: "Supports Multiline",
+          helper: "Enables a taller input for multiline text.",
+        },
+      },
+      styling: {
+        name: "Styling",
+        description: "The component can be styled easily.",
+        styleInput: {
+          label: "Style Input",
+          helper: "Via `style` prop",
+        },
+        styleInputWrapper: {
+          label: "Style Input Wrapper",
+          helper: "Via `inputWrapperStyle` prop",
+        },
+        styleContainer: {
+          label: "Style Container",
+          helper: "Via `containerStyle` prop",
+        },
+        styleLabel: {
+          label: "Style Label & Helper",
+          helper: "Via `LabelTextProps` & `HelperTextProps` style prop",
+        },
+        styleAccessories: {
+          label: "Style Accessories",
+          helper: "Via `RightAccessory` & `LeftAccessory` style prop",
+        },
+      },
+    },
+  },
+  demoToggle: {
+    description:
+      "Renders a boolean input. This is a controlled component that requires an onValueChange callback that updates the value prop in order for the component to reflect user actions. If the value prop is not updated, the component will continue to render the supplied value prop instead of the expected result of any user actions.",
+    useCase: {
+      variants: {
+        name: "Variants",
+        description:
+          "The component supports a few different variants. If heavy customization of a specific variant is needed, it can be easily refactored. The default is `checkbox`.",
+        checkbox: {
+          label: "`checkbox` variant",
+          helper: "This can be used for a single on/off input.",
+        },
+        radio: {
+          label: "`radio` variant",
+          helper: "Use this when you have multiple options.",
+        },
+        switch: {
+          label: "`switch` variant",
+          helper: "A more prominent on/off input. Has better accessibility support.",
+        },
+      },
+      statuses: {
+        name: "Statuses",
+        description:
+          "There is a status prop - similar to `preset` in other components, but affects component functionality as well.",
+        noStatus: "No status - this is the default",
+        errorStatus: "Error status - use when there is an error",
+        disabledStatus: "Disabled status - disables the editability and mutes input",
+      },
+      passingContent: {
+        name: "Passing Content",
+        description: "There are a few different ways to pass content.",
+        useCase: {
+          checkBox: {
+            label: "Via `labelTx` prop",
+            helper: "Via `helperTx` prop.",
+          },
+          checkBoxMultiLine: {
+            helper: "Supports multiline - Nulla proident consectetur labore sunt ea labore. ",
+          },
+          radioChangeSides: {
+            helper: "You can change sides - Laborum labore adipisicing in eu ipsum deserunt.",
+          },
+          customCheckBox: {
+            label: "Pass in a custom checkbox icon.",
+          },
+          switch: {
+            label: "Switches can be read as text",
+            helper:
+              "By default, this option doesn't use `Text` since depending on the font, the on/off characters might look weird. Customize as needed.",
+          },
+          switchAid: {
+            label: "Or aided with an icon",
+          },
+        },
+      },
+      styling: {
+        name: "Styling",
+        description: "The component can be styled easily.",
+        outerWrapper: "1 - style the input outer wrapper",
+        innerWrapper: "2 - style the input inner wrapper",
+        inputDetail: "3 - style the input detail",
+        labelTx: "You can also style the labelTx",
+        styleContainer: "Or, style the entire container",
+      },
+    },
+  },
+  demoButton: {
+    description:
+      "A component that allows users to take actions and make choices. Wraps the Text component with a Pressable component.",
+    useCase: {
+      presets: {
+        name: "Presets",
+        description: "There are a few presets that are preconfigured.",
+      },
+      passingContent: {
+        name: "Passing Content",
+        description: "There are a few different ways to pass content.",
+        viaTextProps: "Via `text` Prop - Billum In",
+        children: "Children - Irure Reprehenderit",
+        rightAccessory: "RightAccessory - Duis Quis",
+        leftAccessory: "LeftAccessory - Duis Proident",
+        nestedChildren: "Nested children - proident veniam.",
+        nestedChildren2: "Ullamco cupidatat officia exercitation velit non ullamco nisi..",
+        nestedChildren3: "Occaecat aliqua irure proident veniam.",
+        multiLine:
+          "Multiline - consequat veniam veniam reprehenderit. Fugiat id nisi quis duis sunt proident mollit dolor mollit adipisicing proident deserunt.",
+      },
+      styling: {
+        name: "Styling",
+        description: "The component can be styled easily.",
+        styleContainer: "Style Container - Exercitation",
+        styleText: "Style Text - Ea Anim",
+        styleAccessories: "Style Accessories - enim ea id fugiat anim ad.",
+        pressedState: "Style Pressed State - fugiat anim",
+      },
+      disabling: {
+        name: "Disabling",
+        description:
+          "The component can be disabled, and styled based on that. Press behavior will be disabled.",
+        standard: "Disabled - standard",
+        filled: "Disabled - filled",
+        reversed: "Disabled - reversed",
+        accessory: "Disabled accessory style",
+        textStyle: "Disabled text style",
+      },
+    },
+  },
+  demoListItem: {
+    description: "A styled row component that can be used in FlatList, SectionList, or by itself.",
+    useCase: {
+      height: {
+        name: "Height",
+        description: "The row can be different heights.",
+        defaultHeight: "Default height (56px)",
+        customHeight: "Custom height via `height` prop",
+        textHeight:
+          "Height determined by text content - Reprehenderit incididunt deserunt do do ea labore.",
+        longText:
+          "Limit long text to one line - Reprehenderit incididunt deserunt do do ea labore.",
+      },
+      separators: {
+        name: "Separators",
+        description: "The separator / divider is preconfigured and optional.",
+        topSeparator: "Only top separator",
+        topAndBottomSeparator: "Top and bottom separators",
+        bottomSeparator: "Only bottom separator",
+      },
+      icons: {
+        name: "Icons",
+        description: "You can customize the icons on the left or right.",
+        leftIcon: "Left icon",
+        rightIcon: "Right Icon",
+        leftRightIcons: "Left & Right Icons",
+      },
+      customLeftRight: {
+        name: "Custom Left/Right Components",
+        description: "If you need a custom left/right component, you can pass it in.",
+        customLeft: "Custom left component",
+        customRight: "Custom right component",
+      },
+      passingContent: {
+        name: "Passing Content",
+        description: "There are a few different ways to pass content.",
+        text: "Via `text` prop - reprehenderit sint",
+        children: "Children - mostrud mollit",
+        nestedChildren1: "Nested children - proident veniam.",
+        nestedChildren2: "Ullamco cupidatat officia exercitation velit non ullamco nisi..",
+      },
+      listIntegration: {
+        name: "Integrating w/ FlatList",
+        description: "The component can be easily integrated with your favorite list interface.",
+      },
+      styling: {
+        name: "Styling",
+        description: "The component can be styled easily.",
+        styledText: "Styled Text",
+        styledContainer: "Styled Container (separators)",
+        tintedIcons: "Tinted Icons",
+      },
+    },
+  },
+  demoCard: {
+    description:
+      "Cards are useful for displaying related information in a contained way. If a ListItem displays content horizontally, a Card can be used to display content vertically.",
+    useCase: {
+      presets: {
+        name: "Presets",
+        description: "There are a few presets that are preconfigured.",
+        default: {
+          heading: "Default Preset (default)",
+          content: "Incididunt magna ut aliquip consectetur mollit dolor.",
+          footer: "Consectetur nulla non aliquip velit.",
+        },
+        reversed: {
+          heading: "Reversed Preset",
+          content: "Reprehenderit occaecat proident amet id laboris.",
+          footer: "Consectetur tempor ea non labore anim .",
+        },
+      },
+      verticalAlignment: {
+        name: "Vertical Alignment",
+        description:
+          "Depending on what's required, the card comes preconfigured with different alignment strategies.",
+        top: {
+          heading: "Top (default)",
+          content: "All content is automatically aligned to the top.",
+          footer: "Even the footer",
+        },
+        center: {
+          heading: "Center",
+          content: "Content is centered relative to the card's height.",
+          footer: "Me too!",
+        },
+        spaceBetween: {
+          heading: "Space Between",
+          content: "All content is spaced out evenly.",
+          footer: "I am where I want to be.",
+        },
+        reversed: {
+          heading: "Force Footer Bottom",
+          content: "This pushes the footer where it belongs.",
+          footer: "I'm so lonely down here.",
+        },
+      },
+      passingContent: {
+        name: "Passing Content",
+        description: "There are a few different ways to pass content.",
+        heading: "Via `heading` Prop",
+        content: "Via `content` Prop",
+        footer: "I'm so lonely down here.",
+      },
+      customComponent: {
+        name: "Custom Components",
+        description:
+          "Any of the preconfigured components can be replaced with your own. You can also add additional ones.",
+        rightComponent: "RightComponent",
+        leftComponent: "LeftComponent",
+      },
+      style: {
+        name: "Styling",
+        description: "The component can be styled easily.",
+        heading: "Style the Heading",
+        content: "Style the Content",
+        footer: "Style the Footer",
+      },
+    },
+  },
+  demoAutoImage: {
+    description: "An Image component that automatically sizes a remote or data-uri image.",
+    useCase: {
+      remoteUri: { name: "Remote URI" },
+      base64Uri: { name: "Base64 URI" },
+      scaledToFitDimensions: {
+        name: "Scaled to Fit Dimensions",
+        description:
+          "Providing a `maxWidth` and/or `maxHeight` props, the image will automatically scale while retaining it's aspect ratio. How is this different from `resizeMode: 'contain'`? Firstly, you can specify only one side's size (not both). Secondly, the image will scale to fit the desired dimensions instead of just being contained within its image-container.",
+        heightAuto: "width: 60 / height: auto",
+        widthAuto: "width: auto / height: 32",
+        bothManual: "width: 60 / height: 60",
+      },
+    },
+  },
+  demoText: {
+    description:
+      "For your text displaying needs. This component is a HOC over the built-in React Native one.",
+    useCase: {
+      presets: {
+        name: "Presets",
+        description: "There are a few presets that are preconfigured.",
+        default:
+          "default preset - Cillum eu laboris in labore. Excepteur mollit tempor reprehenderit fugiat elit et eu consequat laborum.",
+        bold: "bold preset - Tempor et ullamco cupidatat in officia. Nulla ea duis elit id sunt ipsum cillum duis deserunt nostrud ut nostrud id.",
+        subheading: "subheading preset - In Cupidatat Cillum.",
+        heading: "heading preset - Voluptate Adipis.",
+      },
+      sizes: {
+        name: "Sizes",
+        description: "There's a size prop.",
+        xs: "xs - Ea ipsum est ea ex sunt.",
+        sm: "sm - Lorem sunt adipisicin.",
+        md: "md - Consequat id do lorem.",
+        lg: "lg - Nostrud ipsum ea.",
+        xl: "xl - Eiusmod ex excepteur.",
+        xxl: "xxl - Cillum eu laboris.",
+      },
+      weights: {
+        name: "Weights",
+        description: "There's a weight prop.",
+        light:
+          "light - Nulla magna incididunt excepteur est occaecat duis culpa dolore cupidatat enim et.",
+        normal:
+          "normal - Magna incididunt dolor ut veniam veniam laboris aliqua velit ea incididunt.",
+        medium: "medium - Non duis laborum quis laboris occaecat culpa cillum.",
+        semibold: "semiBold - Exercitation magna nostrud pariatur laborum occaecat aliqua.",
+        bold: "bold - Eiusmod ullamco magna exercitation est excepteur.",
+      },
+      passingContent: {
+        name: "Passing Content",
+        description: "There are a few different ways to pass content.",
+        viaText:
+          "via `text` prop - Billum in aute fugiat proident nisi pariatur est. Cupidatat anim cillum eiusmod ad. Officia eu magna aliquip labore dolore consequat.",
+        viaTx: "via `tx` prop -",
+        children: "children - Aliqua velit irure reprehenderit eu qui amet veniam consectetur.",
+        nestedChildren: "Nested children -",
+        nestedChildren2: "Occaecat aliqua irure proident veniam.",
+        nestedChildren3: "Ullamco cupidatat officia exercitation velit non ullamco nisi..",
+        nestedChildren4: "Occaecat aliqua irure proident veniam.",
+      },
+      styling: {
+        name: "Styling",
+        description: "The component can be styled easily.",
+        text: "Consequat ullamco veniam velit mollit proident excepteur aliquip id culpa ipsum velit sint nostrud.",
+        text2:
+          "Eiusmod occaecat laboris eu ex veniam ipsum adipisicing consectetur. Magna ullamco adipisicing tempor adipisicing.",
+        text3:
+          "Eiusmod occaecat laboris eu ex veniam ipsum adipisicing consectetur. Magna ullamco adipisicing tempor adipisicing.",
+      },
+    },
+  },
+  demoHeader: {
+    description:
+      "Component that appears on many screens. Will hold navigation buttons and screen title.",
+    useCase: {
+      actionIcons: {
+        name: "Action Icons",
+        description: "You can easily pass in icons to the left or right action components.",
+        leftIconTitle: "Left Icon",
+        rightIconTitle: "Right Icon",
+        bothIconsTitle: "Both Icons",
+      },
+      actionText: {
+        name: "Action Text",
+        description: "You can easily pass in text to the left or right action components.",
+        leftTxTitle: "Via `leftTx`",
+        rightTextTitle: "Via `rightText`",
+      },
+      customActionComponents: {
+        name: "Custom Action Components",
+        description:
+          "If the icon or text options are not enough, you can pass in your own custom action component.",
+        customLeftActionTitle: "Custom Left Action",
+      },
+      titleModes: {
+        name: "Title Modes",
+        description:
+          "Title can be forced to stay in center (default) but may be cut off if it's too long. You can optionally make it adjust to the action buttons.",
+        centeredTitle: "Centered Title",
+        flexTitle: "Flex Title",
+      },
+      styling: {
+        name: "Styling",
+        description: "The component can be styled easily.",
+        styledTitle: "Styled Title",
+        styledWrapperTitle: "Styled Wrapper",
+        tintedIconsTitle: "Tinted Icons",
+      },
+    },
+  },
+  demoEmptyState: {
+    description:
+      "A component to use when there is no data to display. It can be utilized to direct the user what to do next",
+    useCase: {
+      presets: {
+        name: "Presets",
+        description:
+          "You can create different text/image sets. One is predefined called `generic`. Note, there's no default in case you want to have a completely custom EmptyState.",
+      },
+      passingContent: {
+        name: "Passing Content",
+        description: "There are a few different ways to pass content.",
+        customizeImageHeading: "Customize Image",
+        customizeImageContent: "You can pass in any image source.",
+        viaHeadingProp: "Via `heading` Prop",
+        viaContentProp: "Via `content` prop.",
+        viaButtonProp: "Via `button` Prop",
+      },
+      styling: {
+        name: "Styling",
+        description: "The component can be styled easily.",
+      },
+    },
+  },
+}
+
+export default demoEn
+export type DemoTranslations = typeof demoEn

RN_TEMPLATE/app/i18n/demo-es.ts

@@ -0,0 +1,467 @@
+import { DemoTranslations } from "./demo-en"
+
+export const demoEs: DemoTranslations = {
+  demoIcon: {
+    description:
+      "Un componente para dibujar un ícono pre-definido. Si se proporciona el atributo `onPress`, se rodea por un componente <TouchableOpacity />. De lo contrario, se rodea por un componente <View />.",
+    useCase: {
+      icons: {
+        name: "Íconos",
+        description: "Lista de los íconos pre-definidos para el componente.",
+      },
+      size: {
+        name: "Tamaño",
+        description: "Hay un atributo para el tamaño.",
+      },
+      color: {
+        name: "Color",
+        description: "Hay un atributo para el color.",
+      },
+      styling: {
+        name: "Estilo",
+        description: "El componente puede ser configurado fácilmente.",
+      },
+    },
+  },
+  demoTextField: {
+    description: "El componente <TextField /> permite el ingreso y edición de texto.",
+    useCase: {
+      statuses: {
+        name: "Estados",
+        description:
+          "Hay un atributo para el estado - similar a `preset` en otros componentes, pero que además impacta en la funcionalidad del componente.",
+        noStatus: {
+          label: "Sin estado",
+          helper: "Este es el estado por defecto",
+          placeholder: "El texto va acá",
+        },
+        error: {
+          label: "Estado de error",
+          helper: "Estado para usar en caso de error",
+          placeholder: "El texto va acá",
+        },
+        disabled: {
+          label: "Estado desactivado",
+          helper: "Desactiva la edición y atenúa el texto",
+          placeholder: "El texto va acá",
+        },
+      },
+      passingContent: {
+        name: "Entregando contenido",
+        description: "Hay varias formas de entregar contenido.",
+        viaLabel: {
+          labelTx: "A través del atributo `label`",
+          helper: "A través del atributo `helper`",
+          placeholder: "A través del atributo `placeholder`",
+        },
+        rightAccessory: {
+          label: "Complemento derecho",
+          helper: "Este atributo requiere una función que retorne un elemento React.",
+        },
+        leftAccessory: {
+          label: "Complemento izquierdo",
+          helper: "Este atributo requiere una función que retorne un elemento React.",
+        },
+        supportsMultiline: {
+          label: "Soporta múltilíneas",
+          helper: "Permite un input de texto más largo para texto multilinea.",
+        },
+      },
+      styling: {
+        name: "Estilo",
+        description: "El componente puede ser configurado fácilmente.",
+        styleInput: {
+          label: "Estilo del input",
+          helper: "A través de el atributo `style`",
+        },
+        styleInputWrapper: {
+          label: "Estilo del contenedor del input",
+          helper: "A través de el atributo `inputWrapperStyle`",
+        },
+        styleContainer: {
+          label: "Estilo del contenedor",
+          helper: "A través de el atributo `containerStyle`",
+        },
+        styleLabel: {
+          label: "Estilo de la etiqueta y texto de ayuda",
+          helper: "A través de las props de estilo `LabelTextProps` y `HelperTextProps`",
+        },
+        styleAccessories: {
+          label: "Estilo de los accesorios",
+          helper: "A través de las props de estilo `RightAccessory` y `LeftAccessory`",
+        },
+      },
+    },
+  },
+  demoToggle: {
+    description:
+      "Dibuja un switch de tipo booleano. Este componente requiere un callback `onValueChange` que actualice el atributo `value` para que este refleje las acciones del usuario. Si el atributo `value` no se actualiza, el componente seguirá mostrando el valor proporcionado por defecto en lugar de lo esperado por las acciones del usuario.",
+    useCase: {
+      variants: {
+        name: "Variantes",
+        description:
+          "El componente soporta diferentes variantes. Si se necesita una personalización más avanzada o variante específica, puede ser fácilmente refactorizada. El valor por defecto es `checkbox`.",
+        checkbox: {
+          label: "Variante `checkbox`",
+          helper: "Puede ser utilizada para un único valor del tipo on/off.",
+        },
+        radio: {
+          label: "Variante `radio`",
+          helper: "Usa esto cuando tengas múltiples opciones.",
+        },
+        switch: {
+          label: "Variante `switch`",
+          helper:
+            "Una entrada del tipo on/off que sobresale más. Tiene mejor soporte de accesibilidad.",
+        },
+      },
+      statuses: {
+        name: "Estados",
+        description:
+          "Hay un atributo de estado - similar a `preset` en otros componentes, pero que además impacta en la funcionalidad del componente.",
+        noStatus: "Sin estado - este es el valor por defecto",
+        errorStatus: "Estado de error - para usar cuando haya un error",
+        disabledStatus: "Estado desactivado - desactiva la edición y silencia el input",
+      },
+      passingContent: {
+        name: "Entregando contenido",
+        description: "Hay varias formas de entregar contenido.",
+        useCase: {
+          checkBox: {
+            label: "A través del atributo `labelTx`",
+            helper: "A través del atributo `helperTx`.",
+          },
+          checkBoxMultiLine: {
+            helper: "Soporta multi líneas - Nulla proident consectetur labore sunt ea labore.",
+          },
+          radioChangeSides: {
+            helper: "Puedes cambiarle el lado - Laborum labore adipisicing in eu ipsum deserunt.",
+          },
+          customCheckBox: {
+            label: "Pasa un ícono para un checkbox personalizado.",
+          },
+          switch: {
+            label: "Los interruptores pueden leerse como texto",
+            helper:
+              "Por defecto, esta opción no usa `Text` ya que, dependiendo de la fuente, los caracteres on/off podrían no dibujarse bien. Personalízalo según tus necesidades.",
+          },
+          switchAid: {
+            label: "O con la ayuda de un ícono",
+          },
+        },
+      },
+      styling: {
+        name: "Estilo",
+        description: "El componente puede ser configurado fácilmente.",
+        outerWrapper: "1 - configura el contenedor externo del input",
+        innerWrapper: "2 - configura el contenedor interno del input",
+        inputDetail: "3 - configura el detalle del input",
+        labelTx: "También puedes configurar el atributo labelTx",
+        styleContainer: "O, configura todo el contenedor",
+      },
+    },
+  },
+  demoButton: {
+    description:
+      "Un componente que permite a los usuarios realizar acciones y hacer elecciones. Rodea un componente Text con otro componente Pressable.",
+    useCase: {
+      presets: {
+        name: "Preajustes",
+        description: "Hay algunos preajustes por defecto.",
+      },
+      passingContent: {
+        name: "Entregando contenido",
+        description: "Hay varias formas de entregar contenido.",
+        viaTextProps: "A través del atributo `text` - Billum In",
+        children: "Contenido anidado (children) - Irure Reprehenderit",
+        rightAccessory: "Componente derecho - Duis Quis",
+        leftAccessory: "Componente izquierdo - Duis Proident",
+        nestedChildren: "Contenido anidado - proident veniam.",
+        nestedChildren2: "Ullamco cupidatat officia exercitation velit non ullamco nisi..",
+        nestedChildren3: "Occaecat aliqua irure proident veniam.",
+        multiLine:
+          "Multilínea - consequat veniam veniam reprehenderit. Fugiat id nisi quis duis sunt proident mollit dolor mollit adipisicing proident deserunt.",
+      },
+      styling: {
+        name: "Estilo",
+        description: "El componente puede ser configurando fácilmente.",
+        styleContainer: "Estilo del contenedor - Exercitation",
+        styleText: "Estilo del texto - Ea Anim",
+        styleAccessories: "Estilo de los componentes - enim ea id fugiat anim ad.",
+        pressedState: "Estilo para el estado presionado - fugiat anim",
+      },
+      disabling: {
+        name: "Desactivado",
+        description:
+          "El componente puede ser desactivado y como consecuencia, estilizado. El comportamiento para hacer clic será desactivado.",
+        standard: "Desactivado - estándar",
+        filled: "Desactivado - relleno",
+        reversed: "Desactivado - invertido",
+        accessory: "Estilo del componente desactivado",
+        textStyle: "Estilo del texto desactivado",
+      },
+    },
+  },
+  demoListItem: {
+    description:
+      "Un componente estilizado que representa una fila para ser utilizada dentro de un FlatList, SectionList o por sí solo.",
+    useCase: {
+      height: {
+        name: "Altura",
+        description: "La fila puede tener diferentes alturas.",
+        defaultHeight: "Altura por defecto (56px)",
+        customHeight: "Altura personalizada a través del atributo `height`",
+        textHeight:
+          "Altura determinada por el contenido del texto - Reprehenderit incididunt deserunt do do ea labore.",
+        longText:
+          "Limitar texto largo a solo una línea - Reprehenderit incididunt deserunt do do ea labore.",
+      },
+      separators: {
+        name: "Separadores",
+        description: "El separador/divisor está preconfigurado y es opcional.",
+        topSeparator: "Separador solo en la parte superior",
+        topAndBottomSeparator: "Separadores en la parte superior e inferior",
+        bottomSeparator: "Separador solo en la parte inferior",
+      },
+      icons: {
+        name: "Íconos",
+        description: "Puedes personalizar los íconos a la izquierda o a la derecha.",
+        leftIcon: "Ícono izquierdo",
+        rightIcon: "Ícono derecho",
+        leftRightIcons: "Íconos izquierdo y derecho",
+      },
+      customLeftRight: {
+        name: "Componentes personalizados en la izquierda o derecha",
+        description:
+          "Puede pasar un componente personalizado en la izquierda o derecha, si así lo necesitas.",
+        customLeft: "Componente personalizado a la izquierda",
+        customRight: "Componente personalizado a la derecha",
+      },
+      passingContent: {
+        name: "Entregando contenido",
+        description: "Hay varias formas de entregar contenido.",
+        text: "A través del atributo `text` - reprehenderit sint",
+        children: "Contenido anidado (children) - mostrud mollit",
+        nestedChildren1: "Contenido anidado 1 - proident veniam.",
+        nestedChildren2: "Ullamco cupidatat officia exercitation velit non ullamco nisi..",
+      },
+      listIntegration: {
+        name: "Integración con FlatList",
+        description:
+          "El componente puede ser fácilmente integrado con tu interfaz de lista preferida.",
+      },
+      styling: {
+        name: "Estilo",
+        description: "El componente puede ser configurando fácilmente.",
+        styledText: "Texto estilizado",
+        styledContainer: "Contenedor estilizado (separadores)",
+        tintedIcons: "Íconos coloreados",
+      },
+    },
+  },
+  demoCard: {
+    description:
+      "Las tarjetas son útiles para mostrar información relacionada de forma englobada. Si un ListItem muestra el contenido horizontalmente, una tarjeta puede ser también utilizada para mostrar el contenido de manera vertical.",
+    useCase: {
+      presets: {
+        name: "Preajustes",
+        description: "Hay algunos ajustes preconfigurados.",
+        default: {
+          heading: "Preajuste por defecto (default)",
+          content: "Incididunt magna ut aliquip consectetur mollit dolor.",
+          footer: "Consectetur nulla non aliquip velit.",
+        },
+        reversed: {
+          heading: "Preajuste inverso",
+          content: "Reprehenderit occaecat proident amet id laboris.",
+          footer: "Consectetur tempor ea non labore anim.",
+        },
+      },
+      verticalAlignment: {
+        name: "Alineamiento vertical",
+        description:
+          "Dependiendo del requerimiento, la tarjeta está preconfigurada con diferentes estrategias de alineación.",
+        top: {
+          heading: "Arriba (por defecto)",
+          content: "Todo el contenido está automáticamente alineado en la parte superior.",
+          footer: "Incluso en el pie de página",
+        },
+        center: {
+          heading: "Centro",
+          content: "El contenido está centrado en relación con la altura de la tarjeta.",
+          footer: "¡Yo también!",
+        },
+        spaceBetween: {
+          heading: "Espacio entre",
+          content: "Todo el contenido está espaciado uniformemente.",
+          footer: "Estoy donde quiero estar.",
+        },
+        reversed: {
+          heading: "Forzar el pie de página hacia abajo",
+          content: "Esto empuja el pie de página hacia donde pertenece.",
+          footer: "Estoy tan solo aquí abajo.",
+        },
+      },
+      passingContent: {
+        name: "Entregando contenido",
+        description: "Hay varias formas de entregar contenido.",
+        heading: "A través del atributo `heading`",
+        content: "A través del atributo `content`",
+        footer: "Estoy tan solo aquí abajo.",
+      },
+      customComponent: {
+        name: "Componentes personalizados",
+        description:
+          "Cualquier componente preconfigurado puede ser reemplazado por uno específico. Puedes agregar otros si así lo requieres.",
+        rightComponent: "Componente derecho",
+        leftComponent: "Componente izquierdo",
+      },
+      style: {
+        name: "Estilo",
+        description: "El componente puede ser configurado fácilmente.",
+        heading: "Estilizar el encabezado",
+        content: "Estilizar el contenido",
+        footer: "Estilizar el pie de página",
+      },
+    },
+  },
+  demoAutoImage: {
+    description:
+      "Un componente que se ajusta automáticamente el tamaño de una imagen remota o utilizando el atributo data-uri.",
+    useCase: {
+      remoteUri: { name: "URI remota" },
+      base64Uri: { name: "URI Base64" },
+      scaledToFitDimensions: {
+        name: "Escalado que se ajusta a las dimensiones",
+        description:
+          "Al proporcionar los atributos `maxWidth` y/o `maxHeight`, la imagen se redimensionará automáticamente manteniendo el ratio. ¿En qué se diferencia de `resizeMode: 'contain'`? Para empezar, puedes especificar el tamaño de un solo lado (no ambos). Segundo, la imagen se ajustará a las dimensiones deseadas en lugar de simplemente estar contenida en su contenedor.",
+        heightAuto: "ancho: 60 / altura: auto",
+        widthAuto: "ancho: auto / altura: 32",
+        bothManual: "ancho: 60 / altura: 60",
+      },
+    },
+  },
+  demoText: {
+    description:
+      "Para todo tipo de requerimiento relacionado a mostrar texto. Este componente es un 'wrapper' (HOC) del componente Text de React Native.",
+    useCase: {
+      presets: {
+        name: "Preajustes",
+        description: "Hay algunos ajustes preconfigurados.",
+        default:
+          "ajuste por defecto - Cillum eu laboris in labore. Excepteur mollit tempor reprehenderit fugiat elit et eu consequat laborum.",
+        bold: "preajuste negrita - Tempor et ullamco cupidatat in officia. Nulla ea duis elit id sunt ipsum cillum duis deserunt nostrud ut nostrud id.",
+        subheading: "preajuste subtítulo - In Cupidatat Cillum.",
+        heading: "preajuste título - Voluptate Adipis.",
+      },
+      sizes: {
+        name: "Tamaños",
+        description: "Hay un atributo de tamaño.",
+        xs: "xs - Ea ipsum est ea ex sunt.",
+        sm: "sm - Lorem sunt adipisicin.",
+        md: "md - Consequat id do lorem.",
+        lg: "lg - Nostrud ipsum ea.",
+        xl: "xl - Eiusmod ex excepteur.",
+        xxl: "xxl - Cillum eu laboris.",
+      },
+      weights: {
+        name: "Grueso",
+        description: "Hay un atributo de grueso.",
+        light:
+          "ligero - Nulla magna incididunt excepteur est occaecat duis culpa dolore cupidatat enim et.",
+        normal:
+          "normal - Magna incididunt dolor ut veniam veniam laboris aliqua velit ea incididunt.",
+        medium: "medio - Non duis laborum quis laboris occaecat culpa cillum.",
+        semibold: "seminegrita - Exercitation magna nostrud pariatur laborum occaecat aliqua.",
+        bold: "negrita - Eiusmod ullamco magna exercitation est excepteur.",
+      },
+      passingContent: {
+        name: "Entregando contenido",
+        description: "Hay varias formas de entregar contenido.",
+        viaText:
+          "a través del atributo `text` - Billum in aute fugiat proident nisi pariatur est. Cupidatat anim cillum eiusmod ad. Officia eu magna aliquip labore dolore consequat.",
+        viaTx: "a través del atributo `tx` -",
+        children:
+          "Contenido anidado (children) - Aliqua velit irure reprehenderit eu qui amet veniam consectetur.",
+        nestedChildren: "Contenidos anidados -",
+        nestedChildren2: "Occaecat aliqua irure proident veniam.",
+        nestedChildren3: "Ullamco cupidatat officia exercitation velit non ullamco nisi..",
+        nestedChildren4: "Occaecat aliqua irure proident veniam.",
+      },
+      styling: {
+        name: "Estilo",
+        description: "El componente puede ser configurando fácilmente.",
+        text: "Consequat ullamco veniam velit mollit proident excepteur aliquip id culpa ipsum velit sint nostrud.",
+        text2:
+          "Eiusmod occaecat laboris eu ex veniam ipsum adipisicing consectetur. Magna ullamco adipisicing tempor adipisicing.",
+        text3:
+          "Eiusmod occaecat laboris eu ex veniam ipsum adipisicing consectetur. Magna ullamco adipisicing tempor adipisicing.",
+      },
+    },
+  },
+  demoHeader: {
+    description:
+      "Componente desplegado en varias pantallas. Va a contener botones de navegación y el título de la pantalla.",
+    useCase: {
+      actionIcons: {
+        name: "Íconos de acción",
+        description: "Puedes pasar fácilmente íconos a los componentes de la izquierda o derecha.",
+        leftIconTitle: "Ícono izquierdo",
+        rightIconTitle: "Ícono derecho",
+        bothIconsTitle: "Ambos íconos",
+      },
+      actionText: {
+        name: "Texto de acción",
+        description: "Puedes pasar fácilmente texto a los componentes de la izquierda o derecha.",
+        leftTxTitle: "A través de `leftTx`",
+        rightTextTitle: "A través de `rightText`",
+      },
+      customActionComponents: {
+        name: "Componentes personalizados de acción",
+        description:
+          "Si las opciones de ícono o texto no son suficientes, puedes pasar tu propio componente personalizado de acción.",
+        customLeftActionTitle: "Acción izquierda personalizada",
+      },
+      titleModes: {
+        name: "Alineamiento para el título",
+        description:
+          "El título puede ser forzado a permanecer centrado (por defecto), pero podría cortarse si es demasiado largo. También puedes hacer que se ajuste a los botones a la izquierda o derecha.",
+        centeredTitle: "Título centrado",
+        flexTitle: "Título flexible",
+      },
+      styling: {
+        name: "Estilo",
+        description: "El componente puede ser configurado fácilmente.",
+        styledTitle: "Título estilizado",
+        styledWrapperTitle: "Contenedor estilizado",
+        tintedIconsTitle: "Íconos coloreados",
+      },
+    },
+  },
+  demoEmptyState: {
+    description:
+      "Un componente para cuando no hay información que mostrar. Puede usarse también para guiar al usuario sobre qué hacer a continuación.",
+    useCase: {
+      presets: {
+        name: "Preajustes",
+        description:
+          "Puedes crear distintos conjuntos de texto/imagen. Por ejemplo, con un ajuste predefinido `generic`. Si quieres tener un EmptyState completamente personalizado, ten en cuenta que no hay un valor por defecto.",
+      },
+      passingContent: {
+        name: "Entregando contenido",
+        description: "Hay varias formas de entregar contenido.",
+        customizeImageHeading: "Personalizar la imagen",
+        customizeImageContent: "Puedes pasar cualquier una imagen de distintas fuentes.",
+        viaHeadingProp: "A través del atributo `heading`",
+        viaContentProp: "A través del atributo `content`.",
+        viaButtonProp: "A través del atributo `button`",
+      },
+      styling: {
+        name: "Estilo",
+        description: "El componente puede ser configurado fácilmente.",
+      },
+    },
+  },
+}
+
+export default demoEs

RN_TEMPLATE/app/i18n/demo-fr.ts

@@ -0,0 +1,469 @@
+import { DemoTranslations } from "./demo-en"
+
+export const demoFr: DemoTranslations = {
+  demoIcon: {
+    description:
+      "Un composant pour faire le rendu d’une icône enregistrée. Il est enveloppé dans un <TouchableOpacity /> si `onPress` est fourni, sinon dans une <View />.",
+    useCase: {
+      icons: {
+        name: "Icônes",
+        description: "Liste des icônes enregistrées dans le composant.",
+      },
+      size: {
+        name: "Taille",
+        description: "Il y a une prop de taille.",
+      },
+      color: {
+        name: "Couleur",
+        description: "Il y a une prop de couleur.",
+      },
+      styling: {
+        name: "Style",
+        description: "Le composant peut être facilement stylisé.",
+      },
+    },
+  },
+  demoTextField: {
+    description: "Le composant <TextField /> permet la saisie et l'édition de texte.",
+    useCase: {
+      statuses: {
+        name: "Statuts",
+        description:
+          "Il y a une prop de statut - similaire à `preset` dans d'autres composants, mais affecte également la fonctionnalité du composant.",
+        noStatus: {
+          label: "Pas de statut",
+          helper: "C'est le statut par défaut",
+          placeholder: "Le texte passe par là",
+        },
+        error: {
+          label: "Statut d'erreur",
+          helper: "Statut à utiliser en cas d’erreur",
+          placeholder: "Le texte passe par ici",
+        },
+        disabled: {
+          label: "Statut désactivé",
+          helper: "Désactive l’édition et atténue le texte",
+          placeholder: "Le texte repasse par là",
+        },
+      },
+      passingContent: {
+        name: "Transfert de contenu",
+        description: "Il y a plusieurs façons de transmettre du contenu.",
+        viaLabel: {
+          labelTx: "Via la prop `label`",
+          helper: "Via la prop `helper`",
+          placeholder: "Via la prop `placeholder`",
+        },
+        rightAccessory: {
+          label: "Accessoire droit",
+          helper: "Cette prop demande une fonction qui retourne un élément React.",
+        },
+        leftAccessory: {
+          label: "Accessoire gauche",
+          helper: "Cette prop demande une fonction qui retourne un élément React.",
+        },
+        supportsMultiline: {
+          label: "Supporte le multiligne",
+          helper: "Permet une saisie plus longue pour le texte multiligne.",
+        },
+      },
+      styling: {
+        name: "Style",
+        description: "Le composant peut être facilement stylisé.",
+        styleInput: {
+          label: "Style de saisie",
+          helper: "Via la prop `style`",
+        },
+        styleInputWrapper: {
+          label: "Style du wrapper de saisie",
+          helper: "Via la prop `inputWrapperStyle`",
+        },
+        styleContainer: {
+          label: "Style du conteneur",
+          helper: "Via la prop `containerStyle`",
+        },
+        styleLabel: {
+          label: "Style du label et de l’aide",
+          helper: "Via les props de style `LabelTextProps` et `HelperTextProps`",
+        },
+        styleAccessories: {
+          label: "Style des accessoires",
+          helper: "Via les props de style `RightAccessory` et `LeftAccessory`",
+        },
+      },
+    },
+  },
+  demoToggle: {
+    description:
+      "Fait le rendu d’un booléen. Ce composant contrôlé nécessite un callback `onValueChange` qui met à jour la prop `value` pour que le composant reflète les actions de l'utilisateur. Si la prop `value` n'est pas mise à jour, le composant continuera à rendre la prop `value` fournie au lieu du résultat attendu des actions de l'utilisateur.",
+    useCase: {
+      variants: {
+        name: "Variantes",
+        description:
+          "Le composant supporte différentes variantes. Si une personnalisation poussée d'une variante spécifique est nécessaire, elle peut être facilement refactorisée. La valeur par défaut est `checkbox`.",
+        checkbox: {
+          label: "Variante `checkbox`",
+          helper: "Peut être utilisée pour une seule valeure on/off.",
+        },
+        radio: {
+          label: "Variante `radio`",
+          helper: "Utilisez ceci quand vous avez plusieurs options.",
+        },
+        switch: {
+          label: "Variante `switch`",
+          helper:
+            "Une entrée on/off plus proéminente. Possède un meilleur support d’accessibilité.",
+        },
+      },
+      statuses: {
+        name: "Statuts",
+        description:
+          "Il y a une prop de statut - similaire à `preset` dans d'autres composants, mais affecte également la fonctionnalité du composant.",
+        noStatus: "Pas de statut - c'est le défaut",
+        errorStatus: "Statut d’erreur - à utiliser quand il y a une erreur",
+        disabledStatus: "Statut désactivé - désactive l’édition et atténue le style",
+      },
+      passingContent: {
+        name: "Transfert de contenu",
+        description: "Il y a plusieurs façons de transmettre du contenu.",
+        useCase: {
+          checkBox: {
+            label: "Via la prop `labelTx`",
+            helper: "Via la prop `helperTx`.",
+          },
+          checkBoxMultiLine: {
+            helper: "Supporte le multiligne - Nulla proident consectetur labore sunt ea labore. ",
+          },
+          radioChangeSides: {
+            helper:
+              "Vous pouvez changer de côté - Laborum labore adipisicing in eu ipsum deserunt.",
+          },
+          customCheckBox: {
+            label: "Passez une icône de case à cocher personnalisée.",
+          },
+          switch: {
+            label: "Les interrupteurs peuvent être lus comme du texte",
+            helper:
+              "Par défaut, cette option n’utilise pas `Text` car selon la police, les caractères on/off pourraient paraître étranges. Personnalisez selon vos besoins.",
+          },
+          switchAid: {
+            label: "Ou aidé d’une icône",
+          },
+        },
+      },
+      styling: {
+        name: "Style",
+        description: "Le composant peut être facilement stylisé.",
+        outerWrapper: "1 - styliser le wrapper extérieur de l’entrée",
+        innerWrapper: "2 - styliser le wrapper intérieur de l’entrée",
+        inputDetail: "3 - styliser le détail de l’entrée",
+        labelTx: "Vous pouvez aussi styliser le labelTx",
+        styleContainer: "Ou, styliser le conteneur entier",
+      },
+    },
+  },
+  demoButton: {
+    description:
+      "Un composant qui permet aux utilisateurs d’effectuer des actions et de faire des choix. Enveloppe le composant Text avec un composant Pressable.",
+    useCase: {
+      presets: {
+        name: "Préréglages",
+        description: "Il y a quelques préréglages préconfigurés.",
+      },
+      passingContent: {
+        name: "Transfert de contenu",
+        description: "Il y a plusieurs façons de transmettre du contenu.",
+        viaTextProps: "Via la prop `text` - Billum In",
+        children: "Enfants - Irure Reprehenderit",
+        rightAccessory: "Accessoire droit - Duis Quis",
+        leftAccessory: "Accessoire gauche - Duis Proident",
+        nestedChildren: "Enfants imbriqués - proident veniam.",
+        nestedChildren2: "Ullamco cupidatat officia exercitation velit non ullamco nisi..",
+        nestedChildren3: "Occaecat aliqua irure proident veniam.",
+        multiLine:
+          "Multiligne - consequat veniam veniam reprehenderit. Fugiat id nisi quis duis sunt proident mollit dolor mollit adipisicing proident deserunt.",
+      },
+      styling: {
+        name: "Style",
+        description: "Le composant peut être facilement stylisé.",
+        styleContainer: "Style du conteneur - Exercitation",
+        styleText: "Style du texte - Ea Anim",
+        styleAccessories: "Style des accessoires - enim ea id fugiat anim ad.",
+        pressedState: "Style de l’état pressé - fugiat anim",
+      },
+      disabling: {
+        name: "Désactivation",
+        description:
+          "Le composant peut être désactivé et stylisé en conséquence. Le comportement de pression sera désactivé.",
+        standard: "Désactivé - standard",
+        filled: "Désactivé - rempli",
+        reversed: "Désactivé - inversé",
+        accessory: "Style d’accessoire désactivé",
+        textStyle: "Style de texte désactivé",
+      },
+    },
+  },
+  demoListItem: {
+    description:
+      "Un composant de ligne stylisé qui peut être utilisé dans FlatList, SectionList, ou seul.",
+    useCase: {
+      height: {
+        name: "Hauteur",
+        description: "La ligne peut avoir différentes hauteurs.",
+        defaultHeight: "Hauteur par défaut (56px)",
+        customHeight: "Hauteur personnalisée via la prop `height`",
+        textHeight:
+          "Hauteur déterminée par le contenu du texte - Reprehenderit incididunt deserunt do do ea labore.",
+        longText:
+          "Limiter le texte long à une ligne - Reprehenderit incididunt deserunt do do ea labore.",
+      },
+      separators: {
+        name: "Séparateurs",
+        description: "Le séparateur / diviseur est préconfiguré et optionnel.",
+        topSeparator: "Séparateur uniquement en haut",
+        topAndBottomSeparator: "Séparateurs en haut et en bas",
+        bottomSeparator: "Séparateur uniquement en bas",
+      },
+      icons: {
+        name: "Icônes",
+        description: "Vous pouvez personnaliser les icônes à gauche ou à droite.",
+        leftIcon: "Icône gauche",
+        rightIcon: "Icône droite",
+        leftRightIcons: "Icônes gauche et droite",
+      },
+      customLeftRight: {
+        name: "Composants personnalisés gauche/droite",
+        description:
+          "Si vous avez besoin d’un composant personnalisé à gauche/droite, vous pouvez le passer.",
+        customLeft: "Composant personnalisé à gauche",
+        customRight: "Composant personnalisé à droite",
+      },
+      passingContent: {
+        name: "Transfert de contenu",
+        description: "Il y a plusieurs façons de transmettre du contenu.",
+        text: "Via la prop `text` - reprehenderit sint",
+        children: "Enfants - mostrud mollit",
+        nestedChildren1: "Enfants imbriqués - proident veniam.",
+        nestedChildren2: "Ullamco cupidatat officia exercitation velit non ullamco nisi..",
+      },
+      listIntegration: {
+        name: "Intégration avec FlatList",
+        description:
+          "Le composant peut être facilement intégré avec votre interface de liste préférée.",
+      },
+      styling: {
+        name: "Style",
+        description: "Le composant peut être facilement stylisé.",
+        styledText: "Texte stylisé",
+        styledContainer: "Conteneur stylisé (séparateurs)",
+        tintedIcons: "Icônes teintées",
+      },
+    },
+  },
+  demoCard: {
+    description:
+      "Les cartes sont utiles pour afficher des informations connexes de manière contenue. Si un ListItem affiche le contenu horizontalement, une Card peut être utilisée pour afficher le contenu verticalement.",
+    useCase: {
+      presets: {
+        name: "Préréglages",
+        description: "Il y a quelques préréglages préconfigurés.",
+        default: {
+          heading: "Préréglage par défaut (default)",
+          content: "Incididunt magna ut aliquip consectetur mollit dolor.",
+          footer: "Consectetur nulla non aliquip velit.",
+        },
+        reversed: {
+          heading: "Préréglage inversé",
+          content: "Reprehenderit occaecat proident amet id laboris.",
+          footer: "Consectetur tempor ea non labore anim .",
+        },
+      },
+      verticalAlignment: {
+        name: "Alignement vertical",
+        description:
+          "Selon les besoins, la carte est préconfigurée avec différentes stratégies d’alignement.",
+        top: {
+          heading: "Haut (par défaut)",
+          content: "Tout le contenu est automatiquement aligné en haut.",
+          footer: "Même le pied de page",
+        },
+        center: {
+          heading: "Centre",
+          content: "Le contenu est centré par rapport à la hauteur de la carte.",
+          footer: "Moi aussi !",
+        },
+        spaceBetween: {
+          heading: "Espace entre",
+          content: "Tout le contenu est espacé uniformément.",
+          footer: "Je suis là où je veux être.",
+        },
+        reversed: {
+          heading: "Forcer le pied de page en bas",
+          content: "Cela pousse le pied de page là où il appartient.",
+          footer: "Je suis si seul ici en bas.",
+        },
+      },
+      passingContent: {
+        name: "Transfert de contenu",
+        description: "Il y a plusieurs façons de transmettre du contenu.",
+        heading: "Via la prop `heading`",
+        content: "Via la prop `content`",
+        footer: "Je suis si seul ici en bas.",
+      },
+      customComponent: {
+        name: "Composants personnalisés",
+        description:
+          "N’importe quels composants préconfigurés peuvent être remplacé par le vôtre. Vous pouvez également en ajouter d’autres.",
+        rightComponent: "Composant droit",
+        leftComponent: "Composant gauche",
+      },
+      style: {
+        name: "Style",
+        description: "Le composant peut être facilement stylisé.",
+        heading: "Styliser l’en-tête",
+        content: "Styliser le contenu",
+        footer: "Styliser le pied de page",
+      },
+    },
+  },
+  demoAutoImage: {
+    description:
+      "Un composant Image qui dimensionne automatiquement une image distante ou data-uri.",
+    useCase: {
+      remoteUri: { name: "URI distante" },
+      base64Uri: { name: "URI Base64" },
+      scaledToFitDimensions: {
+        name: "Mis à l’échelle pour s’adapter aux dimensions",
+        description:
+          "En fournissant les props `maxWidth` et/ou `maxHeight`, l’image se redimensionnera automatiquement à l’échelle tout en conservant son rapport d’aspect. En quoi est-ce différent de `resizeMode: 'contain'` ? Premièrement, vous pouvez spécifier la taille d'un seul côté (pas les deux). Deuxièmement, l'image s'adaptera aux dimensions souhaitées au lieu d'être simplement contenue dans son conteneur d'image.",
+        heightAuto: "largeur: 60 / hauteur: auto",
+        widthAuto: "largeur: auto / hauteur: 32",
+        bothManual: "largeur: 60 / hauteur: 60",
+      },
+    },
+  },
+  demoText: {
+    description:
+      "Pour vos besoins d'affichage de texte. Ce composant est un HOC sur celui intégré à React Native.",
+    useCase: {
+      presets: {
+        name: "Préréglages",
+        description: "Il y a quelques réglages préconfigurés.",
+        default:
+          "préréglage par défaut - Cillum eu laboris in labore. Excepteur mollit tempor reprehenderit fugiat elit et eu consequat laborum.",
+        bold: "préréglage gras - Tempor et ullamco cupidatat in officia. Nulla ea duis elit id sunt ipsum cillum duis deserunt nostrud ut nostrud id.",
+        subheading: "préréglage sous-titre - In Cupidatat Cillum.",
+        heading: "préréglage titre - Voluptate Adipis.",
+      },
+      sizes: {
+        name: "Tailles",
+        description: "Il y a une prop de taille.",
+        xs: "xs - Ea ipsum est ea ex sunt.",
+        sm: "sm - Lorem sunt adipisicin.",
+        md: "md - Consequat id do lorem.",
+        lg: "lg - Nostrud ipsum ea.",
+        xl: "xl - Eiusmod ex excepteur.",
+        xxl: "xxl - Cillum eu laboris.",
+      },
+      weights: {
+        name: "Graisse",
+        description: "Il y a une prop de graisse.",
+        light:
+          "léger - Nulla magna incididunt excepteur est occaecat duis culpa dolore cupidatat enim et.",
+        normal:
+          "normal - Magna incididunt dolor ut veniam veniam laboris aliqua velit ea incididunt.",
+        medium: "moyen - Non duis laborum quis laboris occaecat culpa cillum.",
+        semibold: "demi-gras - Exercitation magna nostrud pariatur laborum occaecat aliqua.",
+        bold: "gras - Eiusmod ullamco magna exercitation est excepteur.",
+      },
+      passingContent: {
+        name: "Transfert de contenu",
+        description: "Il y a plusieurs façons de transférer du contenu.",
+        viaText:
+          "via la prop `text` - Billum in aute fugiat proident nisi pariatur est. Cupidatat anim cillum eiusmod ad. Officia eu magna aliquip labore dolore consequat.",
+        viaTx: "via la prop `tx` -",
+        children: "enfants - Aliqua velit irure reprehenderit eu qui amet veniam consectetur.",
+        nestedChildren: "Enfants imbriqués -",
+        nestedChildren2: "Occaecat aliqua irure proident veniam.",
+        nestedChildren3: "Ullamco cupidatat officia exercitation velit non ullamco nisi..",
+        nestedChildren4: "Occaecat aliqua irure proident veniam.",
+      },
+      styling: {
+        name: "Style",
+        description: "Le composant peut être facilement stylisé.",
+        text: "Consequat ullamco veniam velit mollit proident excepteur aliquip id culpa ipsum velit sint nostrud.",
+        text2:
+          "Eiusmod occaecat laboris eu ex veniam ipsum adipisicing consectetur. Magna ullamco adipisicing tempor adipisicing.",
+        text3:
+          "Eiusmod occaecat laboris eu ex veniam ipsum adipisicing consectetur. Magna ullamco adipisicing tempor adipisicing.",
+      },
+    },
+  },
+  demoHeader: {
+    description:
+      "Composant qui apparaît sur de nombreux écrans. Contiendra les boutons de navigation et le titre de l’écran.",
+    useCase: {
+      actionIcons: {
+        name: "Icônes d’action",
+        description:
+          "Vous pouvez facilement passer des icônes aux composants d’action gauche ou droit.",
+        leftIconTitle: "Icône gauche",
+        rightIconTitle: "Icône droite",
+        bothIconsTitle: "Les deux icônes",
+      },
+      actionText: {
+        name: "Texte d’action",
+        description:
+          "Vous pouvez facilement passer du texte aux composants d’action gauche ou droit.",
+        leftTxTitle: "Via `leftTx`",
+        rightTextTitle: "Via `rightText`",
+      },
+      customActionComponents: {
+        name: "Composants d’action personnalisés",
+        description:
+          "Si les options d’icône ou de texte ne suffisent pas, vous pouvez passer votre propre composant d’action personnalisé.",
+        customLeftActionTitle: "Action gauche personnalisée",
+      },
+      titleModes: {
+        name: "Modes de titre",
+        description:
+          "Le titre peut être forcé à rester au centre (par défaut) mais peut être coupé s’il est trop long. Vous pouvez éventuellement le faire s’ajuster aux boutons d’action.",
+        centeredTitle: "Titre centré",
+        flexTitle: "Titre flexible",
+      },
+      styling: {
+        name: "Style",
+        description: "Le composant peut être facilement stylisé.",
+        styledTitle: "Titre stylisé",
+        styledWrapperTitle: "Wrapper stylisé",
+        tintedIconsTitle: "Icônes teintées",
+      },
+    },
+  },
+  demoEmptyState: {
+    description:
+      "Un composant à utiliser lorsqu’il n’y a pas de données à afficher. Il peut être utilisé pour diriger l’utilisateur sur ce qu’il faut faire ensuite.",
+    useCase: {
+      presets: {
+        name: "Préréglages",
+        description:
+          "Vous pouvez créer différents ensembles de texte/image. Un est prédéfini appelé `generic`. Notez qu’il n’y a pas de valeur par défaut au cas où vous voudriez avoir un EmptyState complètement personnalisé.",
+      },
+      passingContent: {
+        name: "Transfert de contenu",
+        description: "Il y a plusieurs façons de transférer du contenu.",
+        customizeImageHeading: "Personnaliser l’image",
+        customizeImageContent: "Vous pouvez passer n’importe quelle source d'image.",
+        viaHeadingProp: "Via la prop `heading`",
+        viaContentProp: "Via la prop `content`.",
+        viaButtonProp: "Via la prop `button`",
+      },
+      styling: {
+        name: "Style",
+        description: "Le composant peut être facilement stylisé.",
+      },
+    },
+  },
+}
+
+export default demoFr

RN_TEMPLATE/app/i18n/demo-hi.ts

@@ -0,0 +1,466 @@
+import { DemoTranslations } from "./demo-en"
+
+export const demoHi: DemoTranslations = {
+  demoIcon: {
+    description:
+      "एक पंजीकृत आइकन को रेंडर करने के लिए एक कंपोनेंट। यदि `onPress` प्रदान किया जाता है तो यह <TouchableOpacity /> में लपेटा जाता है, अन्यथा <View /> में।",
+    useCase: {
+      icons: {
+        name: "आइकन",
+        description: "कंपोनेंट के अंदर पंजीकृत आइकनों की सूची।",
+      },
+      size: {
+        name: "आकार",
+        description: "एक आकार प्रॉप है।",
+      },
+      color: {
+        name: "रंग",
+        description: "एक रंग प्रॉप है।",
+      },
+      styling: {
+        name: "स्टाइलिंग",
+        description: "कंपोनेंट को आसानी से स्टाइल किया जा सकता है।",
+      },
+    },
+  },
+  demoTextField: {
+    description: "टेक्स्टफील्ड कंपोनेंट टेक्स्ट दर्ज करने और संपादित करने की अनुमति देता है।",
+    useCase: {
+      statuses: {
+        name: "स्थितियाँ",
+        description:
+          "एक स्थिति प्रॉप है - अन्य कंपोनेंट्स में `preset` के समान, लेकिन कंपोनेंट की कार्यक्षमता को भी प्रभावित करता है।",
+        noStatus: {
+          label: "कोई स्थिति नहीं",
+          helper: "यह डिफ़ॉल्ट स्थिति है",
+          placeholder: "टेक्स्ट यहाँ जाता है",
+        },
+        error: {
+          label: "त्रुटि स्थिति",
+          helper: "त्रुटि होने पर उपयोग करने के लिए स्थिति",
+          placeholder: "टेक्स्ट यहाँ जाता है",
+        },
+        disabled: {
+          label: "अक्षम स्थिति",
+          helper: "संपादन को अक्षम करता है और टेक्स्ट को मंद करता है",
+          placeholder: "टेक्स्ट यहाँ जाता है",
+        },
+      },
+      passingContent: {
+        name: "सामग्री पास करना",
+        description: "सामग्री पास करने के कई तरीके हैं।",
+        viaLabel: {
+          labelTx: "`label` प्रॉप के माध्यम से",
+          helper: "`helper` प्रॉप के माध्यम से",
+          placeholder: "`placeholder` प्रॉप के माध्यम से",
+        },
+        rightAccessory: {
+          label: "दायाँ सहायक",
+          helper: "यह प्रॉप एक फ़ंक्शन लेता है जो एक React तत्व लौटाता है।",
+        },
+        leftAccessory: {
+          label: "बायाँ सहायक",
+          helper: "यह प्रॉप एक फ़ंक्शन लेता है जो एक React तत्व लौटाता है।",
+        },
+        supportsMultiline: {
+          label: "मल्टीलाइन का समर्थन करता है",
+          helper: "मल्टीलाइन टेक्स्ट के लिए एक लंबा इनपुट सक्षम करता है।",
+        },
+      },
+      styling: {
+        name: "स्टाइलिंग",
+        description: "कंपोनेंट को आसानी से स्टाइल किया जा सकता है।",
+        styleInput: {
+          label: "इनपुट स्टाइल",
+          helper: "`style` प्रॉप के माध्यम से",
+        },
+        styleInputWrapper: {
+          label: "इनपुट रैपर स्टाइल",
+          helper: "`inputWrapperStyle` प्रॉप के माध्यम से",
+        },
+        styleContainer: {
+          label: "कंटेनर स्टाइल",
+          helper: "`containerStyle` प्रॉप के माध्यम से",
+        },
+        styleLabel: {
+          label: "लेबल और हेल्पर स्टाइल",
+          helper: "`LabelTextProps` और `HelperTextProps` स्टाइल प्रॉप के माध्यम से",
+        },
+        styleAccessories: {
+          label: "सहायक स्टाइल",
+          helper: "`RightAccessory` और `LeftAccessory` स्टाइल प्रॉप के माध्यम से",
+        },
+      },
+    },
+  },
+  demoToggle: {
+    description:
+      "एक बूलियन इनपुट रेंडर करता है। यह एक नियंत्रित कंपोनेंट है जिसे उपयोगकर्ता क्रियाओं को दर्शाने के लिए value प्रॉप को अपडेट करने वाले onValueChange कॉलबैक की आवश्यकता होती है। यदि value प्रॉप अपडेट नहीं की जाती है, तो कंपोनेंट उपयोगकर्ता क्रियाओं के अपेक्षित परिणाम के बजाय आपूर्ति की गई value प्रॉप को रेंडर करना जारी रखेगा।",
+    useCase: {
+      variants: {
+        name: "विविधताएँ",
+        description:
+          "कंपोनेंट कुछ अलग-अलग विविधताओं का समर्थन करता है। यदि किसी विशिष्ट विविधता के भारी अनुकूलन की आवश्यकता है, तो इसे आसानी से पुनर्गठित किया जा सकता है। डिफ़ॉल्ट `checkbox` है।",
+        checkbox: {
+          label: "`checkbox` विविधता",
+          helper: "इसका उपयोग एकल चालू/बंद इनपुट के लिए किया जा सकता है।",
+        },
+        radio: {
+          label: "`radio` विविधता",
+          helper: "जब आपके पास कई विकल्प हों तो इसका उपयोग करें।",
+        },
+        switch: {
+          label: "`switch` विविधता",
+          helper: "एक अधिक प्रमुख चालू/बंद इनपुट। बेहतर पहुँच समर्थन है।",
+        },
+      },
+      statuses: {
+        name: "स्थितियाँ",
+        description:
+          "एक स्थिति प्रॉप है - अन्य कंपोनेंट्स में `preset` के समान, लेकिन कंपोनेंट की कार्यक्षमता को भी प्रभावित करता है।",
+        noStatus: "कोई स्थिति नहीं - यह डिफ़ॉल्ट है",
+        errorStatus: "त्रुटि स्थिति - जब कोई त्रुटि हो तो उपयोग करें",
+        disabledStatus: "अक्षम स्थिति - संपादन को अक्षम करता है और इनपुट को मंद करता है",
+      },
+      passingContent: {
+        name: "सामग्री पास करना",
+        description: "सामग्री पास करने के कई तरीके हैं।",
+        useCase: {
+          checkBox: {
+            label: "`labelTx` प्रॉप के माध्यम से",
+            helper: "`helperTx` प्रॉप के माध्यम से।",
+          },
+          checkBoxMultiLine: {
+            helper:
+              "मल्टीलाइन का समर्थन करता है - Nulla proident consectetur labore sunt ea labore. ",
+          },
+          radioChangeSides: {
+            helper: "आप पक्ष बदल सकते हैं - Laborum labore adipisicing in eu ipsum deserunt.",
+          },
+          customCheckBox: {
+            label: "एक कस्टम चेकबॉक्स आइकन पास करें।",
+          },
+          switch: {
+            label: "स्विच को टेक्स्ट के रूप में पढ़ा जा सकता है",
+            helper:
+              "डिफ़ॉल्ट रूप से, यह विकल्प `Text` का उपयोग नहीं करता है क्योंकि फ़ॉन्ट के आधार पर, चालू/बंद अक्षर अजीब दिख सकते हैं। आवश्यकतानुसार अनुकूलित करें।",
+          },
+          switchAid: {
+            label: "या एक आइकन की मदद से",
+          },
+        },
+      },
+      styling: {
+        name: "स्टाइलिंग",
+        description: "कंपोनेंट को आसानी से स्टाइल किया जा सकता है।",
+        outerWrapper: "1 - इनपुट के बाहरी रैपर को स्टाइल करें",
+        innerWrapper: "2 - इनपुट के आंतरिक रैपर को स्टाइल करें",
+        inputDetail: "3 - इनपुट विवरण को स्टाइल करें",
+        labelTx: "आप labelTx को भी स्टाइल कर सकते हैं",
+        styleContainer: "या, पूरे कंटेनर को स्टाइल करें",
+      },
+    },
+  },
+  demoButton: {
+    description:
+      "एक कंपोनेंट जो उपयोगकर्ताओं को कार्रवाई करने और विकल्प चुनने की अनुमति देता है। Text कंपोनेंट को Pressable कंपोनेंट के साथ लपेटता है।",
+    useCase: {
+      presets: {
+        name: "प्रीसेट",
+        description: "कुछ पूर्व-कॉन्फ़िगर किए गए प्रीसेट हैं।",
+      },
+      passingContent: {
+        name: "सामग्री पास करना",
+        description: "सामग्री पास करने के कई तरीके हैं।",
+        viaTextProps: "`text` प्रॉप के माध्यम से - Billum In",
+        children: "चिल्ड्रन - Irure Reprehenderit",
+        rightAccessory: "दायां एक्सेसरी - Duis Quis",
+        leftAccessory: "बायां एक्सेसरी - Duis Proident",
+        nestedChildren: "नेस्टेड चिल्ड्रन - proident veniam.",
+        nestedChildren2: "Ullamco cupidatat officia exercitation velit non ullamco nisi..",
+        nestedChildren3: "Occaecat aliqua irure proident veniam.",
+        multiLine:
+          "मल्टीलाइन - consequat veniam veniam reprehenderit. Fugiat id nisi quis duis sunt proident mollit dolor mollit adipisicing proident deserunt.",
+      },
+      styling: {
+        name: "स्टाइलिंग",
+        description: "कंपोनेंट को आसानी से स्टाइल किया जा सकता है।",
+        styleContainer: "कंटेनर स्टाइल - Exercitation",
+        styleText: "टेक्स्ट स्टाइल - Ea Anim",
+        styleAccessories: "एक्सेसरीज़ स्टाइल - enim ea id fugiat anim ad.",
+        pressedState: "दबाए गए स्थिति का स्टाइल - fugiat anim",
+      },
+      disabling: {
+        name: "अक्षम करना",
+        description:
+          "कंपोनेंट को अक्षम किया जा सकता है और उसके आधार पर स्टाइल किया जा सकता है। दबाने का व्यवहार अक्षम हो जाएगा।",
+        standard: "अक्षम - मानक",
+        filled: "अक्षम - भरा हुआ",
+        reversed: "अक्षम - उलटा",
+        accessory: "अक्षम एक्सेसरी स्टाइल",
+        textStyle: "अक्षम टेक्स्ट स्टाइल",
+      },
+    },
+  },
+  demoListItem: {
+    description:
+      "एक स्टाइल किया गया पंक्ति कंपोनेंट जो FlatList, SectionList, या अकेले उपयोग किया जा सकता है।",
+    useCase: {
+      height: {
+        name: "ऊँचाई",
+        description: "पंक्ति की विभिन्न ऊँचाइयाँ हो सकती हैं।",
+        defaultHeight: "डिफ़ॉल्ट ऊँचाई (56px)",
+        customHeight: "`height` प्रॉप के माध्यम से कस्टम ऊँचाई",
+        textHeight:
+          "टेक्स्ट सामग्री द्वारा निर्धारित ऊँचाई - Reprehenderit incididunt deserunt do do ea labore.",
+        longText:
+          "लंबे टेक्स्ट को एक पंक्ति तक सीमित करें - Reprehenderit incididunt deserunt do do ea labore.",
+      },
+      separators: {
+        name: "विभाजक",
+        description: "विभाजक / डिवाइडर पूर्व-कॉन्फ़िगर किया गया है और वैकल्पिक है।",
+        topSeparator: "केवल ऊपरी विभाजक",
+        topAndBottomSeparator: "ऊपरी और निचले विभाजक",
+        bottomSeparator: "केवल निचला विभाजक",
+      },
+      icons: {
+        name: "आइकन",
+        description: "आप बाएँ या दाएँ आइकन को कस्टमाइज़ कर सकते हैं।",
+        leftIcon: "बायाँ आइकन",
+        rightIcon: "दायाँ आइकन",
+        leftRightIcons: "बाएँ और दाएँ आइकन",
+      },
+      customLeftRight: {
+        name: "कस्टम बायाँ/दायाँ कंपोनेंट",
+        description:
+          "यदि आपको कस्टम बायाँ/दायाँ कंपोनेंट की आवश्यकता है, तो आप इसे पास कर सकते हैं।",
+        customLeft: "कस्टम बायाँ कंपोनेंट",
+        customRight: "कस्टम दायाँ कंपोनेंट",
+      },
+      passingContent: {
+        name: "सामग्री पास करना",
+        description: "सामग्री पास करने के कई तरीके हैं।",
+        text: "`text` प्रॉप के माध्यम से - reprehenderit sint",
+        children: "चिल्ड्रन - mostrud mollit",
+        nestedChildren1: "नेस्टेड चिल्ड्रन - proident veniam.",
+        nestedChildren2: "Ullamco cupidatat officia exercitation velit non ullamco nisi..",
+      },
+      listIntegration: {
+        name: "FlatList के साथ एकीकरण",
+        description:
+          "कंपोनेंट को आसानी से आपके पसंदीदा सूची इंटरफेस के साथ एकीकृत किया जा सकता है।",
+      },
+      styling: {
+        name: "स्टाइलिंग",
+        description: "कंपोनेंट को आसानी से स्टाइल किया जा सकता है।",
+        styledText: "स्टाइल किया गया टेक्स्ट",
+        styledContainer: "स्टाइल किया गया कंटेनर (विभाजक)",
+        tintedIcons: "रंगीन आइकन",
+      },
+    },
+  },
+  demoCard: {
+    description:
+      "कार्ड संबंधित जानकारी को एक संयमित तरीके से प्रदर्शित करने के लिए उपयोगी हैं। यदि एक ListItem सामग्री को क्षैतिज रूप से प्रदर्शित करता है, तो एक कार्ड का उपयोग सामग्री को लंबवत रूप से प्रदर्शित करने के लिए किया जा सकता है।",
+    useCase: {
+      presets: {
+        name: "प्रीसेट",
+        description: "कुछ पूर्व-कॉन्फ़िगर किए गए प्रीसेट हैं।",
+        default: {
+          heading: "डिफ़ॉल्ट प्रीसेट (डिफ़ॉल्ट)",
+          content: "Incididunt magna ut aliquip consectetur mollit dolor.",
+          footer: "Consectetur nulla non aliquip velit.",
+        },
+        reversed: {
+          heading: "रिवर्स्ड प्रीसेट",
+          content: "Reprehenderit occaecat proident amet id laboris.",
+          footer: "Consectetur tempor ea non labore anim .",
+        },
+      },
+      verticalAlignment: {
+        name: "ऊर्ध्वाधर संरेखण",
+        description:
+          "आवश्यकता के अनुसार, कार्ड विभिन्न संरेखण रणनीतियों के साथ पूर्व-कॉन्फ़िगर किया गया है।",
+        top: {
+          heading: "शीर्ष (डिफ़ॉल्ट)",
+          content: "सभी सामग्री स्वचालित रूप से शीर्ष पर संरेखित होती है।",
+          footer: "यहां तक कि फुटर भी",
+        },
+        center: {
+          heading: "मध्य",
+          content: "सामग्री कार्ड की ऊंचाई के सापेक्ष केंद्रित होती है।",
+          footer: "मैं भी!",
+        },
+        spaceBetween: {
+          heading: "स्पेस बिटवीन",
+          content: "सभी सामग्री समान रूप से फैली हुई है।",
+          footer: "मैं वहां हूं जहां मैं होना चाहता हूं।",
+        },
+        reversed: {
+          heading: "फुटर को नीचे रखें",
+          content: "यह फुटर को उसके सही स्थान पर धकेलता है।",
+          footer: "मैं यहां नीचे बहुत अकेला हूं।",
+        },
+      },
+      passingContent: {
+        name: "सामग्री पास करना",
+        description: "सामग्री पास करने के कई तरीके हैं।",
+        heading: "`heading` प्रॉप के माध्यम से",
+        content: "`content` प्रॉप के माध्यम से",
+        footer: "मैं यहां नीचे बहुत अकेला हूं।",
+      },
+      customComponent: {
+        name: "कस्टम कंपोनेंट्स",
+        description:
+          "किसी भी पूर्व-कॉन्फ़िगर किए गए कंपोनेंट को आपके अपने कंपोनेंट से बदला जा सकता है। आप अतिरिक्त कंपोनेंट भी जोड़ सकते हैं।",
+        rightComponent: "दायाँ कंपोनेंट",
+        leftComponent: "बायाँ कंपोनेंट",
+      },
+      style: {
+        name: "स्टाइलिंग",
+        description: "कंपोनेंट को आसानी से स्टाइल किया जा सकता है।",
+        heading: "शीर्षक को स्टाइल करें",
+        content: "सामग्री को स्टाइल करें",
+        footer: "फुटर को स्टाइल करें",
+      },
+    },
+  },
+  demoAutoImage: {
+    description:
+      "एक छवि कंपोनेंट जो स्वचालित रूप से रिमोट या डेटा-यूआरआई छवि का आकार निर्धारित करता है।",
+    useCase: {
+      remoteUri: { name: "रिमोट यूआरआई" },
+      base64Uri: { name: "बेस64 यूआरआई" },
+      scaledToFitDimensions: {
+        name: "आयामों के अनुरूप स्केल किया गया",
+        description:
+          "`maxWidth` और/या `maxHeight` प्रॉप्स प्रदान करने पर, छवि स्वचालित रूप से अपने आस्पेक्ट अनुपात को बनाए रखते हुए स्केल होगी। यह `resizeMode: 'contain'` से कैसे अलग है? पहला, आप केवल एक तरफ का आकार निर्दिष्ट कर सकते हैं (दोनों नहीं)। दूसरा, छवि वांछित आयामों के अनुरूप स्केल होगी, न कि केवल अपने छवि-कंटेनर के भीतर समाहित होगी।",
+        heightAuto: "चौड़ाई: 60 / ऊंचाई: स्वचालित",
+        widthAuto: "चौड़ाई: स्वचालित / ऊंचाई: 32",
+        bothManual: "चौड़ाई: 60 / ऊंचाई: 60",
+      },
+    },
+  },
+  demoText: {
+    description:
+      "आपकी टेक्स्ट प्रदर्शन आवश्यकताओं के लिए। यह कंपोनेंट अंतर्निहित React Native कंपोनेंट पर एक HOC है।",
+    useCase: {
+      presets: {
+        name: "प्रीसेट",
+        description: "कुछ पूर्व-कॉन्फ़िगर किए गए प्रीसेट हैं।",
+        default:
+          "डिफ़ॉल्ट प्रीसेट - Cillum eu laboris in labore. Excepteur mollit tempor reprehenderit fugiat elit et eu consequat laborum.",
+        bold: "बोल्ड प्रीसेट - Tempor et ullamco cupidatat in officia. Nulla ea duis elit id sunt ipsum cillum duis deserunt nostrud ut nostrud id.",
+        subheading: "सबहेडिंग प्रीसेट - In Cupidatat Cillum.",
+        heading: "हेडिंग प्रीसेट - Voluptate Adipis.",
+      },
+      sizes: {
+        name: "आकार",
+        description: "एक आकार प्रॉप है।",
+        xs: "xs - Ea ipsum est ea ex sunt.",
+        sm: "sm - Lorem sunt adipisicin.",
+        md: "md - Consequat id do lorem.",
+        lg: "lg - Nostrud ipsum ea.",
+        xl: "xl - Eiusmod ex excepteur.",
+        xxl: "xxl - Cillum eu laboris.",
+      },
+      weights: {
+        name: "वजन",
+        description: "एक वजन प्रॉप है।",
+        light:
+          "लाइट - Nulla magna incididunt excepteur est occaecat duis culpa dolore cupidatat enim et.",
+        normal:
+          "सामान्य - Magna incididunt dolor ut veniam veniam laboris aliqua velit ea incididunt.",
+        medium: "मध्यम - Non duis laborum quis laboris occaecat culpa cillum.",
+        semibold: "सेमीबोल्ड - Exercitation magna nostrud pariatur laborum occaecat aliqua.",
+        bold: "बोल्ड - Eiusmod ullamco magna exercitation est excepteur.",
+      },
+      passingContent: {
+        name: "सामग्री पास करना",
+        description: "सामग्री पास करने के कई तरीके हैं।",
+        viaText:
+          "`text` प्रॉप के माध्यम से - Billum in aute fugiat proident nisi pariatur est. Cupidatat anim cillum eiusmod ad. Officia eu magna aliquip labore dolore consequat.",
+        viaTx: "`tx` प्रॉप के माध्यम से -",
+        children: "चिल्ड्रन - Aliqua velit irure reprehenderit eu qui amet veniam consectetur.",
+        nestedChildren: "नेस्टेड चिल्ड्रन -",
+        nestedChildren2: "Occaecat aliqua irure proident veniam.",
+        nestedChildren3: "Ullamco cupidatat officia exercitation velit non ullamco nisi..",
+        nestedChildren4: "Occaecat aliqua irure proident veniam.",
+      },
+      styling: {
+        name: "स्टाइलिंग",
+        description: "कंपोनेंट को आसानी से स्टाइल किया जा सकता है।",
+        text: "Consequat ullamco veniam velit mollit proident excepteur aliquip id culpa ipsum velit sint nostrud.",
+        text2:
+          "Eiusmod occaecat laboris eu ex veniam ipsum adipisicing consectetur. Magna ullamco adipisicing tempor adipisicing.",
+        text3:
+          "Eiusmod occaecat laboris eu ex veniam ipsum adipisicing consectetur. Magna ullamco adipisicing tempor adipisicing.",
+      },
+    },
+  },
+  demoHeader: {
+    description:
+      "कई स्क्रीन पर दिखाई देने वाला कंपोनेंट। यह नेविगेशन बटन और स्क्रीन शीर्षक धारण करेगा।",
+    useCase: {
+      actionIcons: {
+        name: "एक्शन आइकन",
+        description: "आप आसानी से बाएँ या दाएँ एक्शन कंपोनेंट्स में आइकन पास कर सकते हैं।",
+        leftIconTitle: "बायाँ आइकन",
+        rightIconTitle: "दायाँ आइकन",
+        bothIconsTitle: "दोनों आइकन",
+      },
+      actionText: {
+        name: "एक्शन टेक्स्ट",
+        description: "आप आसानी से बाएँ या दाएँ एक्शन कंपोनेंट्स में टेक्स्ट पास कर सकते हैं।",
+        leftTxTitle: "`leftTx` के माध्यम से",
+        rightTextTitle: "`rightText` के माध्यम से",
+      },
+      customActionComponents: {
+        name: "कस्टम एक्शन कंपोनेंट्स",
+        description:
+          "यदि आइकन या टेक्स्ट विकल्प पर्याप्त नहीं हैं, तो आप अपना खुद का कस्टम एक्शन कंपोनेंट पास कर सकते हैं।",
+        customLeftActionTitle: "कस्टम बायाँ एक्शन",
+      },
+      titleModes: {
+        name: "शीर्षक मोड",
+        description:
+          "शीर्षक को मध्य में रहने के लिए मजबूर किया जा सकता है (डिफ़ॉल्ट) लेकिन यदि यह बहुत लंबा है तो काटा जा सकता है। वैकल्पिक रूप से आप इसे एक्शन बटनों के अनुसार समायोजित कर सकते हैं।",
+        centeredTitle: "केंद्रित शीर्षक",
+        flexTitle: "फ्लेक्स शीर्षक",
+      },
+      styling: {
+        name: "स्टाइलिंग",
+        description: "कंपोनेंट को आसानी से स्टाइल किया जा सकता है।",
+        styledTitle: "स्टाइल किया गया शीर्षक",
+        styledWrapperTitle: "स्टाइल किया गया रैपर",
+        tintedIconsTitle: "रंगीन आइकन",
+      },
+    },
+  },
+  demoEmptyState: {
+    description:
+      "जब प्रदर्शित करने के लिए कोई डेटा नहीं है तो उपयोग करने के लिए एक कंपोनेंट। इसका उपयोग उपयोगकर्ता को अगला क्या करना है, यह निर्देशित करने के लिए किया जा सकता है।",
+    useCase: {
+      presets: {
+        name: "प्रीसेट",
+        description:
+          "आप विभिन्न टेक्स्ट/छवि सेट बना सकते हैं। एक पूर्व-परिभाषित है जिसे `generic` कहा जाता है। ध्यान दें, कोई डिफ़ॉल्ट नहीं है यदि आप पूरी तरह से कस्टम EmptyState चाहते हैं।",
+      },
+      passingContent: {
+        name: "सामग्री पास करना",
+        description: "सामग्री पास करने के कई तरीके हैं।",
+        customizeImageHeading: "छवि को अनुकूलित करें",
+        customizeImageContent: "आप कोई भी छवि स्रोत पास कर सकते हैं।",
+        viaHeadingProp: "`heading` प्रॉप के माध्यम से",
+        viaContentProp: "`content` प्रॉप के माध्यम से।",
+        viaButtonProp: "`button` प्रॉप के माध्यम से",
+      },
+      styling: {
+        name: "स्टाइलिंग",
+        description: "कंपोनेंट को आसानी से स्टाइल किया जा सकता है।",
+      },
+    },
+  },
+}
+
+export default demoHi

RN_TEMPLATE/app/i18n/demo-ja.ts

@@ -0,0 +1,462 @@
+import { DemoTranslations } from "./demo-en"
+
+export const demoJa: DemoTranslations = {
+  demoIcon: {
+    description:
+      "あらかじめ登録されたアイコンを描画するコンポーネントです。 `onPress` が提供されている場合は <TouchableOpacity /> にラップされますが、それ以外の場合は <View /> にラップされます。",
+    useCase: {
+      icons: {
+        name: "アイコン",
+        description: "登録されたアイコンのリストです。",
+      },
+      size: {
+        name: "サイズ",
+        description: "sizeのpropsです。",
+      },
+      color: {
+        name: "カラー",
+        description: "colorのpropsです。",
+      },
+      styling: {
+        name: "スタイリング",
+        description: "このコンポーネントはスタイリングの変更ができます。",
+      },
+    },
+  },
+  demoTextField: {
+    description: "このコンポーネントはテキストの入力と編集ができます。",
+    useCase: {
+      statuses: {
+        name: "ステータス",
+        description:
+          "status - これは他コンポーネントの`preset`の似ていますが、これはコンポーネントの機能も変えるpropsです。",
+        noStatus: {
+          label: "ステータスなし",
+          helper: "デフォルトのステータスです",
+          placeholder: "テキストが入力されます",
+        },
+        error: {
+          label: "エラーステータス",
+          helper: "エラーが発生した場合に使用されるステータスです",
+          placeholder: "ここにテキストが入力されます",
+        },
+        disabled: {
+          label: "無効(disabled)ステータス",
+          helper: "編集不可となるステータスです",
+          placeholder: "ここにテキストが入力されます",
+        },
+      },
+      passingContent: {
+        name: "コンテントを渡す",
+        description: "コンテントを渡す方法はいくつかあります。",
+        viaLabel: {
+          labelTx: "`label` から",
+          helper: "`helper` から",
+          placeholder: "`placeholder` から",
+        },
+        rightAccessory: {
+          label: "右側にアクセサリー",
+          helper: "このpropsはReact要素を返す関数をうけとります。",
+        },
+        leftAccessory: {
+          label: "左側にアクセサリー",
+          helper: "このpropsはReact要素を返す関数をうけとります。",
+        },
+        supportsMultiline: {
+          label: "複数行サポート",
+          helper: "複数行の入力が出来るようになります。",
+        },
+      },
+      styling: {
+        name: "スタイリング",
+        description: "このコンポーネントはスタイリングの変更ができます。",
+        styleInput: {
+          label: "インプットのスタイル",
+          helper: "`style`から",
+        },
+        styleInputWrapper: {
+          label: "インプットラッパーのスタイル",
+          helper: "`inputWrapperStyle`から",
+        },
+        styleContainer: {
+          label: "スタイルコンテナのスタイル",
+          helper: "`containerStyle`から",
+        },
+        styleLabel: {
+          label: "ラベルとヘルパーのスタイル",
+          helper: "`LabelTextProps` & `HelperTextProps`から",
+        },
+        styleAccessories: {
+          label: "アクセサリーのスタイル",
+          helper: "`RightAccessory` & `LeftAccessory`から",
+        },
+      },
+    },
+  },
+  demoToggle: {
+    description:
+      "ブーリアンの入力を表示するコンポーネントです。コンポーネントはvalueの値を使用して描画するので、onValueChangeコールバックを使って値を変更し、valueを更新する必要があります。valueの値が変更されていない場合は、描画が更新されません。",
+    useCase: {
+      variants: {
+        name: "バリエーション",
+        description:
+          "このコンポーネントは数種類のバリエーションをサポートしています。もしカスタマイズが必要な場合、これらのバリエーションをリファクタリングできます。デフォルトは`checkbox`です。",
+        checkbox: {
+          label: "`checkbox`バリエーション",
+          helper: "シンプルなon/offのインプットに使えます。",
+        },
+        radio: {
+          label: "`radio`バリエーション",
+          helper: "数個のオプションがある場合に使えます。",
+        },
+        switch: {
+          label: "`switch`バリエーション",
+          helper:
+            "代表的なon/offのインプットです。他と比べアクセシビリティのサポートが充実しています。",
+        },
+      },
+      statuses: {
+        name: "ステータス",
+        description:
+          "status - これは他コンポーネントの`preset`の似ていますが、これはコンポーネントの機能も変えるpropsです。",
+        noStatus: "ステータスなし - デフォルトです。",
+        errorStatus: "エラー - エラーがある際に使えるステータスです。",
+        disabledStatus: "無効(disabled) - 編集不可となるステータスです",
+      },
+      passingContent: {
+        name: "コンテントを渡す",
+        description: "コンテントを渡す方法はいくつかあります。",
+        useCase: {
+          checkBox: {
+            label: "`labelTx`から",
+            helper: "`helperTx`から",
+          },
+          checkBoxMultiLine: {
+            helper: "複数行サポート - Nulla proident consectetur labore sunt ea labore. ",
+          },
+          radioChangeSides: {
+            helper: "左右に変更 - Laborum labore adipisicing in eu ipsum deserunt.",
+          },
+          customCheckBox: {
+            label: "カスタムアイコンも渡せます",
+          },
+          switch: {
+            label: "スイッチはテキストとして読むこともできます。",
+            helper:
+              "デフォルトでは、このオプションはフォントの影響を受け、見た目が見苦しくなる可能性がある為`Text`コンポーネントを使用していません。必要に応じてカスタマイズしてください。",
+          },
+          switchAid: {
+            label: "または補助アイコンもつけられます",
+          },
+        },
+      },
+      styling: {
+        name: "スタイリング",
+        description: "このコンポーネントはスタイリングの変更ができます。",
+        outerWrapper: "1 - インプットの外側のラッパー",
+        innerWrapper: "2 - インプットの内側のラッパー",
+        inputDetail: "3 - インプットのそのもの",
+        labelTx: "ラベルのスタイルも変更できます。",
+        styleContainer: "もしくは、コンポーネントのコンテナ全体をスタイルすることもできます。",
+      },
+    },
+  },
+  demoButton: {
+    description:
+      "ユーザーにアクションや選択を促すコンポーネントです。`Text`コンポーネントを`Pressable`コンポーネントでラップしています。",
+    useCase: {
+      presets: {
+        name: "プリセット",
+        description: "数種類のプリセットが用意されています。",
+      },
+      passingContent: {
+        name: "コンテントを渡す",
+        description: "コンテントを渡す方法はいくつかあります。",
+        viaTextProps: "`text`から - Billum In",
+        children: "Childrenから - Irure Reprehenderit",
+        rightAccessory: "RightAccessoryから - Duis Quis",
+        leftAccessory: "LeftAccessoryから - Duis Proident",
+        nestedChildren: "ネストされたchildrenから - proident veniam.",
+        nestedChildren2: "Ullamco cupidatat officia exercitation velit non ullamco nisi..",
+        nestedChildren3: "Occaecat aliqua irure proident veniam.",
+        multiLine:
+          "Multilineから - consequat veniam veniam reprehenderit. Fugiat id nisi quis duis sunt proident mollit dolor mollit adipisicing proident deserunt.",
+      },
+      styling: {
+        name: "スタイリング",
+        description: "このコンポーネントはスタイリングの変更ができます。",
+        styleContainer: "コンテナのスタイル - Exercitation",
+        styleText: "テキストのスタイル - Ea Anim",
+        styleAccessories: "アクセサリーのスタイル - enim ea id fugiat anim ad.",
+        pressedState: "押された状態のスタイル - fugiat anim",
+      },
+      disabling: {
+        name: "無効化",
+        description:
+          "このコンポーネントは無効化できます。スタイルも同時に変更され、押した際の挙動も無効化されます。",
+        standard: "無効化 - standard",
+        filled: "無効化 - filled",
+        reversed: "無効化 - reversed",
+        accessory: "無効化されたアクセサリーのスタイル",
+        textStyle: "無効化されたテキストのスタイル",
+      },
+    },
+  },
+  demoListItem: {
+    description:
+      "スタイルを指定されたリストの行のコンポーネントです。FlatListやSectionListなどのコンポーネントを使用することもできますし、単体でも使用できます。",
+    useCase: {
+      height: {
+        name: "高さ",
+        description: "高さの指定ができます。",
+        defaultHeight: "デフォルトの高さ (56px)",
+        customHeight: "`height`を使ったカスタムの高さ",
+        textHeight:
+          "テキストによって決まった高さ - Reprehenderit incididunt deserunt do do ea labore.",
+        longText: "テキストを1行に制限する- Reprehenderit incididunt deserunt do do ea labore.",
+      },
+      separators: {
+        name: "セパレーター",
+        description: "セパレーター/ディバイダーは用意されてるかつ任意です。",
+        topSeparator: "トップセパレーターのみ",
+        topAndBottomSeparator: "トップとボトムのセパレーター",
+        bottomSeparator: "ボトムのセパレーター",
+      },
+      icons: {
+        name: "アイコン",
+        description: "右または左のアイコンをカスタマイズすることができます。",
+        leftIcon: "左のアイコン",
+        rightIcon: "右のアイコン",
+        leftRightIcons: "左右のアイコン",
+      },
+      customLeftRight: {
+        name: "左右のコンポーネントのカスタマイズ",
+        description: "左右のコンポーネントをカスタマイズすることができます。",
+        customLeft: "カスタムされた左コンポーネント",
+        customRight: "カスタムされた右コンポーネント",
+      },
+      passingContent: {
+        name: "コンテントを渡す",
+        description: "コンテントを渡す方法はいくつかあります。",
+        text: "`text`から - reprehenderit sint",
+        children: "Childrenから - mostrud mollit",
+        nestedChildren1: "ネストされたchildrenから - proident veniam.",
+        nestedChildren2: "Ullamco cupidatat officia exercitation velit non ullamco nisi..",
+      },
+      listIntegration: {
+        name: "FlatList に組みこむ場合",
+        description:
+          "このコンポーネントはお好みのリスト系のコンポーネントへ容易に組み込むことができます。",
+      },
+      styling: {
+        name: "スタイリング",
+        description: "このコンポーネントはスタイリングの変更ができます。",
+        styledText: "スタイルされたテキスト",
+        styledContainer: "スタイルされたコンテナ(セパレーター)",
+        tintedIcons: "アイコンに色をつける",
+      },
+    },
+  },
+  demoCard: {
+    description:
+      "カードは関連する情報同士をまとめるのに役立ちます。ListItemが横に情報を表示するのに使え、こちらは縦に表示するのに使えます。",
+    useCase: {
+      presets: {
+        name: "プリセット",
+        description: "数種類のプリセットが用意されています。",
+        default: {
+          heading: "デフォルトのプリセット",
+          content: "Incididunt magna ut aliquip consectetur mollit dolor.",
+          footer: "Consectetur nulla non aliquip velit.",
+        },
+        reversed: {
+          heading: "リバースのプリセット",
+          content: "Reprehenderit occaecat proident amet id laboris.",
+          footer: "Consectetur tempor ea non labore anim .",
+        },
+      },
+      verticalAlignment: {
+        name: "縦の位置調整",
+        description: "カードは用意されたプリセットを使っての縦位置調整ができます。",
+        top: {
+          heading: "Top(デフォルト)",
+          content: "全てのコンテンツは自動的に上に配置されます。",
+          footer: "Footerも同じように上に配置されます。",
+        },
+        center: {
+          heading: "センター",
+          content: "全てのコンテンツはカードの高さから見て中央に配置されます。",
+          footer: "Footerである私も!",
+        },
+        spaceBetween: {
+          heading: "Space Between",
+          content: "全てのコンテンツは均等に分配されます。",
+          footer: "Footerの私はここが一番落ち着くね",
+        },
+        reversed: {
+          heading: "Footerのみを下に配置する",
+          content: "その名の通り、Footerのみを下に配置することができます。",
+          footer: "Footerは一人で寂しい",
+        },
+      },
+      passingContent: {
+        name: "コンテントを渡す",
+        description: "コンテントを渡す方法はいくつかあります。",
+        heading: "`heading`から",
+        content: "`content`から",
+        footer: "`footer`から",
+      },
+      customComponent: {
+        name: "カスタムコンポーネント",
+        description:
+          "全てのプリセットはカスタムコンポーネントを使って拡張/変更することができます。",
+        rightComponent: "右コンポーネント",
+        leftComponent: "左コンポーネント",
+      },
+      style: {
+        name: "スタイリング",
+        description: "このコンポーネントはスタイリングの変更ができます。",
+        heading: "ヘディングのスタイル",
+        content: "コンテントのスタイル",
+        footer: "フッターのスタイル",
+      },
+    },
+  },
+  demoAutoImage: {
+    description: "リモートまたはデータURIによって自動的にサイズを変更する画像コンポーネントです。",
+    useCase: {
+      remoteUri: { name: "リモート URI" },
+      base64Uri: { name: "Base64 URI" },
+      scaledToFitDimensions: {
+        name: "ディメンションにフィットするように拡大する",
+        description:
+          "`maxWidth` と/または `maxHeight`を指定することで、アスペクト比を維持したままサイズを変更することができます。`resizeMode: 'contain'`との違いとしては: \n1. 一方のサイズの指定でも良い（両方の指定の必要がない）。 \n2. 画像のコンテナに押し込められるのではなく、画像のディメンションを保ったまま指定したサイズに拡大、縮小を行うことができます。",
+        heightAuto: "width: 60 / height: auto",
+        widthAuto: "width: auto / height: 32",
+        bothManual: "width: 60 / height: 60",
+      },
+    },
+  },
+  demoText: {
+    description:
+      "テキストを表示する為のコンポーネントです。これはReact NativeのTextコンポーネントを内包する高階コンポーネント(Higher Order Component)です。",
+    useCase: {
+      presets: {
+        name: "プリセット",
+        description: "数種類のプリセットが用意されています。",
+        default:
+          "デフォルトのプリセット - Cillum eu laboris in labore. Excepteur mollit tempor reprehenderit fugiat elit et eu consequat laborum.",
+        bold: "ボールドのプリセット - Tempor et ullamco cupidatat in officia. Nulla ea duis elit id sunt ipsum cillum duis deserunt nostrud ut nostrud id.",
+        subheading: "サブヘディングのプリセット - In Cupidatat Cillum.",
+        heading: "ヘディングのプリセット - Voluptate Adipis.",
+      },
+      sizes: {
+        name: "サイズ",
+        description: "サイズ用のpropsです.",
+        xs: "xs - Ea ipsum est ea ex sunt.",
+        sm: "sm - Lorem sunt adipisicin.",
+        md: "md - Consequat id do lorem.",
+        lg: "lg - Nostrud ipsum ea.",
+        xl: "xl - Eiusmod ex excepteur.",
+        xxl: "xxl - Cillum eu laboris.",
+      },
+      weights: {
+        name: "ウエイト",
+        description: "ウエイト用のpropです。",
+        light:
+          "ライト - Nulla magna incididunt excepteur est occaecat duis culpa dolore cupidatat enim et.",
+        normal:
+          "ノーマル - Magna incididunt dolor ut veniam veniam laboris aliqua velit ea incididunt.",
+        medium: "ミディアム - Non duis laborum quis laboris occaecat culpa cillum.",
+        semibold: "セミボールド - Exercitation magna nostrud pariatur laborum occaecat aliqua.",
+        bold: "ボールド - Eiusmod ullamco magna exercitation est excepteur.",
+      },
+      passingContent: {
+        name: "コンテントを渡す",
+        description: "コンテントを渡す方法はいくつかあります。",
+        viaText:
+          "`text`から - Billum in aute fugiat proident nisi pariatur est. Cupidatat anim cillum eiusmod ad. Officia eu magna aliquip labore dolore consequat.",
+        viaTx: "`tx`から -",
+        children: "childrenから - Aliqua velit irure reprehenderit eu qui amet veniam consectetur.",
+        nestedChildren: "ネストされたchildrenから -",
+        nestedChildren2: "Occaecat aliqua irure proident veniam.",
+        nestedChildren3: "Ullamco cupidatat officia exercitation velit non ullamco nisi..",
+        nestedChildren4: "Occaecat aliqua irure proident veniam.",
+      },
+      styling: {
+        name: "スタイリング",
+        description: "このコンポーネントはスタイリングの変更ができます。",
+        text: "Consequat ullamco veniam velit mollit proident excepteur aliquip id culpa ipsum velit sint nostrud.",
+        text2:
+          "Eiusmod occaecat laboris eu ex veniam ipsum adipisicing consectetur. Magna ullamco adipisicing tempor adipisicing.",
+        text3:
+          "Eiusmod occaecat laboris eu ex veniam ipsum adipisicing consectetur. Magna ullamco adipisicing tempor adipisicing.",
+      },
+    },
+  },
+  demoHeader: {
+    description:
+      "様々なスクリーンで登場するコンポーネントです。ナビゲーションのボタンとスクリーンタイトルを含みます。",
+    useCase: {
+      actionIcons: {
+        name: "アクションアイコン",
+        description: "左右にアイコンを表示させることができます。",
+        leftIconTitle: "左アイコン",
+        rightIconTitle: "右アイコン",
+        bothIconsTitle: "両方のアイコン",
+      },
+      actionText: {
+        name: "アクションテキスト",
+        description: "左右にテキストを表示させることができます。",
+        leftTxTitle: "`leftTx`から",
+        rightTextTitle: "`rightText`から",
+      },
+      customActionComponents: {
+        name: "カスタムアクションコンポーネント",
+        description:
+          "アイコンまたはテキスト以外のものが必要な場合は、カスタムのアクションコンポーネントを渡すことができます。",
+        customLeftActionTitle: "カスタムの左アクション",
+      },
+      titleModes: {
+        name: "タイトルモード",
+        description:
+          "タイトルはデフォルトで中央に配置されますが、長すぎるとカットされてしまいます。Flexを使うことでアクションボタンから自動的にポジションを調整することもできます。",
+        centeredTitle: "Centered Title",
+        flexTitle: "Flex Title",
+      },
+      styling: {
+        name: "スタイリング",
+        description: "このコンポーネントはスタイリングの変更ができます。",
+        styledTitle: "スタイルされたタイトル",
+        styledWrapperTitle: "スタイルされたラッパー",
+        tintedIconsTitle: "色付けされたアイコン",
+      },
+    },
+  },
+  demoEmptyState: {
+    description:
+      "表示する為のデータが存在しない場合に使えるコンポーネントです。ユーザーに取るべきアクションをお勧めする際に有用です。",
+    useCase: {
+      presets: {
+        name: "プリセット",
+        description:
+          "text/imageのセットを使ってカスタマイズすることができます。これは`generic`のものです。カスタマイズが必要になることを想定して、このコンポーネントにデフォルトのプリセットは存在しません。",
+      },
+      passingContent: {
+        name: "コンテントを渡す",
+        description: "コンテントを渡す方法はいくつかあります。",
+        customizeImageHeading: "画像をカスタマイズ",
+        customizeImageContent: "画像のソースを渡すことができます。",
+        viaHeadingProp: "`heading`から",
+        viaContentProp: "`content`から",
+        viaButtonProp: "`button`から",
+      },
+      styling: {
+        name: "スタイリング",
+        description: "このコンポーネントはスタイリングの変更ができます。",
+      },
+    },
+  },
+}
+
+export default demoJa

RN_TEMPLATE/app/i18n/demo-ko.ts

@@ -0,0 +1,455 @@
+import { DemoTranslations } from "./demo-en"
+
+export const demoKo: DemoTranslations = {
+  demoIcon: {
+    description:
+      "등록된 아이콘을 렌더링하는 컴포넌트입니다. `onPress`가 구현되어 있으면 <TouchableOpacity />로, 그렇지 않으면 <View />로 감쌉니다.",
+    useCase: {
+      icons: {
+        name: "아이콘",
+        description: "컴포넌트에 등록된 아이콘 목록입니다.",
+      },
+      size: {
+        name: "크기",
+        description: "크기 속성이 있습니다.",
+      },
+      color: {
+        name: "색상",
+        description: "색상 속성이 있습니다.",
+      },
+      styling: {
+        name: "스타일링",
+        description: "컴포넌트는 쉽게 스타일링할 수 있습니다.",
+      },
+    },
+  },
+  demoTextField: {
+    description: "TextField 컴포넌트는 텍스트 입력 및 편집을 허용합니다.",
+    useCase: {
+      statuses: {
+        name: "상태",
+        description:
+          "다른 컴포넌트의 `preset`과 유사한 상태 속성이 있으며, 컴포넌트의 기능에도 영향을 미칩니다.",
+        noStatus: {
+          label: "상태 없음",
+          helper: "이것이 기본 상태입니다",
+          placeholder: "텍스트가 여기에 들어갑니다",
+        },
+        error: {
+          label: "오류 상태",
+          helper: "오류가 있을 때 사용하는 상태입니다",
+          placeholder: "텍스트가 여기에 들어갑니다",
+        },
+        disabled: {
+          label: "비활성 상태",
+          helper: "편집 기능을 비활성화하고 텍스트를 표시하지 않습니다",
+          placeholder: "텍스트가 여기에 들어갑니다",
+        },
+      },
+      passingContent: {
+        name: "내용 전달",
+        description: "내용을 전달하는 몇 가지 방법이 있습니다.",
+        viaLabel: {
+          labelTx: "`label` 속성으로",
+          helper: "`helper` 속성으로",
+          placeholder: "`placeholder` 속성으로",
+        },
+        rightAccessory: {
+          label: "오른쪽 액세서리",
+          helper: "이 속성은 React 요소를 반환하는 함수를 받습니다.",
+        },
+        leftAccessory: {
+          label: "왼쪽 액세서리",
+          helper: "이 속성은 React 요소를 반환하는 함수를 받습니다.",
+        },
+        supportsMultiline: {
+          label: "멀티라인 지원",
+          helper: "멀티라인 텍스트를 위한 더 높은 입력을 활성화합니다.",
+        },
+      },
+      styling: {
+        name: "스타일링",
+        description: "컴포넌트는 쉽게 스타일링할 수 있습니다.",
+        styleInput: {
+          label: "입력 스타일",
+          helper: "`style` 속성으로",
+        },
+        styleInputWrapper: {
+          label: "입력 래퍼 스타일",
+          helper: "`inputWrapperStyle` 속성으로",
+        },
+        styleContainer: {
+          label: "컨테이너 스타일",
+          helper: "`containerStyle` 속성으로",
+        },
+        styleLabel: {
+          label: "레이블 및 헬퍼 스타일",
+          helper: "`LabelTextProps` 및 `HelperTextProps` 스타일 속성으로",
+        },
+        styleAccessories: {
+          label: "액세서리 스타일",
+          helper: "`RightAccessory` 및 `LeftAccessory` 스타일 속성으로",
+        },
+      },
+    },
+  },
+  demoToggle: {
+    description:
+      "불리언 입력을 렌더링합니다. 사용자가 수행한 작업을 반영하기 위해 값 속성을 업데이트하는 onValueChange 콜백이 필요한 제어된 컴포넌트입니다. 값 속성이 업데이트되지 않으면, 컴포넌트는 사용자 작업의 예상 결과 대신 제공된 값 속성을 계속 렌더링합니다.",
+    useCase: {
+      variants: {
+        name: "변형",
+        description:
+          "이 컴포넌트는 몇 가지 변형을 지원합니다. 특정 변형을 대폭 커스터마이즈해야 하는 경우에는 쉽게 리팩토링할 수 있습니다. 기본값은 `체크박스`입니다.",
+        checkbox: {
+          label: "`체크박스` 변형",
+          helper: "단일 켜기/끄기 입력에 사용할 수 있습니다.",
+        },
+        radio: {
+          label: "`라디오` 변형",
+          helper: "여러 옵션이 있는 경우 사용하십시오.",
+        },
+        switch: {
+          label: "`스위치` 변형",
+          helper: "더 눈에 띄는 켜기/끄기 입력입니다. 접근성 지원이 더 좋습니다.",
+        },
+      },
+      statuses: {
+        name: "상태",
+        description:
+          "다른 컴포넌트의 `preset`과 유사한 상태 속성이 있으며, 컴포넌트의 기능에도 영향을 미칩니다.",
+        noStatus: "상태 없음 - 기본 상태",
+        errorStatus: "오류 상태 - 오류가 있을 때 사용",
+        disabledStatus: "비활성 상태 - 편집 기능을 비활성화하고 입력을 표시하지 않음",
+      },
+      passingContent: {
+        name: "내용 전달",
+        description: "내용을 전달하는 몇 가지 방법이 있습니다.",
+        useCase: {
+          checkBox: {
+            label: "`labelTx` 속성으로",
+            helper: "`helperTx` 속성으로",
+          },
+          checkBoxMultiLine: {
+            helper: "멀티라인 지원 - 멀티라인 지원을 위한 예제 문장입니다. 하나 둘 셋.",
+          },
+          radioChangeSides: {
+            helper: "양쪽을 변경할 수 있습니다 - 양쪽 변경을 위한 예제 문장입니다. 하나 둘 셋.",
+          },
+          customCheckBox: {
+            label: "맞춤 체크박스 아이콘 전달.",
+          },
+          switch: {
+            label: "스위치는 텍스트로 읽을 수 있습니다",
+            helper:
+              "기본적으로 이 옵션은 `Text`를 사용하지 않습니다. 폰트에 따라 켜기/끄기 문자가 이상하게 보일 수 있기 때문입니다. 필요에 따라 커스터마이즈하세요.",
+          },
+          switchAid: {
+            label: "또는 아이콘으로 보조",
+          },
+        },
+      },
+      styling: {
+        name: "스타일링",
+        description: "컴포넌트는 쉽게 스타일링할 수 있습니다.",
+        outerWrapper: "1 - 입력 외부 래퍼 스타일링",
+        innerWrapper: "2 - 입력 내부 래퍼 스타일링",
+        inputDetail: "3 - 입력 디테일 스타일링",
+        labelTx: "labelTx도 스타일링할 수 있습니다",
+        styleContainer: "또는 전체 컨테이너 스타일링",
+      },
+    },
+  },
+  demoButton: {
+    description:
+      "사용자가 작업을 수행하고 선택을 할 수 있도록 하는 컴포넌트입니다. Text 컴포넌트를 Pressable 컴포넌트로 감쌉니다.",
+    useCase: {
+      presets: {
+        name: "프리셋",
+        description: "사전 구성된 몇 가지 프리셋이 있습니다.",
+      },
+      passingContent: {
+        name: "내용 전달",
+        description: "내용을 전달하는 몇 가지 방법이 있습니다.",
+        viaTextProps: "`text` 속성으로 - 예제 문장입니다.",
+        children: "자식 - 또 다른 예제 문장입니다.",
+        rightAccessory: "오른쪽 액세서리 - 예제 문장입니다.",
+        leftAccessory: "왼쪽 액세서리 - 예제 문장입니다.",
+        nestedChildren: "중첩 자식 - 별 하나에 추억과 별 하나에 사랑과 별 하나에 쓸쓸함과",
+        nestedChildren2: "별 하나에 동경과 별 하나에 시와 ",
+        nestedChildren3: "별 하나에 어머니, 어머니.",
+        multiLine:
+          "멀티라인 - 죽는 날까지 하늘을 우러러 한 점 부끄럼이 없기를, 잎새에 이는 바람에도 나는 괴로워했다. 별을 노래하는 마음으로 모든 죽어 가는 것을 사랑해야지 그리고 나한테 주어진 길을 걸어가야겠다. 오늘 밤에도 별이 바람에 스치운다.",
+      },
+      styling: {
+        name: "스타일링",
+        description: "컴포넌트는 쉽게 스타일링할 수 있습니다.",
+        styleContainer: "스타일 컨테이너 - 예제 문장",
+        styleText: "스타일 텍스트 - 예제 문장",
+        styleAccessories: "스타일 액세서리 - 또 다른 예제 문장",
+        pressedState: "스타일 눌린 상태 - 예제 문장",
+      },
+      disabling: {
+        name: "비활성화",
+        description:
+          "컴포넌트는 비활성화할 수 있으며, 그에 따라 스타일링할 수 있습니다. 누르는 동작이 비활성화됩니다.",
+        standard: "비활성화 - 표준",
+        filled: "비활성화 - 채워진",
+        reversed: "비활성화 - 역방향",
+        accessory: "비활성화된 액세서리 스타일",
+        textStyle: "비활성화된 텍스트 스타일",
+      },
+    },
+  },
+  demoListItem: {
+    description: "FlatList, SectionList 또는 자체적으로 사용할 수 있는 스타일된 행 컴포넌트입니다.",
+    useCase: {
+      height: {
+        name: "높이",
+        description: "행은 다른 높이를 가질 수 있습니다.",
+        defaultHeight: "기본 높이 (56px)",
+        customHeight: "`height` 속성을 통해 사용자 정의 높이",
+        textHeight:
+          "텍스트 내용에 의해 결정된 높이 - 예제를 위한 긴 문장입니다. 하나 둘 셋. 안녕하세요.",
+        longText:
+          "긴 텍스트를 한 줄로 제한 - 이것 역시 예제를 위한 긴 문장입니다. 오늘 날씨는 어떤가요?",
+      },
+      separators: {
+        name: "구분선",
+        description: "구분선 / 디바이더가 사전 구성되어 있으며 선택 사항입니다.",
+        topSeparator: "상단 구분선만",
+        topAndBottomSeparator: "상단 및 하단 구분선",
+        bottomSeparator: "하단 구분선만",
+      },
+      icons: {
+        name: "아이콘",
+        description: "왼쪽 또는 오른쪽 아이콘을 사용자 정의할 수 있습니다.",
+        leftIcon: "왼쪽 아이콘",
+        rightIcon: "오른쪽 아이콘",
+        leftRightIcons: "왼쪽 및 오른쪽 아이콘",
+      },
+      customLeftRight: {
+        name: "사용자 정의 왼쪽/오른쪽 컴포넌트",
+        description: "필요시에는 사용자가 정의한 왼쪽/오른쪽 컴포넌트를 전달할 수 있습니다.",
+        customLeft: "사용자 정의 왼쪽 컴포넌트",
+        customRight: "사용자 정의 오른쪽 컴포넌트",
+      },
+      passingContent: {
+        name: "내용 전달",
+        description: "내용을 전달하는 몇 가지 방법이 있습니다.",
+        text: "`text` 속성으로 - 예제 문장입니다.",
+        children: "자식 - 또 다른 예제 문장입니다.",
+        nestedChildren1: "중첩 자식 - 이것도 예제 문장입니다..",
+        nestedChildren2: "또 다른 예제 문장, 중첩이 된 형태입니다.",
+      },
+      listIntegration: {
+        name: "FlatList 통합",
+        description: "이 컴포넌트는 선호하는 리스트 인터페이스와 쉽게 통합할 수 있습니다.",
+      },
+      styling: {
+        name: "스타일링",
+        description: "컴포넌트는 쉽게 스타일링할 수 있습니다.",
+        styledText: "스타일된 텍스트",
+        styledContainer: "스타일된 컨테이너 (구분선)",
+        tintedIcons: "색이 입혀진 아이콘",
+      },
+    },
+  },
+  demoCard: {
+    description:
+      "카드는 관련 정보를 컨테이너에 담아 표시하는 데 유용합니다. ListItem이 내용을 수평으로 표시한다면, 카드는 내용을 수직으로 표시할 수 있습니다.",
+    useCase: {
+      presets: {
+        name: "프리셋",
+        description: "사전 구성된 몇 가지 프리셋이 있습니다.",
+        default: {
+          heading: "기본 프리셋 (기본값)",
+          content: "예제 문장입니다. 그믐밤 반디불은 부서진 달조각",
+          footer: "숲으로 가자 달조각을 주으려 숲으로 가자.",
+        },
+        reversed: {
+          heading: "역방향 프리셋",
+          content: "예제 문장입니다. 그믐밤 반디불은 부서진 달조각",
+          footer: "숲으로 가자 달조각을 주으려 숲으로 가자.",
+        },
+      },
+      verticalAlignment: {
+        name: "수직 정렬",
+        description: "카드는 필요에 따라 미리 구성된 다양한 정렬방법으로 제공됩니다.",
+        top: {
+          heading: "상단 (기본값)",
+          content: "모든 콘텐츠가 자동으로 상단에 정렬됩니다.",
+          footer: "심지어 푸터도",
+        },
+        center: {
+          heading: "중앙",
+          content: "콘텐츠는 카드 높이에 상대적으로 중앙에 배치됩니다.",
+          footer: "나도!",
+        },
+        spaceBetween: {
+          heading: "공간 사이",
+          content: "모든 콘텐츠가 고르게 간격을 둡니다.",
+          footer: "나는 내가 있고 싶은 곳에 있어요.",
+        },
+        reversed: {
+          heading: "푸터 강제 하단",
+          content: "푸터를 원하는 위치에 밀어 넣습니다.",
+          footer: "여기 너무 외로워요.",
+        },
+      },
+      passingContent: {
+        name: "내용 전달",
+        description: "내용을 전달하는 몇 가지 방법이 있습니다.",
+        heading: "`heading` 속성으로",
+        content: "`content` 속성으로",
+        footer: "푸터도 외로워요.",
+      },
+      customComponent: {
+        name: "사용자 정의 컴포넌트",
+        description:
+          "사전 구성된 컴포넌트 중 하나를 직접 만든 자신의 컴포넌트로 대체할 수 있습니다. 추가 컴포넌트도 덧붙여 넣을 수 있습니다.",
+        rightComponent: "오른쪽 컴포넌트",
+        leftComponent: "왼쪽 컴포넌트",
+      },
+      style: {
+        name: "스타일링",
+        description: "컴포넌트는 쉽게 스타일링할 수 있습니다.",
+        heading: "헤딩 스타일링",
+        content: "컨텐츠 스타일링",
+        footer: "푸터 스타일링",
+      },
+    },
+  },
+  demoAutoImage: {
+    description: "원격 또는 data-uri 이미지의 크기를 자동으로 조정하는 Image 컴포넌트입니다.",
+    useCase: {
+      remoteUri: { name: "원격 URI" },
+      base64Uri: { name: "Base64 URI" },
+      scaledToFitDimensions: {
+        name: "치수에 맞게 조정",
+        description:
+          "`maxWidth` 단독으로, 혹은 `maxHeight` 속성과 함께 제공하면, 이미지는 비율을 유지하면서 자동으로 크기가 조정됩니다. 이것이 `resizeMode: 'contain'`과 다른 점은 무엇일까요? 첫째, 한쪽 크기만 지정할 수 있습니다. 둘째, 이미지가 이미지 컨테이너 내에 포함되는 대신 원하는 치수에 맞게 조정됩니다.",
+        heightAuto: "너비: 60 / 높이: 자동",
+        widthAuto: "너비: 자동 / 높이: 32",
+        bothManual: "너비: 60 / 높이: 60",
+      },
+    },
+  },
+  demoText: {
+    description:
+      "텍스트 표시가 필요한 경우를 위해, 이 컴포넌트는 기본 React Native 컴포넌트 위에 HOC로 제작되었습니다.",
+    useCase: {
+      presets: {
+        name: "프리셋",
+        description: "사전 구성된 몇 가지 프리셋이 있습니다.",
+        default: "기본 프리셋 - 예제 문장입니다. 하나 둘 셋.",
+        bold: "볼드 프리셋 - 예제 문장입니다. 하나 둘 셋.",
+        subheading: "서브헤딩 프리셋 - 예제 문장입니다. 하나 둘 셋.",
+        heading: "헤딩 프리셋 - 예제 문장입니다. 하나 둘 셋.",
+      },
+      sizes: {
+        name: "크기",
+        description: "크기 속성이 있습니다.",
+        xs: "xs - 조금 더 작은 크기 속성입니다.",
+        sm: "sm - 작은 크기 속성입니다.",
+        md: "md - 중간 크기 속성입니다.",
+        lg: "lg - 큰 크기 속성입니다.",
+        xl: "xl - 조금 더 큰 크기 속성입니다.",
+        xxl: "xxl - 아주 큰 크기 속성입니다.",
+      },
+      weights: {
+        name: "굵기",
+        description: "굵기 속성이 있습니다.",
+        light: "가벼움 - 예제 문장입니다. 안녕하세요. 하나 둘 셋.",
+        normal: "보통 - 예제 문장입니다. 안녕하세요. 하나 둘 셋.",
+        medium: "중간 - 예제 문장입니다. 안녕하세요. 하나 둘 셋.",
+        semibold: "세미볼드 - 예제 문장입니다. 안녕하세요. 하나 둘 셋.",
+        bold: "볼드 - 예제 문장입니다. 안녕하세요. 하나 둘 셋.",
+      },
+      passingContent: {
+        name: "내용 전달",
+        description: "내용을 전달하는 몇 가지 방법이 있습니다.",
+        viaText:
+          "`text` 속성으로 - 죽는 날까지 하늘을 우러러 한 점 부끄럼이 없기를, 잎새에 이는 바람에도 나는 괴로워했다. 별을 노래하는 마음으로 모든 죽어 가는 것을 사랑해야지 그리고 나한테 주어진 길을 걸어가야겠다. 오늘 밤에도 별이 바람에 스치운다.",
+        viaTx: "`tx` 속성으로",
+        children: "자식 - 또 다른 예제 문장입니다. 하나 둘 셋.",
+        nestedChildren: "중첩 자식",
+        nestedChildren2: "죽는 날까지 하늘을 우러러 한 점 부끄럼이 없기를, ",
+        nestedChildren3: "잎새에 이는 바람에도 나는 괴로워했다.",
+        nestedChildren4: "별을 노래하는 마음으로 모든 죽어 가는 것을 사랑해야지.",
+      },
+      styling: {
+        name: "스타일링",
+        description: "컴포넌트는 쉽게 스타일링할 수 있습니다.",
+        text: "그리고 나한테 주어진 길을 걸어가야겠다.",
+        text2: "오늘 밤에도 별이 바람에 스치운다.",
+        text3: "계속 이어지는 예제 문장입니다. 하나 둘 셋.",
+      },
+    },
+  },
+  demoHeader: {
+    description:
+      "여러 화면에 나타나는 컴포넌트입니다. 네비게이션 버튼과 화면 제목을 포함할 것입니다.",
+    useCase: {
+      actionIcons: {
+        name: "액션 아이콘",
+        description: "왼쪽 또는 오른쪽 액션 컴포넌트에 아이콘을 쉽게 전달할 수 있습니다.",
+        leftIconTitle: "왼쪽 아이콘",
+        rightIconTitle: "오른쪽 아이콘",
+        bothIconsTitle: "양쪽 아이콘",
+      },
+      actionText: {
+        name: "액션 텍스트",
+        description: "왼쪽 또는 오른쪽 액션 컴포넌트에 텍스트를 쉽게 전달할 수 있습니다.",
+        leftTxTitle: "`leftTx`를 통해",
+        rightTextTitle: "`rightText`를 통해",
+      },
+      customActionComponents: {
+        name: "사용자 정의 액션 컴포넌트",
+        description:
+          "아이콘이나 텍스트 옵션이 충분하지 않은 경우, 사용자 정의 액션 컴포넌트를 전달할 수 있습니다.",
+        customLeftActionTitle: "사용자 정의 왼쪽 액션",
+      },
+      titleModes: {
+        name: "제목 모드",
+        description:
+          "제목은 기본적으로 중앙에 고정되지만 너무 길면 잘릴 수 있습니다. 액션 버튼에 맞춰 조정할 수 있습니다.",
+        centeredTitle: "중앙 제목",
+        flexTitle: "유연한 제목",
+      },
+      styling: {
+        name: "스타일링",
+        description: "컴포넌트는 쉽게 스타일링할 수 있습니다.",
+        styledTitle: "스타일된 제목",
+        styledWrapperTitle: "스타일된 래퍼",
+        tintedIconsTitle: "색이 입혀진 아이콘",
+      },
+    },
+  },
+  demoEmptyState: {
+    description:
+      "표시할 데이터가 없을 때 사용할 수 있는 컴포넌트입니다. 사용자가 다음에 무엇을 할지 안내할 수 있습니다.",
+    useCase: {
+      presets: {
+        name: "프리셋",
+        description:
+          "다양한 텍스트/이미지 세트를 만들 수 있습니다. `generic`이라는 사전 정의된 세트가 하나 있습니다. 기본값이 없으므로 완전히 사용자 정의된 EmptyState를 원할 경우 사용할 수 있습니다.",
+      },
+      passingContent: {
+        name: "내용 전달",
+        description: "내용을 전달하는 몇 가지 방법이 있습니다.",
+        customizeImageHeading: "이미지 맞춤 설정",
+        customizeImageContent: "어떤 이미지 소스도 전달할 수 있습니다.",
+        viaHeadingProp: "`heading` 속성으로",
+        viaContentProp: "`content` 속성으로",
+        viaButtonProp: "`button` 속성으로",
+      },
+      styling: {
+        name: "스타일링",
+        description: "컴포넌트는 쉽게 스타일링할 수 있습니다.",
+      },
+    },
+  },
+}
+
+export default demoKo

RN_TEMPLATE/app/i18n/demo-zh.ts

@@ -0,0 +1,442 @@
+export const demoZh = {
+  demoIcon: {
+    description:
+      "用于渲染已注册图标的组件。如果提供了 `onPress`，则包装在 <TouchableOpacity /> 中，否则是 <View />。",
+    useCase: {
+      icons: {
+        name: "图标",
+        description: "组件内注册的图标列表。",
+      },
+      size: {
+        name: "尺寸",
+        description: "有一个 size 属性。",
+      },
+      color: {
+        name: "颜色",
+        description: "有一个 color 属性。",
+      },
+      styling: {
+        name: "样式",
+        description: "组件可以轻松设置样式。",
+      },
+    },
+  },
+  demoTextField: {
+    description: "TextField 组件允许输入和编辑文本。",
+    useCase: {
+      statuses: {
+        name: "状态",
+        description: "有一个 status 属性 - 与其他组件中的 `preset` 类似，但也会影响组件功能。",
+        noStatus: {
+          label: "无状态",
+          helper: "这是默认状态",
+          placeholder: "在此输入文字",
+        },
+        error: {
+          label: "错误状态",
+          helper: "出现错误时使用的状态",
+          placeholder: "在此输入文字",
+        },
+        disabled: {
+          label: "禁用状态",
+          helper: "禁用编辑并使文字变淡",
+          placeholder: "在此输入文字",
+        },
+      },
+      passingContent: {
+        name: "传递内容",
+        description: "有几种不同的方式来传递内容。",
+        viaLabel: {
+          labelTx: "通过 `label` 属性",
+          helper: "通过 `helper` 属性",
+          placeholder: "通过 `placeholder` 属性",
+        },
+        rightAccessory: {
+          label: "右侧附件",
+          helper: "此属性接收一个返回 React 元素的函数。",
+        },
+        leftAccessory: {
+          label: "左侧附件",
+          helper: "此属性接收一个返回 React 元素的函数。",
+        },
+        supportsMultiline: {
+          label: "支持多行",
+          helper: "为多行文本启用更高的输入框。",
+        },
+      },
+      styling: {
+        name: "样式",
+        description: "组件可以轻松设置样式。",
+        styleInput: {
+          label: "输入框样式",
+          helper: "通过 `style` 属性",
+        },
+        styleInputWrapper: {
+          label: "输入框包装样式",
+          helper: "通过 `inputWrapperStyle` 属性",
+        },
+        styleContainer: {
+          label: "容器样式",
+          helper: "通过 `containerStyle` 属性",
+        },
+        styleLabel: {
+          label: "标签和帮助文字样式",
+          helper: "通过 `LabelTextProps` 和 `HelperTextProps` style 属性",
+        },
+        styleAccessories: {
+          label: "附件样式",
+          helper: "通过 `RightAccessory` 和 `LeftAccessory` style 属性",
+        },
+      },
+    },
+  },
+  demoToggle: {
+    description:
+      "渲染一个布尔输入。这是一个受控组件，需要一个 onValueChange 回调来更新 value 属性，以便组件反映用户操作。",
+    useCase: {
+      variants: {
+        name: "变体",
+        description: "组件支持几种变体。",
+        checkbox: {
+          label: "复选框 - 用于多选的方形输入。",
+          helper: "这个可以打开/关闭。",
+        },
+        radio: {
+          label: "单选框 - 用于单选的圆形输入。",
+          helper: "这个也可以打开/关闭。",
+        },
+        switch: {
+          label: "开关 - 滑动切换输入。",
+          helper: "这个同样可以打开/关闭。",
+        },
+      },
+      statuses: {
+        name: "状态",
+        description: "有一个 status 属性。",
+        noStatus: "无状态 - 这是默认状态",
+        errorStatus: "错误状态 - 用于显示错误",
+        disabledStatus: "禁用状态 - 切换按钮禁用时",
+      },
+      passingContent: {
+        name: "传递内容",
+        description: "有几种不同的方式来传递内容。",
+        useCase: {
+          checkBox: {
+            label: "通过 `labelTx` 属性",
+            helper: "通过 `helperTx` 属性。",
+          },
+          checkBoxMultiLine: {
+            helper: "支持多行帮助文字。",
+          },
+          radioChangeSides: {
+            helper: "你可以更改位置。",
+          },
+          customCheckBox: {
+            label: "如果需要，将图标传递给 checkbox 属性。",
+          },
+          switch: {
+            label: "开关也可以读取各种 TX 属性",
+            helper: "通过 `helperTx` 属性",
+          },
+          switchAid: {
+            label: "或者自定义组件",
+          },
+        },
+      },
+      styling: {
+        name: "样式",
+        description: "组件可以轻松设置样式。",
+        outerWrapper: "1 - inputOuterWrapper",
+        innerWrapper: "2 - inputInnerWrapper",
+        inputDetail: "3 - inputDetail",
+        labelTx: "您也可以设置 labelTx 的样式",
+        styleContainer: "或者，设置整个容器的样式",
+      },
+    },
+  },
+  demoButton: {
+    description: "允许用户执行操作并做出选择的组件。包装了内置的 Pressable 组件。",
+    useCase: {
+      presets: {
+        name: "预设",
+        description: "有几种预设样式。",
+      },
+      passingContent: {
+        name: "传递内容",
+        description: "有几种不同的方式来传递内容。",
+        viaTextProps: "通过 `text` 属性 - 纯文本",
+        children: "子元素 - 嵌套组件",
+        rightAccessory: "右侧附件",
+        leftAccessory: "左侧附件",
+        nestedChildren: "嵌套子元素",
+        nestedChildren2: "使用嵌套子元素时应使用 `preset='default'`",
+        nestedChildren3: "支持多层嵌套子元素",
+        multiLine: "多行文本 - 支持长文本内容自动换行显示",
+      },
+      styling: {
+        name: "样式",
+        description: "组件可以轻松设置样式。",
+        styleContainer: "样式容器 - ViewStyle",
+        styleText: "样式文字 - TextStyle",
+        styleAccessories: "样式附件 - ViewStyle",
+        pressedState: "按下状态的样式！",
+        disabledState: "禁用状态的样式！",
+      },
+      disabling: {
+        name: "禁用",
+        description: "可以使用 `disabled` 属性禁用组件。",
+        standard: "禁用 - 标准",
+        filled: "禁用 - 填充",
+        reversed: "禁用 - 反转",
+        accessory: "禁用的附件样式",
+        textStyle: "禁用的文字样式",
+      },
+    },
+  },
+  demoListItem: {
+    description: "用于数据列表或菜单选择的样式化行组件。",
+    useCase: {
+      height: {
+        name: "高度",
+        description: "行可以有不同的高度。",
+        defaultHeight: "默认高度 (56px)",
+        customHeight: "自定义高度通过 `height` 属性",
+        textHeight: "文字超过一行时也会改变高度 - 看我现在多高！",
+        longText:
+          "通过 `topSeparator` 属性，可以添加分隔线。这对于需要顶部分隔线的首个 ListItem 很有用。",
+      },
+      separators: {
+        name: "分隔线",
+        description: "可以在顶部或底部添加分隔线。",
+        topSeparator: "只有顶部分隔线",
+        topAndBottomSeparator: "顶部和底部分隔线",
+        bottomSeparator: "只有底部分隔线",
+      },
+      icons: {
+        name: "图标",
+        description: "可以显示左侧或右侧的图标。",
+        leftIcon: "左侧图标",
+        rightIcon: "右侧图标",
+        leftRightIcons: "左右图标",
+      },
+      customLeftRight: {
+        name: "自定义左/右组件",
+        description: "如果图标不够用，可以传递自定义组件。",
+        customLeft: "自定义左侧组件",
+        customRight: "自定义右侧组件",
+      },
+      passingContent: {
+        name: "传递内容",
+        description: "有几种不同的方式来传递内容。",
+        text: "通过 `text` 属性 - 纯文本",
+        children: "子元素 - 嵌套的 Text 组件",
+        nestedChildren1: "第一行",
+        nestedChildren2: "第二行",
+      },
+      listIntegration: {
+        name: "与 FlatList 集成",
+        description: "组件可以轻松与您喜欢的列表界面集成。",
+      },
+      styling: {
+        name: "样式",
+        description: "组件可以轻松设置样式。",
+        styledText: "样式化的文字",
+        styledContainer: "样式化的容器（红色边框）",
+        tintedIcons: "着色的图标",
+      },
+    },
+  },
+  demoCard: {
+    description: "卡片在表面上以相关的、可操作的信息分组来显示内容。",
+    useCase: {
+      presets: {
+        name: "预设",
+        description: "有几种预设卡片配置。",
+        default: {
+          heading: "默认预设",
+          content: "这是默认预设的内容",
+          footer: "这是页脚",
+        },
+        reversed: {
+          heading: "反转预设",
+          content: "这是反转预设的内容",
+          footer: "这是页脚",
+        },
+      },
+      verticalAlignment: {
+        name: "垂直对齐",
+        description: "卡片可以配置为不同的对齐方式。",
+        top: {
+          heading: "顶部（默认）",
+          content: "所有卡片内容垂直对齐到顶部。",
+          footer: "包括页脚",
+        },
+        center: {
+          heading: "居中",
+          content: "所有卡片内容垂直居中对齐。",
+          footer: "包括页脚",
+        },
+        spaceBetween: {
+          heading: "两端对齐",
+          content: "所有卡片内容垂直两端对齐。",
+          footer: "包括页脚",
+        },
+        reversed: {
+          heading: "强制页脚底部",
+          content: "这是通过将 footer 放在 View 内并使用 `auto` flex 实现的。",
+          footer: "我在底部！",
+        },
+      },
+      passingContent: {
+        name: "传递内容",
+        description: "有几种不同的方式来传递内容。",
+        heading: "通过 `heading` 属性",
+        content: "通过 `content` 属性",
+        footer: "通过 `footer` 属性",
+      },
+      customComponent: {
+        name: "自定义组件",
+        description: "任何预配置的组件都可以替换为您自己的组件。您也可以添加其他组件。",
+        rightComponent: "右侧组件",
+        leftComponent: "左侧组件",
+      },
+      style: {
+        name: "样式",
+        description: "组件可以轻松设置样式。",
+        heading: "样式化的标题",
+        content: "样式化的内容",
+        footer: "样式化的页脚",
+      },
+    },
+  },
+  demoAutoImage: {
+    description: "根据源图像的宽高比自动调整大小的图像组件，同时可以指定最大宽度或高度约束。",
+    useCase: {
+      remoteUri: { name: "远程 URI" },
+      base64Uri: { name: "Base64 URI" },
+      scaledToFitDimensions: {
+        name: "缩放适应尺寸",
+        description:
+          "提供 `maxWidth` 和/或 `maxHeight` 属性，图像将自动缩放并保持宽高比。这与 `resizeMode: 'contain'` 有何不同？首先，您可以只指定一边的尺寸（不必同时指定两边）。其次，图像将缩放以适应所需尺寸，而不仅仅是被包含在其图像容器内。",
+        heightAuto: "宽度: 60 / 高度: 自动",
+        widthAuto: "宽度: 自动 / 高度: 32",
+        bothManual: "宽度: 60 / 高度: 60",
+      },
+    },
+  },
+  demoText: {
+    description: "用于显示文本的组件。此组件是对内置 React Native 组件的高阶封装。",
+    useCase: {
+      presets: {
+        name: "预设",
+        description: "有一些预配置的预设。",
+        default: "default 预设 - 适用于大多数情况的基本预设。",
+        bold: "bold 预设 - 用于粗体文本显示。",
+        subheading: "subheading 预设 - 用于副标题。",
+        heading: "heading 预设 - 用于标题。",
+      },
+      sizes: {
+        name: "尺寸",
+        description: "有一个 size 属性。",
+        xs: "xs - 超小尺寸。",
+        sm: "sm - 小尺寸。",
+        md: "md - 中等尺寸。",
+        lg: "lg - 大尺寸。",
+        xl: "xl - 超大尺寸。",
+        xxl: "xxl - 特大尺寸。",
+      },
+      weights: {
+        name: "字重",
+        description: "有一个 weight 属性。",
+        light: "light - 细体字重。",
+        normal: "normal - 常规字重。",
+        medium: "medium - 中等字重。",
+        semibold: "semiBold - 半粗字重。",
+        bold: "bold - 粗体字重。",
+      },
+      passingContent: {
+        name: "传递内容",
+        description: "有几种不同的方式来传递内容。",
+        viaText: "通过 `text` 属性 - 传递纯文本内容。",
+        viaTx: "通过 `tx` 属性 -",
+        children: "子元素 - 可以传递子组件作为内容。",
+        nestedChildren: "嵌套子元素 -",
+        nestedChildren2: "支持多级嵌套。",
+        nestedChildren3: "可以混合使用不同类型的子元素。",
+        nestedChildren4: "非常灵活的内容传递方式。",
+      },
+      styling: {
+        name: "样式",
+        description: "组件可以轻松设置样式。",
+        text: "可以通过样式属性自定义文本外观。",
+        text2: "支持多种样式组合，如颜色、大小、字重等。",
+        text3: "也可以通过覆盖样式来实现更复杂的效果。",
+      },
+    },
+  },
+  demoHeader: {
+    description: "出现在许多屏幕顶部的组件。将包含导航按钮和屏幕标题。",
+    useCase: {
+      actionIcons: {
+        name: "动作图标",
+        description: "您可以通过 `leftIcon` 或 `rightIcon` 属性轻松传递动作。",
+        leftIconTitle: "左侧图标",
+        rightIconTitle: "右侧图标",
+        bothIconsTitle: "两侧图标",
+      },
+      actionText: {
+        name: "动作文字",
+        description:
+          "您可以通过 `leftText` 或 `rightText` 属性轻松传递动作。您也可以使用 `leftTx` 或 `rightTx` 传递 Tx 翻译。",
+        leftTxTitle: "通过 `leftTx`",
+        rightTextTitle: "通过 `rightText`",
+      },
+      customActionComponents: {
+        name: "自定义动作组件",
+        description:
+          "如果图标或文字选项对您的用例不够灵活，您可以使用 `LeftActionComponent` 或 `RightActionComponent` 传递自己的自定义动作组件。",
+        customLeftActionTitle: "自定义左侧动作",
+      },
+      titleModes: {
+        name: "标题模式",
+        description: "标题可以强制保持在中心（默认）或在左动作按钮右侧弹性调整。",
+        centeredTitle: "居中",
+        flexTitle: "弹性",
+      },
+      styling: {
+        name: "样式",
+        description: "组件可以轻松设置样式。",
+        styledTitle: "样式化的标题",
+        styledWrapperTitle: "包装器样式",
+        tintedIconsTitle: "着色的图标",
+      },
+    },
+  },
+  demoEmptyState: {
+    description: "用于在没有数据显示时使用的组件。可用于指导用户下一步该做什么。",
+    useCase: {
+      presets: {
+        name: "预设",
+        description: "您可以创建不同的预设。这是默认预设。",
+      },
+      passingContent: {
+        name: "传递内容",
+        description: "有几种不同的方式来传递内容。",
+        customizeImageHeading: "自定义图像",
+        customizeImageContent: "您可以传递任何 `ImageSource` 到 image 属性。",
+        viaHeadingProp: "通过 `heading` 属性",
+        viaContentProp: "通过 `content` 属性",
+        viaButtonProp: "通过 `button` 属性",
+      },
+      styling: {
+        name: "样式",
+        description: "组件可以轻松设置样式。",
+        styledHeading: "样式化的标题",
+        styledContent: "样式化的内容",
+        styledButton: "样式化的按钮",
+      },
+    },
+  },
+}
+
+export default demoZh

RN_TEMPLATE/app/i18n/en.ts

@@ -0,0 +1,306 @@
+import demoEn from "./demo-en"
+
+const en = {
+  common: {
+    ok: "OK!",
+    cancel: "Cancel",
+    save: "Save",
+    back: "Back",
+    logOut: "Log Out",
+    copied: "Copied",
+  },
+  welcomeScreen: {
+    postscript:
+      "psst  — This probably isn't what your app looks like. (Unless your designer handed you these screens, and in that case, ship it!)",
+    readyForLaunch: "Your app, almost ready for launch!",
+    exciting: "(ohh, this is exciting!)",
+    letsGo: "Let's go!",
+  },
+  errorScreen: {
+    title: "Something went wrong!",
+    friendlySubtitle:
+      "This is the screen that your users will see in production when an error is thrown. You'll want to customize this message (located in `app/i18n/en.ts`) and probably the layout as well (`app/screens/ErrorScreen`). If you want to remove this entirely, check `app/app.tsx` for the <ErrorBoundary> component.",
+    reset: "RESET APP",
+    traceTitle: "Error from %{name} stack",
+  },
+  emptyStateComponent: {
+    generic: {
+      heading: "So empty... so sad",
+      content: "No data found yet. Try clicking the button to refresh or reload the app.",
+      button: "Let's try this again",
+    },
+  },
+
+  errors: {
+    invalidEmail: "Invalid email address.",
+  },
+  authErrors: {
+    // Network errors
+    timeout: "Request timed out. Please try again.",
+    cannotConnect: "Cannot connect to server. Please check your network.",
+    serverError: "Server error. Please try again later.",
+    badData: "Invalid response from server.",
+    unknownError: "An unknown error occurred.",
+    // Registration errors (E001-E010)
+    E001: "Username already exists.",
+    E002: "Email is already registered.",
+    E003: "Invalid referral code.",
+    E004: "No pending registration request.",
+    E005: "Invalid verification code.",
+    E006: "Referral code already bound.",
+    E007: "Cannot use your own referral code.",
+    // Login errors (E011-E020)
+    E011: "Invalid email or password.",
+    E012: "Account temporarily locked. Please try again later.",
+    E013: "No pending login request.",
+    E014: "User does not exist or has been disabled.",
+    E015: "Invalid verification code.",
+    E016: "Invalid Telegram authentication.",
+    E017: "Invalid Telegram data format.",
+    E018: "Google authentication failed.",
+    E019: "Please provide Google token.",
+    // Password errors (E021-E030)
+    E021: "Current password is incorrect.",
+    E022: "New password cannot be the same as current password.",
+    E023: "Email is not registered.",
+    E024: "Account has been disabled.",
+    E025: "No pending password reset request.",
+    E026: "Password reset code has expired.",
+    E027: "Invalid password reset code.",
+    E028: "User does not exist.",
+    E029: "No fields provided to update.",
+    // Email verification errors (E041-E055)
+    E041: "Sending verification code too frequently. Please wait.",
+    E042: "Email verification code has expired.",
+    E043: "Invalid email verification code.",
+    E044: "Email is already verified.",
+    E045: "Email is already used by another user.",
+    E046: "No verified email address.",
+    E047: "Please send verification code to current email first.",
+    E048: "Please verify current email first.",
+    E049: "Please send verification code to new email first.",
+    E050: "Invalid action parameter.",
+  },
+  loginScreen: {
+    logIn: "Log In",
+    enterDetails:
+      "Enter your details below to unlock top secret info. You'll never guess what we've got waiting. Or maybe you will; it's not rocket science here.",
+    emailFieldLabel: "Email",
+    passwordFieldLabel: "Password",
+    emailFieldPlaceholder: "Enter your email address",
+    passwordFieldPlaceholder: "Super secret password here",
+    tapToLogIn: "Tap to log in!",
+    hint: "Hint: you can use any email address and your favorite password :)",
+  },
+  navigator: {
+    componentsTab: "Components",
+    debugTab: "Debug",
+    communityTab: "Community",
+    podcastListTab: "Podcast",
+    profileTab: "Profile",
+  },
+  profileScreen: {
+    title: "Profile",
+    guest: "Guest",
+    uid: "UID",
+    username: "Username",
+    referralCode: "Referral Code",
+    settings: "Settings",
+    darkMode: "Dark Mode",
+    notifications: "Notifications",
+    security: "Security",
+    account: "Account",
+    accountStatus: "Account Status",
+    active: "Active",
+    inactive: "Inactive",
+    regular: "Regular",
+    emailVerified: "Email Verified",
+    verified: "Verified",
+    unverified: "Unverified",
+    loginMethods: "Login Methods",
+    version: "Version",
+    changePassword: "Change Password",
+    changeEmail: "Change Email",
+    editNickname: "Edit Nickname",
+    editProfile: "Edit Profile",
+    nicknamePlaceholder: "Enter your nickname",
+    nickname: "Nickname",
+    tapToChangeAvatar: "Tap to change avatar",
+    about: "About",
+  },
+  changePasswordScreen: {
+    title: "Change Password",
+    description: "Enter your current password and choose a new password.",
+    oldPassword: "Current Password",
+    newPassword: "New Password",
+    confirmPassword: "Confirm New Password",
+    logoutOtherDevices: "Log out from other devices",
+    submit: "Change Password",
+    success: "Success",
+    successMessage: "Your password has been changed successfully.",
+    oldPasswordRequired: "Current password is required.",
+    newPasswordRequired: "New password is required.",
+    passwordTooShort: "Password must be at least 6 characters.",
+    passwordMismatch: "Passwords do not match.",
+    samePassword: "New password cannot be the same as current password.",
+  },
+  changeEmailScreen: {
+    title: "Change Email",
+    step1Label: "Verify Email",
+    step2Label: "Bind New Email",
+    step1Title: "Step 1: Verify Current Email",
+    step1Description: "We will send a verification code to your current email address.",
+    step2Title: "Step 2: Bind New Email",
+    step2Description: "Enter your new email address and verify it.",
+    currentEmail: "Current Email",
+    newEmail: "New Email Address",
+    verificationCode: "Verification Code",
+    sendCode: "Send Verification Code",
+    sendCodeToNewEmail: "Send Code to New Email",
+    verify: "Verify",
+    confirmNewEmail: "Confirm New Email",
+    resendCode: "Resend Code",
+    success: "Success",
+    successMessage: "Your email has been changed successfully.",
+    codeRequired: "Verification code is required.",
+    codeInvalid: "Verification code must be 6 digits.",
+    newEmailRequired: "New email address is required.",
+    emailInvalid: "Please enter a valid email address.",
+    sameEmail: "New email cannot be the same as current email.",
+  },
+  settingsScreen: {
+    title: "Settings",
+    appearance: "Appearance",
+    theme: "Theme",
+    darkMode: "Dark Mode",
+    language: "Language",
+    currentLanguage: "Language",
+  },
+  languageScreen: {
+    title: "Language",
+    selectHint: "Select your preferred language",
+  },
+  themeScreen: {
+    title: "Theme",
+    selectHint: "Select your preferred theme",
+    system: "System",
+    light: "Light",
+    dark: "Dark",
+  },
+  securityScreen: {
+    title: "Security",
+    description: "Manage your account security settings.",
+    changePassword: "Change Password",
+    changeEmail: "Change Email",
+    // Session management
+    activeSessions: "Active Sessions",
+    activeSessionsDescription: "Devices currently logged into your account",
+    currentDevice: "Current Device",
+    lastActive: "Last active",
+    loginMethod: "Login via",
+    logoutDevice: "Logout",
+    logoutAllOther: "Logout All Other Devices",
+    logoutAllOtherDescription: "This will log out all devices except the current one.",
+    noOtherSessions: "No other active sessions",
+    sessionRevoked: "Device has been logged out",
+    sessionsRevoked: "{{count}} devices have been logged out",
+    confirmLogout: "Confirm Logout",
+    confirmLogoutMessage: "Are you sure you want to log out this device?",
+    confirmLogoutAllMessage: "Are you sure you want to log out all other devices?",
+    deviceTypes: {
+      desktop: "Desktop",
+      mobile: "Mobile",
+      tablet: "Tablet",
+      unknown: "Unknown Device",
+    },
+  },
+  aboutScreen: {
+    title: "About",
+    appInfo: "App Information",
+    appName: "App Name",
+    version: "Version",
+    buildVersion: "Build Version",
+    appId: "App ID",
+    appVersion: "App Version",
+    legal: "Legal",
+    privacyPolicy: "Privacy Policy",
+    termsOfService: "Terms of Service",
+  },
+  communityScreen: {
+    title: "Connect with the community",
+    tagLine:
+      "Plug in to Infinite Red's community of React Native engineers and level up your app development with us!",
+    joinUsOnSlackTitle: "Join us on Slack",
+    joinUsOnSlack:
+      "Wish there was a place to connect with React Native engineers around the world? Join the conversation in the Infinite Red Community Slack! Our growing community is a safe space to ask questions, learn from others, and grow your network.",
+    joinSlackLink: "Join the Slack Community",
+    makeIgniteEvenBetterTitle: "Make Ignite even better",
+    makeIgniteEvenBetter:
+      "Have an idea to make Ignite even better? We're happy to hear that! We're always looking for others who want to help us build the best React Native tooling out there. Join us over on GitHub to join us in building the future of Ignite.",
+    contributeToIgniteLink: "Contribute to Ignite",
+    theLatestInReactNativeTitle: "The latest in React Native",
+    theLatestInReactNative: "We're here to keep you current on all React Native has to offer.",
+    reactNativeRadioLink: "React Native Radio",
+    reactNativeNewsletterLink: "React Native Newsletter",
+    reactNativeLiveLink: "React Native Live",
+    chainReactConferenceLink: "Chain React Conference",
+    hireUsTitle: "Hire Infinite Red for your next project",
+    hireUs:
+      "Whether it's running a full project or getting teams up to speed with our hands-on training, Infinite Red can help with just about any React Native project.",
+    hireUsLink: "Send us a message",
+  },
+  showroomScreen: {
+    jumpStart: "Components to jump start your project!",
+    lorem2Sentences:
+      "Nulla cupidatat deserunt amet quis aliquip nostrud do adipisicing. Adipisicing excepteur elit laborum Lorem adipisicing do duis.",
+    demoHeaderTxExample: "Yay",
+    demoViaTxProp: "Via `tx` Prop",
+    demoViaSpecifiedTxProp: "Via `{{prop}}Tx` Prop",
+  },
+  demoDebugScreen: {
+    howTo: "HOW TO",
+    title: "Debug",
+    tagLine:
+      "Congratulations, you've got a very advanced React Native app template here.  Take advantage of this boilerplate!",
+    reactotron: "Send to Reactotron",
+    reportBugs: "Report Bugs",
+    demoList: "Demo List",
+    demoPodcastList: "Demo Podcast List",
+    androidReactotronHint:
+      "If this doesn't work, ensure the Reactotron desktop app is running, run adb reverse tcp:9090 tcp:9090 from your terminal, and reload the app.",
+    iosReactotronHint:
+      "If this doesn't work, ensure the Reactotron desktop app is running and reload app.",
+    macosReactotronHint:
+      "If this doesn't work, ensure the Reactotron desktop app is running and reload app.",
+    webReactotronHint:
+      "If this doesn't work, ensure the Reactotron desktop app is running and reload app.",
+    windowsReactotronHint:
+      "If this doesn't work, ensure the Reactotron desktop app is running and reload app.",
+  },
+  demoPodcastListScreen: {
+    title: "React Native Radio episodes",
+    onlyFavorites: "Only Show Favorites",
+    favoriteButton: "Favorite",
+    unfavoriteButton: "Unfavorite",
+    accessibility: {
+      cardHint:
+        "Double tap to listen to the episode. Double tap and hold to {{action}} this episode.",
+      switch: "Switch on to only show favorites",
+      favoriteAction: "Toggle Favorite",
+      favoriteIcon: "Episode not favorited",
+      unfavoriteIcon: "Episode favorited",
+      publishLabel: "Published {{date}}",
+      durationLabel: "Duration: {{hours}} hours {{minutes}} minutes {{seconds}} seconds",
+    },
+    noFavoritesEmptyState: {
+      heading: "This looks a bit empty",
+      content:
+        "No favorites have been added yet. Tap the heart on an episode to add it to your favorites!",
+    },
+  },
+
+  ...demoEn,
+}
+
+export default en
+export type Translations = typeof en

RN_TEMPLATE/app/i18n/es.ts

@@ -0,0 +1,303 @@
+import demoEs from "./demo-es"
+import { Translations } from "./en"
+
+const es: Translations = {
+  common: {
+    ok: "OK",
+    cancel: "Cancelar",
+    save: "Guardar",
+    back: "Volver",
+    logOut: "Cerrar sesión",
+    copied: "Copiado",
+  },
+  welcomeScreen: {
+    postscript:
+      "psst — Esto probablemente no es cómo se va a ver tu app. (A menos que tu diseñador te haya enviado estas pantallas, y en ese caso, ¡lánzalas en producción!)",
+    readyForLaunch: "Tu app, casi lista para su lanzamiento",
+    exciting: "(¡ohh, esto es emocionante!)",
+    letsGo: "¡Vamos!",
+  },
+  errorScreen: {
+    title: "¡Algo salió mal!",
+    friendlySubtitle:
+      "Esta es la pantalla que verán tus usuarios en producción cuando haya un error. Vas a querer personalizar este mensaje (que está ubicado en `app/i18n/es.ts`) y probablemente también su diseño (`app/screens/ErrorScreen`). Si quieres eliminarlo completamente, revisa `app/app.tsx` y el componente <ErrorBoundary>.",
+    reset: "REINICIA LA APP",
+    traceTitle: "Error desde %{name}",
+  },
+  emptyStateComponent: {
+    generic: {
+      heading: "Muy vacío... muy triste",
+      content:
+        "No se han encontrado datos por el momento. Intenta darle clic en el botón para refrescar o recargar la app.",
+      button: "Intentemos de nuevo",
+    },
+  },
+
+  errors: {
+    invalidEmail: "Email inválido.",
+  },
+  authErrors: {
+    timeout: "Tiempo de espera agotado. Por favor, inténtelo de nuevo.",
+    cannotConnect: "No se puede conectar al servidor. Por favor, verifique su red.",
+    serverError: "Error del servidor. Por favor, inténtelo más tarde.",
+    badData: "Respuesta inválida del servidor.",
+    unknownError: "Se produjo un error desconocido.",
+    E001: "El nombre de usuario ya existe.",
+    E002: "El correo electrónico ya está registrado.",
+    E003: "Código de referencia inválido.",
+    E004: "No hay solicitud de registro pendiente.",
+    E005: "Código de verificación inválido.",
+    E006: "Código de referencia ya vinculado.",
+    E007: "No puedes usar tu propio código de referencia.",
+    E011: "Correo electrónico o contraseña inválidos.",
+    E012: "Cuenta bloqueada temporalmente. Por favor, inténtelo más tarde.",
+    E013: "No hay solicitud de inicio de sesión pendiente.",
+    E014: "El usuario no existe o ha sido deshabilitado.",
+    E015: "Código de verificación inválido.",
+    E016: "Autenticación de Telegram inválida.",
+    E017: "Formato de datos de Telegram inválido.",
+    E018: "Autenticación de Google fallida.",
+    E019: "Por favor, proporcione el token de Google.",
+    E021: "La contraseña actual es incorrecta.",
+    E022: "La nueva contraseña no puede ser igual a la actual.",
+    E023: "El correo electrónico no está registrado.",
+    E024: "La cuenta ha sido deshabilitada.",
+    E025: "No hay solicitud de restablecimiento de contraseña pendiente.",
+    E026: "El código de restablecimiento de contraseña ha expirado.",
+    E027: "Código de restablecimiento de contraseña inválido.",
+    E028: "El usuario no existe.",
+    E029: "No se proporcionaron campos para actualizar.",
+    E041: "Enviando código de verificación con demasiada frecuencia. Por favor, espere.",
+    E042: "El código de verificación de correo electrónico ha expirado.",
+    E043: "Código de verificación de correo electrónico inválido.",
+    E044: "El correo electrónico ya está verificado.",
+    E045: "El correo electrónico ya está siendo utilizado por otro usuario.",
+    E046: "No hay dirección de correo electrónico verificada.",
+    E047: "Por favor, envíe primero el código de verificación al correo actual.",
+    E048: "Por favor, verifique primero el correo electrónico actual.",
+    E049: "Por favor, envíe primero el código de verificación al nuevo correo.",
+    E050: "Parámetro de acción inválido.",
+  },
+  loginScreen: {
+    logIn: "Iniciar sesión",
+    enterDetails:
+      "Ingresa tus datos a continuación para desbloquear información ultra secreta. Nunca vas a adivinar lo que te espera al otro lado. O quizás si lo harás; la verdad no hay mucha ciencia alrededor.",
+    emailFieldLabel: "Email",
+    passwordFieldLabel: "Contraseña",
+    emailFieldPlaceholder: "Ingresa tu email",
+    passwordFieldPlaceholder: "Contraseña super secreta aquí",
+    tapToLogIn: "¡Presiona acá para iniciar sesión!",
+    hint: "Consejo: puedes usar cualquier email y tu contraseña preferida :)",
+  },
+  navigator: {
+    componentsTab: "Componentes",
+    debugTab: "Debug",
+    communityTab: "Comunidad",
+    podcastListTab: "Podcasts",
+    profileTab: "Perfil",
+  },
+  profileScreen: {
+    title: "Perfil",
+    guest: "Invitado",
+    uid: "UID",
+    username: "Nombre de usuario",
+    referralCode: "Código de referencia",
+    settings: "Configuración",
+    darkMode: "Modo oscuro",
+    notifications: "Notificaciones",
+    security: "Seguridad",
+    account: "Cuenta",
+    accountStatus: "Estado de la cuenta",
+    active: "Activo",
+    inactive: "Inactivo",
+    regular: "Regular",
+    emailVerified: "Email verificado",
+    verified: "Verificado",
+    unverified: "No verificado",
+    loginMethods: "Métodos de inicio de sesión",
+    version: "Versión",
+    changePassword: "Cambiar contraseña",
+    changeEmail: "Cambiar email",
+    editNickname: "Editar apodo",
+    editProfile: "Editar perfil",
+    nicknamePlaceholder: "Introduce tu apodo",
+    nickname: "Apodo",
+    tapToChangeAvatar: "Toca para cambiar avatar",
+    about: "Acerca de",
+  },
+  changePasswordScreen: {
+    title: "Cambiar contraseña",
+    description: "Introduce tu contraseña actual y elige una nueva.",
+    oldPassword: "Contraseña actual",
+    newPassword: "Nueva contraseña",
+    confirmPassword: "Confirmar nueva contraseña",
+    logoutOtherDevices: "Cerrar sesión en otros dispositivos",
+    submit: "Cambiar contraseña",
+    success: "Éxito",
+    successMessage: "Tu contraseña ha sido cambiada exitosamente.",
+    oldPasswordRequired: "La contraseña actual es requerida.",
+    newPasswordRequired: "La nueva contraseña es requerida.",
+    passwordTooShort: "La contraseña debe tener al menos 6 caracteres.",
+    passwordMismatch: "Las contraseñas no coinciden.",
+    samePassword: "La nueva contraseña no puede ser igual a la actual.",
+  },
+  changeEmailScreen: {
+    title: "Cambiar email",
+    step1Label: "Verificar",
+    step2Label: "Vincular",
+    step1Title: "Paso 1: Verificar email actual",
+    step1Description: "Enviaremos un código de verificación a tu email actual.",
+    step2Title: "Paso 2: Vincular nuevo email",
+    step2Description: "Introduce tu nueva dirección de email y verifícala.",
+    currentEmail: "Email actual",
+    newEmail: "Nueva dirección de email",
+    verificationCode: "Código de verificación",
+    sendCode: "Enviar código de verificación",
+    sendCodeToNewEmail: "Enviar código al nuevo email",
+    verify: "Verificar",
+    confirmNewEmail: "Confirmar nuevo email",
+    resendCode: "Reenviar código",
+    success: "Éxito",
+    successMessage: "Tu email ha sido cambiado exitosamente.",
+    codeRequired: "El código de verificación es requerido.",
+    codeInvalid: "El código de verificación debe tener 6 dígitos.",
+    newEmailRequired: "La nueva dirección de email es requerida.",
+    emailInvalid: "Por favor introduce una dirección de email válida.",
+    sameEmail: "El nuevo email no puede ser igual al actual.",
+  },
+  settingsScreen: {
+    title: "Configuración",
+    appearance: "Apariencia",
+    theme: "Tema",
+    darkMode: "Modo Oscuro",
+    language: "Idioma",
+    currentLanguage: "Idioma",
+  },
+  languageScreen: {
+    title: "Idioma",
+    selectHint: "Selecciona tu idioma preferido",
+  },
+  themeScreen: {
+    title: "Tema",
+    selectHint: "Selecciona tu tema preferido",
+    system: "Sistema",
+    light: "Claro",
+    dark: "Oscuro",
+  },
+  securityScreen: {
+    title: "Seguridad",
+    description: "Administra la configuración de seguridad de tu cuenta.",
+    changePassword: "Cambiar Contraseña",
+    changeEmail: "Cambiar Email",
+    // Session management
+    activeSessions: "Active Sessions",
+    activeSessionsDescription: "Devices currently logged into your account",
+    currentDevice: "Current Device",
+    lastActive: "Last active",
+    loginMethod: "Login via",
+    logoutDevice: "Logout",
+    logoutAllOther: "Logout All Other Devices",
+    logoutAllOtherDescription: "This will log out all devices except the current one.",
+    noOtherSessions: "No other active sessions",
+    sessionRevoked: "Device has been logged out",
+    sessionsRevoked: "{{count}} devices have been logged out",
+    confirmLogout: "Confirm Logout",
+    confirmLogoutMessage: "Are you sure you want to log out this device?",
+    confirmLogoutAllMessage: "Are you sure you want to log out all other devices?",
+    deviceTypes: {
+      desktop: "Desktop",
+      mobile: "Mobile",
+      tablet: "Tablet",
+      unknown: "Unknown Device",
+    },
+  },
+  aboutScreen: {
+    title: "Acerca de",
+    appInfo: "Información de la App",
+    appName: "Nombre de la App",
+    version: "Versión",
+    buildVersion: "Versión de Compilación",
+    appId: "ID de la App",
+    appVersion: "Versión de la App",
+    legal: "Legal",
+    privacyPolicy: "Política de Privacidad",
+    termsOfService: "Términos de Servicio",
+  },
+  communityScreen: {
+    title: "Conecta con la comunidad",
+    tagLine:
+      "Únete a la comunidad React Native con los ingenieros de Infinite Red y mejora con nosotros tus habilidades para el desarrollo de apps.",
+    joinUsOnSlackTitle: "Únete a nosotros en Slack",
+    joinUsOnSlack:
+      "¿Quieres conectar con desarrolladores de React Native de todo el mundo? Únete a la conversación en nuestra comunidad de Slack. Nuestra comunidad, que crece día a día, es un espacio seguro para hacer preguntas, aprender de los demás y ampliar tu red.",
+    joinSlackLink: "Únete a la comunidad de Slack",
+    makeIgniteEvenBetterTitle: "Haz que Ignite sea aún mejor",
+    makeIgniteEvenBetter:
+      "¿Tienes una idea para hacer que Ignite sea aún mejor? ¡Nos encantaría escucharla! Estamos siempre buscando personas que quieran ayudarnos a construir las mejores herramientas para React Native. Únete a nosotros en GitHub para ayudarnos a construir el futuro de Ignite.",
+    contributeToIgniteLink: "Contribuir a Ignite",
+    theLatestInReactNativeTitle: "Lo último en el mundo de React Native",
+    theLatestInReactNative:
+      "Estamos aquí para mantenerte al día con todo lo que React Native tiene para ofrecer.",
+    reactNativeRadioLink: "React Native Radio",
+    reactNativeNewsletterLink: "Newsletter de React Native",
+    reactNativeLiveLink: "React Native Live",
+    chainReactConferenceLink: "Conferencia Chain React",
+    hireUsTitle: "Trabaja con Infinite Red en tu próximo proyecto",
+    hireUs:
+      "Ya sea para gestionar un proyecto de inicio a fin o educación a equipos a través de nuestros cursos y capacitación práctica, Infinite Red puede ayudarte en casi cualquier proyecto de React Native.",
+    hireUsLink: "Envíanos un mensaje",
+  },
+  showroomScreen: {
+    jumpStart: "Componentes para comenzar tu proyecto",
+    lorem2Sentences:
+      "Nulla cupidatat deserunt amet quis aliquip nostrud do adipisicing. Adipisicing excepteur elit laborum Lorem adipisicing do duis.",
+    demoHeaderTxExample: "Yay",
+    demoViaTxProp: "A través de el atributo `tx`",
+    demoViaSpecifiedTxProp: "A través de el atributo específico `{{prop}}Tx`",
+  },
+  demoDebugScreen: {
+    howTo: "CÓMO HACERLO",
+    title: "Debug",
+    tagLine:
+      "Felicidades, aquí tienes una propuesta de arquitectura y base de código avanzada para una app en React Native. ¡Disfrutalos!",
+    reactotron: "Enviar a Reactotron",
+    reportBugs: "Reportar errores",
+    demoList: "Lista demo",
+    demoPodcastList: "Lista demo de podcasts",
+    androidReactotronHint:
+      "Si esto no funciona, asegúrate de que la app de escritorio de Reactotron se esté ejecutando, corre adb reverse tcp:9090 tcp:9090 desde tu terminal, y luego recarga la app.",
+    iosReactotronHint:
+      "Si esto no funciona, asegúrate de que la app de escritorio de Reactotron se esté ejecutando, y luego recarga la app.",
+    macosReactotronHint:
+      "Si esto no funciona, asegúrate de que la app de escritorio de Reactotron se esté ejecutando, y luego recarga la app.",
+    webReactotronHint:
+      "Si esto no funciona, asegúrate de que la app de escritorio de Reactotron se esté ejecutando, y luego recarga la app.",
+    windowsReactotronHint:
+      "Si esto no funciona, asegúrate de que la app de escritorio de Reactotron se esté ejecutando, y luego recarga la app.",
+  },
+  demoPodcastListScreen: {
+    title: "Episodios de React Native Radio",
+    onlyFavorites: "Mostrar solo favoritos",
+    favoriteButton: "Favorito",
+    unfavoriteButton: "No favorito",
+    accessibility: {
+      cardHint:
+        "Haz doble clic para escuchar el episodio. Haz doble clic y mantén presionado para {{action}} este episodio.",
+      switch: "Activa para mostrar solo favoritos",
+      favoriteAction: "Cambiar a favorito",
+      favoriteIcon: "Episodio no favorito",
+      unfavoriteIcon: "Episodio favorito",
+      publishLabel: "Publicado el {{date}}",
+      durationLabel: "Duración: {{hours}} horas {{minutes}} minutos {{seconds}} segundos",
+    },
+    noFavoritesEmptyState: {
+      heading: "Esto está un poco vacío",
+      content:
+        "No se han agregado episodios favoritos todavía. ¡Presiona el corazón dentro de un episodio para agregarlo a tus favoritos!",
+    },
+  },
+
+  ...demoEs,
+}
+
+export default es

RN_TEMPLATE/app/i18n/fr.ts

@@ -0,0 +1,303 @@
+import demoFr from "./demo-fr"
+import { Translations } from "./en"
+
+const fr: Translations = {
+  common: {
+    ok: "OK !",
+    cancel: "Annuler",
+    save: "Enregistrer",
+    back: "Retour",
+    logOut: "Déconnexion",
+    copied: "Copié",
+  },
+  welcomeScreen: {
+    postscript:
+      "psst  — Ce n'est probablement pas à quoi ressemble votre application. (À moins que votre designer ne vous ait donné ces écrans, dans ce cas, mettez la en prod !)",
+    readyForLaunch: "Votre application, presque prête pour le lancement !",
+    exciting: "(ohh, c'est excitant !)",
+    letsGo: "Allons-y !",
+  },
+  errorScreen: {
+    title: "Quelque chose s'est mal passé !",
+    friendlySubtitle:
+      "C'est l'écran que vos utilisateurs verront en production lorsqu'une erreur sera lancée. Vous voudrez personnaliser ce message (situé dans `app/i18n/fr.ts`) et probablement aussi la mise en page (`app/screens/ErrorScreen`). Si vous voulez le supprimer complètement, vérifiez `app/app.tsx` pour le composant <ErrorBoundary>.",
+    reset: "RÉINITIALISER L'APPLICATION",
+    traceTitle: "Erreur depuis %{name}",
+  },
+  emptyStateComponent: {
+    generic: {
+      heading: "Si vide... si triste",
+      content:
+        "Aucune donnée trouvée pour le moment. Essayez de cliquer sur le bouton pour rafraîchir ou recharger l'application.",
+      button: "Essayons à nouveau",
+    },
+  },
+
+  errors: {
+    invalidEmail: "Adresse e-mail invalide.",
+  },
+  authErrors: {
+    timeout: "Délai d'attente dépassé. Veuillez réessayer.",
+    cannotConnect: "Impossible de se connecter au serveur. Veuillez vérifier votre réseau.",
+    serverError: "Erreur serveur. Veuillez réessayer plus tard.",
+    badData: "Réponse invalide du serveur.",
+    unknownError: "Une erreur inconnue s'est produite.",
+    E001: "Ce nom d'utilisateur existe déjà.",
+    E002: "Cet e-mail est déjà enregistré.",
+    E003: "Code de parrainage invalide.",
+    E004: "Aucune demande d'inscription en attente.",
+    E005: "Code de vérification invalide.",
+    E006: "Code de parrainage déjà lié.",
+    E007: "Vous ne pouvez pas utiliser votre propre code de parrainage.",
+    E011: "E-mail ou mot de passe invalide.",
+    E012: "Compte temporairement verrouillé. Veuillez réessayer plus tard.",
+    E013: "Aucune demande de connexion en attente.",
+    E014: "L'utilisateur n'existe pas ou a été désactivé.",
+    E015: "Code de vérification invalide.",
+    E016: "Authentification Telegram invalide.",
+    E017: "Format de données Telegram invalide.",
+    E018: "Échec de l'authentification Google.",
+    E019: "Veuillez fournir le token Google.",
+    E021: "Le mot de passe actuel est incorrect.",
+    E022: "Le nouveau mot de passe ne peut pas être identique à l'actuel.",
+    E023: "L'e-mail n'est pas enregistré.",
+    E024: "Le compte a été désactivé.",
+    E025: "Aucune demande de réinitialisation de mot de passe en attente.",
+    E026: "Le code de réinitialisation du mot de passe a expiré.",
+    E027: "Code de réinitialisation du mot de passe invalide.",
+    E028: "L'utilisateur n'existe pas.",
+    E029: "Aucun champ fourni pour la mise à jour.",
+    E041: "Envoi du code de vérification trop fréquent. Veuillez patienter.",
+    E042: "Le code de vérification de l'e-mail a expiré.",
+    E043: "Code de vérification de l'e-mail invalide.",
+    E044: "L'e-mail est déjà vérifié.",
+    E045: "L'e-mail est déjà utilisé par un autre utilisateur.",
+    E046: "Aucune adresse e-mail vérifiée.",
+    E047: "Veuillez d'abord envoyer le code de vérification à l'e-mail actuel.",
+    E048: "Veuillez d'abord vérifier l'e-mail actuel.",
+    E049: "Veuillez d'abord envoyer le code de vérification au nouvel e-mail.",
+    E050: "Paramètre d'action invalide.",
+  },
+  loginScreen: {
+    logIn: "Se connecter",
+    enterDetails:
+      "Entrez vos informations ci-dessous pour débloquer des informations top secrètes. Vous ne devinerez jamais ce que nous avons en attente. Ou peut-être que vous le ferez ; ce n'est pas de la science spatiale ici.",
+    emailFieldLabel: "E-mail",
+    passwordFieldLabel: "Mot de passe",
+    emailFieldPlaceholder: "Entrez votre adresse e-mail",
+    passwordFieldPlaceholder: "Mot de passe super secret ici",
+    tapToLogIn: "Appuyez pour vous connecter!",
+    hint: "Astuce : vous pouvez utiliser n'importe quelle adresse e-mail et votre mot de passe préféré :)",
+  },
+  navigator: {
+    componentsTab: "Composants",
+    debugTab: "Débogage",
+    communityTab: "Communauté",
+    podcastListTab: "Podcasts",
+    profileTab: "Profil",
+  },
+  profileScreen: {
+    title: "Profil",
+    guest: "Invité",
+    uid: "UID",
+    username: "Nom d'utilisateur",
+    referralCode: "Code de parrainage",
+    settings: "Paramètres",
+    darkMode: "Mode sombre",
+    notifications: "Notifications",
+    security: "Sécurité",
+    account: "Compte",
+    accountStatus: "Statut du compte",
+    active: "Actif",
+    inactive: "Inactif",
+    regular: "Standard",
+    emailVerified: "Email vérifié",
+    verified: "Vérifié",
+    unverified: "Non vérifié",
+    loginMethods: "Méthodes de connexion",
+    version: "Version",
+    changePassword: "Changer le mot de passe",
+    changeEmail: "Changer l'email",
+    editNickname: "Modifier le pseudo",
+    editProfile: "Modifier le profil",
+    nicknamePlaceholder: "Entrez votre pseudo",
+    nickname: "Pseudo",
+    tapToChangeAvatar: "Appuyez pour changer l'avatar",
+    about: "À propos",
+  },
+  changePasswordScreen: {
+    title: "Changer le mot de passe",
+    description: "Entrez votre mot de passe actuel et choisissez un nouveau.",
+    oldPassword: "Mot de passe actuel",
+    newPassword: "Nouveau mot de passe",
+    confirmPassword: "Confirmer le nouveau mot de passe",
+    logoutOtherDevices: "Déconnecter les autres appareils",
+    submit: "Changer le mot de passe",
+    success: "Succès",
+    successMessage: "Votre mot de passe a été changé avec succès.",
+    oldPasswordRequired: "Le mot de passe actuel est requis.",
+    newPasswordRequired: "Le nouveau mot de passe est requis.",
+    passwordTooShort: "Le mot de passe doit contenir au moins 6 caractères.",
+    passwordMismatch: "Les mots de passe ne correspondent pas.",
+    samePassword: "Le nouveau mot de passe ne peut pas être identique à l'actuel.",
+  },
+  changeEmailScreen: {
+    title: "Changer l'email",
+    step1Label: "Vérifier",
+    step2Label: "Lier",
+    step1Title: "Étape 1 : Vérifier l'email actuel",
+    step1Description: "Nous enverrons un code de vérification à votre email actuel.",
+    step2Title: "Étape 2 : Lier le nouvel email",
+    step2Description: "Entrez votre nouvelle adresse email et vérifiez-la.",
+    currentEmail: "Email actuel",
+    newEmail: "Nouvelle adresse email",
+    verificationCode: "Code de vérification",
+    sendCode: "Envoyer le code de vérification",
+    sendCodeToNewEmail: "Envoyer le code au nouvel email",
+    verify: "Vérifier",
+    confirmNewEmail: "Confirmer le nouvel email",
+    resendCode: "Renvoyer le code",
+    success: "Succès",
+    successMessage: "Votre email a été changé avec succès.",
+    codeRequired: "Le code de vérification est requis.",
+    codeInvalid: "Le code de vérification doit contenir 6 chiffres.",
+    newEmailRequired: "La nouvelle adresse email est requise.",
+    emailInvalid: "Veuillez entrer une adresse email valide.",
+    sameEmail: "Le nouvel email ne peut pas être identique à l'actuel.",
+  },
+  settingsScreen: {
+    title: "Paramètres",
+    appearance: "Apparence",
+    theme: "Thème",
+    darkMode: "Mode Sombre",
+    language: "Langue",
+    currentLanguage: "Langue",
+  },
+  languageScreen: {
+    title: "Langue",
+    selectHint: "Sélectionnez votre langue préférée",
+  },
+  themeScreen: {
+    title: "Thème",
+    selectHint: "Sélectionnez votre thème préféré",
+    system: "Système",
+    light: "Clair",
+    dark: "Sombre",
+  },
+  securityScreen: {
+    title: "Sécurité",
+    description: "Gérez les paramètres de sécurité de votre compte.",
+    changePassword: "Changer le Mot de Passe",
+    changeEmail: "Changer l'Email",
+    // Session management
+    activeSessions: "Active Sessions",
+    activeSessionsDescription: "Devices currently logged into your account",
+    currentDevice: "Current Device",
+    lastActive: "Last active",
+    loginMethod: "Login via",
+    logoutDevice: "Logout",
+    logoutAllOther: "Logout All Other Devices",
+    logoutAllOtherDescription: "This will log out all devices except the current one.",
+    noOtherSessions: "No other active sessions",
+    sessionRevoked: "Device has been logged out",
+    sessionsRevoked: "{{count}} devices have been logged out",
+    confirmLogout: "Confirm Logout",
+    confirmLogoutMessage: "Are you sure you want to log out this device?",
+    confirmLogoutAllMessage: "Are you sure you want to log out all other devices?",
+    deviceTypes: {
+      desktop: "Desktop",
+      mobile: "Mobile",
+      tablet: "Tablet",
+      unknown: "Unknown Device",
+    },
+  },
+  aboutScreen: {
+    title: "À propos",
+    appInfo: "Informations de l'Application",
+    appName: "Nom de l'Application",
+    version: "Version",
+    buildVersion: "Version de Compilation",
+    appId: "ID de l'Application",
+    appVersion: "Version de l'Application",
+    legal: "Mentions Légales",
+    privacyPolicy: "Politique de Confidentialité",
+    termsOfService: "Conditions d'Utilisation",
+  },
+  communityScreen: {
+    title: "Connectez-vous avec la communauté",
+    tagLine:
+      "Rejoignez la communauté d'ingénieurs React Native d'Infinite Red et améliorez votre développement d'applications avec nous !",
+    joinUsOnSlackTitle: "Rejoignez-nous sur Slack",
+    joinUsOnSlack:
+      "Vous souhaitez vous connecter avec des ingénieurs React Native du monde entier ? Rejoignez la conversation dans la communauté Slack d'Infinite Red ! Notre communauté en pleine croissance est un espace sûr pour poser des questions, apprendre des autres et développer votre réseau.",
+    joinSlackLink: "Rejoindre la communauté Slack",
+    makeIgniteEvenBetterTitle: "Rendre Ignite encore meilleur",
+    makeIgniteEvenBetter:
+      "Vous avez une idée pour rendre Ignite encore meilleur ? Nous sommes heureux de l'entendre ! Nous cherchons toujours des personnes qui veulent nous aider à construire les meilleurs outils React Native. Rejoignez-nous sur GitHub pour nous aider à construire l'avenir d'Ignite.",
+    contributeToIgniteLink: "Contribuer à Ignite",
+    theLatestInReactNativeTitle: "Les dernières nouvelles de React Native",
+    theLatestInReactNative:
+      "Nous sommes là pour vous tenir au courant de tout ce que React Native a à offrir.",
+    reactNativeRadioLink: "React Native Radio",
+    reactNativeNewsletterLink: "React Native Newsletter",
+    reactNativeLiveLink: "React Native Live",
+    chainReactConferenceLink: "Conférence Chain React",
+    hireUsTitle: "Engagez Infinite Red pour votre prochain projet",
+    hireUs:
+      "Que ce soit pour gérer un projet complet ou pour former des équipes à notre formation pratique, Infinite Red peut vous aider pour presque tous les projets React Native.",
+    hireUsLink: "Envoyez-nous un message",
+  },
+  showroomScreen: {
+    jumpStart: "Composants pour démarrer votre projet !",
+    lorem2Sentences:
+      "Nulla cupidatat deserunt amet quis aliquip nostrud do adipisicing. Adipisicing excepteur elit laborum Lorem adipisicing do duis.",
+    demoHeaderTxExample: "Yay",
+    demoViaTxProp: "Via la propriété `tx`",
+    demoViaSpecifiedTxProp: "Via la propriété `{{prop}}Tx` spécifiée",
+  },
+  demoDebugScreen: {
+    howTo: "COMMENT FAIRE",
+    title: "Débugage",
+    tagLine:
+      "Félicitations, vous avez un modèle d'application React Native très avancé ici. Profitez de cette base de code !",
+    reactotron: "Envoyer à Reactotron",
+    reportBugs: "Signaler des bugs",
+    demoList: "Liste de démonstration",
+    demoPodcastList: "Liste de podcasts de démonstration",
+    androidReactotronHint:
+      "Si cela ne fonctionne pas, assurez-vous que l'application de bureau Reactotron est en cours d'exécution, exécutez adb reverse tcp:9090 tcp:9090 à partir de votre terminal, puis rechargez l'application.",
+    iosReactotronHint:
+      "Si cela ne fonctionne pas, assurez-vous que l'application de bureau Reactotron est en cours d'exécution, puis rechargez l'application.",
+    macosReactotronHint:
+      "Si cela ne fonctionne pas, assurez-vous que l'application de bureau Reactotron est en cours d'exécution, puis rechargez l'application.",
+    webReactotronHint:
+      "Si cela ne fonctionne pas, assurez-vous que l'application de bureau Reactotron est en cours d'exécution, puis rechargez l'application.",
+    windowsReactotronHint:
+      "Si cela ne fonctionne pas, assurez-vous que l'application de bureau Reactotron est en cours d'exécution, puis rechargez l'application.",
+  },
+  demoPodcastListScreen: {
+    title: "Épisodes de Radio React Native",
+    onlyFavorites: "Afficher uniquement les favoris",
+    favoriteButton: "Favori",
+    unfavoriteButton: "Non favori",
+    accessibility: {
+      cardHint:
+        "Double-cliquez pour écouter l'épisode. Double-cliquez et maintenez pour {{action}} cet épisode.",
+      switch: "Activez pour afficher uniquement les favoris",
+      favoriteAction: "Basculer en favori",
+      favoriteIcon: "Épisode non favori",
+      unfavoriteIcon: "Épisode favori",
+      publishLabel: "Publié le {{date}}",
+      durationLabel: "Durée : {{hours}} heures {{minutes}} minutes {{seconds}} secondes",
+    },
+    noFavoritesEmptyState: {
+      heading: "C'est un peu vide ici",
+      content:
+        "Aucun favori n'a été ajouté pour le moment. Appuyez sur le cœur d'un épisode pour l'ajouter à vos favoris !",
+    },
+  },
+
+  ...demoFr,
+}
+
+export default fr

RN_TEMPLATE/app/i18n/hi.ts

@@ -0,0 +1,301 @@
+import demoHi from "./demo-hi"
+import { Translations } from "./en"
+
+const hi: Translations = {
+  common: {
+    ok: "ठीक है!",
+    cancel: "रद्द करें",
+    save: "सहेजें",
+    back: "वापस",
+    logOut: "लॉग आउट",
+    copied: "कॉपी किया गया",
+  },
+  welcomeScreen: {
+    postscript:
+      "psst - शायद आपका ऐप ऐसा नहीं दिखता है। (जब तक कि आपके डिजाइनर ने आपको ये स्क्रीन नहीं दी हों, और उस स्थिति में, इसे लॉन्च करें!)",
+    readyForLaunch: "आपका ऐप, लगभग लॉन्च के लिए तैयार है!",
+    exciting: "(ओह, यह रोमांचक है!)",
+    letsGo: "चलो चलते हैं!",
+  },
+  errorScreen: {
+    title: "कुछ गलत हो गया!",
+    friendlySubtitle:
+      "यह वह स्क्रीन है जो आपके उपयोगकर्ता संचालन में देखेंगे जब कोई त्रुटि होगी। आप इस संदेश को बदलना चाहेंगे (जो `app/i18n/hi.ts` में स्थित है) और शायद लेआउट भी (`app/screens/ErrorScreen`)। यदि आप इसे पूरी तरह से हटाना चाहते हैं, तो `app/app.tsx` में <ErrorBoundary> कंपोनेंट की जांच करें।",
+    reset: "ऐप रीसेट करें",
+    traceTitle: "%{name} स्टैक से त्रुटि",
+  },
+  emptyStateComponent: {
+    generic: {
+      heading: "इतना खाली... इतना उदास",
+      content: "अभी तक कोई डेटा नहीं मिला। रीफ्रेश करने या ऐप को पुनः लोड करने के लिए बटन दबाएं।",
+      button: "चलो फिर से कोशिश करते हैं",
+    },
+  },
+
+  errors: {
+    invalidEmail: "अमान्य ईमेल पता।",
+  },
+  authErrors: {
+    timeout: "Request timed out. Please try again.",
+    cannotConnect: "Cannot connect to server. Please check your network.",
+    serverError: "Server error. Please try again later.",
+    badData: "Invalid response from server.",
+    unknownError: "An unknown error occurred.",
+    E001: "Username already exists.",
+    E002: "Email is already registered.",
+    E003: "Invalid referral code.",
+    E004: "No pending registration request.",
+    E005: "Invalid verification code.",
+    E006: "Referral code already bound.",
+    E007: "Cannot use your own referral code.",
+    E011: "Invalid email or password.",
+    E012: "Account temporarily locked. Please try again later.",
+    E013: "No pending login request.",
+    E014: "User does not exist or has been disabled.",
+    E015: "Invalid verification code.",
+    E016: "Invalid Telegram authentication.",
+    E017: "Invalid Telegram data format.",
+    E018: "Google authentication failed.",
+    E019: "Please provide Google token.",
+    E021: "Current password is incorrect.",
+    E022: "New password cannot be the same as current password.",
+    E023: "Email is not registered.",
+    E024: "Account has been disabled.",
+    E025: "No pending password reset request.",
+    E026: "Password reset code has expired.",
+    E027: "Invalid password reset code.",
+    E028: "User does not exist.",
+    E029: "No fields provided to update.",
+    E041: "Sending verification code too frequently. Please wait.",
+    E042: "Email verification code has expired.",
+    E043: "Invalid email verification code.",
+    E044: "Email is already verified.",
+    E045: "Email is already used by another user.",
+    E046: "No verified email address.",
+    E047: "Please send verification code to current email first.",
+    E048: "Please verify current email first.",
+    E049: "Please send verification code to new email first.",
+    E050: "Invalid action parameter.",
+  },
+  loginScreen: {
+    logIn: "लॉग इन करें",
+    enterDetails:
+      "सर्वश्रेष्ठ रहस्य पता करने के लिए नीचे अपना विवरण दर्ज करें। आप कभी अनुमान नहीं लगा पाएंगे कि हमारे पास क्या इंतजार कर रहा है। या शायद आप कर सकते हैं; यह रॉकेट साइंस नहीं है।",
+    emailFieldLabel: "ईमेल",
+    passwordFieldLabel: "पासवर्ड",
+    emailFieldPlaceholder: "अपना ईमेल पता दर्ज करें",
+    passwordFieldPlaceholder: "सुपर सीक्रेट पासवर्ड यहाँ",
+    tapToLogIn: "लॉग इन करने के लिए टैप करें!",
+    hint: "संकेत: आप किसी भी ईमेल पते और अपने पसंदीदा पासवर्ड का उपयोग कर सकते हैं :)",
+  },
+  navigator: {
+    componentsTab: "कंपोनेंट्स",
+    debugTab: "डीबग",
+    communityTab: "समुदाय",
+    podcastListTab: "पॉडकास्ट",
+    profileTab: "प्रोफ़ाइल",
+  },
+  profileScreen: {
+    title: "प्रोफ़ाइल",
+    guest: "अतिथि",
+    uid: "UID",
+    username: "उपयोगकर्ता नाम",
+    referralCode: "रेफरल कोड",
+    settings: "सेटिंग्स",
+    darkMode: "डार्क मोड",
+    notifications: "सूचनाएं",
+    security: "सुरक्षा",
+    account: "खाता",
+    accountStatus: "खाते की स्थिति",
+    active: "सक्रिय",
+    inactive: "निष्क्रिय",
+    regular: "सामान्य",
+    emailVerified: "ईमेल सत्यापित",
+    verified: "सत्यापित",
+    unverified: "असत्यापित",
+    loginMethods: "लॉगिन तरीके",
+    version: "संस्करण",
+    changePassword: "पासवर्ड बदलें",
+    changeEmail: "ईमेल बदलें",
+    editNickname: "उपनाम संपादित करें",
+    editProfile: "प्रोफ़ाइल संपादित करें",
+    nicknamePlaceholder: "अपना उपनाम दर्ज करें",
+    nickname: "उपनाम",
+    tapToChangeAvatar: "अवतार बदलने के लिए टैप करें",
+    about: "के बारे में",
+  },
+  changePasswordScreen: {
+    title: "पासवर्ड बदलें",
+    description: "अपना वर्तमान पासवर्ड दर्ज करें और एक नया पासवर्ड चुनें।",
+    oldPassword: "वर्तमान पासवर्ड",
+    newPassword: "नया पासवर्ड",
+    confirmPassword: "नए पासवर्ड की पुष्टि करें",
+    logoutOtherDevices: "अन्य उपकरणों से लॉग आउट करें",
+    submit: "पासवर्ड बदलें",
+    success: "सफल",
+    successMessage: "आपका पासवर्ड सफलतापूर्वक बदल दिया गया है।",
+    oldPasswordRequired: "वर्तमान पासवर्ड आवश्यक है।",
+    newPasswordRequired: "नया पासवर्ड आवश्यक है।",
+    passwordTooShort: "पासवर्ड कम से कम 6 अक्षरों का होना चाहिए।",
+    passwordMismatch: "पासवर्ड मेल नहीं खाते।",
+    samePassword: "नया पासवर्ड वर्तमान पासवर्ड जैसा नहीं हो सकता।",
+  },
+  changeEmailScreen: {
+    title: "ईमेल बदलें",
+    step1Label: "सत्यापित करें",
+    step2Label: "जोड़ें",
+    step1Title: "चरण 1: वर्तमान ईमेल सत्यापित करें",
+    step1Description: "हम आपके वर्तमान ईमेल पते पर एक सत्यापन कोड भेजेंगे।",
+    step2Title: "चरण 2: नया ईमेल जोड़ें",
+    step2Description: "अपना नया ईमेल पता दर्ज करें और इसे सत्यापित करें।",
+    currentEmail: "वर्तमान ईमेल",
+    newEmail: "नया ईमेल पता",
+    verificationCode: "सत्यापन कोड",
+    sendCode: "सत्यापन कोड भेजें",
+    sendCodeToNewEmail: "नए ईमेल पर कोड भेजें",
+    verify: "सत्यापित करें",
+    confirmNewEmail: "नए ईमेल की पुष्टि करें",
+    resendCode: "कोड फिर से भेजें",
+    success: "सफल",
+    successMessage: "आपका ईमेल सफलतापूर्वक बदल दिया गया है।",
+    codeRequired: "सत्यापन कोड आवश्यक है।",
+    codeInvalid: "सत्यापन कोड 6 अंकों का होना चाहिए।",
+    newEmailRequired: "नया ईमेल पता आवश्यक है।",
+    emailInvalid: "कृपया एक वैध ईमेल पता दर्ज करें।",
+    sameEmail: "नया ईमेल वर्तमान ईमेल जैसा नहीं हो सकता।",
+  },
+  settingsScreen: {
+    title: "सेटिंग्स",
+    appearance: "दिखावट",
+    theme: "थीम",
+    darkMode: "डार्क मोड",
+    language: "भाषा",
+    currentLanguage: "भाषा",
+  },
+  languageScreen: {
+    title: "भाषा",
+    selectHint: "अपनी पसंदीदा भाषा चुनें",
+  },
+  themeScreen: {
+    title: "थीम",
+    selectHint: "अपनी पसंदीदा थीम चुनें",
+    system: "सिस्टम",
+    light: "लाइट",
+    dark: "डार्क",
+  },
+  securityScreen: {
+    title: "सुरक्षा",
+    description: "अपने खाते की सुरक्षा सेटिंग्स प्रबंधित करें।",
+    changePassword: "पासवर्ड बदलें",
+    changeEmail: "ईमेल बदलें",
+    // Session management
+    activeSessions: "Active Sessions",
+    activeSessionsDescription: "Devices currently logged into your account",
+    currentDevice: "Current Device",
+    lastActive: "Last active",
+    loginMethod: "Login via",
+    logoutDevice: "Logout",
+    logoutAllOther: "Logout All Other Devices",
+    logoutAllOtherDescription: "This will log out all devices except the current one.",
+    noOtherSessions: "No other active sessions",
+    sessionRevoked: "Device has been logged out",
+    sessionsRevoked: "{{count}} devices have been logged out",
+    confirmLogout: "Confirm Logout",
+    confirmLogoutMessage: "Are you sure you want to log out this device?",
+    confirmLogoutAllMessage: "Are you sure you want to log out all other devices?",
+    deviceTypes: {
+      desktop: "Desktop",
+      mobile: "Mobile",
+      tablet: "Tablet",
+      unknown: "Unknown Device",
+    },
+  },
+  aboutScreen: {
+    title: "के बारे में",
+    appInfo: "ऐप जानकारी",
+    appName: "ऐप का नाम",
+    version: "संस्करण",
+    buildVersion: "बिल्ड संस्करण",
+    appId: "ऐप आईडी",
+    appVersion: "ऐप संस्करण",
+    legal: "कानूनी",
+    privacyPolicy: "गोपनीयता नीति",
+    termsOfService: "सेवा की शर्तें",
+  },
+  communityScreen: {
+    title: "समुदाय से जुड़ें",
+    tagLine:
+      "Infinite Red के React Native इंजीनियरों के समुदाय से जुड़ें और हमारे साथ अपने ऐप विकास को बेहतर बनाएं!",
+    joinUsOnSlackTitle: "Slack पर हमसे जुड़ें",
+    joinUsOnSlack:
+      "क्या आप चाहते हैं कि दुनिया भर के React Native इंजीनियरों से जुड़ने के लिए कोई जगह हो? Infinite Red Community Slack में बातचीत में शामिल हों! हमारा बढ़ता हुआ समुदाय प्रश्न पूछने, दूसरों से सीखने और अपने नेटवर्क को बढ़ाने के लिए एक सुरक्षित स्थान है।",
+    joinSlackLink: "Slack समुदाय में शामिल हों",
+    makeIgniteEvenBetterTitle: "Ignite को और बेहतर बनाएं",
+    makeIgniteEvenBetter:
+      "Ignite को और बेहतर बनाने का कोई विचार है? हमें यह सुनकर खुशी होगी! हम हमेशा ऐसे लोगों की तलाश में रहते हैं जो हमें सर्वश्रेष्ठ React Native टूलिंग बनाने में मदद करना चाहते हैं। Ignite के भविष्य को बनाने में हमारे साथ शामिल होने के लिए GitHub पर हमसे जुड़ें।",
+    contributeToIgniteLink: "Ignite में योगदान दें",
+    theLatestInReactNativeTitle: "React Native में नवीनतम",
+    theLatestInReactNative: "हम आपको React Native के सभी प्रस्तावों पर अपडेट रखने के लिए यहां हैं।",
+    reactNativeRadioLink: "React Native रेडियो",
+    reactNativeNewsletterLink: "React Native न्यूजलेटर",
+    reactNativeLiveLink: "React Native लाइव",
+    chainReactConferenceLink: "Chain React कॉन्फ्रेंस",
+    hireUsTitle: "अपने अगले प्रोजेक्ट के लिए Infinite Red को काम पर रखें",
+    hireUs:
+      "चाहे वह एक पूरा प्रोजेक्ट चलाना हो या हमारे हैंड्स-ऑन प्रशिक्षण के साथ टीमों को गति देना हो, Infinite Red लगभग किसी भी React Native प्रोजेक्ट में मदद कर सकता है।",
+    hireUsLink: "हमें एक संदेश भेजें",
+  },
+  showroomScreen: {
+    jumpStart: "अपने प्रोजेक्ट को जंप स्टार्ट करने के लिए कंपोनेंट्स!",
+    lorem2Sentences:
+      "कोई भी काम जो आप नहीं करना चाहते, उसे करने के लिए किसी और को ढूंढना चाहिए। जो लोग दूसरों की मदद करते हैं, वे खुद की भी मदद करते हैं।",
+    demoHeaderTxExample: "हाँ",
+    demoViaTxProp: "`tx` प्रॉप के माध्यम से",
+    demoViaSpecifiedTxProp: "`{{prop}}Tx` प्रॉप के माध्यम से",
+  },
+  demoDebugScreen: {
+    howTo: "कैसे करें",
+    title: "डीबग",
+    tagLine:
+      "बधाई हो, आपके पास यहां एक बहुत उन्नत React Native ऐप टेम्पलेट है। इस बॉयलरप्लेट का लाभ उठाएं!",
+    reactotron: "Reactotron को भेजें",
+    reportBugs: "बग्स की रिपोर्ट करें",
+    demoList: "डेमो सूची",
+    demoPodcastList: "डेमो पॉडकास्ट सूची",
+    androidReactotronHint:
+      "यदि यह काम नहीं करता है, तो सुनिश्चित करें कि Reactotron डेस्कटॉप ऐप चल रहा है, अपने टर्मिनल से adb reverse tcp:9090 tcp:9090 चलाएं, और ऐप को पुनः लोड करें।",
+    iosReactotronHint:
+      "यदि यह काम नहीं करता है, तो सुनिश्चित करें कि Reactotron डेस्कटॉप ऐप चल रहा है और ऐप को पुनः लोड करें।",
+    macosReactotronHint:
+      "यदि यह काम नहीं करता है, तो सुनिश्चित करें कि Reactotron डेस्कटॉप ऐप चल रहा है और ऐप को पुनः लोड करें।",
+    webReactotronHint:
+      "यदि यह काम नहीं करता है, तो सुनिश्चित करें कि Reactotron डेस्कटॉप ऐप चल रहा है और ऐप को पुनः लोड करें।",
+    windowsReactotronHint:
+      "यदि यह काम नहीं करता है, तो सुनिश्चित करें कि Reactotron डेस्कटॉप ऐप चल रहा है और ऐप को पुनः लोड करें।",
+  },
+  demoPodcastListScreen: {
+    title: "React Native रेडियो एपिसोड",
+    onlyFavorites: "केवल पसंदीदा दिखाएं",
+    favoriteButton: "पसंदीदा",
+    unfavoriteButton: "नापसंद",
+    accessibility: {
+      cardHint:
+        "एपिसोड सुनने के लिए डबल टैप करें। इस एपिसोड को {{action}} करने के लिए डबल टैप करें और होल्ड करें।",
+      switch: "केवल पसंदीदा दिखाने के लिए स्विच करें",
+      favoriteAction: "पसंदीदा टॉगल करें",
+      favoriteIcon: "एपिसोड पसंदीदा नहीं है",
+      unfavoriteIcon: "एपिसोड पसंदीदा है",
+      publishLabel: "{{date}} को प्रकाशित",
+      durationLabel: "अवधि: {{hours}} घंटे {{minutes}} मिनट {{seconds}} सेकंड",
+    },
+    noFavoritesEmptyState: {
+      heading: "यह थोड़ा खाली लगता है",
+      content:
+        "अभी तक कोई पसंदीदा नहीं जोड़ा गया है। इसे अपने पसंदीदा में जोड़ने के लिए किसी एपिसोड पर दिल पर टैप करें!",
+    },
+  },
+
+  ...demoHi,
+}
+
+export default hi

RN_TEMPLATE/app/i18n/index.ts

@@ -0,0 +1,87 @@
+import { I18nManager } from "react-native"
+import * as Localization from "expo-localization"
+import i18n from "i18next"
+import { initReactI18next } from "react-i18next"
+import "intl-pluralrules"
+
+// if English isn't your default language, move Translations to the appropriate language file.
+import ar from "./ar"
+import en, { Translations } from "./en"
+import es from "./es"
+import fr from "./fr"
+import hi from "./hi"
+import ja from "./ja"
+import ko from "./ko"
+import zh from "./zh"
+
+const fallbackLocale = "en-US"
+
+const systemLocales = Localization.getLocales()
+
+const resources = { ar, en, ko, es, fr, ja, hi, zh }
+const supportedTags = Object.keys(resources)
+
+// Checks to see if the device locale matches any of the supported locales
+// Device locale may be more specific and still match (e.g., en-US matches en)
+const systemTagMatchesSupportedTags = (deviceTag: string) => {
+  const primaryTag = deviceTag.split("-")[0]
+  return supportedTags.includes(primaryTag)
+}
+
+const pickSupportedLocale: () => Localization.Locale | undefined = () => {
+  return systemLocales.find((locale) => systemTagMatchesSupportedTags(locale.languageTag))
+}
+
+const locale = pickSupportedLocale()
+
+export let isRTL = false
+
+// Need to set RTL ASAP to ensure the app is rendered correctly. Waiting for i18n to init is too late.
+if (locale?.languageTag && locale?.textDirection === "rtl") {
+  I18nManager.allowRTL(true)
+  isRTL = true
+} else {
+  I18nManager.allowRTL(false)
+}
+
+export const initI18n = async () => {
+  i18n.use(initReactI18next)
+
+  await i18n.init({
+    resources,
+    lng: locale?.languageTag ?? fallbackLocale,
+    fallbackLng: fallbackLocale,
+    interpolation: {
+      escapeValue: false,
+    },
+  })
+
+  return i18n
+}
+
+/**
+ * Builds up valid keypaths for translations.
+ */
+
+export type TxKeyPath = RecursiveKeyOf<Translations>
+
+// via: https://stackoverflow.com/a/65333050
+type RecursiveKeyOf<TObj extends object> = {
+  [TKey in keyof TObj & (string | number)]: RecursiveKeyOfHandleValue<TObj[TKey], `${TKey}`, true>
+}[keyof TObj & (string | number)]
+
+type RecursiveKeyOfInner<TObj extends object> = {
+  [TKey in keyof TObj & (string | number)]: RecursiveKeyOfHandleValue<TObj[TKey], `${TKey}`, false>
+}[keyof TObj & (string | number)]
+
+type RecursiveKeyOfHandleValue<
+  TValue,
+  Text extends string,
+  IsFirstLevel extends boolean,
+> = TValue extends any[]
+  ? Text
+  : TValue extends object
+    ? IsFirstLevel extends true
+      ? Text | `${Text}:${RecursiveKeyOfInner<TValue>}`
+      : Text | `${Text}.${RecursiveKeyOfInner<TValue>}`
+    : Text

RN_TEMPLATE/app/i18n/ja.ts

@@ -0,0 +1,301 @@
+import demoJa from "./demo-ja"
+import { Translations } from "./en"
+
+const ja: Translations = {
+  common: {
+    ok: "OK",
+    cancel: "キャンセル",
+    save: "保存",
+    back: "戻る",
+    logOut: "ログアウト",
+    copied: "コピーしました",
+  },
+  welcomeScreen: {
+    postscript:
+      "注目！ — このアプリはお好みの見た目では無いかもしれません(デザイナーがこのスクリーンを送ってこない限りは。もしそうなら公開しちゃいましょう！)",
+    readyForLaunch: "このアプリはもう少しで公開できます！",
+    exciting: "(楽しみですね！)",
+    letsGo: "レッツゴー！",
+  },
+  errorScreen: {
+    title: "問題が発生しました",
+    friendlySubtitle:
+      "本番では、エラーが投げられた時にこのページが表示されます。もし使うならこのメッセージに変更を加えてください(`app/i18n/jp.ts`)レイアウトはこちらで変更できます(`app/screens/ErrorScreen`)。もしこのスクリーンを取り除きたい場合は、`app/app.tsx`にある<ErrorBoundary>コンポーネントをチェックしてください",
+    reset: "リセット",
+    traceTitle: "エラーのスタック: %{name}",
+  },
+  emptyStateComponent: {
+    generic: {
+      heading: "静かだ...悲しい。",
+      content:
+        "データが見つかりません。ボタンを押してアプリをリロード、またはリフレッシュしてください。",
+      button: "もう一度やってみよう",
+    },
+  },
+
+  errors: {
+    invalidEmail: "有効なメールアドレスを入力してください.",
+  },
+  authErrors: {
+    timeout: "リクエストがタイムアウトしました。再度お試しください。",
+    cannotConnect: "サーバーに接続できません。ネットワークを確認してください。",
+    serverError: "サーバーエラーが発生しました。後ほど再度お試しください。",
+    badData: "サーバーからの応答が無効です。",
+    unknownError: "不明なエラーが発生しました。",
+    E001: "このユーザー名は既に使用されています。",
+    E002: "このメールアドレスは既に登録されています。",
+    E003: "無効な紹介コードです。",
+    E004: "保留中の登録リクエストがありません。",
+    E005: "認証コードが正しくありません。",
+    E006: "紹介コードは既に登録されています。",
+    E007: "自分の紹介コードは使用できません。",
+    E011: "メールアドレスまたはパスワードが正しくありません。",
+    E012: "アカウントが一時的にロックされています。後ほど再度お試しください。",
+    E013: "保留中のログインリクエストがありません。",
+    E014: "ユーザーが存在しないか、無効になっています。",
+    E015: "認証コードが正しくありません。",
+    E016: "Telegram認証が無効です。",
+    E017: "Telegramデータの形式が正しくありません。",
+    E018: "Google認証に失敗しました。",
+    E019: "Googleトークンを入力してください。",
+    E021: "現在のパスワードが正しくありません。",
+    E022: "新しいパスワードは現在のパスワードと同じにできません。",
+    E023: "このメールアドレスは登録されていません。",
+    E024: "アカウントが無効になっています。",
+    E025: "保留中のパスワードリセットリクエストがありません。",
+    E026: "パスワードリセットコードの有効期限が切れています。",
+    E027: "パスワードリセットコードが正しくありません。",
+    E028: "ユーザーが存在しません。",
+    E029: "更新するフィールドが提供されていません。",
+    E041: "認証コードの送信が頻繁すぎます。しばらくお待ちください。",
+    E042: "メール認証コードの有効期限が切れています。",
+    E043: "メール認証コードが正しくありません。",
+    E044: "このメールアドレスは既に認証されています。",
+    E045: "このメールアドレスは他のユーザーが使用しています。",
+    E046: "認証済みのメールアドレスがありません。",
+    E047: "まず現在のメールアドレスに認証コードを送信してください。",
+    E048: "まず現在のメールアドレスを認証してください。",
+    E049: "まず新しいメールアドレスに認証コードを送信してください。",
+    E050: "無効なactionパラメータです。",
+  },
+  loginScreen: {
+    logIn: "ログイン",
+    enterDetails:
+      "ここにあなたの情報を入力してトップシークレットをアンロックしましょう。何が待ち構えているか予想もつかないはずです。はたまたそうでも無いかも - ロケットサイエンスほど複雑なものではありません。",
+    emailFieldLabel: "メールアドレス",
+    passwordFieldLabel: "パスワード",
+    emailFieldPlaceholder: "メールアドレスを入力してください",
+    passwordFieldPlaceholder: "パスワードを入力してください",
+    tapToLogIn: "タップしてログインしよう！",
+    hint: "ヒント: お好みのメールアドレスとパスワードを使ってください :)",
+  },
+  navigator: {
+    componentsTab: "コンポーネント",
+    debugTab: "デバッグ",
+    communityTab: "コミュニティ",
+    podcastListTab: "ポッドキャスト",
+    profileTab: "プロフィール",
+  },
+  profileScreen: {
+    title: "プロフィール",
+    guest: "ゲスト",
+    uid: "UID",
+    username: "ユーザー名",
+    referralCode: "紹介コード",
+    settings: "設定",
+    darkMode: "ダークモード",
+    notifications: "通知",
+    security: "セキュリティ",
+    account: "アカウント",
+    accountStatus: "アカウント状態",
+    active: "アクティブ",
+    inactive: "非アクティブ",
+    regular: "一般",
+    emailVerified: "メール認証",
+    verified: "認証済み",
+    unverified: "未認証",
+    loginMethods: "ログイン方法",
+    version: "バージョン",
+    changePassword: "パスワード変更",
+    changeEmail: "メールアドレス変更",
+    editNickname: "ニックネーム編集",
+    editProfile: "プロフィール編集",
+    nicknamePlaceholder: "ニックネームを入力",
+    nickname: "ニックネーム",
+    tapToChangeAvatar: "タップしてアバターを変更",
+    about: "このアプリについて",
+  },
+  changePasswordScreen: {
+    title: "パスワード変更",
+    description: "現在のパスワードを入力し、新しいパスワードを選択してください。",
+    oldPassword: "現在のパスワード",
+    newPassword: "新しいパスワード",
+    confirmPassword: "新しいパスワードの確認",
+    logoutOtherDevices: "他のデバイスからログアウト",
+    submit: "パスワードを変更",
+    success: "成功",
+    successMessage: "パスワードが正常に変更されました。",
+    oldPasswordRequired: "現在のパスワードは必須です。",
+    newPasswordRequired: "新しいパスワードは必須です。",
+    passwordTooShort: "パスワードは6文字以上である必要があります。",
+    passwordMismatch: "パスワードが一致しません。",
+    samePassword: "新しいパスワードは現在のパスワードと同じにできません。",
+  },
+  changeEmailScreen: {
+    title: "メールアドレス変更",
+    step1Label: "メール確認",
+    step2Label: "新規紐付け",
+    step1Title: "ステップ1：現在のメールを確認",
+    step1Description: "現在のメールアドレスに確認コードを送信します。",
+    step2Title: "ステップ2：新しいメールを紐付け",
+    step2Description: "新しいメールアドレスを入力して確認してください。",
+    currentEmail: "現在のメールアドレス",
+    newEmail: "新しいメールアドレス",
+    verificationCode: "確認コード",
+    sendCode: "確認コードを送信",
+    sendCodeToNewEmail: "新しいメールにコードを送信",
+    verify: "確認",
+    confirmNewEmail: "新しいメールを確認",
+    resendCode: "コードを再送信",
+    success: "成功",
+    successMessage: "メールアドレスが正常に変更されました。",
+    codeRequired: "確認コードは必須です。",
+    codeInvalid: "確認コードは6桁である必要があります。",
+    newEmailRequired: "新しいメールアドレスは必須です。",
+    emailInvalid: "有効なメールアドレスを入力してください。",
+    sameEmail: "新しいメールは現在のメールと同じにできません。",
+  },
+  settingsScreen: {
+    title: "設定",
+    appearance: "外観",
+    theme: "テーマ",
+    darkMode: "ダークモード",
+    language: "言語",
+    currentLanguage: "言語",
+  },
+  languageScreen: {
+    title: "言語",
+    selectHint: "ご希望の言語を選択してください",
+  },
+  themeScreen: {
+    title: "テーマ",
+    selectHint: "ご希望のテーマを選択してください",
+    system: "システム",
+    light: "ライト",
+    dark: "ダーク",
+  },
+  securityScreen: {
+    title: "セキュリティ",
+    description: "アカウントのセキュリティ設定を管理します。",
+    changePassword: "パスワード変更",
+    changeEmail: "メール変更",
+    // Session management
+    activeSessions: "Active Sessions",
+    activeSessionsDescription: "Devices currently logged into your account",
+    currentDevice: "Current Device",
+    lastActive: "Last active",
+    loginMethod: "Login via",
+    logoutDevice: "Logout",
+    logoutAllOther: "Logout All Other Devices",
+    logoutAllOtherDescription: "This will log out all devices except the current one.",
+    noOtherSessions: "No other active sessions",
+    sessionRevoked: "Device has been logged out",
+    sessionsRevoked: "{{count}} devices have been logged out",
+    confirmLogout: "Confirm Logout",
+    confirmLogoutMessage: "Are you sure you want to log out this device?",
+    confirmLogoutAllMessage: "Are you sure you want to log out all other devices?",
+    deviceTypes: {
+      desktop: "Desktop",
+      mobile: "Mobile",
+      tablet: "Tablet",
+      unknown: "Unknown Device",
+    },
+  },
+  aboutScreen: {
+    title: "このアプリについて",
+    appInfo: "アプリ情報",
+    appName: "アプリ名",
+    version: "バージョン",
+    buildVersion: "ビルドバージョン",
+    appId: "アプリID",
+    appVersion: "アプリバージョン",
+    legal: "法的情報",
+    privacyPolicy: "プライバシーポリシー",
+    termsOfService: "利用規約",
+  },
+  communityScreen: {
+    title: "コミュニティと繋がろう",
+    tagLine:
+      "Infinite RedのReact Nativeエンジニアコミュニティに接続して、一緒にあなたのアプリ開発をレベルアップしましょう！",
+    joinUsOnSlackTitle: "私たちのSlackに参加しましょう",
+    joinUsOnSlack:
+      "世界中のReact Nativeエンジニアと繋がりたいを思いませんか？Infinite RedのコミュニティSlackに参加しましょう！私達のコミュニティは安全に質問ができ、お互いから学び、あなたのネットワークを広げることができます。",
+    joinSlackLink: "Slackコミュニティに参加する",
+    makeIgniteEvenBetterTitle: "Igniteをより良くする",
+    makeIgniteEvenBetter:
+      "Igniteをより良くする為のアイデアはありますか? そうであれば聞きたいです！ 私たちはいつでも最良のReact Nativeのツールを開発する為に助けを求めています。GitHubで私たちと一緒にIgniteの未来を作りましょう。",
+    contributeToIgniteLink: "Igniteにコントリビュートする",
+    theLatestInReactNativeTitle: "React Nativeの今",
+    theLatestInReactNative: "React Nativeの現在をあなたにお届けします。",
+    reactNativeRadioLink: "React Native Radio",
+    reactNativeNewsletterLink: "React Native Newsletter",
+    reactNativeLiveLink: "React Native Live",
+    chainReactConferenceLink: "Chain React Conference",
+    hireUsTitle: "あなたの次のプロジェクトでInfinite Redと契約する",
+    hireUs:
+      "それがプロジェクト全体でも、チームにトレーニングをしてあげたい時でも、Infinite RedはReact Nativeのことであればなんでもお手伝いができます。",
+    hireUsLink: "メッセージを送る",
+  },
+  showroomScreen: {
+    jumpStart: "あなたのプロジェクトをスタートさせるコンポーネントです！",
+    lorem2Sentences:
+      "Nulla cupidatat deserunt amet quis aliquip nostrud do adipisicing. Adipisicing excepteur elit laborum Lorem adipisicing do duis.",
+    demoHeaderTxExample: "Yay",
+    demoViaTxProp: "`tx`から",
+    demoViaSpecifiedTxProp: "`{{prop}}Tx`から",
+  },
+  demoDebugScreen: {
+    howTo: "ハウツー",
+    title: "デバッグ",
+    tagLine:
+      "おめでとうございます、あなたはとてもハイレベルなReact Nativeのテンプレートを使ってます。このボイラープレートを活用してください！",
+    reactotron: "Reactotronに送る",
+    reportBugs: "バグをレポートする",
+    demoList: "デモリスト",
+    demoPodcastList: "デモのポッドキャストリスト",
+    androidReactotronHint:
+      "もし動かなければ、Reactotronのデスクトップアプリが実行されていることを確認して, このコマンドをターミナルで実行した後、アプリをアプリをリロードしてください。 adb reverse tcp:9090 tcp:9090",
+    iosReactotronHint:
+      "もし動かなければ、Reactotronのデスクトップアプリが実行されていることを確認して、アプリをリロードしてください。",
+    macosReactotronHint:
+      "もし動かなければ、Reactotronのデスクトップアプリが実行されていることを確認して、アプリをリロードしてください。",
+    webReactotronHint:
+      "もし動かなければ、Reactotronのデスクトップアプリが実行されていることを確認して、アプリをリロードしてください。",
+    windowsReactotronHint:
+      "もし動かなければ、Reactotronのデスクトップアプリが実行されていることを確認して、アプリをリロードしてください。",
+  },
+  demoPodcastListScreen: {
+    title: "React Native Radioのエピソード",
+    onlyFavorites: "お気に入り表示",
+    favoriteButton: "お気に入り",
+    unfavoriteButton: "お気に入りを外す",
+    accessibility: {
+      cardHint: "ダブルタップで再生します。 ダブルタップと長押しで {{action}}",
+      switch: "スイッチオンでお気に入りを表示する",
+      favoriteAction: "お気に入りの切り替え",
+      favoriteIcon: "お気に入りのエピソードではありません",
+      unfavoriteIcon: "お気に入りのエピソードです",
+      publishLabel: "公開日 {{date}}",
+      durationLabel: "再生時間: {{hours}} 時間 {{minutes}} 分 {{seconds}} 秒",
+    },
+    noFavoritesEmptyState: {
+      heading: "どうやら空っぽのようですね",
+      content:
+        "お気に入りのエピソードがまだありません。エピソードにあるハートマークにタップして、お気に入りに追加しましょう！",
+    },
+  },
+
+  ...demoJa,
+}
+
+export default ja

RN_TEMPLATE/app/i18n/ko.ts

@@ -0,0 +1,300 @@
+import demoKo from "./demo-ko"
+import { Translations } from "./en"
+
+const ko: Translations = {
+  common: {
+    ok: "확인!",
+    cancel: "취소",
+    save: "저장",
+    back: "뒤로",
+    logOut: "로그아웃",
+    copied: "복사됨",
+  },
+  welcomeScreen: {
+    postscript:
+      "잠깐! — 지금 보시는 것은 아마도 당신의 앱의 모양새가 아닐겁니다. (디자이너분이 이렇게 건내주셨다면 모를까요. 만약에 그렇다면, 이대로 가져갑시다!) ",
+    readyForLaunch: "출시 준비가 거의 끝난 나만의 앱!",
+    exciting: "(오, 이거 신나는데요!)",
+    letsGo: "가보자구요!",
+  },
+  errorScreen: {
+    title: "뭔가 잘못되었습니다!",
+    friendlySubtitle:
+      "이 화면은 오류가 발생할 때 프로덕션에서 사용자에게 표시됩니다. 이 메시지를 커스터마이징 할 수 있고(해당 파일은 `app/i18n/ko.ts` 에 있습니다) 레이아웃도 마찬가지로 수정할 수 있습니다(`app/screens/error`). 만약 이 오류화면을 완전히 없에버리고 싶다면 `app/app.tsx` 파일에서 <ErrorBoundary> 컴포넌트를 확인하기 바랍니다.",
+    reset: "초기화",
+    traceTitle: "%{name} 스택에서의 오류",
+  },
+  emptyStateComponent: {
+    generic: {
+      heading: "너무 텅 비어서.. 너무 슬퍼요..",
+      content: "데이터가 없습니다. 버튼을 눌러서 리프레쉬 하시거나 앱을 리로드하세요.",
+      button: "다시 시도해봅시다",
+    },
+  },
+
+  errors: {
+    invalidEmail: "잘못된 이메일 주소 입니다.",
+  },
+  authErrors: {
+    timeout: "요청 시간이 초과되었습니다. 다시 시도해주세요.",
+    cannotConnect: "서버에 연결할 수 없습니다. 네트워크를 확인해주세요.",
+    serverError: "서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요.",
+    badData: "서버 응답이 올바르지 않습니다.",
+    unknownError: "알 수 없는 오류가 발생했습니다.",
+    E001: "이미 사용 중인 사용자명입니다.",
+    E002: "이미 등록된 이메일입니다.",
+    E003: "유효하지 않은 추천 코드입니다.",
+    E004: "대기 중인 가입 요청이 없습니다.",
+    E005: "잘못된 인증 코드입니다.",
+    E006: "이미 추천 코드가 등록되어 있습니다.",
+    E007: "자신의 추천 코드는 사용할 수 없습니다.",
+    E011: "이메일 또는 비밀번호가 올바르지 않습니다.",
+    E012: "계정이 일시적으로 잠겼습니다. 잠시 후 다시 시도해주세요.",
+    E013: "대기 중인 로그인 요청이 없습니다.",
+    E014: "존재하지 않거나 비활성화된 사용자입니다.",
+    E015: "잘못된 인증 코드입니다.",
+    E016: "유효하지 않은 Telegram 인증입니다.",
+    E017: "Telegram 데이터 형식이 올바르지 않습니다.",
+    E018: "Google 인증에 실패했습니다.",
+    E019: "Google 토큰을 입력해주세요.",
+    E021: "현재 비밀번호가 올바르지 않습니다.",
+    E022: "새 비밀번호는 현재 비밀번호와 같을 수 없습니다.",
+    E023: "등록되지 않은 이메일입니다.",
+    E024: "계정이 비활성화되었습니다.",
+    E025: "대기 중인 비밀번호 재설정 요청이 없습니다.",
+    E026: "비밀번호 재설정 코드가 만료되었습니다.",
+    E027: "잘못된 비밀번호 재설정 코드입니다.",
+    E028: "존재하지 않는 사용자입니다.",
+    E029: "수정할 필드가 제공되지 않았습니다.",
+    E041: "인증 코드 전송이 너무 빈번합니다. 잠시 기다려주세요.",
+    E042: "이메일 인증 코드가 만료되었습니다.",
+    E043: "잘못된 이메일 인증 코드입니다.",
+    E044: "이미 인증된 이메일입니다.",
+    E045: "이미 다른 사용자가 사용 중인 이메일입니다.",
+    E046: "인증된 이메일이 없습니다.",
+    E047: "먼저 현재 이메일로 인증 코드를 전송해주세요.",
+    E048: "먼저 현재 이메일을 인증해주세요.",
+    E049: "먼저 새 이메일로 인증 코드를 전송해주세요.",
+    E050: "잘못된 action 매개변수입니다.",
+  },
+  loginScreen: {
+    logIn: "로그인",
+    enterDetails:
+      "일급비밀 정보를 해제하기 위해 상세 정보를 입력하세요. 무엇이 기다리고 있는지 절대 모를겁니다. 혹은 알 수 있을지도 모르겠군요. 엄청 복잡한 뭔가는 아닙니다.",
+    emailFieldLabel: "이메일",
+    passwordFieldLabel: "비밀번호",
+    emailFieldPlaceholder: "이메일을 입력하세요",
+    passwordFieldPlaceholder: "엄청 비밀스러운 암호를 입력하세요",
+    tapToLogIn: "눌러서 로그인 하기!",
+    hint: "힌트: 가장 좋아하는 암호와 아무런 아무 이메일 주소나 사용할 수 있어요 :)",
+  },
+  navigator: {
+    componentsTab: "컴포넌트",
+    debugTab: "디버그",
+    communityTab: "커뮤니티",
+    podcastListTab: "팟캐스트",
+    profileTab: "프로필",
+  },
+  profileScreen: {
+    title: "프로필",
+    guest: "게스트",
+    uid: "UID",
+    username: "사용자 이름",
+    referralCode: "추천 코드",
+    settings: "설정",
+    darkMode: "다크 모드",
+    notifications: "알림",
+    security: "보안",
+    account: "계정",
+    accountStatus: "계정 상태",
+    active: "활성",
+    inactive: "비활성",
+    regular: "일반",
+    emailVerified: "이메일 인증",
+    verified: "인증됨",
+    unverified: "미인증",
+    loginMethods: "로그인 방법",
+    version: "버전",
+    changePassword: "비밀번호 변경",
+    changeEmail: "이메일 변경",
+    editNickname: "닉네임 수정",
+    editProfile: "프로필 수정",
+    nicknamePlaceholder: "닉네임을 입력하세요",
+    nickname: "닉네임",
+    tapToChangeAvatar: "아바타 변경하려면 탭하세요",
+    about: "정보",
+  },
+  changePasswordScreen: {
+    title: "비밀번호 변경",
+    description: "현재 비밀번호를 입력하고 새 비밀번호를 선택하세요.",
+    oldPassword: "현재 비밀번호",
+    newPassword: "새 비밀번호",
+    confirmPassword: "새 비밀번호 확인",
+    logoutOtherDevices: "다른 기기에서 로그아웃",
+    submit: "비밀번호 변경",
+    success: "성공",
+    successMessage: "비밀번호가 성공적으로 변경되었습니다.",
+    oldPasswordRequired: "현재 비밀번호가 필요합니다.",
+    newPasswordRequired: "새 비밀번호가 필요합니다.",
+    passwordTooShort: "비밀번호는 최소 6자 이상이어야 합니다.",
+    passwordMismatch: "비밀번호가 일치하지 않습니다.",
+    samePassword: "새 비밀번호는 현재 비밀번호와 같을 수 없습니다.",
+  },
+  changeEmailScreen: {
+    title: "이메일 변경",
+    step1Label: "이메일 인증",
+    step2Label: "새 이메일 연결",
+    step1Title: "1단계: 현재 이메일 확인",
+    step1Description: "현재 이메일 주소로 인증 코드를 보내드립니다.",
+    step2Title: "2단계: 새 이메일 연결",
+    step2Description: "새 이메일 주소를 입력하고 인증하세요.",
+    currentEmail: "현재 이메일",
+    newEmail: "새 이메일 주소",
+    verificationCode: "인증 코드",
+    sendCode: "인증 코드 보내기",
+    sendCodeToNewEmail: "새 이메일로 코드 보내기",
+    verify: "확인",
+    confirmNewEmail: "새 이메일 확인",
+    resendCode: "코드 재전송",
+    success: "성공",
+    successMessage: "이메일이 성공적으로 변경되었습니다.",
+    codeRequired: "인증 코드가 필요합니다.",
+    codeInvalid: "인증 코드는 6자리여야 합니다.",
+    newEmailRequired: "새 이메일 주소가 필요합니다.",
+    emailInvalid: "올바른 이메일 주소를 입력하세요.",
+    sameEmail: "새 이메일은 현재 이메일과 같을 수 없습니다.",
+  },
+  settingsScreen: {
+    title: "설정",
+    appearance: "외관",
+    theme: "테마",
+    darkMode: "다크 모드",
+    language: "언어",
+    currentLanguage: "언어",
+  },
+  languageScreen: {
+    title: "언어",
+    selectHint: "원하는 언어를 선택하세요",
+  },
+  themeScreen: {
+    title: "테마",
+    selectHint: "원하는 테마를 선택하세요",
+    system: "시스템",
+    light: "라이트",
+    dark: "다크",
+  },
+  securityScreen: {
+    title: "보안",
+    description: "계정 보안 설정을 관리합니다.",
+    changePassword: "비밀번호 변경",
+    changeEmail: "이메일 변경",
+    // Session management
+    activeSessions: "Active Sessions",
+    activeSessionsDescription: "Devices currently logged into your account",
+    currentDevice: "Current Device",
+    lastActive: "Last active",
+    loginMethod: "Login via",
+    logoutDevice: "Logout",
+    logoutAllOther: "Logout All Other Devices",
+    logoutAllOtherDescription: "This will log out all devices except the current one.",
+    noOtherSessions: "No other active sessions",
+    sessionRevoked: "Device has been logged out",
+    sessionsRevoked: "{{count}} devices have been logged out",
+    confirmLogout: "Confirm Logout",
+    confirmLogoutMessage: "Are you sure you want to log out this device?",
+    confirmLogoutAllMessage: "Are you sure you want to log out all other devices?",
+    deviceTypes: {
+      desktop: "Desktop",
+      mobile: "Mobile",
+      tablet: "Tablet",
+      unknown: "Unknown Device",
+    },
+  },
+  aboutScreen: {
+    title: "정보",
+    appInfo: "앱 정보",
+    appName: "앱 이름",
+    version: "버전",
+    buildVersion: "빌드 버전",
+    appId: "앱 ID",
+    appVersion: "앱 버전",
+    legal: "법률",
+    privacyPolicy: "개인정보처리방침",
+    termsOfService: "서비스 이용약관",
+  },
+  communityScreen: {
+    title: "커뮤니티와 함께해요",
+    tagLine:
+      "전문적인 React Native 엔지니어들로 구성된 Infinite Red 커뮤니티에 접속해서 함께 개발 실력을 향상시켜 보세요!",
+    joinUsOnSlackTitle: "Slack 에 참여하세요",
+    joinUsOnSlack:
+      "전 세계 React Native 엔지니어들과 함께할 수 있는 곳이 있었으면 좋겠죠? Infinite Red Community Slack 에서 대화에 참여하세요! 우리의 성장하는 커뮤니티는 질문을 던지고, 다른 사람들로부터 배우고, 네트워크를 확장할 수 있는 안전한 공간입니다. ",
+    joinSlackLink: "Slack 에 참여하기",
+    makeIgniteEvenBetterTitle: "Ignite 을 향상시켜요",
+    makeIgniteEvenBetter:
+      "Ignite 을 더 좋게 만들 아이디어가 있나요? 기쁜 소식이네요. 우리는 항상 최고의 React Native 도구를 구축하는데 도움을 줄 수 있는 분들을 찾고 있습니다. GitHub 에서 Ignite 의 미래를 만들어 가는것에 함께해 주세요.",
+    contributeToIgniteLink: "Ignite 에 기여하기",
+    theLatestInReactNativeTitle: "React Native 의 최신정보",
+    theLatestInReactNative: "React Native 가 제공하는 모든 최신 정보를 알려드립니다.",
+    reactNativeRadioLink: "React Native 라디오",
+    reactNativeNewsletterLink: "React Native 뉴스레터",
+    reactNativeLiveLink: "React Native 라이브 스트리밍",
+    chainReactConferenceLink: "Chain React 컨퍼런스",
+    hireUsTitle: "다음 프로젝트에 Infinite Red 를 고용하세요",
+    hireUs:
+      "프로젝트 전체를 수행하든, 실무 교육을 통해 팀의 개발 속도에 박차를 가하든 상관없이, Infinite Red 는 React Native 프로젝트의 모든 분야의 에서 도움을 드릴 수 있습니다.",
+    hireUsLink: "메세지 보내기",
+  },
+  showroomScreen: {
+    jumpStart: "프로젝트를 바로 시작할 수 있는 컴포넌트들!",
+    lorem2Sentences:
+      "별 하나에 추억과, 별 하나에 사랑과, 별 하나에 쓸쓸함과, 별 하나에 동경(憧憬)과, 별 하나에 시와, 별 하나에 어머니, 어머니",
+    demoHeaderTxExample: "야호",
+    demoViaTxProp: "`tx` Prop 을 통해",
+    demoViaSpecifiedTxProp: "`{{prop}}Tx` Prop 을 통해",
+  },
+  demoDebugScreen: {
+    howTo: "사용방법",
+    title: "디버그",
+    tagLine:
+      "축하합니다. 여기 아주 고급스러운 React Native 앱 템플릿이 있습니다. 이 보일러 플레이트를 사용해보세요!",
+    reactotron: "Reactotron 으로 보내기",
+    reportBugs: "버그 보고하기",
+    demoList: "데모 목록",
+    demoPodcastList: "데모 팟캐스트 목록",
+    androidReactotronHint:
+      "만약에 동작하지 않는 경우, Reactotron 데스크탑 앱이 실행중인지 확인 후, 터미널에서 adb reverse tcp:9090 tcp:9090 을 실행한 다음 앱을 다시 실행해보세요.",
+    iosReactotronHint:
+      "만약에 동작하지 않는 경우, Reactotron 데스크탑 앱이 실행중인지 확인 후 앱을 다시 실행해보세요.",
+    macosReactotronHint:
+      "만약에 동작하지 않는 경우, Reactotron 데스크탑 앱이 실행중인지 확인 후 앱을 다시 실행해보세요.",
+    webReactotronHint:
+      "만약에 동작하지 않는 경우, Reactotron 데스크탑 앱이 실행중인지 확인 후 앱을 다시 실행해보세요.",
+    windowsReactotronHint:
+      "만약에 동작하지 않는 경우, Reactotron 데스크탑 앱이 실행중인지 확인 후 앱을 다시 실행해보세요.",
+  },
+  demoPodcastListScreen: {
+    title: "React Native 라디오 에피소드",
+    onlyFavorites: "즐겨찾기만 보기",
+    favoriteButton: "즐겨찾기",
+    unfavoriteButton: "즐겨찾기 해제",
+    accessibility: {
+      cardHint:
+        "에피소드를 들으려면 두 번 탭하세요. 이 에피소드를 좋아하거나 싫어하려면 두 번 탭하고 길게 누르세요.",
+      switch: "즐겨찾기를 사용하려면 스위치를 사용하세요.",
+      favoriteAction: "즐겨찾기 토글",
+      favoriteIcon: "좋아하는 에피소드",
+      unfavoriteIcon: "즐겨찾기하지 않은 에피소드",
+      publishLabel: "{{date}} 에 발행됨",
+      durationLabel: "소요시간: {{hours}}시간 {{minutes}}분 {{seconds}}초",
+    },
+    noFavoritesEmptyState: {
+      heading: "조금 텅 비어 있네요.",
+      content: "즐겨찾기가 없습니다. 에피소드에 있는 하트를 눌러서 즐겨찾기에 추가하세요.",
+    },
+  },
+
+  ...demoKo,
+}
+
+export default ko

RN_TEMPLATE/app/i18n/translate.ts

@@ -0,0 +1,33 @@
+import i18n from "i18next"
+import type { TOptions } from "i18next"
+
+import { TxKeyPath } from "."
+
+/**
+ * Translates text.
+ * @param {TxKeyPath} key - The i18n key.
+ * @param {TOptions} options - The i18n options.
+ * @returns {string} - The translated text.
+ * @example
+ * Translations:
+ *
+ * ```en.ts
+ * {
+ *  "hello": "Hello, {{name}}!"
+ * }
+ * ```
+ *
+ * Usage:
+ * ```ts
+ * import { translate } from "./i18n"
+ *
+ * translate("hello", { name: "world" })
+ * // => "Hello world!"
+ * ```
+ */
+export function translate(key: TxKeyPath, options?: TOptions): string {
+  if (i18n.isInitialized) {
+    return i18n.t(key, options)
+  }
+  return key
+}

RN_TEMPLATE/app/i18n/zh.ts

@@ -0,0 +1,297 @@
+import demoZh from "./demo-zh"
+import { Translations } from "./en"
+
+const zh: Translations = {
+  common: {
+    ok: "确定",
+    cancel: "取消",
+    save: "保存",
+    back: "返回",
+    logOut: "退出登录",
+    copied: "已复制",
+  },
+  welcomeScreen: {
+    postscript:
+      "提示 — 这可能不是您的应用最终的样子。（除非您的设计师就是这样设计的，那就直接发布吧！）",
+    readyForLaunch: "您的应用即将准备好发布！",
+    exciting: "（哦，这太令人兴奋了！）",
+    letsGo: "开始吧！",
+  },
+  errorScreen: {
+    title: "出错了！",
+    friendlySubtitle:
+      "这是用户在生产环境中遇到错误时会看到的页面。您可以自定义此消息（位于 `app/i18n/zh.ts`）以及布局（`app/screens/ErrorScreen`）。如果您想完全删除此页面，请检查 `app/app.tsx` 中的 <ErrorBoundary> 组件。",
+    reset: "重置应用",
+    traceTitle: "来自 %{name} 堆栈的错误",
+  },
+  emptyStateComponent: {
+    generic: {
+      heading: "空空如也...好伤心",
+      content: "暂无数据。请尝试点击按钮刷新或重新加载应用。",
+      button: "再试一次",
+    },
+  },
+
+  errors: {
+    invalidEmail: "无效的邮箱地址。",
+  },
+  authErrors: {
+    // 网络错误
+    timeout: "请求超时，请重试。",
+    cannotConnect: "无法连接服务器，请检查网络。",
+    serverError: "服务器错误，请稍后重试。",
+    badData: "服务器响应无效。",
+    unknownError: "发生未知错误。",
+    // 注册错误 (E001-E010)
+    E001: "用户名已存在。",
+    E002: "邮箱已被注册。",
+    E003: "推荐码无效。",
+    E004: "没有待验证的注册请求。",
+    E005: "验证码错误。",
+    E006: "已绑定过邀请码。",
+    E007: "不能绑定自己的邀请码。",
+    // 登录错误 (E011-E020)
+    E011: "邮箱或密码错误。",
+    E012: "账户已被临时锁定，请稍后重试。",
+    E013: "没有待验证的登录请求。",
+    E014: "用户不存在或已被禁用。",
+    E015: "验证码错误。",
+    E016: "Telegram 认证数据无效。",
+    E017: "Telegram 数据格式错误。",
+    E018: "Google 认证失败。",
+    E019: "请提供 Google Token。",
+    // 密码错误 (E021-E030)
+    E021: "当前密码错误。",
+    E022: "新密码不能与当前密码相同。",
+    E023: "该邮箱未注册。",
+    E024: "账号已被禁用。",
+    E025: "没有待处理的找回密码请求。",
+    E026: "找回密码验证码已过期。",
+    E027: "找回密码验证码错误。",
+    E028: "用户不存在。",
+    E029: "没有提供要修改的字段。",
+    // 邮箱验证错误 (E041-E055)
+    E041: "发送验证码过于频繁，请稍后重试。",
+    E042: "邮箱验证码已过期。",
+    E043: "邮箱验证码错误。",
+    E044: "邮箱已验证。",
+    E045: "邮箱已被其他用户使用。",
+    E046: "没有已验证的邮箱。",
+    E047: "请先发送当前邮箱验证码。",
+    E048: "需要先验证当前邮箱。",
+    E049: "请先发送新邮箱验证码。",
+    E050: "无效的 action 参数。",
+  },
+  loginScreen: {
+    logIn: "登录",
+    enterDetails: "请输入您的账号信息以继续。",
+    emailFieldLabel: "邮箱",
+    passwordFieldLabel: "密码",
+    emailFieldPlaceholder: "请输入邮箱地址",
+    passwordFieldPlaceholder: "请输入密码",
+    tapToLogIn: "点击登录",
+    hint: "提示：您可以使用任何邮箱地址和密码 :)",
+  },
+  navigator: {
+    componentsTab: "组件",
+    debugTab: "调试",
+    communityTab: "社区",
+    podcastListTab: "播客",
+    profileTab: "我的",
+  },
+  profileScreen: {
+    title: "个人中心",
+    guest: "游客",
+    uid: "UID",
+    username: "用户名",
+    referralCode: "邀请码",
+    settings: "设置",
+    darkMode: "深色模式",
+    notifications: "通知",
+    security: "安全",
+    account: "账户",
+    accountStatus: "账户状态",
+    active: "正常",
+    inactive: "未激活",
+    regular: "普通用户",
+    emailVerified: "邮箱验证",
+    verified: "已验证",
+    unverified: "未验证",
+    loginMethods: "登录方式",
+    version: "版本",
+    changePassword: "修改密码",
+    changeEmail: "更换邮箱",
+    editNickname: "修改昵称",
+    editProfile: "编辑资料",
+    nicknamePlaceholder: "请输入昵称",
+    nickname: "昵称",
+    tapToChangeAvatar: "点击更换头像",
+    about: "关于",
+  },
+  changePasswordScreen: {
+    title: "修改密码",
+    description: "请输入当前密码并设置新密码。",
+    oldPassword: "当前密码",
+    newPassword: "新密码",
+    confirmPassword: "确认新密码",
+    logoutOtherDevices: "退出其他设备登录",
+    submit: "修改密码",
+    success: "成功",
+    successMessage: "密码修改成功。",
+    oldPasswordRequired: "请输入当前密码。",
+    newPasswordRequired: "请输入新密码。",
+    passwordTooShort: "密码至少需要6个字符。",
+    passwordMismatch: "两次输入的密码不一致。",
+    samePassword: "新密码不能与当前密码相同。",
+  },
+  changeEmailScreen: {
+    title: "更换邮箱",
+    step1Label: "验证邮箱",
+    step2Label: "绑定新邮箱",
+    step1Title: "第一步：验证当前邮箱",
+    step1Description: "我们将向您的当前邮箱发送验证码。",
+    step2Title: "第二步：绑定新邮箱",
+    step2Description: "输入您的新邮箱地址并进行验证。",
+    currentEmail: "当前邮箱",
+    newEmail: "新邮箱地址",
+    verificationCode: "验证码",
+    sendCode: "发送验证码",
+    sendCodeToNewEmail: "发送验证码到新邮箱",
+    verify: "验证",
+    confirmNewEmail: "确认新邮箱",
+    resendCode: "重新发送验证码",
+    success: "成功",
+    successMessage: "邮箱更换成功。",
+    codeRequired: "请输入验证码。",
+    codeInvalid: "验证码必须是6位数字。",
+    newEmailRequired: "请输入新邮箱地址。",
+    emailInvalid: "请输入有效的邮箱地址。",
+    sameEmail: "新邮箱不能与当前邮箱相同。",
+  },
+  settingsScreen: {
+    title: "设置",
+    appearance: "外观",
+    theme: "主题",
+    darkMode: "深色模式",
+    language: "语言",
+    currentLanguage: "语言",
+  },
+  languageScreen: {
+    title: "语言",
+    selectHint: "选择您的首选语言",
+  },
+  themeScreen: {
+    title: "主题",
+    selectHint: "选择您的首选主题",
+    system: "跟随系统",
+    light: "浅色",
+    dark: "深色",
+  },
+  securityScreen: {
+    title: "安全",
+    description: "管理您的账户安全设置。",
+    changePassword: "修改密码",
+    changeEmail: "更换邮箱",
+    // Session management
+    activeSessions: "活跃会话",
+    activeSessionsDescription: "当前登录您账户的设备",
+    currentDevice: "当前设备",
+    lastActive: "最后活跃",
+    loginMethod: "登录方式",
+    logoutDevice: "退出",
+    logoutAllOther: "退出所有其他设备",
+    logoutAllOtherDescription: "这将退出除当前设备外的所有设备。",
+    noOtherSessions: "没有其他活跃会话",
+    sessionRevoked: "设备已退出登录",
+    sessionsRevoked: "已退出 {{count}} 个设备",
+    confirmLogout: "确认退出",
+    confirmLogoutMessage: "确定要退出此设备吗？",
+    confirmLogoutAllMessage: "确定要退出所有其他设备吗？",
+    deviceTypes: {
+      desktop: "桌面端",
+      mobile: "移动端",
+      tablet: "平板",
+      unknown: "未知设备",
+    },
+  },
+  aboutScreen: {
+    title: "关于",
+    appInfo: "应用信息",
+    appName: "应用名称",
+    version: "版本号",
+    buildVersion: "构建版本",
+    appId: "应用 ID",
+    appVersion: "应用版本",
+    legal: "法律条款",
+    privacyPolicy: "隐私政策",
+    termsOfService: "服务条款",
+  },
+  communityScreen: {
+    title: "加入社区",
+    tagLine: "加入 Infinite Red 的 React Native 工程师社区，与我们一起提升您的应用开发技能！",
+    joinUsOnSlackTitle: "加入 Slack",
+    joinUsOnSlack:
+      "想要与世界各地的 React Native 工程师交流吗？加入 Infinite Red 社区 Slack！我们不断壮大的社区是一个安全的空间，您可以在这里提问、向他人学习并扩展您的人脉网络。",
+    joinSlackLink: "加入 Slack 社区",
+    makeIgniteEvenBetterTitle: "让 Ignite 更好",
+    makeIgniteEvenBetter:
+      "有让 Ignite 变得更好的想法吗？我们很高兴听到！我们一直在寻找想要帮助我们构建最好的 React Native 工具的人。加入我们的 GitHub，与我们一起构建 Ignite 的未来。",
+    contributeToIgniteLink: "为 Ignite 做贡献",
+    theLatestInReactNativeTitle: "React Native 最新动态",
+    theLatestInReactNative: "我们在这里为您提供 React Native 的所有最新动态。",
+    reactNativeRadioLink: "React Native Radio",
+    reactNativeNewsletterLink: "React Native Newsletter",
+    reactNativeLiveLink: "React Native Live",
+    chainReactConferenceLink: "Chain React 大会",
+    hireUsTitle: "为您的下一个项目聘请 Infinite Red",
+    hireUs:
+      "无论是完整运行一个项目还是通过我们的实践培训帮助团队加速，Infinite Red 几乎可以帮助任何 React Native 项目。",
+    hireUsLink: "发送消息",
+  },
+  showroomScreen: {
+    jumpStart: "快速启动您的项目的组件！",
+    lorem2Sentences: "这是一段示例文本，用于展示组件的效果。这是第二句话。",
+    demoHeaderTxExample: "好耶",
+    demoViaTxProp: "通过 `tx` 属性",
+    demoViaSpecifiedTxProp: "通过 `{{prop}}Tx` 属性",
+  },
+  demoDebugScreen: {
+    howTo: "使用方法",
+    title: "调试",
+    tagLine: "恭喜，您拥有了一个非常先进的 React Native 应用模板。好好利用它吧！",
+    reactotron: "发送到 Reactotron",
+    reportBugs: "报告 Bug",
+    demoList: "演示列表",
+    demoPodcastList: "播客列表演示",
+    androidReactotronHint:
+      "如果无法正常工作，请确保 Reactotron 桌面应用正在运行，从终端运行 adb reverse tcp:9090 tcp:9090，然后重新加载应用。",
+    iosReactotronHint: "如果无法正常工作，请确保 Reactotron 桌面应用正在运行，然后重新加载应用。",
+    macosReactotronHint: "如果无法正常工作，请确保 Reactotron 桌面应用正在运行，然后重新加载应用。",
+    webReactotronHint: "如果无法正常工作，请确保 Reactotron 桌面应用正在运行，然后重新加载应用。",
+    windowsReactotronHint:
+      "如果无法正常工作，请确保 Reactotron 桌面应用正在运行，然后重新加载应用。",
+  },
+  demoPodcastListScreen: {
+    title: "React Native Radio 节目",
+    onlyFavorites: "只显示收藏",
+    favoriteButton: "收藏",
+    unfavoriteButton: "取消收藏",
+    accessibility: {
+      cardHint: "双击收听节目。双击并长按可{{action}}此节目。",
+      switch: "打开开关只显示收藏",
+      favoriteAction: "切换收藏状态",
+      favoriteIcon: "节目未收藏",
+      unfavoriteIcon: "节目已收藏",
+      publishLabel: "发布于 {{date}}",
+      durationLabel: "时长：{{hours}}小时{{minutes}}分钟{{seconds}}秒",
+    },
+    noFavoritesEmptyState: {
+      heading: "这里看起来有点空",
+      content: "还没有收藏。点击节目上的心形图标将其添加到收藏！",
+    },
+  },
+
+  ...demoZh,
+}
+
+export default zh