Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Small fix for React Native #19

Open
daimonkor opened this issue Nov 19, 2022 · 0 comments
Open

Small fix for React Native #19

daimonkor opened this issue Nov 19, 2022 · 0 comments

Comments

@daimonkor
Copy link

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-native-font-weight@0.1.5-alpha for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-font-weight/src/FontManager.ts b/node_modules/react-native-font-weight/src/FontManager.ts
index 11a0ab8..749dde4 100644
--- a/node_modules/react-native-font-weight/src/FontManager.ts
+++ b/node_modules/react-native-font-weight/src/FontManager.ts
@@ -1,5 +1,5 @@
 import {Platform, StyleSheet, Text} from 'react-native'
-import React from 'react'
+import React, {ReactNode} from 'react'
 
 type FontStyle = 'normal' | 'italic' | 'oblique'
 type FontWeight =
@@ -41,7 +41,7 @@ function font_style_generator(
 	font_family: string,
 	font_weight: FontWeight,
 	font_style: FontStyle,
-): {fontFamily?: string; fontWeight: string} {
+): { fontFamily?: string; fontWeight: string } {
 	let fontFamily = `${font_family}-`
 
 	switch (font_weight) {
@@ -90,7 +90,7 @@ function font_style_generator(
 		fontFamily += 'Italic'
 	}
 
-	return  { ...font_family && {fontFamily: fontFamily}, fontWeight: 'normal' };
+	return {...font_family && {fontFamily: fontFamily}, fontWeight: '400'};
 }
 
 const oldRender = (Text as any).render
@@ -110,39 +110,52 @@ class FontManager {
      *   Therefore swapped it to function instead of arrow to remove global scope
      */
 		const origin = oldRender.call(this, ...args)
-
 		if (Platform.OS === 'android') {
-			if (origin.props.style) {
-				const style = StyleSheet.flatten([origin.props.style])
-
-				if(!this.customFonts?.includes(style.fontFamily)){
+			let originStyle = origin.props?.style
+			if (typeof origin.props.children.props?.style != 'undefined') {
+				originStyle = origin.props.children.props?.style
+			}
+			if (originStyle) {
+				const style = StyleSheet.flatten([originStyle])
+				if (!this.customFonts?.includes(style.fontFamily)) {
 					return origin
 				}
-
 				const fontWeight: FontWeight = style.fontWeight ? style.fontWeight : '400'
-
 				const fontStyle: FontStyle = style.fontStyle ? style.fontStyle : 'normal'
 				// HACK: Disabled mutation of fontStyle as is immutable in some libaries
-				// origin.props.style.fontStyle = 'normal'
 
 				const fontFamily: string = style.fontFamily
-
-				return React.cloneElement(origin, {
-					style: [{}, style, font_style_generator(fontFamily, fontWeight, fontStyle)],
-				})
+				const newProps = {style: StyleSheet.flatten([style, font_style_generator(fontFamily, fontWeight, fontStyle)])}
+				if (typeof origin.props?.children != 'undefined') {
+					return React.Children.map<ReactNode, ReactNode>(origin.props.children, child => {
+						if (React.isValidElement(child)) {
+							return React.cloneElement(child, newProps)
+						}
+					})
+				}
+				return React.cloneElement(origin, newProps)
 			}
 			return origin
 		} else {
-			if (origin.props.style) {
-				const style = StyleSheet.flatten([origin.props.style])
+			let originStyle = origin.props?.style
+			if (typeof origin.props.children.props?.style != 'undefined') {
+				originStyle = origin.props.children.props?.style
+			}
+			if (originStyle) {
+				const style = StyleSheet.flatten([originStyle])
 				if (style.fontFamily && this.customFonts?.includes(style.fontFamily)) {
 					const fontFamily: string = style.fontFamily
 					style.fontFamily = double_pascal_case_to_two_words(fontFamily)
-					origin.props.style = style
+					if (typeof origin.props.children.props?.style != 'undefined') {
+						origin.props.children.props.style = style
+					} else {
+						origin.props.style = style
+					}
 				}
 			}
 			return origin
 		}
 	}
 }
+
 export default new FontManager()

This issue body was partially generated by patch-package.

@daimonkor daimonkor changed the title Small fix Small fix for React Native Nov 19, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant