diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..a5e34e5 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,11 @@ +{ + "singleQuote": true, + "trailingComma": "es5", + "semi": true, + "arrowParens": "always", + "jsxSingleQuote": false, + "jsxBracketSameLine": false, + "tabWidth": 2, + "useTabs": false, + "bracketSpacing": true +} diff --git a/README.md b/README.md index a1ac0a5..f8fafa3 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,10 @@ -React Native Text -=== +# 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), +This is the comparison of two screens (iPhone 4s and iPhone 6s Plus), with applied style: ```js @@ -45,15 +44,33 @@ const WelcomeText = ({ text }) => ( ); WelcomeText.propTypes = { - text: PropTypes.string.isRequired + text: PropTypes.string.isRequired, }; const styles = StyleSheet.create({ text: { color: 'tomato', - fontSize: 28 - } + fontSize: 28, + }, }); export default WelcomeText; ``` + +### Cool! Can I get the same effect outside a `` element? + +Yes, you can! The `scaleText` function is a named export. Invoke it with the following signature: + +```js +import { scaleText } from 'react-native-text'; + +const style = scaleText({ + deviceBaseWidth: 375, + fontSize: 14, + lineHeight: 14 * 1.2, +}); // returns: { fontSize, lineHeight } +``` + +## LICENSE + +MIT diff --git a/index.d.ts b/index.d.ts index 14547c9..481e7ad 100644 --- a/index.d.ts +++ b/index.d.ts @@ -1,7 +1,19 @@ -import { TextProps as BaseTextProps } from 'react-native' +import { TextProps as BaseTextProps } from 'react-native'; export interface TextProps extends BaseTextProps { - baseDeviceWidth?: number + deviceBaseWidth?: number; } -export default function Text(props: TextProps): JSX.Element +export interface ScaledStyles { + fontSize: number; + lineHeight: number; +} + +interface ScaleTextOptions { + deviceBaseWidth: number; + fontSize?: number; + lineHeight?: number; +} + +export default function Text(props: TextProps): JSX.Element; +export function scaleText(options: ScaleTextOptions): ScaledStyles; diff --git a/index.js b/index.js index 600c6c4..5f1e7e0 100644 --- a/index.js +++ b/index.js @@ -1,36 +1,52 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Dimensions, Text, StyleSheet } from 'react-native'; + const { width, height } = Dimensions.get('window'); -const flattenStyle = StyleSheet.flatten; const realWidth = height > width ? width : height; -const ScalableText = ({ deviceBaseWidth, style, children, ...props }) => { - const fontSize = flattenStyle(style).fontSize || 14; - // Default line height is 120% of the font size. - const lineHeight = flattenStyle(style).lineHeight || fontSize * 1.2; - const scaledFontSize = Math.round(fontSize * realWidth / deviceBaseWidth); - const scaledLineHeight = Math.round(lineHeight * realWidth / deviceBaseWidth); +function ScalableText({ + // iPhone 6 width + deviceBaseWidth = 375, + style = {}, + children, + ...props +}) { + const { fontSize, lineHeight } = StyleSheet.flatten(style); return ( - + {children} ); -}; +} ScalableText.propTypes = { + deviceBaseWidth: PropTypes.number, style: Text.propTypes.style, - children:PropTypes.oneOfType([ - PropTypes.node, - PropTypes.string - ]).isRequired -}; - -ScalableText.defaultProps = { - // iPhone 6 width - deviceBaseWidth: 375, - style: {} + children: PropTypes.oneOfType([PropTypes.node, PropTypes.string]).isRequired, }; export default ScalableText; + +export function scaleText({ + deviceBaseWidth, + fontSize = 14, + // Default line height is 120% of the font size. + lineHeight = fontSize * 1.2, +}) { + return { + fontSize: Math.round((fontSize * realWidth) / deviceBaseWidth), + lineHeight: Math.round((lineHeight * realWidth) / deviceBaseWidth), + }; +}