knowbody/react-native-text

React Native Text scales the font size based on a device width

React Native Text

About

React Native Text scales the font size based on a device width.

This is the comparison of two screens (iPhone 4s and iPhone 6s Plus), with applied style:

welcome: {
  fontSize: 31,
  textAlign: 'center',
  margin: 10,
},
instructions: {
  fontSize: 16,
  textAlign: 'center',
  color: '#333333',
  marginBottom: 5,
}

You can also check out the example usage on Snack: https://snack.expo.io/@knowbody/react-native-text-example

With react-native-text

Without (using <Text /> from React Native Core)

Get Started

1. yarn add react-native-text
2. Example usage:

import React, { PropTypes } from 'react';
import { StyleSheet } from 'react-native';
import ScalableText from 'react-native-text';

const WelcomeText = ({ text }) => <ScalableText style={styles.text}>{text}</ScalableText>;

const styles = StyleSheet.create({
  text: {
    color: 'tomato',
    fontSize: 28,
  },
});

export default WelcomeText;

Cool! Can I get the same effect outside a <Text /> element?

Yes, you can! The scaleText function is a named export. Invoke it with the following signature:

import { scaleText } from 'react-native-text';

const style = scaleText({
  deviceBaseWidth: 375,
  fontSize: 14,
  lineHeight: 14 * 1.2,
}); // returns: { fontSize, lineHeight }

Or with a React Hook useScaleText:

import { useScaleText } from 'react-native-text';

const { fontSize, lineHeight } = useScaleText({ fontSize: 18 });

LICENSE

MIT