From 002c3c35b44675706fdde12b5db0c4265d85f0a6 Mon Sep 17 00:00:00 2001 From: Daniel Fulton Date: Fri, 14 Oct 2016 07:13:38 +0800 Subject: [PATCH] add normalize text helper function --- src/buttons/Button.js | 5 +- src/buttons/ButtonGroup.js | 3 +- src/containers/Card.js | 6 ++- src/form/FormInput.js | 3 +- src/form/FormLabel.js | 3 +- src/helpers/normalizeText.js | 88 ++++++++++++++++++++++++++++++++++++ src/input/Search.js | 3 +- src/list/ListItem.js | 6 ++- src/pricing/PricingCard.js | 6 ++- src/text/Text.js | 9 ++-- 10 files changed, 116 insertions(+), 16 deletions(-) create mode 100644 src/helpers/normalizeText.js diff --git a/src/buttons/Button.js b/src/buttons/Button.js index c86b0de1c5..be3c731477 100644 --- a/src/buttons/Button.js +++ b/src/buttons/Button.js @@ -4,6 +4,7 @@ import colors from '../config/colors' import Text from '../text/Text' import MaterialIcon from 'react-native-vector-icons/MaterialIcons' import getIconType from '../helpers/getIconType' +import normalize from '../helpers/normalizeText' let styles = {} @@ -190,7 +191,7 @@ styles = StyleSheet.create({ }, text: { color: 'white', - fontSize: 18 + fontSize: normalize(18) }, icon: { marginRight: 10 @@ -202,7 +203,7 @@ styles = StyleSheet.create({ padding: 12 }, smallFont: { - fontSize: 14 + fontSize: normalize(14) }, activityIndicatorStyle: { marginHorizontal: 10, diff --git a/src/buttons/ButtonGroup.js b/src/buttons/ButtonGroup.js index 0dca67aa25..02d3ef67b9 100644 --- a/src/buttons/ButtonGroup.js +++ b/src/buttons/ButtonGroup.js @@ -2,6 +2,7 @@ import React, { PropTypes } from 'react' import { View, StyleSheet, TouchableHighlight, Platform } from 'react-native' import colors from '../config/colors' import Text from '../text/Text' +import normalize from '../helpers/normalizeText' let styles = {} @@ -83,7 +84,7 @@ styles = StyleSheet.create({ paddingTop: 5, paddingBottom: 5, textAlign: 'center', - fontSize: 13, + fontSize: normalize(13), color: colors.grey2, ...Platform.select({ ios: { diff --git a/src/containers/Card.js b/src/containers/Card.js index 08663e8bf6..4363d6d0a8 100644 --- a/src/containers/Card.js +++ b/src/containers/Card.js @@ -4,6 +4,8 @@ import fonts from '../config/fonts' import colors from '../config/colors' import Text from '../text/Text' import Divider from '../Divider' +import normalize from '../helpers/normalizeText' + let styles = {} const Card = ({ @@ -75,7 +77,7 @@ styles = StyleSheet.create({ }) }, imageTitle: { - fontSize: 14, + fontSize: normalize(14), marginBottom: 8, color: colors.grey1, ...Platform.select({ @@ -94,7 +96,7 @@ styles = StyleSheet.create({ marginBottom: 15 }, cardTitle: { - fontSize: 14, + fontSize: normalize(14), ...Platform.select({ ios: { fontWeight: 'bold' diff --git a/src/form/FormInput.js b/src/form/FormInput.js index d55e16eb06..77e14e4222 100644 --- a/src/form/FormInput.js +++ b/src/form/FormInput.js @@ -1,6 +1,7 @@ import React, { Component } from 'react' import { TextInput, StyleSheet, View, Platform } from 'react-native' import colors from '../config/colors' +import normalize from '../helpers/normalizeText' let styles = {} @@ -111,7 +112,7 @@ styles = StyleSheet.create({ input: { height: 36, color: colors.grey3, - fontSize: 14 + fontSize: normalize(14) } }) diff --git a/src/form/FormLabel.js b/src/form/FormLabel.js index 2a8438b05e..0e601104ca 100644 --- a/src/form/FormLabel.js +++ b/src/form/FormLabel.js @@ -3,6 +3,7 @@ import { StyleSheet, View, Platform } from 'react-native' import colors from '../config/colors' import fonts from '../config/fonts' import Text from '../text/Text' +import normalize from '../helpers/normalizeText' let styles = {} @@ -24,7 +25,7 @@ styles = StyleSheet.create({ marginTop: 15, marginBottom: 1, color: colors.grey3, - fontSize: 12, + fontSize: normalize(12), ...Platform.select({ ios: { fontWeight: 'bold' diff --git a/src/helpers/normalizeText.js b/src/helpers/normalizeText.js new file mode 100644 index 0000000000..f99355a281 --- /dev/null +++ b/src/helpers/normalizeText.js @@ -0,0 +1,88 @@ +// +// Method to normalize size of fonts across devices +// +// Some code taken from https://jsfiddle.net/97ty7yjk/ & +// https://stackoverflow.com/questions/34837342/font-size-on-iphone-6s-plus +// +// author: @xiaoneng +// date: 14/10/2016 +// version: 03 +// + +const React = require('react-native'); +const { + PixelRatio, + Dimensions +} = React; + +const pixelRatio = PixelRatio.get(); +const deviceHeight = Dimensions.get('window').height; +const deviceWidth = Dimensions.get('window').width; + +// -- Testing Only -- +// const fontScale = PixelRatio.getFontScale(); +// const layoutSize = PixelRatio.getPixelSizeForLayoutSize(14); +// console.log('normalizeText getPR ->', pixelRatio); +// console.log('normalizeText getFS ->', fontScale); +// console.log('normalizeText getDH ->', deviceHeight); +// console.log('normalizeText getDW ->', deviceWidth); +// console.log('normalizeText getPSFLS ->', layoutSize); + +const normalize = (size) => { + if (pixelRatio === 2) { + // iphone 5s and older Androids + if (deviceWidth < 360) { + return size * 0.95; + } + // iphone 5 + if (deviceHeight < 667) { + return size; + // iphone 6-6s + } else if (deviceHeight >= 667 && deviceHeight <= 735) { + return size * 1.15; + } + // older phablets + return size * 1.25; + } + if (pixelRatio === 3) { + // catch Android font scaling on small machines + // where pixel ratio / font scale ratio => 3:3 + if (deviceWidth <= 360) { + return size; + } + // Catch other weird android width sizings + if (deviceHeight < 667) { + return size * 1.15; + // catch in-between size Androids and scale font up + // a tad but not too much + } + if (deviceHeight >= 667 && deviceHeight <= 735) { + return size * 1.2; + } + // catch larger devices + // ie iphone 6s plus / 7 plus / mi note 等等 + return size * 1.27; + } + if (pixelRatio === 3.5) { + // catch Android font scaling on small machines + // where pixel ratio / font scale ratio => 3:3 + if (deviceWidth <= 360) { + return size; + // Catch other smaller android height sizings + } + if (deviceHeight < 667) { + return size * 1.20; + // catch in-between size Androids and scale font up + // a tad but not too much + } + if(deviceHeight >= 667 && deviceHeight <= 735) { + return size * 1.25; + } + // catch larger phablet devices + return size * 1.40; + } + // if older device ie pixelRatio !== 2 || 3 || 3.5 + return size; +} + +module.exports = normalize; diff --git a/src/input/Search.js b/src/input/Search.js index 5817601133..b6b1e06c03 100644 --- a/src/input/Search.js +++ b/src/input/Search.js @@ -2,6 +2,7 @@ import React, { PropTypes, Component } from 'react' import { View, StyleSheet, TextInput, Platform } from 'react-native' import Icon from 'react-native-vector-icons/MaterialIcons' import colors from '../config/colors' +import normalize from '../helpers/normalizeText' class Search extends Component { render () { @@ -177,7 +178,7 @@ const styles = StyleSheet.create({ borderRadius: 3, overflow: 'hidden', backgroundColor: colors.searchBg, - fontSize: 14, + fontSize: normalize(14), color: colors.grey3, height: 40, ...Platform.select({ diff --git a/src/list/ListItem.js b/src/list/ListItem.js index c3ed1a7613..ba0dca0157 100644 --- a/src/list/ListItem.js +++ b/src/list/ListItem.js @@ -4,6 +4,8 @@ import Icon from '../icons/Icon' import Text from '../text/Text' import colors from '../config/colors' import fonts from '../config/fonts' +import normalize from '../helpers/normalizeText' + let styles const ListItem = ({ @@ -137,12 +139,12 @@ styles = StyleSheet.create({ marginRight: 8 }, title: { - fontSize: 15, + fontSize: normalize(14), color: colors.grey1 }, subtitle: { color: colors.grey3, - fontSize: 12, + fontSize: normalize(12), marginTop: 1, ...Platform.select({ ios: { diff --git a/src/pricing/PricingCard.js b/src/pricing/PricingCard.js index fa641bf029..e22e7e924d 100644 --- a/src/pricing/PricingCard.js +++ b/src/pricing/PricingCard.js @@ -4,6 +4,8 @@ import Text from '../text/Text' import fonts from '../config/fonts' import colors from '../config/colors' import Button from '../buttons/Button' +import normalize from '../helpers/normalizeText' + let styles = {} const PricingCard = ({ @@ -94,7 +96,7 @@ styles = StyleSheet.create({ pricingTitle: { textAlign: 'center', color: colors.primary, - fontSize: 30, + fontSize: normalize(30), ...Platform.select({ ios: { fontWeight: '800' @@ -108,7 +110,7 @@ styles = StyleSheet.create({ textAlign: 'center', marginTop: 10, marginBottom: 10, - fontSize: 40, + fontSize: normalize(40), ...Platform.select({ ios: { fontWeight: '700' diff --git a/src/text/Text.js b/src/text/Text.js index 5f12dd487c..f130b9025d 100644 --- a/src/text/Text.js +++ b/src/text/Text.js @@ -1,6 +1,7 @@ import React from 'react' import { Text, StyleSheet, Platform } from 'react-native' import fonts from '../config/fonts' +import normalize from '../helpers/normalizeText' let styles = {} @@ -8,10 +9,10 @@ const TextElement = ({style, children, h1, h2, h3, h4, h5, h6, fontFamily}) => (