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),
+ };
+}