From 8632107c8d362b99de10b85112bb5364b55b2cdc Mon Sep 17 00:00:00 2001 From: hotchemi Date: Mon, 1 Apr 2019 04:44:15 +0900 Subject: [PATCH 1/5] Add fontScale option to align situation with wordpress-android. --- android/app/src/main/AndroidManifest.xml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml index 3678735b5c..6b79acce83 100644 --- a/android/app/src/main/AndroidManifest.xml +++ b/android/app/src/main/AndroidManifest.xml @@ -16,7 +16,7 @@ From d5ac36c9ed79a462727cbe0a3d4e8ce64416bedb Mon Sep 17 00:00:00 2001 From: hotchemi Date: Mon, 1 Apr 2019 04:45:05 +0900 Subject: [PATCH 2/5] Add refreshText in setFontSize to recalculate entire view size. --- .../org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java | 1 + 1 file changed, 1 insertion(+) diff --git a/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java b/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java index 72f0451e60..5ac9c524f5 100644 --- a/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java +++ b/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java @@ -219,6 +219,7 @@ public void setFontSize(ReactAztecText view, float fontSize) { view.setTextSize( TypedValue.COMPLEX_UNIT_PX, (int) Math.ceil(PixelUtil.toPixelFromSP(fontSize))); + view.refreshText(); } @ReactProp(name = ViewProps.FONT_FAMILY) From 0ecc2a260148b5f7937a1c85c0b8770ad27c17af Mon Sep 17 00:00:00 2001 From: hotchemi Date: Mon, 1 Apr 2019 04:52:52 +0900 Subject: [PATCH 3/5] To refrect OS fontScale change observe fontScale change and apply the change on JS layer. Basically React Native has a mechanism to scale font automatically but GM is rendered on top of fragment of which retain flag is true. Hence we deal with fontScale change manually on our side. ref: https://github.com/wordpress-mobile/gutenberg-mobile/issues/605 --- react-native-aztec/src/AztecView.js | 25 +++++++++++++++++++++++-- react-native-aztec/src/utils.js | 9 +++++++++ 2 files changed, 32 insertions(+), 2 deletions(-) create mode 100644 react-native-aztec/src/utils.js diff --git a/react-native-aztec/src/AztecView.js b/react-native-aztec/src/AztecView.js index 9b7aca7adc..f23589a512 100644 --- a/react-native-aztec/src/AztecView.js +++ b/react-native-aztec/src/AztecView.js @@ -1,7 +1,8 @@ import PropTypes from 'prop-types'; import React from 'react'; -import ReactNative, {requireNativeComponent, ViewPropTypes, UIManager, ColorPropType, TouchableWithoutFeedback, Platform} from 'react-native'; +import ReactNative, {requireNativeComponent, ViewPropTypes, UIManager, ColorPropType, TouchableWithoutFeedback, Platform, Dimensions} from 'react-native'; import TextInputState from 'react-native/lib/TextInputState'; +import { getScaledFontSize } from './utils'; const AztecManager = UIManager.getViewManagerConfig('RCTAztecView'); @@ -32,6 +33,23 @@ class AztecView extends React.Component { ...ViewPropTypes, // include the default view properties } + constructor() { + super(); + this.state = { fontScale: Dimensions.get('window').fontScale }; + } + + _onDimensionsChange = dimensions => { + this.setState({ fontScale: dimensions.window.fontScale }); + } + + componentWillMount() { + Dimensions.addEventListener('change', this._onDimensionsChange); + } + + componentWillUnmount() { + Dimensions.removeEventListener('change', this._onDimensionsChange); + } + dispatch(command, params) { params = params || []; UIManager.dispatchViewManagerCommand( @@ -149,11 +167,14 @@ class AztecView extends React.Component { } render() { - const { onActiveFormatsChange, onFocus, ...otherProps } = this.props + const { onActiveFormatsChange, onFocus, fontSize, ...otherProps } = this.props + const scaledFontSize = getScaledFontSize(fontSize, this.state.fontScale); + return ( Date: Mon, 1 Apr 2019 06:23:25 +0900 Subject: [PATCH 4/5] Add comment and tweak a way to compare string. --- react-native-aztec/src/utils.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/react-native-aztec/src/utils.js b/react-native-aztec/src/utils.js index 9cae43723a..b5476a9ec4 100644 --- a/react-native-aztec/src/utils.js +++ b/react-native-aztec/src/utils.js @@ -1,7 +1,10 @@ import { Platform } from 'react-native'; +// Basically React Native has a mechanism to scale font size automatically. +// But GM is rendered on top of fragment of which retain flag is true. +// Hence we deal with fontScale change manually on our side. export function getScaledFontSize( fontSize, fontScale ) { - if ( Platform.OS == 'ios' ) { + if ( Platform.OS === 'ios' ) { return fontSize ? fontSize : undefined; // to not to affect to iOS } const baseFontSize = 18; From 77bcc1f3bb742cd2bd9bc2bd2dfcc17e53bac550 Mon Sep 17 00:00:00 2001 From: hotchemi Date: Mon, 1 Apr 2019 06:36:32 +0900 Subject: [PATCH 5/5] Tweak a bit. --- react-native-aztec/src/AztecView.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/react-native-aztec/src/AztecView.js b/react-native-aztec/src/AztecView.js index f23589a512..456be1a130 100644 --- a/react-native-aztec/src/AztecView.js +++ b/react-native-aztec/src/AztecView.js @@ -168,13 +168,11 @@ class AztecView extends React.Component { render() { const { onActiveFormatsChange, onFocus, fontSize, ...otherProps } = this.props - const scaledFontSize = getScaledFontSize(fontSize, this.state.fontScale); - return (