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, }With react-native-text
Without (using <Text /> from React Native Core)
Get Started
npm install --save 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> ); WelcomeText.propTypes = { text: PropTypes.string.isRequired, }; 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 }LICENSE
MIT
