diff --git a/boilerplate/app/i18n/ar.ts b/boilerplate/app/i18n/ar.ts
index 9ba002f5f..b5e633ad2 100644
--- a/boilerplate/app/i18n/ar.ts
+++ b/boilerplate/app/i18n/ar.ts
@@ -118,6 +118,7 @@ const ar: Translations = {
         "لم تتم اضافة اي مفضلات حتى الان. اضغط على القلب في إحدى الحلقات لإضافته الى المفضلة.",
     },
   },
+  // @demo remove-block-end
   // @demo remove-block-start
   ...demoAr,
   // @demo remove-block-end
diff --git a/boilerplate/app/i18n/demo-hi.ts b/boilerplate/app/i18n/demo-hi.ts
new file mode 100644
index 000000000..49c492b72
--- /dev/null
+++ b/boilerplate/app/i18n/demo-hi.ts
@@ -0,0 +1,468 @@
+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 और FlashList के साथ एकीकरण",
+        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
+
+// @demo remove-file
diff --git a/boilerplate/app/i18n/en.ts b/boilerplate/app/i18n/en.ts
index e0c23e7bf..8e7f36d0b 100644
--- a/boilerplate/app/i18n/en.ts
+++ b/boilerplate/app/i18n/en.ts
@@ -121,6 +121,7 @@ const en = {
         "No favorites have been added yet. Tap the heart on an episode to add it to your favorites!",
     },
   },
+  // @demo remove-block-end
   // @demo remove-block-start
   ...demoEn,
   // @demo remove-block-end
diff --git a/boilerplate/app/i18n/fr.ts b/boilerplate/app/i18n/fr.ts
index 2c549a206..6b884ad46 100644
--- a/boilerplate/app/i18n/fr.ts
+++ b/boilerplate/app/i18n/fr.ts
@@ -124,6 +124,7 @@ const fr: Translations = {
         "Aucun favori n'a été ajouté pour le moment. Appuyez sur le cœur d'un épisode pour l'ajouter à vos favoris !",
     },
   },
+  // @demo remove-block-end
   // @demo remove-block-start
   ...demoFr,
   // @demo remove-block-end
diff --git a/boilerplate/app/i18n/hi.ts b/boilerplate/app/i18n/hi.ts
new file mode 100644
index 000000000..299a7e634
--- /dev/null
+++ b/boilerplate/app/i18n/hi.ts
@@ -0,0 +1,131 @@
+import demoHi from "./demo-hi"
+import { Translations } from "./en"
+
+const hi: Translations = {
+  common: {
+    ok: "ठीक है!",
+    cancel: "रद्द करें",
+    back: "वापस",
+    logOut: "लॉग आउट", // @demo remove-current-line
+  },
+  welcomeScreen: {
+    postscript:
+      "psst - शायद आपका ऐप ऐसा नहीं दिखता है। (जब तक कि आपके डिजाइनर ने आपको ये स्क्रीन नहीं दी हों, और उस स्थिति में, इसे लॉन्च करें!)",
+    readyForLaunch: "आपका ऐप, लगभग लॉन्च के लिए तैयार है!",
+    exciting: "(ओह, यह रोमांचक है!)",
+    letsGo: "चलो चलते हैं!", // @demo remove-current-line
+  },
+  errorScreen: {
+    title: "कुछ गलत हो गया!",
+    friendlySubtitle:
+      "यह वह स्क्रीन है जो आपके उपयोगकर्ता संचालन में देखेंगे जब कोई त्रुटि होगी। आप इस संदेश को बदलना चाहेंगे (जो `app/i18n/hi.ts` में स्थित है) और शायद लेआउट भी (`app/screens/ErrorScreen`)। यदि आप इसे पूरी तरह से हटाना चाहते हैं, तो `app/app.tsx` में <ErrorBoundary> कंपोनेंट की जांच करें।",
+    reset: "ऐप रीसेट करें",
+    traceTitle: "%{name} स्टैक से त्रुटि", // @demo remove-current-line
+  },
+  emptyStateComponent: {
+    generic: {
+      heading: "इतना खाली... इतना उदास",
+      content: "अभी तक कोई डेटा नहीं मिला। रीफ्रेश करने या ऐप को पुनः लोड करने के लिए बटन दबाएं।",
+      button: "चलो फिर से कोशिश करते हैं",
+    },
+  },
+  // @demo remove-block-start
+  errors: {
+    invalidEmail: "अमान्य ईमेल पता।",
+  },
+  loginScreen: {
+    logIn: "लॉग इन करें",
+    enterDetails:
+      "सर्वश्रेष्ठ रहस्य पता करने के लिए नीचे अपना विवरण दर्ज करें। आप कभी अनुमान नहीं लगा पाएंगे कि हमारे पास क्या इंतजार कर रहा है। या शायद आप कर सकते हैं; यह रॉकेट साइंस नहीं है।",
+    emailFieldLabel: "ईमेल",
+    passwordFieldLabel: "पासवर्ड",
+    emailFieldPlaceholder: "अपना ईमेल पता दर्ज करें",
+    passwordFieldPlaceholder: "सुपर सीक्रेट पासवर्ड यहाँ",
+    tapToLogIn: "लॉग इन करने के लिए टैप करें!",
+    hint: "संकेत: आप किसी भी ईमेल पते और अपने पसंदीदा पासवर्ड का उपयोग कर सकते हैं :)",
+  },
+  demoNavigator: {
+    componentsTab: "कंपोनेंट्स",
+    debugTab: "डीबग",
+    communityTab: "समुदाय",
+    podcastListTab: "पॉडकास्ट",
+  },
+  demoCommunityScreen: {
+    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: "हमें एक संदेश भेजें",
+  },
+  demoShowroomScreen: {
+    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:
+        "अभी तक कोई पसंदीदा नहीं जोड़ा गया है। इसे अपने पसंदीदा में जोड़ने के लिए किसी एपिसोड पर दिल पर टैप करें!",
+    },
+  },
+  // @demo remove-block-end
+  // @demo remove-block-start
+  ...demoHi,
+  // @demo remove-block-end
+}
+
+export default hi
diff --git a/boilerplate/app/i18n/i18n.ts b/boilerplate/app/i18n/i18n.ts
index 7aba470a1..26531d06b 100644
--- a/boilerplate/app/i18n/i18n.ts
+++ b/boilerplate/app/i18n/i18n.ts
@@ -8,6 +8,7 @@ import ar from "./ar"
 import ko from "./ko"
 import fr from "./fr"
 import ja from "./ja"
