Re-useable React-Native text component with proper theming, ability to pass "tx" for translations and theme-ui like styling prop (sx).

text.props.ts

import { TextProps as TextProperties } from "react-native"
import type { SxProps } from "@bridge/ui/view"
import type { Nullable } from "@bridge/types"
import { TextVariants } from "../theme"

export interface TextProps extends TextProperties, SxProps {
  /**
   * Children components.
   */
  children?: React.ReactNode

  /**
   * Text which is looked up via i18n.
   */
  tx?: string

  /**
   * Optional options to pass to i18n. Useful for interpolation
   * as well as explicitly setting locale or translation fallbacks.
   */
  txOptions?: Record<string, unknown>

  /**
   * The text to display if not using `tx` or nested components.
   */
  text?: Nullable<string>

  /**
   * Optional theme UI variant to use
   */
  variant?: TextVariants
}

text.tsx

import React from "react"
import { Text as ReactNativeText } from "dripsy"
import { translate } from "@bridge/i18n"
import { TextProps } from "./text.props"

/**
 * For your text displaying needs.
 *
 * This component is a HOC over the built-in React Native one.
 */
export function Text(props: TextProps): JSX.Element {
  // grab the props
  const { tx, text, children, txOptions, variant, sx, ...rest } = props

  // figure out which content to use
  const i18nText = tx && translate(tx, txOptions)
  const content = text || i18nText || children

  return (
    <ReactNativeText variant={variant} sx={{ ...sx }} {...rest}>
      {content}
    </ReactNativeText>
  )
}