React 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>
  );