Transifex

  • Documentation
  • Javascript SDK
  • Use with React Native

Use with React Native

Note

Transifex Native is currently in BETA. To learn more about the solution as well as to have a hands on experience please get in touch with us.

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>',
  sourceLocale: 'en',
});

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>',
  sourceLocale: 'en',
});

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