Localized typography with React Native

AppText.js

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;