Package Exports

react-native-text

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-text) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

with

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

without

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