More progress

boilerplate/app/app.tsx

@@ -20,7 +20,7 @@ import "./utils/gestureHandler"
 import "./i18n"
 import "./utils/ignoreWarnings"
 import { useFonts } from "expo-font"
-import React from "react"
+import React, { 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
@@ -30,6 +30,7 @@ import * as storage from "./utils/storage"
 import { customFontsToLoad } from "./theme"
 import Config from "./config"
 import { KeyboardProvider } from "react-native-keyboard-controller"
+import { initI18n } from "./i18n"
 
 export const NAVIGATION_PERSISTENCE_KEY = "NAVIGATION_STATE"
 
@@ -72,6 +73,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(() => {
@@ -94,7 +100,11 @@ 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
   }
 

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}

boilerplate/app/i18n/i18n.ts

@@ -1,6 +1,6 @@
 import * as Localization from "expo-localization"
 import { I18nManager } from "react-native"
-import i18next from "i18next"
+import * as i18next from "i18next"
 import { initReactI18next } from "react-i18next"
 import 'intl-pluralrules'
 
@@ -15,37 +15,28 @@ import jp from "./jp"
 const fallbackLocale = "en-US"
 
 
-export const i18n = i18next.use(initReactI18next).init({
-  debug: true,
-  resources: {
-    // ar,
-    // en,
-    en: {
-      loginScreen: {
-        logIn: "hello world",
-        enterDetails: "hello world",
-      },
+export let i18n: i18next.i18n
+
+export const initI18n = async () => {
+  i18n = i18next.use(initReactI18next)
+
+  await i18n.init({
+    resources: {
+      en,
+      "en-US": en
     },
-    "en-US": {
-      loginScreen: {
-        logIn: "hello world",
-        enterDetails: "hello world",
-      },
+    lng: fallbackLocale,
+    fallbackLng: fallbackLocale,
+    interpolation: {
+      escapeValue: false,
     },
-    // ko,
-    // fr,
-    // jp,
-  },
-  lng: fallbackLocale,
-  fallbackLng: fallbackLocale,
+  })
 
-  interpolation: {
-    escapeValue: false, // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape
-  },
-})
+  return i18n
+}
 
-console.log("i18next.languages 2")
-console.log(i18next.languages)
+// console.log("i18next.languages 2")
+// console.log(i18next.languages)
 
 const systemLocale = Localization.getLocales()[0]
 const systemLocaleTag = systemLocale?.languageTag ?? fallbackLocale
@@ -71,22 +62,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

boilerplate/app/i18n/translate.ts

@@ -24,5 +24,8 @@ import { i18n, TxKeyPath } from "./i18n"
  * ```
  */
 export function translate(key: TxKeyPath, options?: TOptions): string {
-  return i18n.t(key, options)
+  if (i18n.isInitialized) {
+    return i18n.t(key, options)
+  }
+  return key
 }

boilerplate/app/screens/DemoCommunityScreen.tsx

@@ -18,38 +18,38 @@ 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")}
         />
 
         <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")}

boilerplate/app/screens/DemoDebugScreen.tsx

@@ -76,11 +76,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`} />
@@ -139,11 +139,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>
   )

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,18 +107,18 @@ 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
                     value={episodeStore.favoritesOnly}
                     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>
               )}
@@ -189,7 +189,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",
           }),
         },
@@ -198,7 +198,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>

boilerplate/app/screens/DemoShowroomScreen/DemoShowroomScreen.tsx

@@ -210,7 +210,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}