diff --git a/boilerplate/app/app.tsx b/boilerplate/app/app.tsx
index 67873286b..dd7b7f2d1 100644
--- a/boilerplate/app/app.tsx
+++ b/boilerplate/app/app.tsx
@@ -17,9 +17,10 @@ if (__DEV__) {
   require("./devtools/ReactotronConfig.ts")
 }
 import "./utils/gestureHandler"
-import "./i18n"
+import { initI18n } from "./i18n"
 import "./utils/ignoreWarnings"
 import { useFonts } from "expo-font"
+import { useEffect, useState } from "react"
 import { initialWindowMetrics, SafeAreaProvider } from "react-native-safe-area-context"
 import * as Linking from "expo-linking"
 import { useInitialRootStore } from "./models" // @mst remove-current-line
@@ -71,6 +72,11 @@ function App(props: AppProps) {
   } = useNavigationPersistence(storage, NAVIGATION_PERSISTENCE_KEY)
 
   const [areFontsLoaded, fontLoadError] = useFonts(customFontsToLoad)
+  const [isI18nInitialized, setIsI18nInitialized] = useState(false)
+
+  useEffect(() => {
+    initI18n().then(() => setIsI18nInitialized(true))
+  }, [])
 
   // @mst replace-next-line React.useEffect(() => {
   const { rehydrated } = useInitialRootStore(() => {
@@ -93,7 +99,12 @@ function App(props: AppProps) {
   // In Android: https://stackoverflow.com/a/45838109/204044
   // You can replace with your own loading component if you wish.
   // @mst replace-next-line if (!isNavigationStateRestored || (!areFontsLoaded && !fontLoadError)) {
-  if (!rehydrated || !isNavigationStateRestored || (!areFontsLoaded && !fontLoadError)) {
+  if (
+    !rehydrated ||
+    !isNavigationStateRestored ||
+    !isI18nInitialized ||
+    (!areFontsLoaded && !fontLoadError)
+  ) {
     return null
   }
 
diff --git a/boilerplate/app/components/Button.tsx b/boilerplate/app/components/Button.tsx
index 8befa0fc5..2c97647f2 100644
--- a/boilerplate/app/components/Button.tsx
+++ b/boilerplate/app/components/Button.tsx
@@ -91,7 +91,7 @@ export interface ButtonProps extends PressableProps {
  * @returns {JSX.Element} The rendered `Button` component.
  * @example
  * <Button
- *   tx="common.ok"
+ *   tx="common:ok"
  *   style={styles.button}
  *   textStyle={styles.buttonText}
  *   onPress={handleButtonPress}
diff --git a/boilerplate/app/components/EmptyState.tsx b/boilerplate/app/components/EmptyState.tsx
index d74a7d540..6b0aceb49 100644
--- a/boilerplate/app/components/EmptyState.tsx
+++ b/boilerplate/app/components/EmptyState.tsx
@@ -124,9 +124,9 @@ export function EmptyState(props: EmptyStateProps) {
   const EmptyStatePresets = {
     generic: {
       imageSource: sadFace,
-      heading: translate("emptyStateComponent.generic.heading"),
-      content: translate("emptyStateComponent.generic.content"),
-      button: translate("emptyStateComponent.generic.button"),
+      heading: translate("emptyStateComponent:generic.heading"),
+      content: translate("emptyStateComponent:generic.content"),
+      button: translate("emptyStateComponent:generic.button"),
     } as EmptyStatePresetItem,
   } as const
 
diff --git a/boilerplate/app/components/Text.tsx b/boilerplate/app/components/Text.tsx
index 0f993bf5b..6b4f842c0 100644
--- a/boilerplate/app/components/Text.tsx
+++ b/boilerplate/app/components/Text.tsx
@@ -1,4 +1,4 @@
-import i18n from "i18n-js"
+import { TOptions } from "i18next"
 import { StyleProp, Text as RNText, TextProps as RNTextProps, TextStyle } from "react-native"
 import { isRTL, translate, TxKeyPath } from "../i18n"
 import type { ThemedStyle, ThemedStyleArray } from "@/theme"
@@ -23,7 +23,7 @@ export interface TextProps extends RNTextProps {
    * Optional options to pass to i18n. Useful for interpolation
    * as well as explicitly setting locale or translation fallbacks.
    */
-  txOptions?: i18n.TranslateOptions
+  txOptions?: TOptions
   /**
    * An optional style override useful for padding & margin.
    */
diff --git a/boilerplate/app/i18n/i18n.ts b/boilerplate/app/i18n/i18n.ts
index 92c5c19c7..60d8d3a3c 100644
--- a/boilerplate/app/i18n/i18n.ts
+++ b/boilerplate/app/i18n/i18n.ts
@@ -1,6 +1,8 @@
 import * as Localization from "expo-localization"
-import { I18n } from "i18n-js"
 import { I18nManager } from "react-native"
+import * as i18next 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 en, { Translations } from "./en"
@@ -10,31 +12,48 @@ 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
-// https://github.com/fnando/i18n/discussions/24
-
 // 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, hi },
-  { locale: fallbackLocale, defaultLocale: fallbackLocale, enableFallback: true },
-)
+
+export let i18n: i18next.i18n
 
 const systemLocale = Localization.getLocales()[0]
 const systemLocaleTag = systemLocale?.languageTag ?? fallbackLocale
 
-if (Object.prototype.hasOwnProperty.call(i18n.translations, systemLocaleTag)) {
-  // if specific locales like en-FI or en-US is available, set it
-  i18n.locale = systemLocaleTag
-} else {
-  // otherwise try to fallback to the general locale (dropping the -XX suffix)
-  const generalLocale = systemLocaleTag.split("-")[0]
-  if (Object.prototype.hasOwnProperty.call(i18n.translations, generalLocale)) {
-    i18n.locale = generalLocale
+export const initI18n = async () => {
+  i18n = i18next.use(initReactI18next)
+
+  await i18n.init({
+    resources: {
+      ar,
+      en,
+      "en-US": en,
+      ko,
+      fr,
+      ja,
+      hi,
+    },
+    lng: fallbackLocale,
+    fallbackLng: fallbackLocale,
+    interpolation: {
+      escapeValue: false,
+    },
+  })
+
+  if (Object.prototype.hasOwnProperty.call(i18n.languages, systemLocaleTag)) {
+    // if specific locales like en-FI or en-US is available, set it
+    await i18n.changeLanguage(systemLocaleTag)
   } else {
-    i18n.locale = fallbackLocale
+    // otherwise try to fallback to the general locale (dropping the -XX suffix)
+    const generalLocale = systemLocaleTag.split("-")[0]
+    if (Object.prototype.hasOwnProperty.call(i18n.languages, generalLocale)) {
+      await i18n.changeLanguage(generalLocale)
+    } else {
+      await i18n.changeLanguage(fallbackLocale)
+    }
   }
+
+  return i18n
 }
 
 // handle RTL languages
@@ -45,22 +64,26 @@ I18nManager.forceRTL(isRTL)
 /**
  * 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}`>
+  [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}']` | `.${TKey}`
-  >
+  [TKey in keyof TObj & (string | number)]: RecursiveKeyOfHandleValue<TObj[TKey], `${TKey}`, false>
 }[keyof TObj & (string | number)]
 
-type RecursiveKeyOfHandleValue<TValue, Text extends string> = TValue extends any[]
+type RecursiveKeyOfHandleValue<
+  TValue,
+  Text extends string,
+  IsFirstLevel extends boolean,
+> = TValue extends any[]
   ? Text
   : TValue extends object
-    ? Text | `${Text}${RecursiveKeyOfInner<TValue>}`
+    ? IsFirstLevel extends true
+      ? Text | `${Text}:${RecursiveKeyOfInner<TValue>}`
+      : Text | `${Text}.${RecursiveKeyOfInner<TValue>}`
     : Text
diff --git a/boilerplate/app/i18n/translate.ts b/boilerplate/app/i18n/translate.ts
index 00c1c1e06..aeb5a6a6d 100644
--- a/boilerplate/app/i18n/translate.ts
+++ b/boilerplate/app/i18n/translate.ts
@@ -1,10 +1,10 @@
-import { TranslateOptions } from "i18n-js"
+import { TOptions } from "i18next"
 import { i18n, TxKeyPath } from "./i18n"
 
 /**
  * Translates text.
  * @param {TxKeyPath} key - The i18n key.
- * @param {i18n.TranslateOptions} options - The i18n options.
+ * @param {i18n.TOptions} options - The i18n options.
  * @returns {string} - The translated text.
  * @example
  * Translations:
@@ -17,12 +17,15 @@ import { i18n, TxKeyPath } from "./i18n"
  *
  * Usage:
  * ```ts
- * import { translate } from "i18n-js"
+ * import { translate } from "./i18n"
  *
- * translate("common.ok", { name: "world" })
+ * translate("common:ok", { name: "world" })
  * // => "Hello world!"
  * ```
  */
-export function translate(key: TxKeyPath, options?: TranslateOptions): string {
-  return i18n.t(key, options)
+export function translate(key: TxKeyPath, options?: TOptions): string {
+  if (i18n.isInitialized) {
+    return i18n.t(key, options)
+  }
+  return key
 }
diff --git a/boilerplate/app/models/Episode.test.ts b/boilerplate/app/models/Episode.test.ts
index 1e0c309aa..c33436e0c 100644
--- a/boilerplate/app/models/Episode.test.ts
+++ b/boilerplate/app/models/Episode.test.ts
@@ -27,14 +27,14 @@ const episode = EpisodeModel.create(data)
 test("publish date format", () => {
   expect(episode.datePublished.textLabel).toBe("Jan 20, 2022")
   expect(episode.datePublished.accessibilityLabel).toBe(
-    'demoPodcastListScreen.accessibility.publishLabel {"date":"Jan 20, 2022"}',
+    'demoPodcastListScreen:accessibility.publishLabel {"date":"Jan 20, 2022"}',
   )
 })
 
 test("duration format", () => {
   expect(episode.duration.textLabel).toBe("42:58")
   expect(episode.duration.accessibilityLabel).toBe(
-    'demoPodcastListScreen.accessibility.durationLabel {"hours":0,"minutes":42,"seconds":58}',
+    'demoPodcastListScreen:accessibility.durationLabel {"hours":0,"minutes":42,"seconds":58}',
   )
 })
 
diff --git a/boilerplate/app/models/Episode.ts b/boilerplate/app/models/Episode.ts
index 3977f6836..0b7c5e0c2 100644
--- a/boilerplate/app/models/Episode.ts
+++ b/boilerplate/app/models/Episode.ts
@@ -46,7 +46,7 @@ export const EpisodeModel = types
         const formatted = formatDate(episode.pubDate)
         return {
           textLabel: formatted,
-          accessibilityLabel: translate("demoPodcastListScreen.accessibility.publishLabel", {
+          accessibilityLabel: translate("demoPodcastListScreen:accessibility.publishLabel", {
             date: formatted,
           }),
         }
@@ -65,7 +65,7 @@ export const EpisodeModel = types
       const sDisplay = s > 0 ? s : ""
       return {
         textLabel: hDisplay + mDisplay + sDisplay,
-        accessibilityLabel: translate("demoPodcastListScreen.accessibility.durationLabel", {
+        accessibilityLabel: translate("demoPodcastListScreen:accessibility.durationLabel", {
           hours: h,
           minutes: m,
           seconds: s,
diff --git a/boilerplate/app/navigators/DemoNavigator.tsx b/boilerplate/app/navigators/DemoNavigator.tsx
index 416eb07e3..e899e94c8 100644
--- a/boilerplate/app/navigators/DemoNavigator.tsx
+++ b/boilerplate/app/navigators/DemoNavigator.tsx
@@ -59,7 +59,7 @@ export function DemoNavigator() {
         name="DemoShowroom"
         component={DemoShowroomScreen}
         options={{
-          tabBarLabel: translate("demoNavigator.componentsTab"),
+          tabBarLabel: translate("demoNavigator:componentsTab"),
           tabBarIcon: ({ focused }) => (
             <Icon icon="components" color={focused ? colors.tint : colors.tintInactive} size={30} />
           ),
@@ -70,7 +70,7 @@ export function DemoNavigator() {
         name="DemoCommunity"
         component={DemoCommunityScreen}
         options={{
-          tabBarLabel: translate("demoNavigator.communityTab"),
+          tabBarLabel: translate("demoNavigator:communityTab"),
           tabBarIcon: ({ focused }) => (
             <Icon icon="community" color={focused ? colors.tint : colors.tintInactive} size={30} />
           ),
@@ -81,8 +81,8 @@ export function DemoNavigator() {
         name="DemoPodcastList"
         component={DemoPodcastListScreen}
         options={{
-          tabBarAccessibilityLabel: translate("demoNavigator.podcastListTab"),
-          tabBarLabel: translate("demoNavigator.podcastListTab"),
+          tabBarAccessibilityLabel: translate("demoNavigator:podcastListTab"),
+          tabBarLabel: translate("demoNavigator:podcastListTab"),
           tabBarIcon: ({ focused }) => (
             <Icon icon="podcast" color={focused ? colors.tint : colors.tintInactive} size={30} />
           ),
@@ -93,7 +93,7 @@ export function DemoNavigator() {
         name="DemoDebug"
         component={DemoDebugScreen}
         options={{
-          tabBarLabel: translate("demoNavigator.debugTab"),
+          tabBarLabel: translate("demoNavigator:debugTab"),
           tabBarIcon: ({ focused }) => (
             <Icon icon="debug" color={focused ? colors.tint : colors.tintInactive} size={30} />
           ),
diff --git a/boilerplate/app/screens/DemoCommunityScreen.tsx b/boilerplate/app/screens/DemoCommunityScreen.tsx
index 8f264264c..09bbeda26 100644
--- a/boilerplate/app/screens/DemoCommunityScreen.tsx
+++ b/boilerplate/app/screens/DemoCommunityScreen.tsx
@@ -18,25 +18,25 @@ export const DemoCommunityScreen: FC<DemoTabScreenProps<"DemoCommunity">> =
     const { themed } = useAppTheme()
     return (
       <Screen preset="scroll" contentContainerStyle={$styles.container} safeAreaEdges={["top"]}>
-        <Text preset="heading" tx="demoCommunityScreen.title" style={themed($title)} />
-        <Text tx="demoCommunityScreen.tagLine" style={themed($tagline)} />
+        <Text preset="heading" tx="demoCommunityScreen:title" style={themed($title)} />
+        <Text tx="demoCommunityScreen:tagLine" style={themed($tagline)} />
 
-        <Text preset="subheading" tx="demoCommunityScreen.joinUsOnSlackTitle" />
-        <Text tx="demoCommunityScreen.joinUsOnSlack" style={themed($description)} />
+        <Text preset="subheading" tx="demoCommunityScreen:joinUsOnSlackTitle" />
+        <Text tx="demoCommunityScreen:joinUsOnSlack" style={themed($description)} />
         <ListItem
-          tx="demoCommunityScreen.joinSlackLink"
+          tx="demoCommunityScreen:joinSlackLink"
           leftIcon="slack"
           rightIcon={isRTL ? "caretLeft" : "caretRight"}
           onPress={() => openLinkInBrowser("https://community.infinite.red/")}
         />
         <Text
           preset="subheading"
-          tx="demoCommunityScreen.makeIgniteEvenBetterTitle"
+          tx="demoCommunityScreen:makeIgniteEvenBetterTitle"
           style={themed($sectionTitle)}
         />
-        <Text tx="demoCommunityScreen.makeIgniteEvenBetter" style={themed($description)} />
+        <Text tx="demoCommunityScreen:makeIgniteEvenBetter" style={themed($description)} />
         <ListItem
-          tx="demoCommunityScreen.contributeToIgniteLink"
+          tx="demoCommunityScreen:contributeToIgniteLink"
           leftIcon="github"
           rightIcon={isRTL ? "caretLeft" : "caretRight"}
           onPress={() => openLinkInBrowser("https://github.com/infinitered/ignite")}
@@ -44,12 +44,12 @@ export const DemoCommunityScreen: FC<DemoTabScreenProps<"DemoCommunity">> =
 
         <Text
           preset="subheading"
-          tx="demoCommunityScreen.theLatestInReactNativeTitle"
+          tx="demoCommunityScreen:theLatestInReactNativeTitle"
           style={themed($sectionTitle)}
         />
-        <Text tx="demoCommunityScreen.theLatestInReactNative" style={themed($description)} />
+        <Text tx="demoCommunityScreen:theLatestInReactNative" style={themed($description)} />
         <ListItem
-          tx="demoCommunityScreen.reactNativeRadioLink"
+          tx="demoCommunityScreen:reactNativeRadioLink"
           bottomSeparator
           rightIcon={isRTL ? "caretLeft" : "caretRight"}
           LeftComponent={
@@ -60,7 +60,7 @@ export const DemoCommunityScreen: FC<DemoTabScreenProps<"DemoCommunity">> =
           onPress={() => openLinkInBrowser("https://reactnativeradio.com/")}
         />
         <ListItem
-          tx="demoCommunityScreen.reactNativeNewsletterLink"
+          tx="demoCommunityScreen:reactNativeNewsletterLink"
           bottomSeparator
           rightIcon={isRTL ? "caretLeft" : "caretRight"}
           LeftComponent={
@@ -71,7 +71,7 @@ export const DemoCommunityScreen: FC<DemoTabScreenProps<"DemoCommunity">> =
           onPress={() => openLinkInBrowser("https://reactnativenewsletter.com/")}
         />
         <ListItem
-          tx="demoCommunityScreen.reactNativeLiveLink"
+          tx="demoCommunityScreen:reactNativeLiveLink"
           bottomSeparator
           rightIcon={isRTL ? "caretLeft" : "caretRight"}
           LeftComponent={
@@ -82,7 +82,7 @@ export const DemoCommunityScreen: FC<DemoTabScreenProps<"DemoCommunity">> =
           onPress={() => openLinkInBrowser("https://rn.live/")}
         />
         <ListItem
-          tx="demoCommunityScreen.chainReactConferenceLink"
+          tx="demoCommunityScreen:chainReactConferenceLink"
           rightIcon={isRTL ? "caretLeft" : "caretRight"}
           LeftComponent={
             <View style={[$styles.row, themed($logoContainer)]}>
@@ -93,12 +93,12 @@ export const DemoCommunityScreen: FC<DemoTabScreenProps<"DemoCommunity">> =
         />
         <Text
           preset="subheading"
-          tx="demoCommunityScreen.hireUsTitle"
+          tx="demoCommunityScreen:hireUsTitle"
           style={themed($sectionTitle)}
         />
-        <Text tx="demoCommunityScreen.hireUs" style={themed($description)} />
+        <Text tx="demoCommunityScreen:hireUs" style={themed($description)} />
         <ListItem
-          tx="demoCommunityScreen.hireUsLink"
+          tx="demoCommunityScreen:hireUsLink"
           leftIcon="clap"
           rightIcon={isRTL ? "caretLeft" : "caretRight"}
           onPress={() => openLinkInBrowser("https://infinite.red/contact")}
diff --git a/boilerplate/app/screens/DemoDebugScreen.tsx b/boilerplate/app/screens/DemoDebugScreen.tsx
index 4176f387c..94f0ec643 100644
--- a/boilerplate/app/screens/DemoDebugScreen.tsx
+++ b/boilerplate/app/screens/DemoDebugScreen.tsx
@@ -77,11 +77,11 @@ export const DemoDebugScreen: FC<DemoTabScreenProps<"DemoDebug">> = function Dem
     >
       <Text
         style={themed($reportBugsLink)}
-        tx="demoDebugScreen.reportBugs"
+        tx="demoDebugScreen:reportBugs"
         onPress={() => openLinkInBrowser("https://github.com/infinitered/ignite/issues")}
       />
 
-      <Text style={themed($title)} preset="heading" tx="demoDebugScreen.title" />
+      <Text style={themed($title)} preset="heading" tx="demoDebugScreen:title" />
       <Text preset="bold">Current system theme: {colorScheme}</Text>
       <Text preset="bold">Current app theme: {themeContext}</Text>
       <Button onPress={resetTheme} text={`Reset`} />
@@ -140,11 +140,11 @@ export const DemoDebugScreen: FC<DemoTabScreenProps<"DemoDebug">> = function Dem
         />
       </View>
       <View style={themed($buttonContainer)}>
-        <Button style={themed($button)} tx="demoDebugScreen.reactotron" onPress={demoReactotron} />
-        <Text style={themed($hint)} tx={`demoDebugScreen.${Platform.OS}ReactotronHint` as const} />
+        <Button style={themed($button)} tx="demoDebugScreen:reactotron" onPress={demoReactotron} />
+        <Text style={themed($hint)} tx={`demoDebugScreen:${Platform.OS}ReactotronHint` as const} />
       </View>
       <View style={themed($buttonContainer)}>
-        <Button style={themed($button)} tx="common.logOut" onPress={logout} />
+        <Button style={themed($button)} tx="common:logOut" onPress={logout} />
       </View>
     </Screen>
   )
diff --git a/boilerplate/app/screens/DemoPodcastListScreen.tsx b/boilerplate/app/screens/DemoPodcastListScreen.tsx
index 143309c91..61c96c8c7 100644
--- a/boilerplate/app/screens/DemoPodcastListScreen.tsx
+++ b/boilerplate/app/screens/DemoPodcastListScreen.tsx
@@ -90,12 +90,12 @@ export const DemoPodcastListScreen: FC<DemoTabScreenProps<"DemoPodcastList">> =
                 style={themed($emptyState)}
                 headingTx={
                   episodeStore.favoritesOnly
-                    ? "demoPodcastListScreen.noFavoritesEmptyState.heading"
+                    ? "demoPodcastListScreen:noFavoritesEmptyState.heading"
                     : undefined
                 }
                 contentTx={
                   episodeStore.favoritesOnly
-                    ? "demoPodcastListScreen.noFavoritesEmptyState.content"
+                    ? "demoPodcastListScreen:noFavoritesEmptyState.content"
                     : undefined
                 }
                 button={episodeStore.favoritesOnly ? "" : undefined}
@@ -107,7 +107,7 @@ export const DemoPodcastListScreen: FC<DemoTabScreenProps<"DemoPodcastList">> =
           }
           ListHeaderComponent={
             <View style={themed($heading)}>
-              <Text preset="heading" tx="demoPodcastListScreen.title" />
+              <Text preset="heading" tx="demoPodcastListScreen:title" />
               {(episodeStore.favoritesOnly || episodeStore.episodesForList.length > 0) && (
                 <View style={themed($toggle)}>
                   <Switch
@@ -115,10 +115,10 @@ export const DemoPodcastListScreen: FC<DemoTabScreenProps<"DemoPodcastList">> =
                     onValueChange={() =>
                       episodeStore.setProp("favoritesOnly", !episodeStore.favoritesOnly)
                     }
-                    labelTx="demoPodcastListScreen.onlyFavorites"
+                    labelTx="demoPodcastListScreen:onlyFavorites"
                     labelPosition="left"
                     labelStyle={$labelStyle}
-                    accessibilityLabel={translate("demoPodcastListScreen.accessibility.switch")}
+                    accessibilityLabel={translate("demoPodcastListScreen:accessibility.switch")}
                   />
                 </View>
               )}
@@ -194,7 +194,7 @@ const EpisodeCard = observer(function EpisodeCard({
       Platform.select<AccessibilityProps>({
         ios: {
           accessibilityLabel: episode.title,
-          accessibilityHint: translate("demoPodcastListScreen.accessibility.cardHint", {
+          accessibilityHint: translate("demoPodcastListScreen:accessibility.cardHint", {
             action: isFavorite ? "unfavorite" : "favorite",
           }),
         },
@@ -203,7 +203,7 @@ const EpisodeCard = observer(function EpisodeCard({
           accessibilityActions: [
             {
               name: "longpress",
-              label: translate("demoPodcastListScreen.accessibility.favoriteAction"),
+              label: translate("demoPodcastListScreen:accessibility.favoriteAction"),
             },
           ],
           onAccessibilityAction: ({ nativeEvent }) => {
@@ -288,8 +288,8 @@ const EpisodeCard = observer(function EpisodeCard({
           style={themed([$favoriteButton, isFavorite && $unFavoriteButton])}
           accessibilityLabel={
             isFavorite
-              ? translate("demoPodcastListScreen.accessibility.unfavoriteIcon")
-              : translate("demoPodcastListScreen.accessibility.favoriteIcon")
+              ? translate("demoPodcastListScreen:accessibility.unfavoriteIcon")
+              : translate("demoPodcastListScreen:accessibility.favoriteIcon")
           }
           LeftAccessory={ButtonLeftAccessory}
         >
@@ -299,8 +299,8 @@ const EpisodeCard = observer(function EpisodeCard({
             weight="medium"
             text={
               isFavorite
-                ? translate("demoPodcastListScreen.unfavoriteButton")
-                : translate("demoPodcastListScreen.favoriteButton")
+                ? translate("demoPodcastListScreen:unfavoriteButton")
+                : translate("demoPodcastListScreen:favoriteButton")
             }
           />
         </Button>
diff --git a/boilerplate/app/screens/DemoShowroomScreen/DemoShowroomScreen.tsx b/boilerplate/app/screens/DemoShowroomScreen/DemoShowroomScreen.tsx
index 1b6e4787f..448f608d1 100644
--- a/boilerplate/app/screens/DemoShowroomScreen/DemoShowroomScreen.tsx
+++ b/boilerplate/app/screens/DemoShowroomScreen/DemoShowroomScreen.tsx
@@ -213,7 +213,7 @@ export const DemoShowroomScreen: FC<DemoTabScreenProps<"DemoShowroom">> =
             renderSectionFooter={() => <View style={themed($demoUseCasesSpacer)} />}
             ListHeaderComponent={
               <View style={themed($heading)}>
-                <Text preset="heading" tx="demoShowroomScreen.jumpStart" />
+                <Text preset="heading" tx="demoShowroomScreen:jumpStart" />
               </View>
             }
             onScrollToIndexFailed={scrollToIndexFailed}
diff --git a/boilerplate/app/screens/DemoShowroomScreen/demos/DemoAutoImage.tsx b/boilerplate/app/screens/DemoShowroomScreen/demos/DemoAutoImage.tsx
index a72923f27..f16a4ba4c 100644
--- a/boilerplate/app/screens/DemoShowroomScreen/demos/DemoAutoImage.tsx
+++ b/boilerplate/app/screens/DemoShowroomScreen/demos/DemoAutoImage.tsx
@@ -37,9 +37,9 @@ const $aspectRatioBox: ThemedStyle<ViewStyle & ImageStyle> = (theme) => ({
 
 export const DemoAutoImage: Demo = {
   name: "AutoImage",
-  description: "demoAutoImage.description",
+  description: "demoAutoImage:description",
   data: ({ theme, themed }) => [
-    <DemoUseCase name="demoAutoImage.useCase.remoteUri.name">
+    <DemoUseCase name="demoAutoImage:useCase.remoteUri.name">
       <View style={$imageContainer}>
         <AutoImage
           source={{
@@ -49,7 +49,7 @@ export const DemoAutoImage: Demo = {
       </View>
     </DemoUseCase>,
 
-    <DemoUseCase name="demoAutoImage.useCase.base64Uri.name">
+    <DemoUseCase name="demoAutoImage:useCase.base64Uri.name">
       <View style={$imageContainer}>
         <AutoImage
           source={{
@@ -60,8 +60,8 @@ export const DemoAutoImage: Demo = {
     </DemoUseCase>,
 
     <DemoUseCase
-      name="demoAutoImage.useCase.scaledToFitDimensions.name"
-      description="demoAutoImage.useCase.scaledToFitDimensions.description"
+      name="demoAutoImage:useCase.scaledToFitDimensions.name"
+      description="demoAutoImage:useCase.scaledToFitDimensions.description"
     >
       <View style={[$styles.row, $aspectRatioWidthExampleContainer]}>
         <Text
@@ -113,7 +113,7 @@ export const DemoAutoImage: Demo = {
       </View>
 
       <Text weight="bold" size="xs" style={themed($aspectRatioDescription)}>
-        {translate("demoAutoImage.useCase.scaledToFitDimensions.heightAuto")}
+        {translate("demoAutoImage:useCase.scaledToFitDimensions.heightAuto")}
       </Text>
 
       <DemoDivider size={40} />
@@ -162,7 +162,7 @@ export const DemoAutoImage: Demo = {
       </View>
 
       <Text weight="bold" size="xs" style={themed($aspectRatioDescription)}>
-        {translate("demoAutoImage.useCase.scaledToFitDimensions.widthAuto")}
+        {translate("demoAutoImage:useCase.scaledToFitDimensions.widthAuto")}
       </Text>
 
       <DemoDivider size={40} />
@@ -218,7 +218,7 @@ export const DemoAutoImage: Demo = {
       </View>
 
       <Text weight="bold" size="xs" style={themed($aspectRatioDescription)}>
-        {translate("demoAutoImage.useCase.scaledToFitDimensions.bothManual")}
+        {translate("demoAutoImage:useCase.scaledToFitDimensions.bothManual")}
       </Text>
     </DemoUseCase>,
   ],
diff --git a/boilerplate/app/screens/DemoShowroomScreen/demos/DemoButton.tsx b/boilerplate/app/screens/DemoShowroomScreen/demos/DemoButton.tsx
index e02680d63..3ed7715d0 100644
--- a/boilerplate/app/screens/DemoShowroomScreen/demos/DemoButton.tsx
+++ b/boilerplate/app/screens/DemoShowroomScreen/demos/DemoButton.tsx
@@ -44,11 +44,11 @@ const $disabledButtonTextStyle: ThemedStyle<TextStyle> = ({ colors }) => ({
 
 export const DemoButton: Demo = {
   name: "Button",
-  description: "demoButton.description",
+  description: "demoButton:description",
   data: ({ themed }) => [
     <DemoUseCase
-      name="demoButton.useCase.presets.name"
-      description="demoButton.useCase.presets.description"
+      name="demoButton:useCase.presets.name"
+      description="demoButton:useCase.presets.description"
     >
       <Button>Default - Laboris In Labore</Button>
       <DemoDivider />
@@ -60,16 +60,16 @@ export const DemoButton: Demo = {
     </DemoUseCase>,
 
     <DemoUseCase
-      name="demoButton.useCase.passingContent.name"
-      description="demoButton.useCase.passingContent.description"
+      name="demoButton:useCase.passingContent.name"
+      description="demoButton:useCase.passingContent.description"
     >
-      <Button text={translate("demoButton.useCase.passingContent.viaTextProps")} />
+      <Button text={translate("demoButton:useCase.passingContent.viaTextProps")} />
       <DemoDivider />
 
-      <Button tx="demoShowroomScreen.demoViaTxProp" />
+      <Button tx="demoShowroomScreen:demoViaTxProp" />
       <DemoDivider />
 
-      <Button>{translate("demoButton.useCase.passingContent.children")}</Button>
+      <Button>{translate("demoButton:useCase.passingContent.children")}</Button>
       <DemoDivider />
 
       <Button
@@ -78,7 +78,7 @@ export const DemoButton: Demo = {
           <Icon containerStyle={props.style} style={$iconStyle} icon="ladybug" />
         )}
       >
-        {translate("demoButton.useCase.passingContent.rightAccessory")}
+        {translate("demoButton:useCase.passingContent.rightAccessory")}
       </Button>
       <DemoDivider />
 
@@ -88,20 +88,20 @@ export const DemoButton: Demo = {
           <Icon containerStyle={props.style} style={$iconStyle} icon="ladybug" />
         )}
       >
-        {translate("demoButton.useCase.passingContent.leftAccessory")}
+        {translate("demoButton:useCase.passingContent.leftAccessory")}
       </Button>
       <DemoDivider />
 
       <Button>
         <Text>
-          <Text preset="bold">{translate("demoButton.useCase.passingContent.nestedChildren")}</Text>
+          <Text preset="bold">{translate("demoButton:useCase.passingContent.nestedChildren")}</Text>
           {` `}
           <Text preset="default">
-            {translate("demoButton.useCase.passingContent.nestedChildren2")}
+            {translate("demoButton:useCase.passingContent.nestedChildren2")}
           </Text>
           {` `}
           <Text preset="bold">
-            {translate("demoButton.useCase.passingContent.nestedChildren3")}
+            {translate("demoButton:useCase.passingContent.nestedChildren3")}
           </Text>
         </Text>
       </Button>
@@ -116,21 +116,21 @@ export const DemoButton: Demo = {
           <Icon containerStyle={props.style} style={$iconStyle} icon="ladybug" />
         )}
       >
-        {translate("demoButton.useCase.passingContent.multiLine")}
+        {translate("demoButton:useCase.passingContent.multiLine")}
       </Button>
     </DemoUseCase>,
 
     <DemoUseCase
-      name="demoButton.useCase.styling.name"
-      description="demoButton.useCase.styling.description"
+      name="demoButton:useCase.styling.name"
+      description="demoButton:useCase.styling.description"
     >
       <Button style={themed($customButtonStyle)}>
-        {translate("demoButton.useCase.styling.styleContainer")}
+        {translate("demoButton:useCase.styling.styleContainer")}
       </Button>
       <DemoDivider />
 
       <Button preset="filled" textStyle={themed($customButtonTextStyle)}>
-        {translate("demoButton.useCase.styling.styleText")}
+        {translate("demoButton:useCase.styling.styleText")}
       </Button>
       <DemoDivider />
 
@@ -138,7 +138,7 @@ export const DemoButton: Demo = {
         preset="reversed"
         RightAccessory={() => <View style={themed($customButtonRightAccessoryStyle)} />}
       >
-        {translate("demoButton.useCase.styling.styleAccessories")}
+        {translate("demoButton:useCase.styling.styleAccessories")}
       </Button>
       <DemoDivider />
 
@@ -156,13 +156,13 @@ export const DemoButton: Demo = {
           />
         )}
       >
-        {translate("demoButton.useCase.styling.pressedState")}
+        {translate("demoButton:useCase.styling.pressedState")}
       </Button>
     </DemoUseCase>,
 
     <DemoUseCase
-      name="demoButton.useCase.disabling.name"
-      description="demoButton.useCase.disabling.description"
+      name="demoButton:useCase.disabling.name"
+      description="demoButton:useCase.disabling.description"
     >
       <Button
         disabled
@@ -170,7 +170,7 @@ export const DemoButton: Demo = {
         pressedStyle={themed($customButtonPressedStyle)}
         pressedTextStyle={themed($customButtonPressedTextStyle)}
       >
-        {translate("demoButton.useCase.disabling.standard")}
+        {translate("demoButton:useCase.disabling.standard")}
       </Button>
       <DemoDivider />
 
@@ -181,7 +181,7 @@ export const DemoButton: Demo = {
         pressedStyle={themed($customButtonPressedStyle)}
         pressedTextStyle={themed($customButtonPressedTextStyle)}
       >
-        {translate("demoButton.useCase.disabling.filled")}
+        {translate("demoButton:useCase.disabling.filled")}
       </Button>
       <DemoDivider />
 
@@ -192,7 +192,7 @@ export const DemoButton: Demo = {
         pressedStyle={themed($customButtonPressedStyle)}
         pressedTextStyle={themed($customButtonPressedTextStyle)}
       >
-        {translate("demoButton.useCase.disabling.reversed")}
+        {translate("demoButton:useCase.disabling.reversed")}
       </Button>
       <DemoDivider />
 
@@ -210,7 +210,7 @@ export const DemoButton: Demo = {
           />
         )}
       >
-        {translate("demoButton.useCase.disabling.accessory")}
+        {translate("demoButton:useCase.disabling.accessory")}
       </Button>
       <DemoDivider />
 
@@ -221,7 +221,7 @@ export const DemoButton: Demo = {
         pressedStyle={themed($customButtonPressedStyle)}
         pressedTextStyle={themed($customButtonPressedTextStyle)}
       >
-        {translate("demoButton.useCase.disabling.textStyle")}
+        {translate("demoButton:useCase.disabling.textStyle")}
       </Button>
     </DemoUseCase>,
   ],
diff --git a/boilerplate/app/screens/DemoShowroomScreen/demos/DemoCard.tsx b/boilerplate/app/screens/DemoShowroomScreen/demos/DemoCard.tsx
index 8c9f574b3..e5660e3ff 100644
--- a/boilerplate/app/screens/DemoShowroomScreen/demos/DemoCard.tsx
+++ b/boilerplate/app/screens/DemoShowroomScreen/demos/DemoCard.tsx
@@ -6,88 +6,88 @@ import { DemoUseCase } from "../DemoUseCase"
 
 export const DemoCard: Demo = {
   name: "Card",
-  description: "demoCard.description",
+  description: "demoCard:description",
   data: ({ theme }) => [
     <DemoUseCase
-      name="demoCard.useCase.presets.name"
-      description="demoCard.useCase.presets.description"
+      name="demoCard:useCase.presets.name"
+      description="demoCard:useCase.presets.description"
     >
       <Card
-        headingTx="demoCard.useCase.presets.default.heading"
-        contentTx="demoCard.useCase.presets.default.content"
-        footerTx="demoCard.useCase.presets.default.footer"
+        headingTx="demoCard:useCase.presets.default.heading"
+        contentTx="demoCard:useCase.presets.default.content"
+        footerTx="demoCard:useCase.presets.default.footer"
       />
       <DemoDivider />
       <Card
-        headingTx="demoCard.useCase.presets.reversed.heading"
-        contentTx="demoCard.useCase.presets.reversed.content"
-        footerTx="demoCard.useCase.presets.reversed.footer"
+        headingTx="demoCard:useCase.presets.reversed.heading"
+        contentTx="demoCard:useCase.presets.reversed.content"
+        footerTx="demoCard:useCase.presets.reversed.footer"
         preset="reversed"
       />
     </DemoUseCase>,
 
     <DemoUseCase
-      name="demoCard.useCase.verticalAlignment.name"
-      description="demoCard.useCase.verticalAlignment.description"
+      name="demoCard:useCase.verticalAlignment.name"
+      description="demoCard:useCase.verticalAlignment.description"
     >
       <Card
-        headingTx="demoCard.useCase.verticalAlignment.top.heading"
-        contentTx="demoCard.useCase.verticalAlignment.top.content"
-        footerTx="demoCard.useCase.verticalAlignment.top.footer"
+        headingTx="demoCard:useCase.verticalAlignment.top.heading"
+        contentTx="demoCard:useCase.verticalAlignment.top.content"
+        footerTx="demoCard:useCase.verticalAlignment.top.footer"
         style={{ minHeight: 160 }}
       />
       <DemoDivider />
       <Card
-        headingTx="demoCard.useCase.verticalAlignment.center.heading"
+        headingTx="demoCard:useCase.verticalAlignment.center.heading"
         verticalAlignment="center"
         preset="reversed"
-        contentTx="demoCard.useCase.verticalAlignment.center.content"
-        footerTx="demoCard.useCase.verticalAlignment.center.footer"
+        contentTx="demoCard:useCase.verticalAlignment.center.content"
+        footerTx="demoCard:useCase.verticalAlignment.center.footer"
         style={{ minHeight: 160 }}
       />
       <DemoDivider />
       <Card
-        headingTx="demoCard.useCase.verticalAlignment.spaceBetween.heading"
+        headingTx="demoCard:useCase.verticalAlignment.spaceBetween.heading"
         verticalAlignment="space-between"
-        contentTx="demoCard.useCase.verticalAlignment.spaceBetween.content"
-        footerTx="demoCard.useCase.verticalAlignment.spaceBetween.footer"
+        contentTx="demoCard:useCase.verticalAlignment.spaceBetween.content"
+        footerTx="demoCard:useCase.verticalAlignment.spaceBetween.footer"
         style={{ minHeight: 160 }}
       />
       <DemoDivider />
       <Card
         preset="reversed"
-        headingTx="demoCard.useCase.verticalAlignment.reversed.heading"
+        headingTx="demoCard:useCase.verticalAlignment.reversed.heading"
         verticalAlignment="force-footer-bottom"
-        contentTx="demoCard.useCase.verticalAlignment.reversed.content"
-        footerTx="demoCard.useCase.verticalAlignment.reversed.footer"
+        contentTx="demoCard:useCase.verticalAlignment.reversed.content"
+        footerTx="demoCard:useCase.verticalAlignment.reversed.footer"
         style={{ minHeight: 160 }}
       />
     </DemoUseCase>,
 
     <DemoUseCase
-      name="demoCard.useCase.passingContent.name"
-      description="demoCard.useCase.passingContent.description"
+      name="demoCard:useCase.passingContent.name"
+      description="demoCard:useCase.passingContent.description"
     >
       <Card
-        headingTx="demoCard.useCase.passingContent.heading"
-        contentTx="demoCard.useCase.passingContent.content"
-        footerTx="demoCard.useCase.passingContent.footer"
+        headingTx="demoCard:useCase.passingContent.heading"
+        contentTx="demoCard:useCase.passingContent.content"
+        footerTx="demoCard:useCase.passingContent.footer"
       />
       <DemoDivider />
       <Card
         preset="reversed"
-        headingTx="demoShowroomScreen.demoViaSpecifiedTxProp"
+        headingTx="demoShowroomScreen:demoViaSpecifiedTxProp"
         headingTxOptions={{ prop: "heading" }}
-        contentTx="demoShowroomScreen.demoViaSpecifiedTxProp"
+        contentTx="demoShowroomScreen:demoViaSpecifiedTxProp"
         contentTxOptions={{ prop: "content" }}
-        footerTx="demoShowroomScreen.demoViaSpecifiedTxProp"
+        footerTx="demoShowroomScreen:demoViaSpecifiedTxProp"
         footerTxOptions={{ prop: "footer" }}
       />
     </DemoUseCase>,
 
     <DemoUseCase
-      name="demoCard.useCase.customComponent.name"
-      description="demoCard.useCase.customComponent.description"
+      name="demoCard:useCase.customComponent.name"
+      description="demoCard:useCase.customComponent.description"
     >
       <Card
         HeadingComponent={
@@ -114,7 +114,7 @@ export const DemoCard: Demo = {
       />
       <DemoDivider />
       <Card
-        headingTx="demoCard.useCase.customComponent.rightComponent"
+        headingTx="demoCard:useCase.customComponent.rightComponent"
         verticalAlignment="center"
         RightComponent={
           <AutoImage
@@ -130,7 +130,7 @@ export const DemoCard: Demo = {
       <DemoDivider />
       <Card
         preset="reversed"
-        headingTx="demoCard.useCase.customComponent.leftComponent"
+        headingTx="demoCard:useCase.customComponent.leftComponent"
         verticalAlignment="center"
         LeftComponent={
           <AutoImage
@@ -146,18 +146,18 @@ export const DemoCard: Demo = {
     </DemoUseCase>,
 
     <DemoUseCase
-      name="demoCard.useCase.style.name"
-      description="demoCard.useCase.style.description"
+      name="demoCard:useCase.style.name"
+      description="demoCard:useCase.style.description"
     >
       <Card
-        headingTx="demoCard.useCase.style.heading"
+        headingTx="demoCard:useCase.style.heading"
         headingStyle={{ color: theme.colors.error }}
-        contentTx="demoCard.useCase.style.content"
+        contentTx="demoCard:useCase.style.content"
         contentStyle={{
           backgroundColor: theme.colors.error,
           color: theme.colors.palette.neutral100,
         }}
-        footerTx="demoCard.useCase.style.footer"
+        footerTx="demoCard:useCase.style.footer"
         footerStyle={{
           textDecorationLine: "underline line-through",
           textDecorationStyle: "dashed",
diff --git a/boilerplate/app/screens/DemoShowroomScreen/demos/DemoEmptyState.tsx b/boilerplate/app/screens/DemoShowroomScreen/demos/DemoEmptyState.tsx
index dd65f1b32..da5c0ad17 100644
--- a/boilerplate/app/screens/DemoShowroomScreen/demos/DemoEmptyState.tsx
+++ b/boilerplate/app/screens/DemoShowroomScreen/demos/DemoEmptyState.tsx
@@ -6,48 +6,48 @@ import { DemoUseCase } from "../DemoUseCase"
 
 export const DemoEmptyState: Demo = {
   name: "EmptyState",
-  description: "demoEmptyState.description",
+  description: "demoEmptyState:description",
   data: ({ theme }) => [
     <DemoUseCase
-      name="demoEmptyState.useCase.presets.name"
-      description="demoEmptyState.useCase.presets.description"
+      name="demoEmptyState:useCase.presets.name"
+      description="demoEmptyState:useCase.presets.description"
     >
       <EmptyState preset="generic" />
     </DemoUseCase>,
 
     <DemoUseCase
-      name="demoEmptyState.useCase.passingContent.name"
-      description="demoEmptyState.useCase.passingContent.description"
+      name="demoEmptyState:useCase.passingContent.name"
+      description="demoEmptyState:useCase.passingContent.description"
     >
       <EmptyState
         imageSource={require("../../../../assets/images/logo.png")}
-        headingTx="demoEmptyState.useCase.passingContent.customizeImageHeading"
-        contentTx="demoEmptyState.useCase.passingContent.customizeImageContent"
+        headingTx="demoEmptyState:useCase.passingContent.customizeImageHeading"
+        contentTx="demoEmptyState:useCase.passingContent.customizeImageContent"
       />
 
       <DemoDivider size={30} line />
 
       <EmptyState
-        headingTx="demoEmptyState.useCase.passingContent.viaHeadingProp"
-        contentTx="demoEmptyState.useCase.passingContent.viaContentProp"
-        buttonTx="demoEmptyState.useCase.passingContent.viaButtonProp"
+        headingTx="demoEmptyState:useCase.passingContent.viaHeadingProp"
+        contentTx="demoEmptyState:useCase.passingContent.viaContentProp"
+        buttonTx="demoEmptyState:useCase.passingContent.viaButtonProp"
       />
 
       <DemoDivider size={30} line />
 
       <EmptyState
-        headingTx="demoShowroomScreen.demoViaSpecifiedTxProp"
+        headingTx="demoShowroomScreen:demoViaSpecifiedTxProp"
         headingTxOptions={{ prop: "heading" }}
-        contentTx="demoShowroomScreen.demoViaSpecifiedTxProp"
+        contentTx="demoShowroomScreen:demoViaSpecifiedTxProp"
         contentTxOptions={{ prop: "content" }}
-        buttonTx="demoShowroomScreen.demoViaSpecifiedTxProp"
+        buttonTx="demoShowroomScreen:demoViaSpecifiedTxProp"
         buttonTxOptions={{ prop: "button" }}
       />
     </DemoUseCase>,
 
     <DemoUseCase
-      name="demoEmptyState.useCase.styling.name"
-      description="demoEmptyState.useCase.styling.description"
+      name="demoEmptyState:useCase.styling.name"
+      description="demoEmptyState:useCase.styling.description"
     >
       <EmptyState
         preset="generic"
diff --git a/boilerplate/app/screens/DemoShowroomScreen/demos/DemoHeader.tsx b/boilerplate/app/screens/DemoShowroomScreen/demos/DemoHeader.tsx
index 863f29e15..4605f0185 100644
--- a/boilerplate/app/screens/DemoShowroomScreen/demos/DemoHeader.tsx
+++ b/boilerplate/app/screens/DemoShowroomScreen/demos/DemoHeader.tsx
@@ -33,26 +33,26 @@ const $customWhiteTitle: ThemedStyle<TextStyle> = ({ colors }) => ({
 
 export const DemoHeader: Demo = {
   name: "Header",
-  description: "demoHeader.description",
+  description: "demoHeader:description",
   data: ({ theme, themed }) => [
     <DemoUseCase
-      name="demoHeader.useCase.actionIcons.name"
-      description="demoHeader.useCase.actionIcons.description"
+      name="demoHeader:useCase.actionIcons.name"
+      description="demoHeader:useCase.actionIcons.description"
     >
       <Header
-        titleTx="demoHeader.useCase.actionIcons.leftIconTitle"
+        titleTx="demoHeader:useCase.actionIcons.leftIconTitle"
         leftIcon="ladybug"
         safeAreaEdges={[]}
       />
       <DemoDivider size={24} />
       <Header
-        titleTx="demoHeader.useCase.actionIcons.rightIconTitle"
+        titleTx="demoHeader:useCase.actionIcons.rightIconTitle"
         rightIcon="ladybug"
         safeAreaEdges={[]}
       />
       <DemoDivider size={24} />
       <Header
-        titleTx="demoHeader.useCase.actionIcons.bothIconsTitle"
+        titleTx="demoHeader:useCase.actionIcons.bothIconsTitle"
         leftIcon="ladybug"
         rightIcon="ladybug"
         safeAreaEdges={[]}
@@ -60,28 +60,28 @@ export const DemoHeader: Demo = {
     </DemoUseCase>,
 
     <DemoUseCase
-      name="demoHeader.useCase.actionText.name"
-      description="demoHeader.useCase.actionText.description"
+      name="demoHeader:useCase.actionText.name"
+      description="demoHeader:useCase.actionText.description"
     >
       <Header
-        titleTx="demoHeader.useCase.actionText.leftTxTitle"
-        leftTx="demoShowroomScreen.demoHeaderTxExample"
+        titleTx="demoHeader:useCase.actionText.leftTxTitle"
+        leftTx="demoShowroomScreen:demoHeaderTxExample"
         safeAreaEdges={[]}
       />
       <DemoDivider size={24} />
       <Header
-        titleTx="demoHeader.useCase.actionText.rightTextTitle"
+        titleTx="demoHeader:useCase.actionText.rightTextTitle"
         rightText="Yay"
         safeAreaEdges={[]}
       />
     </DemoUseCase>,
 
     <DemoUseCase
-      name="demoHeader.useCase.customActionComponents.name"
-      description="demoHeader.useCase.customActionComponents.description"
+      name="demoHeader:useCase.customActionComponents.name"
+      description="demoHeader:useCase.customActionComponents.description"
     >
       <Header
-        titleTx="demoHeader.useCase.customActionComponents.customLeftActionTitle"
+        titleTx="demoHeader:useCase.customActionComponents.customLeftActionTitle"
         titleMode="flex"
         titleStyle={$rightAlignTitle}
         LeftActionComponent={
@@ -96,18 +96,18 @@ export const DemoHeader: Demo = {
     </DemoUseCase>,
 
     <DemoUseCase
-      name="demoHeader.useCase.titleModes.name"
-      description="demoHeader.useCase.titleModes.description"
+      name="demoHeader:useCase.titleModes.name"
+      description="demoHeader:useCase.titleModes.description"
     >
       <Header
-        titleTx="demoHeader.useCase.titleModes.centeredTitle"
+        titleTx="demoHeader:useCase.titleModes.centeredTitle"
         leftIcon="ladybug"
         rightText="Hooray"
         safeAreaEdges={[]}
       />
       <DemoDivider size={24} />
       <Header
-        titleTx="demoHeader.useCase.titleModes.flexTitle"
+        titleTx="demoHeader:useCase.titleModes.flexTitle"
         titleMode="flex"
         leftIcon="ladybug"
         rightText="Hooray"
@@ -116,17 +116,17 @@ export const DemoHeader: Demo = {
     </DemoUseCase>,
 
     <DemoUseCase
-      name="demoHeader.useCase.styling.name"
-      description="demoHeader.useCase.styling.description"
+      name="demoHeader:useCase.styling.name"
+      description="demoHeader:useCase.styling.description"
     >
       <Header
-        titleTx="demoHeader.useCase.styling.styledTitle"
+        titleTx="demoHeader:useCase.styling.styledTitle"
         titleStyle={themed($customTitle)}
         safeAreaEdges={[]}
       />
       <DemoDivider size={24} />
       <Header
-        titleTx="demoHeader.useCase.styling.styledWrapperTitle"
+        titleTx="demoHeader:useCase.styling.styledWrapperTitle"
         titleStyle={themed($customWhiteTitle)}
         backgroundColor={theme.colors.error}
         style={{ height: 35 }}
@@ -134,7 +134,7 @@ export const DemoHeader: Demo = {
       />
       <DemoDivider size={24} />
       <Header
-        titleTx="demoHeader.useCase.styling.tintedIconsTitle"
+        titleTx="demoHeader:useCase.styling.tintedIconsTitle"
         titleStyle={themed($customWhiteTitle)}
         backgroundColor={theme.colors.error}
         leftIcon="ladybug"
diff --git a/boilerplate/app/screens/DemoShowroomScreen/demos/DemoIcon.tsx b/boilerplate/app/screens/DemoShowroomScreen/demos/DemoIcon.tsx
index 78f904c91..a27aecb1e 100644
--- a/boilerplate/app/screens/DemoShowroomScreen/demos/DemoIcon.tsx
+++ b/boilerplate/app/screens/DemoShowroomScreen/demos/DemoIcon.tsx
@@ -32,11 +32,11 @@ const $customIcon: ThemedStyle<ImageStyle> = ({ colors }) => ({
 
 export const DemoIcon: Demo = {
   name: "Icon",
-  description: "demoIcon.description",
+  description: "demoIcon:description",
   data: ({ theme, themed }) => [
     <DemoUseCase
-      name="demoIcon.useCase.icons.name"
-      description="demoIcon.useCase.icons.description"
+      name="demoIcon:useCase.icons.name"
+      description="demoIcon:useCase.icons.description"
       layout="row"
       itemStyle={$styles.flexWrap}
     >
@@ -52,8 +52,8 @@ export const DemoIcon: Demo = {
     </DemoUseCase>,
 
     <DemoUseCase
-      name="demoIcon.useCase.size.name"
-      description="demoIcon.useCase.size.description"
+      name="demoIcon:useCase.size.name"
+      description="demoIcon:useCase.size.description"
       layout="row"
     >
       <Icon icon="ladybug" containerStyle={themed($demoIconContainer)} />
@@ -63,8 +63,8 @@ export const DemoIcon: Demo = {
     </DemoUseCase>,
 
     <DemoUseCase
-      name="demoIcon.useCase.color.name"
-      description="demoIcon.useCase.color.description"
+      name="demoIcon:useCase.color.name"
+      description="demoIcon:useCase.color.description"
       layout="row"
     >
       <Icon
@@ -95,8 +95,8 @@ export const DemoIcon: Demo = {
     </DemoUseCase>,
 
     <DemoUseCase
-      name="demoIcon.useCase.styling.name"
-      description="demoIcon.useCase.styling.description"
+      name="demoIcon:useCase.styling.name"
+      description="demoIcon:useCase.styling.description"
       layout="row"
     >
       <Icon
diff --git a/boilerplate/app/screens/DemoShowroomScreen/demos/DemoListItem.tsx b/boilerplate/app/screens/DemoShowroomScreen/demos/DemoListItem.tsx
index d3f2fee33..e6f4016df 100644
--- a/boilerplate/app/screens/DemoShowroomScreen/demos/DemoListItem.tsx
+++ b/boilerplate/app/screens/DemoShowroomScreen/demos/DemoListItem.tsx
@@ -43,64 +43,64 @@ const $listStyle: ThemedStyle<ViewStyle> = ({ colors, spacing }) => ({
 
 export const DemoListItem: Demo = {
   name: "ListItem",
-  description: "demoListItem.description",
+  description: "demoListItem:description",
   data: ({ theme, themed }) => [
     <DemoUseCase
-      name="demoListItem.useCase.height.name"
-      description="demoListItem.useCase.height.description"
+      name="demoListItem:useCase.height.name"
+      description="demoListItem:useCase.height.description"
     >
-      <ListItem topSeparator>{translate("demoListItem.useCase.height.defaultHeight")}</ListItem>
+      <ListItem topSeparator>{translate("demoListItem:useCase.height.defaultHeight")}</ListItem>
 
       <ListItem topSeparator height={100}>
-        {translate("demoListItem.useCase.height.customHeight")}
+        {translate("demoListItem:useCase.height.customHeight")}
       </ListItem>
 
-      <ListItem topSeparator>{translate("demoListItem.useCase.height.textHeight")}</ListItem>
+      <ListItem topSeparator>{translate("demoListItem:useCase.height.textHeight")}</ListItem>
 
       <ListItem topSeparator bottomSeparator TextProps={{ numberOfLines: 1 }}>
-        {translate("demoListItem.useCase.height.longText")}
+        {translate("demoListItem:useCase.height.longText")}
       </ListItem>
     </DemoUseCase>,
 
     <DemoUseCase
-      name="demoListItem.useCase.separators.name"
-      description="demoListItem.useCase.separators.description"
+      name="demoListItem:useCase.separators.name"
+      description="demoListItem:useCase.separators.description"
     >
-      <ListItem topSeparator>{translate("demoListItem.useCase.separators.topSeparator")}</ListItem>
+      <ListItem topSeparator>{translate("demoListItem:useCase.separators.topSeparator")}</ListItem>
 
       <DemoDivider size={40} />
 
       <ListItem topSeparator bottomSeparator>
-        {translate("demoListItem.useCase.separators.topAndBottomSeparator")}
+        {translate("demoListItem:useCase.separators.topAndBottomSeparator")}
       </ListItem>
 
       <DemoDivider size={40} />
 
       <ListItem bottomSeparator>
-        {translate("demoListItem.useCase.separators.bottomSeparator")}
+        {translate("demoListItem:useCase.separators.bottomSeparator")}
       </ListItem>
     </DemoUseCase>,
 
     <DemoUseCase
-      name="demoListItem.useCase.icons.name"
-      description="demoListItem.useCase.icons.description"
+      name="demoListItem:useCase.icons.name"
+      description="demoListItem:useCase.icons.description"
     >
       <ListItem topSeparator leftIcon="ladybug">
-        {translate("demoListItem.useCase.icons.leftIcon")}
+        {translate("demoListItem:useCase.icons.leftIcon")}
       </ListItem>
 
       <ListItem topSeparator rightIcon="ladybug">
-        {translate("demoListItem.useCase.icons.rightIcon")}
+        {translate("demoListItem:useCase.icons.rightIcon")}
       </ListItem>
 
       <ListItem topSeparator bottomSeparator rightIcon="ladybug" leftIcon="ladybug">
-        {translate("demoListItem.useCase.icons.leftRightIcons")}
+        {translate("demoListItem:useCase.icons.leftRightIcons")}
       </ListItem>
     </DemoUseCase>,
 
     <DemoUseCase
-      name="demoListItem.useCase.customLeftRight.name"
-      description="demoListItem.useCase.customLeftRight.description"
+      name="demoListItem:useCase.customLeftRight.name"
+      description="demoListItem:useCase.customLeftRight.description"
     >
       <ListItem
         topSeparator
@@ -112,7 +112,7 @@ export const DemoListItem: Demo = {
           </View>
         }
       >
-        {translate("demoListItem.useCase.customLeftRight.customLeft")}
+        {translate("demoListItem:useCase.customLeftRight.customLeft")}
       </ListItem>
 
       <ListItem
@@ -126,33 +126,33 @@ export const DemoListItem: Demo = {
           </View>
         }
       >
-        {translate("demoListItem.useCase.customLeftRight.customRight")}
+        {translate("demoListItem:useCase.customLeftRight.customRight")}
       </ListItem>
     </DemoUseCase>,
 
     <DemoUseCase
-      name="demoListItem.useCase.passingContent.name"
-      description="demoListItem.useCase.passingContent.description"
+      name="demoListItem:useCase.passingContent.name"
+      description="demoListItem:useCase.passingContent.description"
     >
-      <ListItem topSeparator text={translate("demoListItem.useCase.passingContent.children")} />
-      <ListItem topSeparator tx="demoShowroomScreen.demoViaTxProp" />
-      <ListItem topSeparator>{translate("demoListItem.useCase.passingContent.children")}</ListItem>
+      <ListItem topSeparator text={translate("demoListItem:useCase.passingContent.children")} />
+      <ListItem topSeparator tx="demoShowroomScreen:demoViaTxProp" />
+      <ListItem topSeparator>{translate("demoListItem:useCase.passingContent.children")}</ListItem>
       <ListItem topSeparator bottomSeparator>
         <Text>
           <Text preset="bold">
-            {translate("demoListItem.useCase.passingContent.nestedChildren1")}
+            {translate("demoListItem:useCase.passingContent.nestedChildren1")}
           </Text>
           {` `}
           <Text preset="default">
-            {translate("demoListItem.useCase.passingContent.nestedChildren2")}
+            {translate("demoListItem:useCase.passingContent.nestedChildren2")}
           </Text>
         </Text>
       </ListItem>
     </DemoUseCase>,
 
     <DemoUseCase
-      name="demoListItem.useCase.listIntegration.name"
-      description="demoListItem.useCase.listIntegration.description"
+      name="demoListItem:useCase.listIntegration.name"
+      description="demoListItem:useCase.listIntegration.description"
     >
       <View style={themed($listStyle)}>
         <ListView<string>
@@ -171,11 +171,11 @@ export const DemoListItem: Demo = {
     </DemoUseCase>,
 
     <DemoUseCase
-      name="demoListItem.useCase.styling.name"
-      description="demoListItem.useCase.styling.description"
+      name="demoListItem:useCase.styling.name"
+      description="demoListItem:useCase.styling.description"
     >
       <ListItem topSeparator textStyle={themed($customTextStyle)}>
-        {translate("demoListItem.useCase.styling.styledText")}
+        {translate("demoListItem:useCase.styling.styledText")}
       </ListItem>
 
       <ListItem
@@ -183,7 +183,7 @@ export const DemoListItem: Demo = {
         textStyle={{ color: theme.colors.palette.neutral100 }}
         style={themed($customTouchableStyle)}
       >
-        {translate("demoListItem.useCase.styling.styledText")}
+        {translate("demoListItem:useCase.styling.styledText")}
       </ListItem>
 
       <ListItem
@@ -192,7 +192,7 @@ export const DemoListItem: Demo = {
         style={themed($customTouchableStyle)}
         containerStyle={themed($customContainerStyle)}
       >
-        {translate("demoListItem.useCase.styling.styledContainer")}
+        {translate("demoListItem:useCase.styling.styledContainer")}
       </ListItem>
       <ListItem
         topSeparator
@@ -204,7 +204,7 @@ export const DemoListItem: Demo = {
         rightIconColor={theme.colors.palette.neutral100}
         leftIconColor={theme.colors.palette.neutral100}
       >
-        {translate("demoListItem.useCase.styling.tintedIcons")}
+        {translate("demoListItem:useCase.styling.tintedIcons")}
       </ListItem>
     </DemoUseCase>,
   ],
diff --git a/boilerplate/app/screens/DemoShowroomScreen/demos/DemoText.tsx b/boilerplate/app/screens/DemoShowroomScreen/demos/DemoText.tsx
index be65e15f9..12be402be 100644
--- a/boilerplate/app/screens/DemoShowroomScreen/demos/DemoText.tsx
+++ b/boilerplate/app/screens/DemoShowroomScreen/demos/DemoText.tsx
@@ -7,113 +7,113 @@ import { translate } from "@/i18n"
 
 export const DemoText: Demo = {
   name: "Text",
-  description: "demoText.description",
+  description: "demoText:description",
   data: ({ theme }) => [
     <DemoUseCase
-      name="demoText.useCase.presets.name"
-      description="demoText.useCase.presets.description"
+      name="demoText:useCase.presets.name"
+      description="demoText:useCase.presets.description"
     >
-      <Text>{translate("demoText.useCase.presets.default")}</Text>
+      <Text>{translate("demoText:useCase.presets.default")}</Text>
 
       <DemoDivider />
 
-      <Text preset="bold">{translate("demoText.useCase.presets.bold")}</Text>
+      <Text preset="bold">{translate("demoText:useCase.presets.bold")}</Text>
 
       <DemoDivider />
 
-      <Text preset="subheading">{translate("demoText.useCase.presets.subheading")}</Text>
+      <Text preset="subheading">{translate("demoText:useCase.presets.subheading")}</Text>
 
       <DemoDivider />
 
-      <Text preset="heading">{translate("demoText.useCase.presets.heading")}</Text>
+      <Text preset="heading">{translate("demoText:useCase.presets.heading")}</Text>
     </DemoUseCase>,
 
     <DemoUseCase
-      name="demoText.useCase.sizes.name"
-      description="demoText.useCase.sizes.description"
+      name="demoText:useCase.sizes.name"
+      description="demoText:useCase.sizes.description"
     >
-      <Text size="xs">{translate("demoText.useCase.sizes.xs")}</Text>
+      <Text size="xs">{translate("demoText:useCase.sizes.xs")}</Text>
 
       <DemoDivider />
 
-      <Text size="sm">{translate("demoText.useCase.sizes.sm")}</Text>
+      <Text size="sm">{translate("demoText:useCase.sizes.sm")}</Text>
 
       <DemoDivider />
 
-      <Text size="md">{translate("demoText.useCase.sizes.md")}</Text>
+      <Text size="md">{translate("demoText:useCase.sizes.md")}</Text>
 
       <DemoDivider />
 
-      <Text size="lg">{translate("demoText.useCase.sizes.lg")}</Text>
+      <Text size="lg">{translate("demoText:useCase.sizes.lg")}</Text>
 
       <DemoDivider />
 
-      <Text size="xl">{translate("demoText.useCase.sizes.xl")}</Text>
+      <Text size="xl">{translate("demoText:useCase.sizes.xl")}</Text>
 
       <DemoDivider />
 
-      <Text size="xxl">{translate("demoText.useCase.sizes.xxl")}</Text>
+      <Text size="xxl">{translate("demoText:useCase.sizes.xxl")}</Text>
     </DemoUseCase>,
 
     <DemoUseCase
-      name="demoText.useCase.weights.name"
-      description="demoText.useCase.weights.description"
+      name="demoText:useCase.weights.name"
+      description="demoText:useCase.weights.description"
     >
-      <Text weight="light">{translate("demoText.useCase.weights.light")}</Text>
+      <Text weight="light">{translate("demoText:useCase.weights.light")}</Text>
 
       <DemoDivider />
 
-      <Text weight="normal">{translate("demoText.useCase.weights.normal")}</Text>
+      <Text weight="normal">{translate("demoText:useCase.weights.normal")}</Text>
 
       <DemoDivider />
 
-      <Text weight="medium">{translate("demoText.useCase.weights.medium")}</Text>
+      <Text weight="medium">{translate("demoText:useCase.weights.medium")}</Text>
 
       <DemoDivider />
 
-      <Text weight="semiBold">{translate("demoText.useCase.weights.semibold")}</Text>
+      <Text weight="semiBold">{translate("demoText:useCase.weights.semibold")}</Text>
 
       <DemoDivider />
 
-      <Text weight="bold">{translate("demoText.useCase.weights.bold")}</Text>
+      <Text weight="bold">{translate("demoText:useCase.weights.bold")}</Text>
     </DemoUseCase>,
 
     <DemoUseCase
-      name="demoText.useCase.passingContent.name"
-      description="demoText.useCase.passingContent.description"
+      name="demoText:useCase.passingContent.name"
+      description="demoText:useCase.passingContent.description"
     >
-      <Text text={translate("demoText.useCase.passingContent.viaText")} />
+      <Text text={translate("demoText:useCase.passingContent.viaText")} />
 
       <DemoDivider />
 
       <Text>
-        <Text tx="demoText.useCase.passingContent.viaTx" />
-        <Text tx="demoShowroomScreen.lorem2Sentences" />
+        <Text tx="demoText:useCase.passingContent.viaTx" />
+        <Text tx="demoShowroomScreen:lorem2Sentences" />
       </Text>
 
       <DemoDivider />
 
-      <Text>{translate("demoText.useCase.passingContent.children")}</Text>
+      <Text>{translate("demoText:useCase.passingContent.children")}</Text>
 
       <DemoDivider />
 
       <Text>
-        <Text>{translate("demoText.useCase.passingContent.nestedChildren")}</Text>
-        <Text preset="bold">{translate("demoText.useCase.passingContent.nestedChildren2")}</Text>
+        <Text>{translate("demoText:useCase.passingContent.nestedChildren")}</Text>
+        <Text preset="bold">{translate("demoText:useCase.passingContent.nestedChildren2")}</Text>
         {` `}
-        <Text preset="default">{translate("demoText.useCase.passingContent.nestedChildren3")}</Text>
+        <Text preset="default">{translate("demoText:useCase.passingContent.nestedChildren3")}</Text>
         {` `}
-        <Text preset="bold"> {translate("demoText.useCase.passingContent.nestedChildren4")}</Text>
+        <Text preset="bold"> {translate("demoText:useCase.passingContent.nestedChildren4")}</Text>
       </Text>
     </DemoUseCase>,
 
     <DemoUseCase
-      name="demoText.useCase.styling.name"
-      description="demoText.useCase.styling.description"
+      name="demoText:useCase.styling.name"
+      description="demoText:useCase.styling.description"
     >
       <Text>
         <Text style={{ color: theme.colors.error }}>
-          {translate("demoText.useCase.styling.text")}
+          {translate("demoText:useCase.styling.text")}
         </Text>
         {` `}
         <Text
@@ -122,7 +122,7 @@ export const DemoText: Demo = {
             backgroundColor: theme.colors.error,
           }}
         >
-          {translate("demoText.useCase.styling.text2")}
+          {translate("demoText:useCase.styling.text2")}
         </Text>
         {` `}
         <Text
@@ -133,7 +133,7 @@ export const DemoText: Demo = {
             textDecorationColor: theme.colors.error,
           }}
         >
-          {translate("demoText.useCase.styling.text3")}
+          {translate("demoText:useCase.styling.text3")}
         </Text>
       </Text>
     </DemoUseCase>,
diff --git a/boilerplate/app/screens/DemoShowroomScreen/demos/DemoTextField.tsx b/boilerplate/app/screens/DemoShowroomScreen/demos/DemoTextField.tsx
index 8eb192e93..a396f4dd4 100644
--- a/boilerplate/app/screens/DemoShowroomScreen/demos/DemoTextField.tsx
+++ b/boilerplate/app/screens/DemoShowroomScreen/demos/DemoTextField.tsx
@@ -42,19 +42,19 @@ const $customRightAccessoryStyle: ThemedStyle<ViewStyle> = ({ colors }) => ({
 
 export const DemoTextField: Demo = {
   name: "TextField",
-  description: "demoTextField.description",
+  description: "demoTextField:description",
   data: ({ themed }) => [
     <DemoUseCase
-      name="demoTextField.useCase.statuses.name"
-      description="demoTextField.useCase.statuses.description"
+      name="demoTextField:useCase.statuses.name"
+      description="demoTextField:useCase.statuses.description"
     >
       <TextField
         value="Labore occaecat in id eu commodo aliquip occaecat veniam officia pariatur."
-        labelTx="demoTextField.useCase.statuses.noStatus.label"
+        labelTx="demoTextField:useCase.statuses.noStatus.label"
         labelTxOptions={{ prop: "label" }}
-        helperTx="demoTextField.useCase.statuses.noStatus.helper"
+        helperTx="demoTextField:useCase.statuses.noStatus.helper"
         helperTxOptions={{ prop: "helper" }}
-        placeholderTx="demoTextField.useCase.statuses.noStatus.placeholder"
+        placeholderTx="demoTextField:useCase.statuses.noStatus.placeholder"
         placeholderTxOptions={{ prop: "placeholder" }}
       />
 
@@ -63,11 +63,11 @@ export const DemoTextField: Demo = {
       <TextField
         status="error"
         value="Est Lorem duis sunt sunt duis proident minim elit dolore incididunt pariatur eiusmod anim cillum."
-        labelTx="demoTextField.useCase.statuses.error.label"
+        labelTx="demoTextField:useCase.statuses.error.label"
         labelTxOptions={{ prop: "label" }}
-        helperTx="demoTextField.useCase.statuses.error.helper"
+        helperTx="demoTextField:useCase.statuses.error.helper"
         helperTxOptions={{ prop: "helper" }}
-        placeholderTx="demoTextField.useCase.statuses.error.placeholder"
+        placeholderTx="demoTextField:useCase.statuses.error.placeholder"
         placeholderTxOptions={{ prop: "placeholder" }}
       />
 
@@ -76,36 +76,36 @@ export const DemoTextField: Demo = {
       <TextField
         status="disabled"
         value="Eu ipsum mollit non minim voluptate nulla fugiat aliqua ullamco aute consectetur nulla nulla amet."
-        labelTx="demoTextField.useCase.statuses.disabled.label"
+        labelTx="demoTextField:useCase.statuses.disabled.label"
         labelTxOptions={{ prop: "label" }}
-        helperTx="demoTextField.useCase.statuses.disabled.helper"
+        helperTx="demoTextField:useCase.statuses.disabled.helper"
         helperTxOptions={{ prop: "helper" }}
-        placeholderTx="demoTextField.useCase.statuses.disabled.placeholder"
+        placeholderTx="demoTextField:useCase.statuses.disabled.placeholder"
         placeholderTxOptions={{ prop: "placeholder" }}
       />
     </DemoUseCase>,
 
     <DemoUseCase
-      name="demoTextField.useCase.passingContent.name"
-      description="demoTextField.useCase.passingContent.description"
+      name="demoTextField:useCase.passingContent.name"
+      description="demoTextField:useCase.passingContent.description"
     >
       <TextField
-        labelTx="demoTextField.useCase.passingContent.viaLabel.labelTx"
+        labelTx="demoTextField:useCase.passingContent.viaLabel.labelTx"
         labelTxOptions={{ prop: "label" }}
-        helperTx="demoTextField.useCase.passingContent.viaLabel.helper"
+        helperTx="demoTextField:useCase.passingContent.viaLabel.helper"
         helperTxOptions={{ prop: "helper" }}
-        placeholderTx="demoTextField.useCase.passingContent.viaLabel.placeholder"
+        placeholderTx="demoTextField:useCase.passingContent.viaLabel.placeholder"
         placeholderTxOptions={{ prop: "placeholder" }}
       />
 
       <DemoDivider size={24} />
 
       <TextField
-        labelTx="demoShowroomScreen.demoViaSpecifiedTxProp"
+        labelTx="demoShowroomScreen:demoViaSpecifiedTxProp"
         labelTxOptions={{ prop: "label" }}
-        helperTx="demoShowroomScreen.demoViaSpecifiedTxProp"
+        helperTx="demoShowroomScreen:demoViaSpecifiedTxProp"
         helperTxOptions={{ prop: "helper" }}
-        placeholderTx="demoShowroomScreen.demoViaSpecifiedTxProp"
+        placeholderTx="demoShowroomScreen:demoViaSpecifiedTxProp"
         placeholderTxOptions={{ prop: "placeholder" }}
       />
 
@@ -113,9 +113,9 @@ export const DemoTextField: Demo = {
 
       <TextField
         value="Reprehenderit Lorem magna non consequat ullamco cupidatat."
-        labelTx="demoTextField.useCase.passingContent.rightAccessory.label"
+        labelTx="demoTextField:useCase.passingContent.rightAccessory.label"
         labelTxOptions={{ prop: "label" }}
-        helperTx="demoTextField.useCase.passingContent.rightAccessory.helper"
+        helperTx="demoTextField:useCase.passingContent.rightAccessory.helper"
         helperTxOptions={{ prop: "helper" }}
         RightAccessory={(props) => <Icon icon="ladybug" containerStyle={props.style} size={21} />}
       />
@@ -123,9 +123,9 @@ export const DemoTextField: Demo = {
       <DemoDivider size={24} />
 
       <TextField
-        labelTx="demoTextField.useCase.passingContent.leftAccessory.label"
+        labelTx="demoTextField:useCase.passingContent.leftAccessory.label"
         labelTxOptions={{ prop: "label" }}
-        helperTx="demoTextField.useCase.passingContent.leftAccessory.helper"
+        helperTx="demoTextField:useCase.passingContent.leftAccessory.helper"
         helperTxOptions={{ prop: "helper" }}
         value="Eiusmod exercitation mollit elit magna occaecat eiusmod Lorem minim veniam."
         LeftAccessory={(props) => <Icon icon="ladybug" containerStyle={props.style} size={21} />}
@@ -134,9 +134,9 @@ export const DemoTextField: Demo = {
       <DemoDivider size={24} />
 
       <TextField
-        labelTx="demoTextField.useCase.passingContent.supportsMultiline.label"
+        labelTx="demoTextField:useCase.passingContent.supportsMultiline.label"
         labelTxOptions={{ prop: "label" }}
-        helperTx="demoTextField.useCase.passingContent.supportsMultiline.helper"
+        helperTx="demoTextField:useCase.passingContent.supportsMultiline.helper"
         helperTxOptions={{ prop: "helper" }}
         value="Eiusmod exercitation mollit elit magna occaecat eiusmod Lorem minim veniam. Laborum Lorem velit velit minim irure ad in ut adipisicing consectetur."
         multiline
@@ -145,13 +145,13 @@ export const DemoTextField: Demo = {
     </DemoUseCase>,
 
     <DemoUseCase
-      name="demoTextField.useCase.styling.name"
-      description="demoTextField.useCase.styling.description"
+      name="demoTextField:useCase.styling.name"
+      description="demoTextField:useCase.styling.description"
     >
       <TextField
-        labelTx="demoTextField.useCase.styling.styleInput.label"
+        labelTx="demoTextField:useCase.styling.styleInput.label"
         labelTxOptions={{ prop: "label" }}
-        helperTx="demoTextField.useCase.styling.styleInput.helper"
+        helperTx="demoTextField:useCase.styling.styleInput.helper"
         helperTxOptions={{ prop: "helper" }}
         value="Laborum cupidatat aliquip sunt sunt voluptate sint sit proident sunt mollit exercitation ullamco ea elit."
         style={themed($customInputStyle)}
@@ -160,9 +160,9 @@ export const DemoTextField: Demo = {
       <DemoDivider size={24} />
 
       <TextField
-        labelTx="demoTextField.useCase.styling.styleInputWrapper.label"
+        labelTx="demoTextField:useCase.styling.styleInputWrapper.label"
         labelTxOptions={{ prop: "label" }}
-        helperTx="demoTextField.useCase.styling.styleInputWrapper.helper"
+        helperTx="demoTextField:useCase.styling.styleInputWrapper.helper"
         helperTxOptions={{ prop: "helper" }}
         value="Aute velit esse dolore pariatur exercitation irure nulla do sunt in duis mollit duis et."
         inputWrapperStyle={themed($customInputWrapperStyle)}
@@ -172,9 +172,9 @@ export const DemoTextField: Demo = {
       <DemoDivider size={24} />
 
       <TextField
-        labelTx="demoTextField.useCase.styling.styleContainer.label"
+        labelTx="demoTextField:useCase.styling.styleContainer.label"
         labelTxOptions={{ prop: "label" }}
-        helperTx="demoTextField.useCase.styling.styleContainer.helper"
+        helperTx="demoTextField:useCase.styling.styleContainer.helper"
         helperTxOptions={{ prop: "helper" }}
         value="Aliquip proident commodo adipisicing non adipisicing Lorem excepteur ullamco voluptate laborum."
         style={themed($customInputStyle)}
@@ -185,9 +185,9 @@ export const DemoTextField: Demo = {
       <DemoDivider size={24} />
 
       <TextField
-        labelTx="demoTextField.useCase.styling.styleLabel.label"
+        labelTx="demoTextField:useCase.styling.styleLabel.label"
         labelTxOptions={{ prop: "label" }}
-        helperTx="demoTextField.useCase.styling.styleLabel.helper"
+        helperTx="demoTextField:useCase.styling.styleLabel.helper"
         helperTxOptions={{ prop: "helper" }}
         value="Ex culpa in consectetur dolor irure velit."
         style={themed($customInputStyle)}
@@ -200,9 +200,9 @@ export const DemoTextField: Demo = {
       <DemoDivider size={24} />
 
       <TextField
-        labelTx="demoTextField.useCase.styling.styleAccessories.label"
+        labelTx="demoTextField:useCase.styling.styleAccessories.label"
         labelTxOptions={{ prop: "label" }}
-        helperTx="demoTextField.useCase.styling.styleAccessories.helper"
+        helperTx="demoTextField:useCase.styling.styleAccessories.helper"
         helperTxOptions={{ prop: "helper" }}
         value="Aute nisi dolore fugiat anim mollit nulla ex minim ipsum ex elit."
         style={themed($customInputWithAbsoluteAccessoriesStyle)}
diff --git a/boilerplate/app/screens/DemoShowroomScreen/demos/DemoToggle.tsx b/boilerplate/app/screens/DemoShowroomScreen/demos/DemoToggle.tsx
index 420ee9eb7..9b2961bf0 100644
--- a/boilerplate/app/screens/DemoShowroomScreen/demos/DemoToggle.tsx
+++ b/boilerplate/app/screens/DemoShowroomScreen/demos/DemoToggle.tsx
@@ -44,31 +44,31 @@ const $centeredText: ThemedStyle<TextStyle> = ({ spacing }) => ({
 
 export const DemoToggle: Demo = {
   name: "Toggle",
-  description: "demoToggle.description",
+  description: "demoToggle:description",
   data: ({ theme, themed }) => [
     <DemoUseCase
-      name="demoToggle.useCase.variants.name"
-      description="demoToggle.useCase.variants.description"
+      name="demoToggle:useCase.variants.name"
+      description="demoToggle:useCase.variants.description"
     >
       <ControlledCheckbox
-        labelTx="demoToggle.useCase.variants.checkbox.label"
-        helperTx="demoToggle.useCase.variants.checkbox.helper"
+        labelTx="demoToggle:useCase.variants.checkbox.label"
+        helperTx="demoToggle:useCase.variants.checkbox.helper"
       />
       <DemoDivider size={24} />
       <ControlledRadio
-        labelTx="demoToggle.useCase.variants.radio.label"
-        helperTx="demoToggle.useCase.variants.radio.helper"
+        labelTx="demoToggle:useCase.variants.radio.label"
+        helperTx="demoToggle:useCase.variants.radio.helper"
       />
       <DemoDivider size={24} />
       <ControlledSwitch
-        labelTx="demoToggle.useCase.variants.switch.label"
-        helperTx="demoToggle.useCase.variants.switch.helper"
+        labelTx="demoToggle:useCase.variants.switch.label"
+        helperTx="demoToggle:useCase.variants.switch.helper"
       />
     </DemoUseCase>,
 
     <DemoUseCase
-      name="demoToggle.useCase.statuses.name"
-      description="demoToggle.useCase.statuses.description"
+      name="demoToggle:useCase.statuses.name"
+      description="demoToggle:useCase.statuses.description"
       layout="row"
     >
       <ControlledCheckbox containerStyle={$centeredOneThirdCol} />
@@ -79,7 +79,7 @@ export const DemoToggle: Demo = {
       <ControlledRadio value containerStyle={$centeredOneThirdCol} />
       <ControlledSwitch value containerStyle={$centeredOneThirdCol} />
       <Text preset="formHelper" style={themed($centeredText)}>
-        {translate("demoToggle.useCase.statuses.noStatus")}
+        {translate("demoToggle:useCase.statuses.noStatus")}
       </Text>
 
       <DemoDivider size={24} style={{ width: "100%" }} />
@@ -92,7 +92,7 @@ export const DemoToggle: Demo = {
       <ControlledRadio value status="error" containerStyle={$centeredOneThirdCol} />
       <ControlledSwitch value status="error" containerStyle={$centeredOneThirdCol} />
       <Text preset="formHelper" style={themed($centeredText)}>
-        {translate("demoToggle.useCase.statuses.errorStatus")}
+        {translate("demoToggle:useCase.statuses.errorStatus")}
       </Text>
 
       <DemoDivider size={24} style={{ width: "100%" }} />
@@ -105,37 +105,37 @@ export const DemoToggle: Demo = {
       <ControlledRadio value status="disabled" containerStyle={$centeredOneThirdCol} />
       <ControlledSwitch value status="disabled" containerStyle={$centeredOneThirdCol} />
       <Text preset="formHelper" style={themed($centeredText)}>
-        {translate("demoToggle.useCase.statuses.disabledStatus")}
+        {translate("demoToggle:useCase.statuses.disabledStatus")}
       </Text>
     </DemoUseCase>,
 
     <DemoUseCase
-      name="demoToggle.useCase.passingContent.name"
-      description="demoToggle.useCase.passingContent.description"
+      name="demoToggle:useCase.passingContent.name"
+      description="demoToggle:useCase.passingContent.description"
     >
       <ControlledCheckbox
         value
-        labelTx="demoToggle.useCase.passingContent.useCase.checkBox.label"
-        helperTx="demoToggle.useCase.passingContent.useCase.checkBox.helper"
+        labelTx="demoToggle:useCase.passingContent.useCase.checkBox.label"
+        helperTx="demoToggle:useCase.passingContent.useCase.checkBox.helper"
       />
       <DemoDivider size={24} />
       <ControlledRadio
         value
-        labelTx="demoShowroomScreen.demoViaSpecifiedTxProp"
+        labelTx="demoShowroomScreen:demoViaSpecifiedTxProp"
         labelTxOptions={{ prop: "label" }}
-        helperTx="demoShowroomScreen.demoViaSpecifiedTxProp"
+        helperTx="demoShowroomScreen:demoViaSpecifiedTxProp"
         helperTxOptions={{ prop: "helper" }}
       />
       <DemoDivider size={24} />
       <ControlledCheckbox
         value
-        labelTx="demoToggle.useCase.passingContent.useCase.checkBoxMultiLine.helper"
+        labelTx="demoToggle:useCase.passingContent.useCase.checkBoxMultiLine.helper"
         editable={false}
       />
       <DemoDivider size={24} />
       <ControlledRadio
         value
-        labelTx="demoToggle.useCase.passingContent.useCase.radioChangeSides.helper"
+        labelTx="demoToggle:useCase.passingContent.useCase.radioChangeSides.helper"
         labelPosition="left"
       />
       <DemoDivider size={24} />
@@ -143,28 +143,28 @@ export const DemoToggle: Demo = {
         value
         status="error"
         icon="ladybug"
-        labelTx="demoToggle.useCase.passingContent.useCase.customCheckBox.label"
+        labelTx="demoToggle:useCase.passingContent.useCase.customCheckBox.label"
       />
       <DemoDivider size={24} />
       <ControlledSwitch
         value
         accessibilityMode="text"
-        labelTx="demoToggle.useCase.passingContent.useCase.switch.label"
+        labelTx="demoToggle:useCase.passingContent.useCase.switch.label"
         status="error"
-        helperTx="demoToggle.useCase.passingContent.useCase.switch.helper"
+        helperTx="demoToggle:useCase.passingContent.useCase.switch.helper"
       />
       <DemoDivider size={24} />
       <ControlledSwitch
         value
         labelPosition="left"
         accessibilityMode="icon"
-        labelTx="demoToggle.useCase.passingContent.useCase.switchAid.label"
+        labelTx="demoToggle:useCase.passingContent.useCase.switchAid.label"
       />
     </DemoUseCase>,
 
     <DemoUseCase
-      name="demoToggle.useCase.styling.name"
-      description="demoToggle.useCase.styling.description"
+      name="demoToggle:useCase.styling.name"
+      description="demoToggle:useCase.styling.description"
       layout="row"
     >
       <ControlledCheckbox
@@ -197,7 +197,7 @@ export const DemoToggle: Demo = {
         }}
       />
       <Text preset="formHelper" style={themed($centeredText)}>
-        {translate("demoToggle.useCase.styling.outerWrapper")}
+        {translate("demoToggle:useCase.styling.outerWrapper")}
       </Text>
 
       <DemoDivider style={{ width: "100%" }} />
@@ -246,7 +246,7 @@ export const DemoToggle: Demo = {
         }}
       />
       <Text preset="formHelper" style={themed($centeredText)}>
-        {translate("demoToggle.useCase.styling.innerWrapper")}
+        {translate("demoToggle:useCase.styling.innerWrapper")}
       </Text>
 
       <DemoDivider style={{ width: "100%" }} />
@@ -316,7 +316,7 @@ export const DemoToggle: Demo = {
       />
 
       <Text preset="formHelper" style={themed($centeredText)}>
-        {translate("demoToggle.useCase.styling.inputDetail")}
+        {translate("demoToggle:useCase.styling.inputDetail")}
       </Text>
 
       <DemoDivider size={32} style={{ width: "100%" }} />
@@ -324,7 +324,7 @@ export const DemoToggle: Demo = {
       <View style={{ width: "100%" }}>
         <ControlledRadio
           value
-          labelTx="demoToggle.useCase.styling.labelTx"
+          labelTx="demoToggle:useCase.styling.labelTx"
           LabelTextProps={{ size: "xs", weight: "bold" }}
           status="error"
           labelStyle={{
@@ -342,7 +342,7 @@ export const DemoToggle: Demo = {
           value
           labelPosition="left"
           containerStyle={{ padding: 10, backgroundColor: theme.colors.error }}
-          labelTx="demoToggle.useCase.styling.styleContainer"
+          labelTx="demoToggle:useCase.styling.styleContainer"
           status="error"
           labelStyle={{ color: theme.colors.palette.neutral100 }}
         />
diff --git a/boilerplate/app/screens/ErrorScreen/ErrorDetails.tsx b/boilerplate/app/screens/ErrorScreen/ErrorDetails.tsx
index 8a45dfd11..85fe45a89 100644
--- a/boilerplate/app/screens/ErrorScreen/ErrorDetails.tsx
+++ b/boilerplate/app/screens/ErrorScreen/ErrorDetails.tsx
@@ -25,8 +25,8 @@ export function ErrorDetails(props: ErrorDetailsProps) {
     >
       <View style={$topSection}>
         <Icon icon="ladybug" size={64} />
-        <Text style={themed($heading)} preset="subheading" tx="errorScreen.title" />
-        <Text tx="errorScreen.friendlySubtitle" />
+        <Text style={themed($heading)} preset="subheading" tx="errorScreen:title" />
+        <Text tx="errorScreen:friendlySubtitle" />
       </View>
 
       <ScrollView
@@ -45,7 +45,7 @@ export function ErrorDetails(props: ErrorDetailsProps) {
         preset="reversed"
         style={themed($resetButton)}
         onPress={props.onReset}
-        tx="errorScreen.reset"
+        tx="errorScreen:reset"
       />
     </Screen>
   )
diff --git a/boilerplate/app/screens/LoginScreen.tsx b/boilerplate/app/screens/LoginScreen.tsx
index bcac21fcd..ac82adca6 100644
--- a/boilerplate/app/screens/LoginScreen.tsx
+++ b/boilerplate/app/screens/LoginScreen.tsx
@@ -78,10 +78,10 @@ export const LoginScreen: FC<LoginScreenProps> = observer(function LoginScreen(_
       contentContainerStyle={themed($screenContentContainer)}
       safeAreaEdges={["top", "bottom"]}
     >
-      <Text testID="login-heading" tx="loginScreen.logIn" preset="heading" style={themed($logIn)} />
-      <Text tx="loginScreen.enterDetails" preset="subheading" style={themed($enterDetails)} />
+      <Text testID="login-heading" tx="loginScreen:logIn" preset="heading" style={themed($logIn)} />
+      <Text tx="loginScreen:enterDetails" preset="subheading" style={themed($enterDetails)} />
       {attemptsCount > 2 && (
-        <Text tx="loginScreen.hint" size="sm" weight="light" style={themed($hint)} />
+        <Text tx="loginScreen:hint" size="sm" weight="light" style={themed($hint)} />
       )}
 
       <TextField
@@ -92,8 +92,8 @@ export const LoginScreen: FC<LoginScreenProps> = observer(function LoginScreen(_
         autoComplete="email"
         autoCorrect={false}
         keyboardType="email-address"
-        labelTx="loginScreen.emailFieldLabel"
-        placeholderTx="loginScreen.emailFieldPlaceholder"
+        labelTx="loginScreen:emailFieldLabel"
+        placeholderTx="loginScreen:emailFieldPlaceholder"
         helper={error}
         status={error ? "error" : undefined}
         onSubmitEditing={() => authPasswordInput.current?.focus()}
@@ -108,15 +108,15 @@ export const LoginScreen: FC<LoginScreenProps> = observer(function LoginScreen(_
         autoComplete="password"
         autoCorrect={false}
         secureTextEntry={isAuthPasswordHidden}
-        labelTx="loginScreen.passwordFieldLabel"
-        placeholderTx="loginScreen.passwordFieldPlaceholder"
+        labelTx="loginScreen:passwordFieldLabel"
+        placeholderTx="loginScreen:passwordFieldPlaceholder"
         onSubmitEditing={login}
         RightAccessory={PasswordRightAccessory}
       />
 
       <Button
         testID="login-button"
-        tx="loginScreen.tapToLogIn"
+        tx="loginScreen:tapToLogIn"
         style={themed($tapButton)}
         preset="reversed"
         onPress={login}
diff --git a/boilerplate/app/screens/WelcomeScreen.tsx b/boilerplate/app/screens/WelcomeScreen.tsx
index a9c1de4a7..bbcd0f43b 100644
--- a/boilerplate/app/screens/WelcomeScreen.tsx
+++ b/boilerplate/app/screens/WelcomeScreen.tsx
@@ -38,7 +38,7 @@ export const WelcomeScreen: FC<WelcomeScreenProps> = observer(
 
     useHeader(
       {
-        rightTx: "common.logOut",
+        rightTx: "common:logOut",
         onRightPress: logout,
       },
       [logout],
@@ -54,10 +54,10 @@ export const WelcomeScreen: FC<WelcomeScreenProps> = observer(
           <Text
             testID="welcome-heading"
             style={themed($welcomeHeading)}
-            tx="welcomeScreen.readyForLaunch"
+            tx="welcomeScreen:readyForLaunch"
             preset="heading"
           />
-          <Text tx="welcomeScreen.exciting" preset="subheading" />
+          <Text tx="welcomeScreen:exciting" preset="subheading" />
           <Image
             style={$welcomeFace}
             source={welcomeFace}
@@ -67,12 +67,12 @@ export const WelcomeScreen: FC<WelcomeScreenProps> = observer(
         </View>
 
         <View style={themed([$bottomContainer, $bottomContainerInsets])}>
-          <Text tx="welcomeScreen.postscript" size="md" />
+          <Text tx="welcomeScreen:postscript" size="md" />
           {/* @demo remove-block-start */}
           <Button
             testID="next-screen-button"
             preset="reversed"
-            tx="welcomeScreen.letsGo"
+            tx="welcomeScreen:letsGo"
             onPress={goNext}
           />
           {/* @demo remove-block-end */}
diff --git a/boilerplate/app/utils/formatDate.ts b/boilerplate/app/utils/formatDate.ts
index 213cfd13b..be5b89b96 100644
--- a/boilerplate/app/utils/formatDate.ts
+++ b/boilerplate/app/utils/formatDate.ts
@@ -13,7 +13,7 @@ import { i18n } from "@/i18n"
 type Options = Parameters<typeof format>[2]
 
 const getLocale = (): Locale => {
-  const locale = i18n.locale.split("-")[0]
+  const locale = i18n.language.split("-")[0]
   return locale === "ar" ? ar : locale === "ko" ? ko : en
 }
 
diff --git a/boilerplate/package.json b/boilerplate/package.json
index 2e1cfaeb1..c92862875 100644
--- a/boilerplate/package.json
+++ b/boilerplate/package.json
@@ -49,12 +49,14 @@
     "expo-splash-screen": "~0.27.4",
     "expo-status-bar": "~1.12.1",
     "expo-system-ui": "~3.0.7",
-    "i18n-js": "^4.4.3",
+    "i18next": "^23.14.0",
+    "intl-pluralrules": "^2.0.1",
     "mobx": "6.10.2",
     "mobx-react-lite": "4.0.5",
     "mobx-state-tree": "5.3.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-i18next": "^15.0.1",
     "react-native": "0.74.5",
     "react-native-drawer-layout": "4.0.0-alpha.9",
     "react-native-gesture-handler": "~2.16.1",
@@ -70,7 +72,6 @@
     "@babel/preset-env": "^7.20.0",
     "@babel/runtime": "^7.20.0",
     "@testing-library/react-native": "^12.5.2",
-    "@types/i18n-js": "3.8.2",
     "@types/jest": "^29.2.1",
     "@types/react": "~18.2.14",
     "babel-jest": "^29.2.1",
@@ -99,8 +100,5 @@
   },
   "engines": {
     "node": "^18.18.0 || >=20.0.0"
-  },
-  "resolutions": {
-    "eslint-plugin-react": "7.35.2"
   }
 }
diff --git a/boilerplate/src/app/index.tsx b/boilerplate/src/app/index.tsx
index d4850deaf..12d57ca74 100644
--- a/boilerplate/src/app/index.tsx
+++ b/boilerplate/src/app/index.tsx
@@ -20,15 +20,15 @@ export default observer(function WelcomeScreen() {
         <Text
           testID="welcome-heading"
           style={$welcomeHeading}
-          tx="welcomeScreen.readyForLaunch"
+          tx="welcomeScreen:readyForLaunch"
           preset="heading"
         />
-        <Text tx="welcomeScreen.exciting" preset="subheading" />
+        <Text tx="welcomeScreen:exciting" preset="subheading" />
         <Image style={$welcomeFace} source={welcomeFace} resizeMode="contain" />
       </View>
 
       <View style={[$bottomContainer, $bottomContainerInsets]}>
-        <Text tx="welcomeScreen.postscript" size="md" />
+        <Text tx="welcomeScreen:postscript" size="md" />
       </View>
     </View>
   )
diff --git a/boilerplate/test/i18n.test.ts b/boilerplate/test/i18n.test.ts
index a9817c75e..acee7ec22 100644
--- a/boilerplate/test/i18n.test.ts
+++ b/boilerplate/test/i18n.test.ts
@@ -4,7 +4,7 @@ import { exec } from "child_process"
 // Use this array for keys that for whatever reason aren't greppable so they
 // don't hold your test suite hostage by always failing.
 const EXCEPTIONS: string[] = [
-  // "welcomeScreen.readyForLaunch",
+  // "welcomeScreen:readyForLaunch",
 ]
 
 function iterate(obj, stack, array) {
@@ -48,7 +48,9 @@ describe("i18n", () => {
     // grep "[T\|t]x=[{]\?\"\S*\"[}]\?\|translate(\"\S*\"" -ohr './app' | grep -o "\".*\""
     const command = `grep "[T\\|t]x=[{]\\?\\"\\S*\\"[}]\\?\\|translate(\\"\\S*\\"" -ohr './app' | grep -o "\\".*\\""`
     exec(command, (_, stdout) => {
-      const allTranslationsDefined = iterate(en, "", [])
+      const allTranslationsDefinedOld = iterate(en, "", [])
+      // Replace first instance of "." because of i18next namespace separator
+      const allTranslationsDefined = allTranslationsDefinedOld.map((key) => key.replace(".", ":"))
       const allTranslationsUsed = stdout.replace(/"/g, "").split("\n")
       allTranslationsUsed.splice(-1, 1)
 
diff --git a/boilerplate/test/setup.ts b/boilerplate/test/setup.ts
index c1a6b6a5c..c2f830c3e 100644
--- a/boilerplate/test/setup.ts
+++ b/boilerplate/test/setup.ts
@@ -23,12 +23,15 @@ jest.doMock("react-native", () => {
   )
 })
 
-jest.mock("i18n-js", () => ({
-  currentLocale: () => "en",
+jest.mock('i18next', () => ({
+  currentLocale: "en",
   t: (key: string, params: Record<string, string>) => {
+     return `${key} ${JSON.stringify(params)}`
+  },
+  translate: (key: string, params: Record<string, string>) => {
     return `${key} ${JSON.stringify(params)}`
   },
-}))
+}));
 
 jest.mock("expo-localization", () => ({
   ...jest.requireActual("expo-localization"),
@@ -37,7 +40,8 @@ jest.mock("expo-localization", () => ({
 
 jest.mock("../app/i18n/i18n.ts", () => ({
   i18n: {
-    locale: "en",
+    isInitialized: true,
+    language: "en",
     t: (key: string, params: Record<string, string>) => {
       return `${key} ${JSON.stringify(params)}`
     },
diff --git a/boilerplate/tsconfig.json b/boilerplate/tsconfig.json
index e6c483c80..984821d4f 100644
--- a/boilerplate/tsconfig.json
+++ b/boilerplate/tsconfig.json
@@ -12,7 +12,10 @@
     "noImplicitThis": true,
     "sourceMap": true,
     "target": "esnext",
-    "lib": ["esnext", "dom"],
+    "lib": [
+      "esnext",
+      "dom"
+    ],
     "skipLibCheck": true,
     "resolveJsonModule": true,
     "baseUrl": ".",
@@ -20,17 +23,23 @@
       "@/*": ["./app/*"],
       "assets/*": ["./assets/*"]
     },
-    "typeRoots": ["./node_modules/@types", "./types"],
+    "typeRoots": [
+      "./node_modules/@types",
+      "./types"
+    ]
   },
   "extends": "expo/tsconfig.base",
   "ts-node": {
     "compilerOptions": {
-      // compilerOptions specified here will override those declared above,
-      // but *only* in ts-node.  Useful if you want ts-node and tsc to use
-      // different options with a single tsconfig.json.
       "module": "commonjs"
     }
   },
-  "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"],
-  "exclude": ["node_modules", "test/**/*"]
+  "include": [
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules",
+    "test/**/*"
+  ]
 }
diff --git a/docs/boilerplate/app/components/Button.md b/docs/boilerplate/app/components/Button.md
index 7f8507225..e5f50ff55 100644
--- a/docs/boilerplate/app/components/Button.md
+++ b/docs/boilerplate/app/components/Button.md
@@ -11,7 +11,7 @@ The `Button` component is a wrapper around the [`Pressable`](https://reactnative
 ```tsx
 <Button
   text="Click It"
-  tx="button.clickIt"
+  tx="button:clickIt"
   preset="default"
   onPress={() => Alert.alert("pressed")}
   style={[{ paddingVertical: 100 }, { borderRadius: 0 }]}
@@ -38,7 +38,7 @@ The `text` prop is required if `tx` or `children` are not provided. This is the
 The `tx` prop is required if `text` or `children` are not provided. This is the translation key to be used to translate the text.
 
 ```tsx
-<Button tx="button.clickMe" />
+<Button tx="button:clickMe" />
 ```
 
 ### `children`
@@ -56,7 +56,7 @@ The `children` prop is required if no `tx` or `text` prop is passed. This is the
 The `preset` prop is optional. This is the preset style of the button. It can be one of the following built-in options: `default`, `filled`, `reversed`
 
 ```tsx
-<Button preset="default" tx="button.clickMe" />
+<Button preset="default" tx="button:clickMe" />
 ```
 
 To make a custom preset, add a key to the `$viewPresets`, `$textPresets`, `$pressedViewPresets` and `$pressedTextPresets` objects in `app/components/Button.tsx` and then pass the name of the preset to the `preset` prop.
diff --git a/docs/boilerplate/app/components/Card.md b/docs/boilerplate/app/components/Card.md
index dbacb2f3a..36939b5b9 100644
--- a/docs/boilerplate/app/components/Card.md
+++ b/docs/boilerplate/app/components/Card.md
@@ -91,7 +91,7 @@ The `heading` prop is used to set the heading text of the card.
 The `headingTx` prop is used to set the heading text of the card using a translation key.
 
 ```tsx
-<Card headingTx="card.heading" content="Card Content" footer="Card Footer" />
+<Card headingTx="card:heading" content="Card Content" footer="Card Footer" />
 ```
 
 ### `headingTxOptions`
@@ -100,7 +100,7 @@ The `headingTxOptions` prop is used to set the options for the translation key u
 
 ```tsx
 <Card
-  headingTx="card.heading"
+  headingTx="card:heading"
   headingTxOptions={{ count: 2 }}
   content="Card Content"
   footer="Card Footer"
@@ -158,7 +158,7 @@ The `content` prop is used to set the content text of the card.
 The `contentTx` prop is used to set the content text of the card using a translation key.
 
 ```tsx
-<Card heading="Card Heading" contentTx="card.content" footer="Card Footer" />
+<Card heading="Card Heading" contentTx="card:content" footer="Card Footer" />
 ```
 
 ### `contentTxOptions`
@@ -168,7 +168,7 @@ The `contentTxOptions` prop is used to set the options for the translation key u
 ```tsx
 <Card
   heading="Card Heading"
-  contentTx="card.content"
+  contentTx="card:content"
   contentTxOptions={{ count: 2 }}
   footer="Card Footer"
 />
@@ -225,7 +225,7 @@ The `footer` prop is used to set the footer text of the card.
 The `footerTx` prop is used to set the footer text of the card using a translation key.
 
 ```tsx
-<Card heading="Card Heading" content="Card Content" footerTx="card.footer" />
+<Card heading="Card Heading" content="Card Content" footerTx="card:footer" />
 ```
 
 ### `footerTxOptions`
@@ -236,7 +236,7 @@ The `footerTxOptions` prop is used to set the options for the translation key us
 <Card
   heading="Card Heading"
   content="Card Content"
-  footerTx="card.footer"
+  footerTx="card:footer"
   footerTxOptions={{ count: 2 }}
 />
 ```
diff --git a/docs/boilerplate/app/components/Components.md b/docs/boilerplate/app/components/Components.md
index 86874664f..fd48bcf82 100644
--- a/docs/boilerplate/app/components/Components.md
+++ b/docs/boilerplate/app/components/Components.md
@@ -31,7 +31,7 @@ This is a component that renders a [`TouchableOpacity`](https://reactnative.dev/
 ```tsx
 <Button
   text="Click It"
-  tx="button.clickIt"
+  tx="button:clickIt"
   preset="primary"
   onPress={() => Alert.alert("pressed")}
   style={[{ paddingVertical: 100 }, { borderRadius: 0 }]}
@@ -80,7 +80,7 @@ The `Checkbox` component is useful for displaying a user's choice for a boolean
   value={value}
   icon="check"
   onValueChange={setValue}
-  labelTx="signup.rememberMe"
+  labelTx="signup:rememberMe"
   labelStyle={{ color: "#a511dc" }}
   containerStyle={{ backgroundColor: "#fff" }}
 />
@@ -118,7 +118,7 @@ The `Header` component is a component that will appear at the top of your screen
 
 ```tsx
 <Header
-  headerTx="header.title"
+  headerTx="header:title"
   headerText="Header Title"
   leftIcon="back"
   rightIcon="bullet"
@@ -156,7 +156,7 @@ The `Radio` component is useful for displaying a user's choice for a boolean val
 <Radio
   value={value}
   onValueChange={setValue}
-  labelTx="signup.rememberMe"
+  labelTx="signup:rememberMe"
   labelStyle={{ color: "#a511dc" }}
   containerStyle={{ backgroundColor: "#fff" }}
 />
@@ -186,7 +186,7 @@ The `Switch` component is useful for displaying a user's choice for a boolean va
   value={value}
   accessibilityMode="icon"
   onValueChange={setValue}
-  labelTx="signup.rememberMe"
+  labelTx="signup:rememberMe"
   labelStyle={{ color: "#a511dc" }}
   containerStyle={{ backgroundColor: "#fff" }}
 />
@@ -201,7 +201,7 @@ This is an enhanced version of the built-in React Native Text component. It adds
 ```tsx
 <Text
   preset="header"
-  tx="welcome.header"
+  tx="welcome:header"
   txOptions={{
     name: rootStore.currentUser.name,
   }}
@@ -221,8 +221,8 @@ const inputRef = useRef()
 <TextField
   value={input}
   onChangeText={setInput}
-  labelTx="signup.name"
-  placeholderTx="signup.nameplaceholder"
+  labelTx="signup:name"
+  placeholderTx="signup:nameplaceholder"
   style={$header}
   inputStyle={$inputStyle}
   preset="default"
diff --git a/docs/boilerplate/app/components/EmptyState.md b/docs/boilerplate/app/components/EmptyState.md
index 6f4c23d65..ebac35217 100644
--- a/docs/boilerplate/app/components/EmptyState.md
+++ b/docs/boilerplate/app/components/EmptyState.md
@@ -99,7 +99,7 @@ The `headingTx` prop is used to set the heading text of the EmptyState using a t
 
 ```tsx
 <EmptyState
-  headingTx="EmptyState.heading"
+  headingTx="EmptyState:heading"
   content="EmptyState Content"
   button="EmptyState Button"
 />
@@ -111,7 +111,7 @@ The `headingTxOptions` prop is used to set the options for the translation key u
 
 ```tsx
 <EmptyState
-  headingTx="EmptyState.heading"
+  headingTx="EmptyState:heading"
   headingTxOptions={{ count: 2 }}
   content="EmptyState Content"
   button="EmptyState Button"
@@ -159,7 +159,7 @@ The `contentTx` prop is used to set the content text of the EmptyState using a t
 ```tsx
 <EmptyState
   heading="EmptyState Heading"
-  contentTx="EmptyState.content"
+  contentTx="EmptyState:content"
   button="EmptyState Button"
 />
 ```
@@ -171,7 +171,7 @@ The `contentTxOptions` prop is used to set the options for the translation key u
 ```tsx
 <EmptyState
   heading="EmptyState Heading"
-  contentTx="EmptyState.content"
+  contentTx="EmptyState:content"
   contentTxOptions={{ count: 2 }}
   button="EmptyState Button"
 />
@@ -219,7 +219,7 @@ The `buttonTx` prop is used to set the button text of the EmptyState using a tra
 <EmptyState
   heading="EmptyState Heading"
   content="EmptyState Content"
-  buttonTx="EmptyState.button"
+  buttonTx="EmptyState:button"
 />
 ```
 
@@ -231,7 +231,7 @@ The `buttonTxOptions` prop is used to set the options for the translation key us
 <EmptyState
   heading="EmptyState Heading"
   content="EmptyState Content"
-  buttonTx="EmptyState.button"
+  buttonTx="EmptyState:button"
   buttonTxOptions={{ count: 2 }}
 />
 ```
diff --git a/docs/boilerplate/app/components/Header.md b/docs/boilerplate/app/components/Header.md
index d09c0cfc5..cf6372c32 100644
--- a/docs/boilerplate/app/components/Header.md
+++ b/docs/boilerplate/app/components/Header.md
@@ -10,7 +10,7 @@ The `Header` component is a component that will appear at the top of your screen
 
 ```tsx
 <Header
-  titleTx="header.title"
+  titleTx="header:title"
   title="Header Title"
   leftIcon="back"
   rightIcon="bullet"
@@ -84,7 +84,7 @@ The `title` is an optional prop that is used to set the header title. If this is
 The `titleTx` is an optional prop that is used to lookup the translation for the header title. If this is not set, the `title` prop must be present to set the header title. If both are set, the `title` value will be used.
 
 ```tsx
-<Header titleTx="header.title" leftIcon="back" onLeftPress={() => navigation.goBack()} />
+<Header titleTx="header:title" leftIcon="back" onLeftPress={() => navigation.goBack()} />
 ```
 
 ### `titleTxOptions`
@@ -93,7 +93,7 @@ The `titleTxOptions` is an optional prop that is used to pass props to the trans
 
 ```tsx
 <Header
-  titleTx="header.title"
+  titleTx="header:title"
   titleTxOptions={{ name: "John" }}
   leftIcon="back"
   onLeftPress={() => navigation.goBack()}
@@ -105,7 +105,7 @@ The `titleTxOptions` is an optional prop that is used to pass props to the trans
 The `leftIcon` is an optional prop that is used to set the icon for the left navigation button. Options are 'back', 'bullet', and 'bug'. Custom icons can be created by using the [`Icon` component](./Icon.md#custom-icons). Once you create a custom icon, just pass the string name of the icon to the `leftIcon` prop.
 
 ```tsx
-<Header titleTx="header.title" leftIcon="back" onLeftPress={() => navigation.goBack()} />
+<Header titleTx="header:title" leftIcon="back" onLeftPress={() => navigation.goBack()} />
 ```
 
 ### `leftIconColor`
@@ -114,7 +114,7 @@ The `leftIconColor` is an optional prop that is used to set the tint color of th
 
 ```tsx
 <Header
-  titleTx="header.title"
+  titleTx="header:title"
   leftIcon="back"
   leftIconColor="white"
   onLeftPress={() => navigation.goBack()}
@@ -126,7 +126,7 @@ The `leftIconColor` is an optional prop that is used to set the tint color of th
 The `leftText` is an optional prop that is used to set the text for the left navigation button. Overrides the `leftIcon` prop.
 
 ```tsx
-<Header titleTx="header.title" leftText="Back" onLeftPress={() => navigation.goBack()} />
+<Header titleTx="header:title" leftText="Back" onLeftPress={() => navigation.goBack()} />
 ```
 
 ### `leftTx`
@@ -134,7 +134,7 @@ The `leftText` is an optional prop that is used to set the text for the left nav
 The `leftTx` is an optional prop that is used to lookup the translation for the left navigation button. Overrides the `leftIcon` and `leftText` prop`.
 
 ```tsx
-<Header titleTx="header.title" leftTx="header.back" onLeftPress={() => navigation.goBack()} />
+<Header titleTx="header:title" leftTx="header:back" onLeftPress={() => navigation.goBack()} />
 ```
 
 ### `leftTxOptions`
@@ -143,8 +143,8 @@ The `leftTxOptions` is an optional prop that is used to pass props to the transl
 
 ```tsx
 <Header
-  titleTx="header.title"
-  leftTx="header.back"
+  titleTx="header:title"
+  leftTx="header:back"
   leftTxOptions={{ name: "John" }}
   onLeftPress={() => navigation.goBack()}
 />
@@ -155,7 +155,7 @@ The `leftTxOptions` is an optional prop that is used to pass props to the transl
 The `LeftActionComponent` is an optional `ReactElement` prop that is used to set a custom component for the left navigation button. Overrides the `leftIcon`, `leftText`, `leftTx`, and `onLeftText` props (since the passed component is completely customizable).
 
 ```tsx
-<Header titleTx="header.title" LeftActionComponent={<Text>Back</Text>} />
+<Header titleTx="header:title" LeftActionComponent={<Text>Back</Text>} />
 ```
 
 ### `onLeftPress`
@@ -163,7 +163,7 @@ The `LeftActionComponent` is an optional `ReactElement` prop that is used to set
 The `onLeftPress` is an optional prop that is used to set the function to be called when the left navigation button is pressed.
 
 ```tsx
-<Header titleTx="header.title" leftIcon="back" onLeftPress={() => navigation.goBack()} />
+<Header titleTx="header:title" leftIcon="back" onLeftPress={() => navigation.goBack()} />
 ```
 
 ### `rightIcon`
@@ -171,7 +171,7 @@ The `onLeftPress` is an optional prop that is used to set the function to be cal
 The `rightIcon` is an optional prop that is used to set the icon for the right navigation button. Custom icons can be created by using the [`Icon` component](./Icon.md#custom-icons). Once you create a custom icon, just pass the string name of the icon to the `rightIcon` prop.
 
 ```tsx
-<Header titleTx="header.title" rightIcon="back" onRightPress={() => navigation.goBack()} />
+<Header titleTx="header:title" rightIcon="back" onRightPress={() => navigation.goBack()} />
 ```
 
 ### `rightIconColor`
@@ -180,7 +180,7 @@ The `rightIconColor` is an optional prop that is used to set the tint color of t
 
 ```tsx
 <Header
-  titleTx="header.title"
+  titleTx="header:title"
   rightIcon="back"
   onRightPress={() => navigation.goBack()}
   rightIconColor="white"
@@ -192,7 +192,7 @@ The `rightIconColor` is an optional prop that is used to set the tint color of t
 The `rightText` is an optional prop that is used to set the text for the right navigation button. Overrides the `rightIcon` prop.
 
 ```tsx
-<Header titleTx="header.title" rightText="Back" onRightPress={() => navigation.goBack()} />
+<Header titleTx="header:title" rightText="Back" onRightPress={() => navigation.goBack()} />
 ```
 
 ### `rightTx`
@@ -200,7 +200,7 @@ The `rightText` is an optional prop that is used to set the text for the right n
 The `rightTx` is an optional prop that is used to lookup the translation for the right navigation button. Overrides the `rightIcon` and `rightText` prop`.
 
 ```tsx
-<Header titleTx="header.title" rightTx="header.back" onRightPress={() => navigation.goBack()} />
+<Header titleTx="header:title" rightTx="header:back" onRightPress={() => navigation.goBack()} />
 ```
 
 ### `rightTxOptions`
@@ -209,8 +209,8 @@ The `rightTxOptions` is an optional prop that is used to pass props to the trans
 
 ```tsx
 <Header
-  titleTx="header.title"
-  rightTx="header.back"
+  titleTx="header:title"
+  rightTx="header:back"
   rightTxOptions={{ name: "John" }}
   onRightPress={() => navigation.goBack()}
 />
@@ -221,7 +221,7 @@ The `rightTxOptions` is an optional prop that is used to pass props to the trans
 The `RightActionComponent` is an optional `ReactElement` prop that is used to set a custom component for the right navigation button. Overrides the `rightIcon`, `rightText`, `rightTx`, and `onRightPress` props (since the right action component can customize all that).
 
 ```tsx
-<Header titleTx="header.title" RightActionComponent={<Text>Back</Text>} />
+<Header titleTx="header:title" RightActionComponent={<Text>Back</Text>} />
 ```
 
 ### `onRightPress`
@@ -229,7 +229,7 @@ The `RightActionComponent` is an optional `ReactElement` prop that is used to se
 The `onRightPress` is an optional prop that is used to set the function to be called when the right navigation button is pressed.
 
 ```tsx
-<Header titleTx="header.title" rightIcon="back" onRightPress={() => navigation.goBack()} />
+<Header titleTx="header:title" rightIcon="back" onRightPress={() => navigation.goBack()} />
 ```
 
 ### `safeAreaEdges`
@@ -237,7 +237,7 @@ The `onRightPress` is an optional prop that is used to set the function to be ca
 The `safeAreaEdges` optional prop can be used to override the default safe area edges. By default, the header will use the `top` safe area edge. If you want to not account for the safe area edges, you can pass in `[]` to the `safeAreaEdges` prop.
 
 ```tsx
-<Header titleTx="header.title" safeAreaEdges={[]} />
+<Header titleTx="header:title" safeAreaEdges={[]} />
 ```
 
 ## Usage
diff --git a/docs/boilerplate/app/components/ListItem.md b/docs/boilerplate/app/components/ListItem.md
index d8505383b..7cecc3800 100644
--- a/docs/boilerplate/app/components/ListItem.md
+++ b/docs/boilerplate/app/components/ListItem.md
@@ -45,7 +45,7 @@ The `text` prop is used to display a simple piece of text inside the `ListItem`
 The `tx` prop is used to display a simple piece of text inside the `ListItem` component. It is used to display a localized string.
 
 ```tsx
-<ListItem tx="example.helloWorld" />
+<ListItem tx="example:helloWorld" />
 ```
 
 ### `children`
@@ -63,7 +63,7 @@ The `children` prop is used to display components inside the `ListItem` componen
 The `txOptions` prop is used to pass options to the `tx` prop. It is used to display a localized string.
 
 ```tsx
-<ListItem tx="example.helloWorld" txOptions={{ name: "John" }} />
+<ListItem tx="example:helloWorld" txOptions={{ name: "John" }} />
 ```
 
 ### `textStyle`
diff --git a/docs/boilerplate/app/components/Text.md b/docs/boilerplate/app/components/Text.md
index efd00c60d..41761b5ae 100644
--- a/docs/boilerplate/app/components/Text.md
+++ b/docs/boilerplate/app/components/Text.md
@@ -22,17 +22,17 @@ The `text` optional prop is the text of the component. We encourage you to not u
 
 ### `tx`
 
-The `tx` optional prop is the string key used to look up the translated text for the user's locale. Ignite uses [`i18n-js`](http://i18njs.com/) for internationalization.
+The `tx` optional prop is the string key used to look up the translated text for the user's locale. Ignite uses [`i18next`](https://www.i18next.com/) for internationalization.
 
 ````tsx
 
 ```tsx
-<Text tx="welcomeScreen.readyForLaunch" />
+<Text tx="welcomeScreen:readyForLaunch" />
 ````
 
 ### `txOptions`
 
-The `txOptions` optional prop is an object of options to pass to i18n. Useful for [interpolation](http://i18njs.com/) as well as explicitly setting locale or translation fallbacks. You'll be defining these in the `app/i18n/*.json` files, and can use `{{variableName}}` for interpolation.
+The `txOptions` optional prop is an object of options to pass to i18n. Useful for [interpolation](https://www.i18next.com/) as well as explicitly setting locale or translation fallbacks. You'll be defining these in the `app/i18n/*.json` files, and can use `{{variableName}}` for interpolation.
 
 ```tsx
 // in en.json
@@ -44,7 +44,7 @@ profile: {
 ```tsx
 // in your component
 <Text
-  tx="profile.details"
+  tx="profile:details"
   txOptions={{
     name: "Jamon",
     age: 40,
@@ -57,7 +57,7 @@ profile: {
 The `style` optional prop is an object with overrides for this particular component. You can use `style` overrides with presets.
 
 ```tsx
-<Text tx="welcome.title" style={{ fontSize: 40 }} />
+<Text tx="welcome:title" style={{ fontSize: 40 }} />
 ```
 
 ### `weight`
@@ -65,7 +65,7 @@ The `style` optional prop is an object with overrides for this particular compon
 The `weight` optional prop is the font weight to use for the text. It utilizes the fonts defined in the `app/theme/typography.tsx` file.
 
 ```tsx
-<Text tx="welcome.title" weight="medium" />
+<Text tx="welcome:title" weight="medium" />
 ```
 
 ### `size`
@@ -73,7 +73,7 @@ The `weight` optional prop is the font weight to use for the text. It utilizes t
 The `size` optional prop is the font size to use for the text. The options are defined as `$sizeStyles` in `app/components/Text.tsx`. You can add sizes as you need to the `$sizeStyles` object and use them in your `Text` component.
 
 ```tsx
-<Text tx="welcome.title" size="lg" />
+<Text tx="welcome:title" size="lg" />
 ```
 
 ### `preset`
diff --git a/docs/boilerplate/app/components/TextField.md b/docs/boilerplate/app/components/TextField.md
index ad9ef2a13..419a05ed7 100644
--- a/docs/boilerplate/app/components/TextField.md
+++ b/docs/boilerplate/app/components/TextField.md
@@ -60,7 +60,7 @@ The `label` optional prop is a string that is used to set the label. If this is
 
 ### `labelTx`
 
-The `labelTx` optional prop is the string key used to look up the translated text for the user's locale. Ignite uses [`i18n-js`](http://i18njs.com/) for internationalization. If this is not set, the `label` prop must be present to set the label. If both are set, the `label` value will be used.
+The `labelTx` optional prop is the string key used to look up the translated text for the user's locale. Ignite uses [`i18next`](https://www.i18next.com/) for internationalization. If this is not set, the `label` prop must be present to set the label. If both are set, the `label` value will be used.
 
 ```tsx
 <TextField value={input} onChangeText={(value) => setInput(value)} labelTx="signup.name" />
@@ -102,7 +102,7 @@ The `helper` optional prop is a string that is used to set the helper text. If t
 
 ### `helperTx`
 
-The `helperTx` optional prop is the string key used to look up the translated text for the user's locale. Ignite uses [`i18n-js`](http://i18njs.com/) for internationalization. If this is not set, the `helper` prop must be present to set the helper text. If both are set, the `helper` value will be used.
+The `helperTx` optional prop is the string key used to look up the translated text for the user's locale. Ignite uses [`i18next`](https://www.i18next.com/) for internationalization. If this is not set, the `helper` prop must be present to set the helper text. If both are set, the `helper` value will be used.
 
 ```tsx
 <TextField value={input} onChangeText={(value) => setInput(value)} helperTx="signup.name" />
@@ -144,7 +144,7 @@ The `placeholder` optional prop is a string that is used to set the placeholder.
 
 ### `placeholderTx`
 
-The `placeholderTx` optional prop is the string key used to look up the translated text for the user's locale. Ignite uses [`i18n-js`](http://i18njs.com/) for internationalization. If this is not set, the `placeholder` prop must be present to set the placeholder. If both are set, the `placeholder` value will be used.
+The `placeholderTx` optional prop is the string key used to look up the translated text for the user's locale. Ignite uses [`i18next`](https://www.i18next.com/) for internationalization. If this is not set, the `placeholder` prop must be present to set the placeholder. If both are set, the `placeholder` value will be used.
 
 ```tsx
 <TextField value={input} onChangeText={(value) => setInput(value)} placeholderTx="signup.name" />
diff --git a/docs/boilerplate/app/components/_toggle_props.mdx b/docs/boilerplate/app/components/_toggle_props.mdx
index 881e81065..dbc37195a 100644
--- a/docs/boilerplate/app/components/_toggle_props.mdx
+++ b/docs/boilerplate/app/components/_toggle_props.mdx
@@ -72,17 +72,17 @@ The `label` prop is a string that is used as the label for the toggle.
 
 The `labelTx` prop is a key to a string in the `i18n` translation file. It is used as the label for the toggle.
 
-<CodeBlock language="tsx">{`\<${props.componentName} value={value} onValueChange={setValue} labelTx="login.rememberUsername" />`}</CodeBlock>
+<CodeBlock language="tsx">{`\<${props.componentName} value={value} onValueChange={setValue} labelTx="login:rememberUsername" />`}</CodeBlock>
 
 ### `labelTxOptions`
 
 The `labelTxOptions` prop is an object that is passed to the `i18n` translation function. It is used to pass in values to the translation string.
 
 <CodeBlock language="tsx">
-  {`\<${props.componentName} 
+  {`\<${props.componentName}
   value={value}
   onValueChange={setValue}
-  labelTx="login.rememberUsername"
+  labelTx="login:rememberUsername"
   labelTxOptions={{ username: "john" }}
 />`}
 </CodeBlock>
@@ -109,17 +109,17 @@ The `helper` prop is a string that is used as the helper for the toggle.
 
 The `helperTx` prop is a key to a string in the `i18n` translation file. It is used as the helper for the toggle.
 
-<CodeBlock language="tsx">{`\<${props.componentName} value={value} onValueChange={setValue} helperTx="login.rememberUsername" />`}</CodeBlock>
+<CodeBlock language="tsx">{`\<${props.componentName} value={value} onValueChange={setValue} helperTx="login:rememberUsername" />`}</CodeBlock>
 
 ### `helperTxOptions`
 
 The `helperTxOptions` prop is an object that is passed to the `i18n` translation function. It is used to pass in values to the translation string.
 
 <CodeBlock language="tsx">
-  {`\<${props.componentName} 
+  {`\<${props.componentName}
   value={value}
   onValueChange={setValue}
-  helperTx="login.rememberUsername"
+  helperTx="login:rememberUsername"
   helperTxOptions={{ username: "john" }}
 />`}
 </CodeBlock>
diff --git a/docs/boilerplate/app/i18n/Internationalization.md b/docs/boilerplate/app/i18n/Internationalization.md
index 3298b8839..3b47b30e6 100644
--- a/docs/boilerplate/app/i18n/Internationalization.md
+++ b/docs/boilerplate/app/i18n/Internationalization.md
@@ -26,9 +26,9 @@ I18nManager.forceRTL(isRTL)
 ```
 
 2. Remove all other associated logic that uses the exported `isRTL` variable
-3. Remove any `tx="some.i18n.key"` from your components and use `text="Some Text"` instead
+3. Remove any `tx="some:i18n.key"` from your components and use `text="Some Text"` instead
    (e.g. `<Text text="Some Text" />`
 
 ## Adding more languages
 
-See the [i18n-js Documentation](https://github.com/fnando/i18n?tab=readme-ov-file#base-translations) to add languages to `app/i18n/i18n.ts`.
+See the [i18next Documentation](https://www.i18next.com/how-to/add-or-load-translations) to add languages to `app/i18n/i18n.ts`.
diff --git a/src/tools/__snapshots__/markup.test.ts.snap b/src/tools/__snapshots__/markup.test.ts.snap
index 43e1389db..42184c882 100644
--- a/src/tools/__snapshots__/markup.test.ts.snap
+++ b/src/tools/__snapshots__/markup.test.ts.snap
@@ -118,15 +118,15 @@ export const WelcomeScreen: FC<WelcomeScreenProps> = observer(function WelcomeSc
         <Text
           testID=\\"welcome-heading\\"
           style={themed($welcomeHeading)}
-          tx=\\"welcomeScreen.readyForLaunch\\"
+          tx=\\"welcomeScreen:readyForLaunch\\"
           preset=\\"heading\\"
         />
-        <Text tx=\\"welcomeScreen.exciting\\" preset=\\"subheading\\" />
+        <Text tx=\\"welcomeScreen:exciting\\" preset=\\"subheading\\" />
         <Image style={$welcomeFace} source={welcomeFace} resizeMode=\\"contain\\" />
       </View>
 
       <View style={[themed($bottomContainer), $bottomContainerInsets]}>
-        <Text tx=\\"welcomeScreen.postscript\\" size=\\"md\\" />
+        <Text tx=\\"welcomeScreen:postscript\\" size=\\"md\\" />
       </View>
     </View>
   )
@@ -179,7 +179,7 @@ const $welcomeHeading: ThemedStyle<TextStyle> = ({ spacing }) => ({
 
 exports[`markup removeBlock should remove comments and lines between "# @test remove-block-start" and "# @test remove-block-end" 1`] = `
 "
-  
+
         ---
         - runFlow: Login.yaml
         - tapOn: \\"Podcast, tab, 3 of 4\\"
@@ -222,16 +222,16 @@ exports[`markup removeCurrentLine should remove line with "# @test remove-curren
 exports[`markup removeCurrentLine should remove line with "/* @test remove-current-line */" comment 1`] = `
 "
         import { StyleProp, View, ViewStyle } from \\"react-native\\"
-        
+
         interface DemoDividerProps {
             type?: \\"vertical\\" | \\"horizontal\\"
             size?: number
             style?: StyleProp<ViewStyle>
         }
-        
+
         export function DemoDivider(props: DemoDividerProps) {
             const { type = \\"horizontal\\", size = 10, style: $styleOverride } = props
-        
+
             return (
               <View
                   style={[
@@ -242,7 +242,7 @@ exports[`markup removeCurrentLine should remove line with "/* @test remove-curre
               />
             )
         }
-        
+
         const $divider: ViewStyle = {
             flexGrow: 0,
         }
@@ -252,16 +252,16 @@ exports[`markup removeCurrentLine should remove line with "/* @test remove-curre
 exports[`markup removeCurrentLine should remove line with "// @test remove-current-line" comment 1`] = `
 "
         import { StyleProp, View, ViewStyle } from \\"react-native\\"
-        
+
         interface DemoDividerProps {
             type?: \\"vertical\\" | \\"horizontal\\"
             size?: number
             style?: StyleProp<ViewStyle>
         }
-        
+
         export function DemoDivider(props: DemoDividerProps) {
             const { type = \\"horizontal\\", size = 10, style: $styleOverride } = props
-        
+
             return (
               <View
                   style={[
@@ -273,7 +273,7 @@ exports[`markup removeCurrentLine should remove line with "// @test remove-curre
               />
             )
         }
-        
+
         const $divider: ViewStyle = {
             flexGrow: 0,
         }
@@ -295,7 +295,7 @@ exports[`markup removeNextLine should remove comment and next line after "# @tes
         env:
           TITLE: \\"RNR 257 - META RESPONDS! How can we improve React Native, part 2\\"
           FAVORITES_TEXT: \\"Switch on to only show favorites\\"
-  
+
         ---
         - runFlow: Login.yaml
         - tapOn: \\"Podcast, tab, 3 of 4\\"
diff --git a/src/tools/markup.test.ts b/src/tools/markup.test.ts
index 60c95aca3..70ecd6479 100644
--- a/src/tools/markup.test.ts
+++ b/src/tools/markup.test.ts
@@ -15,16 +15,16 @@ describe("markup", () => {
       const comment = markupComment(TEST_MARKUP_PREFIX, MarkupComments.RemoveCurrentLine)
       const contents = `
         import { StyleProp, View, ViewStyle } from "react-native"
-        
+
         interface DemoDividerProps {
             type?: "vertical" | "horizontal"
             size?: number
             style?: StyleProp<ViewStyle>
         }
-        
+
         export function DemoDivider(props: DemoDividerProps) {
             const { type = "horizontal", size = 10, style: $styleOverride } = props
-        
+
             return (
               <View
                   style={[
@@ -36,7 +36,7 @@ describe("markup", () => {
               />
             )
         }
-        
+
         const $divider: ViewStyle = {
             flexGrow: 0,
             flexShrink: 0, // ${comment}
@@ -51,16 +51,16 @@ describe("markup", () => {
       const comment = markupComment(TEST_MARKUP_PREFIX, MarkupComments.RemoveCurrentLine)
       const contents = `
         import { StyleProp, View, ViewStyle } from "react-native"
-        
+
         interface DemoDividerProps {
             type?: "vertical" | "horizontal"
             size?: number
             style?: StyleProp<ViewStyle>
         }
-        
+
         export function DemoDivider(props: DemoDividerProps) {
             const { type = "horizontal", size = 10, style: $styleOverride } = props
-        
+
             return (
               <View
                   style={[
@@ -72,7 +72,7 @@ describe("markup", () => {
               />
             )
         }
-        
+
         const $divider: ViewStyle = {
             flexGrow: 0,
             flexShrink: 0, // ${comment}
@@ -140,7 +140,7 @@ describe("markup", () => {
         env:
           TITLE: "RNR 257 - META RESPONDS! How can we improve React Native, part 2"
           FAVORITES_TEXT: "Switch on to only show favorites"
-  
+
         ---
         - runFlow: Login.yaml
         - tapOn: "Podcast, tab, 3 of 4"
@@ -239,7 +239,7 @@ describe("markup", () => {
         TITLE: "RNR 257 - META RESPONDS! How can we improve React Native, part 2"
         FAVORITES_TEXT: "Switch on to only show favorites"
         # ${endComment}
-  
+
         ---
         - runFlow: Login.yaml
         - tapOn: "Podcast, tab, 3 of 4"
@@ -300,7 +300,7 @@ describe("markup", () => {
       expect(result).not.toContain(blockEndComment)
       expect(result).not.toContain(currentLineComment)
       expect(result).not.toContain(
-        /* jsx */ `<Button preset="reversed" tx="welcomeScreen.letsGo" onPress={goNext} />`,
+        /* jsx */ `<Button preset="reversed" tx="welcomeScreen:letsGo" onPress={goNext} />`,
       )
       expect(result).not.toContain(`props: WelcomeScreenProps`)
       expect(result).not.toContain(`goNext()`)
@@ -379,20 +379,20 @@ export const WelcomeScreen: FC<WelcomeScreenProps> = observer(function WelcomeSc
         <Text
           testID="welcome-heading"
           style={themed($welcomeHeading)}
-          tx="welcomeScreen.readyForLaunch"
+          tx="welcomeScreen:readyForLaunch"
           preset="heading"
         />
-        <Text tx="welcomeScreen.exciting" preset="subheading" />
+        <Text tx="welcomeScreen:exciting" preset="subheading" />
         <Image style={$welcomeFace} source={welcomeFace} resizeMode="contain" />
       </View>
 
       <View style={[themed($bottomContainer), $bottomContainerInsets]}>
-        <Text tx="welcomeScreen.postscript" size="md" />
+        <Text tx="welcomeScreen:postscript" size="md" />
         {/* @demo remove-block-start */}
         <Button
           testID="next-screen-button"
           preset="reversed"
-          tx="welcomeScreen.letsGo"
+          tx="welcomeScreen:letsGo"
           onPress={goNext}
         />
         {/* @demo remove-block-end */}