​
Usage

The <TranslatedText /> component is the bread and butter of this library. It wraps simple strings and automatically translates them to the user’s detected locale at run time.

You can use this component to translate a text string by simply wrapping the string in your code.

import React from "react"
import { Text } from "react-native"

export const Example = () => {
  return (
    <Text>
      <TranslatedText>
        This text will be translated!
      </TranslatedText>
    </Text>
  )
}

Note: This component returns a raw string, so it needs to be wrapped in a <Text /> element in React Native.

​
Creating a Custom Text Component

We usually recommend creating a custom <Text /> component in your codebase that utilizes <TranslatedText /> under the hood so that these translations happen automatically behind the scenes. You can set it up to accept a translationOptions prop or something similar to pass down any desired translation settings.

import { TranslatedText, TranslatedTextProps } from '@lexiconjs/react'
import { Text as NativeText } from 'react-native'

type Props = React.PropsWithChildren<React.ComponentProps<typeof NativeText>> & {
  /**
   * Additional translation options that you can pass down to the translator. Feel
   * free to pass these props down in whatever form is most convenient for you.
   */
  translationOptions?: TranslatedTextProps;
};

/** A standardized text component with the addition of our translator */
export const Text = ({ children, translationOptions, ...props }: Props) => {
  return (
    <NativeText {...props}>
      <TranslatedText {...translationOptions}>{children}</TranslatedText>
    </NativeText>
  )
}

Doing something like above will allow you to simply use <Text /> as normal within your app without the need to even consider translations most of the time.

​
Properties

This component accepts various properties.

​
context
string

Any additional context/guidance that you would like to provide to the translator.

This is most commonly used when you are translating a single word that can be interpreted in multiple different ways. However, it can also be useful if you want to slightly tweak how translations are being generated.

For example, you can provide the context “Track my progress” when the child string is “Track”.

​
disableTranslation
boolean
default: "false"

Whether to disable the translation of the string within the <TranslatedText />.

This can be useful if you’ve created a custom <Text /> component as mentioned above and don’t want to translate a specific text element.

​
disableContextualTranslation
boolean
default: "false"

Whether to disable the translation of any text strings nested one or more levels deep in the component tree within the <TranslatedText /> (not top-level text).

This is more of an advanced feature and is usually relevant when nesting react elements within text or when applying nested formatting.

By default, we will translate all strings and other nodes within <TranslatedText /> together to maintain the context of the original message.

See the disabling translation example for more information on how you can use this.

​
enableSkeleton
boolean
default: "true"

Whether to enable the skeleton placeholder while the text is being translated on this element.

You can disable the skeleton of a particular piece of text by setting this to false.

You can also disable skeletons app-wide by setting enableSkeletons to false on the <TranslationProvider />.

​
skeletonColor
string

The color to use for the skeleton placeholder while the text is being translated on this element.

You can also change the skeleton color app-wide by setting skeletonColor on the <TranslationProvider />.

​
from
string

The current locale of the text we’d like to translate (the language you wrote the app in).

You should almost never provide this prop because it is set based on the defaultLanguage prop provided to the <TranslationProvider />.

Example: en-US

​
to
string

The locale we would like to translate the text to.

You should almost never provide this prop because it is set based on the targetLanguage prop provided to the <TranslationProvider /> (which defaults to the user’s detected locale).

Example: es-ES

<TranslationProvider />useTranslation()