+import hi from "./hi"
 
 // Migration guide from i18n 3.x -> 4.x:
 // https://github.com/fnando/i18n-js/blob/main/MIGRATING_FROM_V3_TO_V4.md
@@ -16,7 +17,7 @@ import ja from "./ja"
 // to use regional locales use { "en-US": enUS } etc
 const fallbackLocale = "en-US"
 export const i18n = new I18n(
-  { ar, en, "en-US": en, ko, fr, ja },
+  { ar, en, "en-US": en, ko, fr, ja, hi },
   { locale: fallbackLocale, defaultLocale: fallbackLocale, enableFallback: true },
 )
 
diff --git a/boilerplate/app/i18n/ja.ts b/boilerplate/app/i18n/ja.ts
index ff61076ef..f8e9c90fb 100644
--- a/boilerplate/app/i18n/ja.ts
+++ b/boilerplate/app/i18n/ja.ts
@@ -122,6 +122,7 @@ const ja: Translations = {
         "お気に入りのエピソードがまだありません。エピソードにあるハートマークにタップして、お気に入りに追加しましょう！",
     },
   },
+  // @demo remove-block-end
   // @demo remove-block-start
   ...demoJa,
   // @demo remove-block-end
diff --git a/boilerplate/app/i18n/ko.ts b/boilerplate/app/i18n/ko.ts
index ff0e9f6fa..9d728a025 100644
--- a/boilerplate/app/i18n/ko.ts
+++ b/boilerplate/app/i18n/ko.ts
@@ -121,6 +121,7 @@ const ko: Translations = {
       content: "즐겨찾기가 없습니다. 에피소드에 있는 하트를 눌러서 즐겨찾기에 추가하세요.",
     },
   },
+  // @demo remove-block-end
   // @demo remove-block-start
   ...demoKo,
   // @demo remove-block-end
diff --git a/docs/boilerplate/app/i18n/Internationalization.md b/docs/boilerplate/app/i18n/Internationalization.md
index 6216ac3ab..3298b8839 100644
--- a/docs/boilerplate/app/i18n/Internationalization.md
+++ b/docs/boilerplate/app/i18n/Internationalization.md
@@ -4,7 +4,7 @@ sidebar_position: 160
 
 # Internationalization in Ignite Apps
 
-Ignite currently set up to have Internationalization setup in English, Arabic, Korean, French and Japanese! This is detected on app load and will set your app to that language.
+Ignite is currently set up to support Internationalization in English, Arabic, Korean, French, Japanese and Hindi. This is detected on app load and will set your app to that language.
 
 ## Right to Left languages (RTL)
 
diff --git a/test/vanilla/__snapshots__/ignite-remove-demo.test.ts.snap b/test/vanilla/__snapshots__/ignite-remove-demo.test.ts.snap
index 6d20f078b..703893e02 100644
--- a/test/vanilla/__snapshots__/ignite-remove-demo.test.ts.snap
+++ b/test/vanilla/__snapshots__/ignite-remove-demo.test.ts.snap
@@ -10,10 +10,12 @@ exports[`ignite-cli remove-demo should print the expected response 1`] = `
    Found '@demo remove-file' in /user/home/ignite/app/i18n/demo-ar.ts
    Found '@demo remove-file' in /user/home/ignite/app/i18n/demo-en.ts
    Found '@demo remove-file' in /user/home/ignite/app/i18n/demo-fr.ts
+   Found '@demo remove-file' in /user/home/ignite/app/i18n/demo-hi.ts
    Found '@demo remove-file' in /user/home/ignite/app/i18n/demo-ja.ts
    Found '@demo remove-file' in /user/home/ignite/app/i18n/demo-ko.ts
    Found '@demo remove-current-line', '@demo remove-block-start', '@demo remove-block-end' in /user/home/ignite/app/i18n/en.ts
    Found '@demo remove-current-line', '@demo remove-block-start', '@demo remove-block-end' in /user/home/ignite/app/i18n/fr.ts
+   Found '@demo remove-current-line', '@demo remove-block-start', '@demo remove-block-end' in /user/home/ignite/app/i18n/hi.ts
    Found '@demo remove-current-line', '@demo remove-block-start', '@demo remove-block-end' in /user/home/ignite/app/i18n/ja.ts
    Found '@demo remove-current-line', '@demo remove-block-start', '@demo remove-block-end' in /user/home/ignite/app/i18n/ko.ts
    Found '@demo remove-file' in /user/home/ignite/app/models/AuthenticationStore.ts