Mobile - RichText - Fixes an issue where the font size value won't up…

…date (#36621)

* Mobile - RichText - Fixes an issue where the font size value wouldn't be reflected after changing it

* Mobile - Rich Text - Parse font size values before checking changes and updating state

Co-authored-by: Gerardo <>

packages/rich-text/src/component/index.native.js

@@ -122,7 +122,7 @@ export class RichText extends Component {
 			activeFormats: [],
 			selectedFormat: null,
 			height: 0,
-			dimensions: Dimensions.get( 'window' ),
+			currentFontSize: this.getFontSize( arguments[ 0 ] ),
 		};
 		this.needsSelectionUpdate = false;
 		this.savedContent = '';
@@ -799,6 +799,9 @@ export class RichText extends Component {
 	}
 
 	componentDidUpdate( prevProps ) {
+		const { style } = this.props;
+		const { currentFontSize } = this.state;
+
 		if ( this.props.value !== this.value ) {
 			this.value = this.props.value;
 		}
@@ -817,6 +820,18 @@ export class RichText extends Component {
 		} else if ( ! isSelected && prevIsSelected ) {
 			this._editor.blur();
 		}
+
+		const currentFontSizeStyle = parseFloat( style?.fontSize );
+		const prevFontSizeStyle = parseFloat( prevProps?.style?.fontSize );
+		if (
+			currentFontSize &&
+			( currentFontSizeStyle || prevFontSizeStyle ) &&
+			currentFontSizeStyle !== currentFontSize
+		) {
+			this.setState( {
+				currentFontSize: this.getFontSize( this.props ),
+			} );
+		}
 	}
 
 	getHtmlToRender( record, tagName ) {
@@ -859,33 +874,33 @@ export class RichText extends Component {
 		};
 	}
 
-	getFontSize() {
-		const { baseGlobalStyles, tagName } = this.props;
+	getFontSize( props ) {
+		const { baseGlobalStyles, tagName, fontSize, style } = props;
 		const tagNameFontSize =
 			baseGlobalStyles?.elements?.[ tagName ]?.typography?.fontSize;
 
-		let fontSize = DEFAULT_FONT_SIZE;
+		let newFontSize = DEFAULT_FONT_SIZE;
 
 		if ( baseGlobalStyles?.typography?.fontSize ) {
-			fontSize = baseGlobalStyles?.typography?.fontSize;
+			newFontSize = baseGlobalStyles?.typography?.fontSize;
 		}
 
 		if ( tagNameFontSize ) {
-			fontSize = tagNameFontSize;
+			newFontSize = tagNameFontSize;
 		}
 
-		if ( this.props.style?.fontSize ) {
-			fontSize = this.props.style.fontSize;
+		if ( style?.fontSize ) {
+			newFontSize = style.fontSize;
 		}
 
-		if ( this.props.fontSize && ! tagNameFontSize ) {
-			fontSize = this.props.fontSize;
+		if ( fontSize && ! tagNameFontSize ) {
+			newFontSize = fontSize;
 		}
-		const { height, width } = this.state.dimensions;
+		const { height, width } = Dimensions.get( 'window' );
 		const cssUnitOptions = { height, width, fontSize: DEFAULT_FONT_SIZE };
 		// We need to always convert to px units because the selected value
 		// could be coming from the web where it could be stored as a different unit.
-		const selectedPxValue = getPxFromCssUnit( fontSize, cssUnitOptions );
+		const selectedPxValue = getPxFromCssUnit( newFontSize, cssUnitOptions );
 
 		return parseFloat( selectedPxValue );
 	}
@@ -931,6 +946,7 @@ export class RichText extends Component {
 			disableEditingMenu = false,
 			baseGlobalStyles,
 		} = this.props;
+		const { currentFontSize } = this.state;
 
 		const record = this.getRecord();
 		const html = this.getHtmlToRender( record, tagName );
@@ -942,7 +958,7 @@ export class RichText extends Component {
 		);
 
 		const { color: defaultPlaceholderTextColor } = placeholderStyle;
-		const fontSize = this.getFontSize();
+		const fontSize = currentFontSize;
 		const lineHeight = this.getLineHeight();
 
 		const {