react-native-i18n/example/screen.js

79 lines
1.6 KiB
JavaScript
Raw Normal View History

2017-04-07 17:21:55 +00:00
// @ flow
import React, { Component } from 'react';
2017-05-25 15:49:37 +00:00
import I18n, { getLanguages } from 'react-native-i18n';
2017-04-07 17:21:55 +00:00
import {
Platform,
StyleSheet,
Text,
ScrollView,
View,
} from 'react-native';
2017-05-25 15:49:37 +00:00
// Enable fallbacks if you want `en-US`
// and `en-GB` to fallback to `en`
I18n.fallbacks = true;
// Available languages
I18n.translations = {
'en': require('./translations/en'),
'fr': require('./translations/fr'),
'fr-CA': require('./translations/fr-CA'),
'es': require('./translations/es'),
};
console.log(I18n.locales)
2017-04-07 17:21:55 +00:00
export default class extends Component {
state = { languages: [] }
componentWillMount() {
getLanguages().then(languages => {
this.setState({ languages })
})
}
2017-04-07 17:21:55 +00:00
render() {
return (
<ScrollView style={styles.container}>
2017-05-25 15:49:37 +00:00
<Text style={styles.title}>Additional methods</Text>
<View style={styles.line}>
2017-05-25 15:49:37 +00:00
<Text style={styles.label}>getLanguages (Promise): </Text>
<Text>{JSON.stringify(this.state.languages)}</Text>
</View>
2017-05-25 15:49:37 +00:00
<Text style={styles.title}>Demos</Text>
2017-04-07 17:21:55 +00:00
<View style={styles.line}>
2017-05-25 15:49:37 +00:00
<Text style={styles.label}>I18n.t('hello world'): </Text>
<Text>{I18n.t('hello world')}</Text>
2017-04-07 17:21:55 +00:00
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
padding: 24,
paddingTop: Platform.OS === 'ios' ? 44 : 24,
},
title: {
fontSize: 20,
fontWeight: '700',
marginBottom: 8,
},
line: {
flexDirection: 'row',
marginBottom: 16,
2017-04-07 17:21:55 +00:00
},
label: {
fontWeight: '700',
marginRight: 8,
},
});