Merge pull request #46 from iamacup/5.1.0

5.1.0

Author: iamacup

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-markdown-display",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "Markdown renderer for react-native, with CommonMark spec support + adds syntax extensions & sugar (URL autolinking, typographer), originally created by Mient-jan Stelling as react-native-markdown-renderer",
   "main": "src/index.js",
   "types": "src/index.d.ts",

src/index.js

@@ -4,7 +4,7 @@
  */
 
 import React, {useMemo} from 'react';
-import {Text} from 'react-native';
+import {Text, StyleSheet} from 'react-native';
 import PropTypes from 'prop-types';
 import parser from './lib/parser';
 import getUniqueID from './lib/util/getUniqueID';
@@ -36,6 +36,39 @@ export {
   removeTextStyleProps,
 };
 
+// we use StyleSheet.flatten here to make sure we have an object, in case someone
+// passes in a StyleSheet.create result to the style prop
+const getStyle = (mergeStyle, style) => {
+  let useStyles = {};
+
+  if (mergeStyle === true && style) {
+    Object.keys(styles).forEach(value => {
+      useStyles[value] = {
+        ...styles[value],
+        ...(style !== null ? StyleSheet.flatten(style[value]) : {}),
+      };
+    });
+  } else {
+    useStyles = {
+      ...styles,
+    };
+
+    if (style !== null) {
+      Object.keys(style).forEach(value => {
+        useStyles[value] = {
+          ...StyleSheet.flatten(style[value]),
+        };
+      });
+    }
+  }
+
+  Object.keys(useStyles).forEach(value => {
+    useStyles['_VIEW_SAFE_' + value] = removeTextStyleProps(useStyles[value]);
+  });
+
+  return StyleSheet.create(useStyles);
+};
+
 const getRenderer = (
   renderer,
   rules,
@@ -69,21 +102,7 @@ const getRenderer = (
       );
     }
   } else {
-    let useStyles = {};
-
-    if (mergeStyle === true) {
-      Object.keys(styles).forEach(value => {
-        useStyles[value] = {
-          ...styles[value],
-          ...style[value],
-        };
-      });
-    } else {
-      useStyles = {
-        ...styles,
-        ...style,
-      };
-    }
+    let useStyles = getStyle(mergeStyle, style);
 
     return new AstRenderer(
       {

src/lib/AstRenderer.js

@@ -1,3 +1,5 @@
+import {StyleSheet} from 'react-native';
+
 import getUniqueID from './util/getUniqueID';
 import convertAdditionalStyles from './util/convertAdditionalStyles';
 
@@ -57,7 +59,6 @@ export default class AstRenderer {
     parents.unshift(node);
 
     // calculate the children first
-
     let children = node.children.map(value => {
       return this.renderNode(value, parents);
     });
@@ -90,7 +91,10 @@ export default class AstRenderer {
 
         // combine in specific styles for the object
         if (this._style[parentNodes[a].type]) {
-          refStyle = {...refStyle, ...this._style[parentNodes[a].type]};
+          refStyle = {
+            ...refStyle,
+            ...StyleSheet.flatten(this._style[parentNodes[a].type]),
+          };
         }
 
         // then work out if any of them are text styles that should be used in the end.