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
yarn add react-native-text- 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