Added scaleText and fixed typings (#17)

* added scaleText and fixed typings

* removed default props, can use destructuring

* added prettierrc

* fixed readme

* fixed readme

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "semi": true,
+  "arrowParens": "always",
+  "jsxSingleQuote": false,
+  "jsxBracketSameLine": false,
+  "tabWidth": 2,
+  "useTabs": false,
+  "bracketSpacing": true
+}

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 `<Text />` 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

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;

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 (
-    <Text style={[style, { fontSize: scaledFontSize, lineHeight: scaledLineHeight }]} {...props}>
+    <Text
+      style={[
+        style,
+        scaleText({
+          deviceBaseWidth,
+          fontSize,
+          lineHeight,
+        }),
+      ]}
+      {...props}
+    >
       {children}
     </Text>
   );
-};
+}
 
 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),
+  };
+}