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>
);
Updated over 2 years ago