Skip to content

Instantly share code, notes, and snippets.

@andrewkslv
Forked from necolas/AppText.js
Created February 17, 2018 23:49
Show Gist options
  • Save andrewkslv/c8ad8c24df4cac6984baff2afeafa794 to your computer and use it in GitHub Desktop.
Save andrewkslv/c8ad8c24df4cac6984baff2afeafa794 to your computer and use it in GitHub Desktop.
Localized typography with React Native
import i18n from '../../i18n';
import theme from '../../theme';
import { bool, string } from 'prop-types';
import { I18nManager, StyleSheet, Text } from 'react-native';
import React, { Component } from 'react';
/**
* React Component
*/
class AppText extends Component {
static displayName = '@acme/AppText';
static propTypes = {
...Text.propTypes,
lang: string
};
static contextTypes = {
language: string
};
render() {
const style = [
styles.root,
getLanguageFontFamily(this.props.lang || this.context.language),
this.props.style
];
return <Text {...this.props} style={style} />;
}
}
const styles = StyleSheet.create({
root: {
fontWeight: 'normal',
lineHeight: theme.lineHeight,
wordWrap: 'break-word'
}
});
const languageStyles = StyleSheet.create({
normal: {
fontFamily: theme.fontFamilies.normal
},
ja: {
fontFamily: theme.fontFamilies.japan
},
rtl: {
fontFamily: theme.fontFamilies.rtl
}
});
/**
* Font-family picker
*/
const getLanguageFontFamily = language => {
const isGlobalRTL = I18nManager.isRTL;
// if there is a language
if (language) {
if (language === 'ja') {
return languageStyles.ja;
}
if (i18n.isLocaleRTL(language)) {
return languageStyles.rtl;
}
return languageStyles.normal;
}
return isGlobalRTL ? languageStyles.rtl : languageStyles.normal;
};
export default AppText;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment