Refactor Internationalization

boilerplate/app/components/Button.tsx

@@ -22,18 +22,9 @@ export interface ButtonAccessoryProps {
 
 export interface ButtonProps extends PressableProps {
   /**
-   * Text which is looked up via i18n.
-   */
-  tx?: TextProps["tx"]
-  /**
-   * The text to display if not using `tx` or nested components.
+   * The text to display if not using nested components.
    */
   text?: TextProps["text"]
-  /**
-   * Optional options to pass to i18n. Useful for interpolation
-   * as well as explicitly setting locale or translation fallbacks.
-   */
-  txOptions?: TextProps["txOptions"]
   /**
    * An optional style override useful for padding & margin.
    */
@@ -91,17 +82,15 @@ export interface ButtonProps extends PressableProps {
  * @returns {JSX.Element} The rendered `Button` component.
  * @example
  * <Button
- *   tx="common:ok"
+ *   text={commonNamespace.ok}
  *   style={styles.button}
  *   textStyle={styles.buttonText}
  *   onPress={handleButtonPress}
  * />
  */
 export function Button(props: ButtonProps) {
   const {
-    tx,
     text,
-    txOptions,
     style: $viewStyleOverride,
     pressedStyle: $pressedViewStyleOverride,
     textStyle: $textStyleOverride,
@@ -159,7 +148,7 @@ export function Button(props: ButtonProps) {
             <LeftAccessory style={$leftAccessoryStyle} pressableState={state} disabled={disabled} />
           )}
 
-          <Text tx={tx} text={text} txOptions={txOptions} style={$textStyle(state)}>
+          <Text text={text} style={$textStyle(state)}>
             {children}
           </Text>
 

boilerplate/app/components/Card.tsx

@@ -39,18 +39,9 @@ interface CardProps extends TouchableOpacityProps {
    */
   RightComponent?: ReactElement
   /**
-   * The heading text to display if not using `headingTx`.
+   * The heading text to display.
    */
   heading?: TextProps["text"]
-  /**
-   * Heading text which is looked up via i18n.
-   */
-  headingTx?: TextProps["tx"]
-  /**
-   * Optional heading options to pass to i18n. Useful for interpolation
-   * as well as explicitly setting locale or translation fallbacks.
-   */
-  headingTxOptions?: TextProps["txOptions"]
   /**
    * Style overrides for heading text.
    */
@@ -65,18 +56,9 @@ interface CardProps extends TouchableOpacityProps {
    */
   HeadingComponent?: ReactElement
   /**
-   * The content text to display if not using `contentTx`.
+   * The content text to display.
    */
   content?: TextProps["text"]
-  /**
-   * Content text which is looked up via i18n.
-   */
-  contentTx?: TextProps["tx"]
-  /**
-   * Optional content options to pass to i18n. Useful for interpolation
-   * as well as explicitly setting locale or translation fallbacks.
-   */
-  contentTxOptions?: TextProps["txOptions"]
   /**
    * Style overrides for content text.
    */
@@ -91,18 +73,9 @@ interface CardProps extends TouchableOpacityProps {
    */
   ContentComponent?: ReactElement
   /**
-   * The footer text to display if not using `footerTx`.
+   * The footer text to display.
    */
   footer?: TextProps["text"]
-  /**
-   * Footer text which is looked up via i18n.
-   */
-  footerTx?: TextProps["tx"]
-  /**
-   * Optional footer options to pass to i18n. Useful for interpolation
-   * as well as explicitly setting locale or translation fallbacks.
-   */
-  footerTxOptions?: TextProps["txOptions"]
   /**
    * Style overrides for footer text.
    */
@@ -128,14 +101,8 @@ interface CardProps extends TouchableOpacityProps {
 export function Card(props: CardProps) {
   const {
     content,
-    contentTx,
-    contentTxOptions,
     footer,
-    footerTx,
-    footerTxOptions,
     heading,
-    headingTx,
-    headingTxOptions,
     ContentComponent,
     HeadingComponent,
     FooterComponent,
@@ -159,9 +126,9 @@ export function Card(props: CardProps) {
 
   const preset: Presets = props.preset ?? "default"
   const isPressable = !!WrapperProps.onPress
-  const isHeadingPresent = !!(HeadingComponent || heading || headingTx)
-  const isContentPresent = !!(ContentComponent || content || contentTx)
-  const isFooterPresent = !!(FooterComponent || footer || footerTx)
+  const isHeadingPresent = !!(HeadingComponent || heading)
+  const isContentPresent = !!(ContentComponent || content)
+  const isFooterPresent = !!(FooterComponent || footer)
 
   const Wrapper = (isPressable ? TouchableOpacity : View) as ComponentType<
     TouchableOpacityProps | ViewProps
@@ -211,26 +178,12 @@ export function Card(props: CardProps) {
         <HeaderContentWrapper>
           {HeadingComponent ||
             (isHeadingPresent && (
-              <Text
-                weight="bold"
-                text={heading}
-                tx={headingTx}
-                txOptions={headingTxOptions}
-                {...HeadingTextProps}
-                style={$headingStyle}
-              />
+              <Text weight="bold" text={heading} {...HeadingTextProps} style={$headingStyle} />
             ))}
 
           {ContentComponent ||
             (isContentPresent && (
-              <Text
-                weight="normal"
-                text={content}
-                tx={contentTx}
-                txOptions={contentTxOptions}
-                {...ContentTextProps}
-                style={$contentStyle}
-              />
+              <Text weight="normal" text={content} {...ContentTextProps} style={$contentStyle} />
             ))}
         </HeaderContentWrapper>
 
@@ -240,8 +193,6 @@ export function Card(props: CardProps) {
               weight="normal"
               size="xs"
               text={footer}
-              tx={footerTx}
-              txOptions={footerTxOptions}
               {...FooterTextProps}
               style={$footerStyle}
             />

boilerplate/app/components/EmptyState.tsx

@@ -4,7 +4,7 @@ import { Button, ButtonProps } from "./Button"
 import { Text, TextProps } from "./Text"
 import { useAppTheme } from "@/utils/useAppTheme"
 import type { ThemedStyle } from "@/theme"
-import { translate } from "@/i18n/translate"
+import TranslateSheet from "translate-sheet"
 
 const sadFace = require("../../assets/images/sad-face.png")
 
@@ -33,15 +33,6 @@ interface EmptyStateProps {
    * The heading text to display if not using `headingTx`.
    */
   heading?: TextProps["text"]
-  /**
-   * Heading text which is looked up via i18n.
-   */
-  headingTx?: TextProps["tx"]
-  /**
-   * Optional heading options to pass to i18n. Useful for interpolation
-   * as well as explicitly setting locale or translation fallbacks.
-   */
-  headingTxOptions?: TextProps["txOptions"]
   /**
    * Style overrides for heading text.
    */
@@ -54,15 +45,6 @@ interface EmptyStateProps {
    * The content text to display if not using `contentTx`.
    */
   content?: TextProps["text"]
-  /**
-   * Content text which is looked up via i18n.
-   */
-  contentTx?: TextProps["tx"]
-  /**
-   * Optional content options to pass to i18n. Useful for interpolation
-   * as well as explicitly setting locale or translation fallbacks.
-   */
-  contentTxOptions?: TextProps["txOptions"]
   /**
    * Style overrides for content text.
    */
@@ -75,15 +57,6 @@ interface EmptyStateProps {
    * The button text to display if not using `buttonTx`.
    */
   button?: TextProps["text"]
-  /**
-   * Button text which is looked up via i18n.
-   */
-  buttonTx?: TextProps["tx"]
-  /**
-   * Optional button options to pass to i18n. Useful for interpolation
-   * as well as explicitly setting locale or translation fallbacks.
-   */
-  buttonTxOptions?: TextProps["txOptions"]
   /**
    * Style overrides for button.
    */
@@ -125,25 +98,19 @@ 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: translations.generic.heading,
+      content: translations.generic.content,
+      button: translations.generic.button,
     } as EmptyStatePresetItem,
   } as const
 
   const preset = EmptyStatePresets[props.preset ?? "generic"]
 
   const {
     button = preset.button,
-    buttonTx,
     buttonOnPress,
-    buttonTxOptions,
     content = preset.content,
-    contentTx,
-    contentTxOptions,
     heading = preset.heading,
-    headingTx,
-    headingTxOptions,
     imageSource = preset.imageSource,
     style: $containerStyleOverride,
     buttonStyle: $buttonStyleOverride,
@@ -158,9 +125,9 @@ export function EmptyState(props: EmptyStateProps) {
   } = props
 
   const isImagePresent = !!imageSource
-  const isHeadingPresent = !!(heading || headingTx)
-  const isContentPresent = !!(content || contentTx)
-  const isButtonPresent = !!(button || buttonTx)
+  const isHeadingPresent = !!heading
+  const isContentPresent = !!content
+  const isButtonPresent = !!button
 
   const $containerStyles = [$containerStyleOverride]
   const $imageStyles = [
@@ -204,8 +171,6 @@ export function EmptyState(props: EmptyStateProps) {
         <Text
           preset="subheading"
           text={heading}
-          tx={headingTx}
-          txOptions={headingTxOptions}
           {...HeadingTextProps}
           style={$headingStyles}
         />
@@ -214,8 +179,6 @@ export function EmptyState(props: EmptyStateProps) {
       {isContentPresent && (
         <Text
           text={content}
-          tx={contentTx}
-          txOptions={contentTxOptions}
           {...ContentTextProps}
           style={$contentStyles}
         />
@@ -225,8 +188,6 @@ export function EmptyState(props: EmptyStateProps) {
         <Button
           onPress={buttonOnPress}
           text={button}
-          tx={buttonTx}
-          txOptions={buttonTxOptions}
           textStyle={$buttonTextStyleOverride}
           {...ButtonProps}
           style={$buttonStyles}
@@ -236,6 +197,14 @@ export function EmptyState(props: EmptyStateProps) {
   )
 }
 
+const translations = TranslateSheet.create("emptyStateComponent", {
+  generic: {
+    heading: "So empty... so sad",
+    content: "No data found yet. Try clicking the button to refresh or reload the app.",
+    button: "Let's try this again",
+  },
+})
+
 const $image: ImageStyle = { alignSelf: "center" }
 const $heading: ThemedStyle<TextStyle> = ({ spacing }) => ({
   textAlign: "center",