fix error on passing array as style & correctly preprocess paddingHor…

…izontal style
Expensify · Jan 30, 2024 · 93c3caa · 93c3caa
1 parent 5267e84
commit 93c3caa
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 2 deletions.
diff --git a/src/MarkdownTextInput.web.tsx b/src/MarkdownTextInput.web.tsx
@@ -31,6 +31,15 @@ try {
   throw new Error('[react-native-live-markdown] Function `createReactDOMStyle` from react-native-web not found. Please make sure that you are using React Native Web 0.18 or newer.');
 }
 
+let preprocessStyle: (style: any) => any;
+try {
+  preprocessStyle =
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    require('react-native-web/dist/exports/StyleSheet/preprocess').default;
+} catch (e) {
+  throw new Error('[react-native-live-markdown] Function `preprocessStyle` from react-native-web not found.');
+}
+
 type MarkdownStyle = MarkdownTextInputDecoratorViewNativeComponent.MarkdownStyle;
 
 interface MarkdownTextInputProps extends TextInputProps {
@@ -388,7 +397,7 @@ const MarkdownTextInput = React.forwardRef<TextInput, MarkdownTextInputProps>(
             style && {
               caretColor: (style as TextStyle).color || 'black',
             },
-            createReactDOMStyle(style),
+            createReactDOMStyle(preprocessStyle(StyleUtils.parseStyleArrayToObject(style))),
           ]) as CSSProperties
         }
         role={accessibilityRole || 'textbox'}

diff --git a/src/styleUtils.ts b/src/styleUtils.ts
@@ -1,4 +1,5 @@
 import {processColor, Platform} from 'react-native';
+import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
 import type * as MarkdownTextInputDecoractorView from './MarkdownTextInputDecoratorViewNativeComponent';
 
 type MarkdownStyle = MarkdownTextInputDecoractorView.MarkdownStyle;
@@ -93,10 +94,24 @@ function processColorsInMarkdownStyle(input: MarkdownStyle): MarkdownStyle {
   return output as MarkdownStyle;
 }
 
+function parseStyleArrayToObject<T extends TextStyle | ViewStyle | object>(style: StyleProp<T>): T {
+  const isArray = Array.isArray(style);
+  if (!isArray) {
+    return style as T;
+  }
+  return style.reduce((acc, val) => {
+    const isNestedArray = Array.isArray(val);
+    if (isNestedArray) {
+      return {...acc, ...parseStyleArrayToObject(val)};
+    }
+    return {...acc, ...val};
+  }, {});
+}
+
 function processMarkdownStyle(input: PartialMarkdownStyle | undefined): MarkdownStyle {
   return processColorsInMarkdownStyle(mergeMarkdownStyleWithDefault(input));
 }
 
 export type {PartialMarkdownStyle};
 
-export {processMarkdownStyle, mergeMarkdownStyleWithDefault};
+export {processMarkdownStyle, mergeMarkdownStyleWithDefault, parseStyleArrayToObject};