React Native

Localize React Native apps with Transifex Native

Transifex Native is compatible with React Native for building mobile applications. Please follow the Localize React applications guide on how to integrate Transifex Native with React as a general guide.

However you should pay attention to the following when using React Native:

  • <T> components should always be wrapped around React Native's <Text> components
  • You cannot use _html and _inline props of the <T> component, only plain text.

Here follows a quick code example:

import { StyleSheet, Text, View } from 'react-native';
import { tx } from '@transifex/native';
import { T } from '@transifex/react';

tx.init({
  token: '<token>',
});

export default function App() {
  return (
    <View style={styles.container}>
      <Text><T _str="Hello world" /></Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

And an example on how you could create a language picker using the useLanguages React hook:

import { View, Button } from 'react-native';
import { tx } from '@transifex/native';
import { useLanguages } from '@transifex/react';

tx.init({
  token: '<token>',
});

export default function App() {
  const languages = useLanguages();
  return (
    <View>
      {languages.map(({ code, name }) => (
        <Button
          key={code}
          onPress={() => tx.setCurrentLocale(code)}
          title={name} />
      ))}
    </View>
  );