Fixes infinite loop issue discussed here: facebook/react-native#824

lwansbrough · Apr 12, 2015 · f74c0e2 · f74c0e2
1 parent 8c7a98e
commit f74c0e2
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 29 deletions.
diff --git a/Markdown.js b/Markdown.js
@@ -9,8 +9,8 @@ var styles = {
   view: {
   },
   codeBlock: {
-    fontFamily: 'Courier-Bold',
-    fontWeight: 500
+    fontFamily: 'Courier',
+    fontWeight: '500'
   },
   em: {
     fontStyle: 'italic'
@@ -28,7 +28,8 @@ var styles = {
     borderColor: '#dddddd',
     borderRadius: 3,
     borderWidth: 1,
-    fontFamily: 'Courier-Bold'
+    fontFamily: 'Courier',
+    fontWeight: '500'
   },
   u: {
     borderColor: '#222222',
@@ -71,6 +72,9 @@ var styles = {
   },
   tableRowCell: {
     padding: 5
+  },
+  text: {
+    flex: 1
   }
 };
 

diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
     "type": "git",
     "url": "https://github.com/lwansbrough/react-native-markdown.git"
   },
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "A component for rendering Markdown in React Native",
   "main": "Markdown.js",
   "author": "Lochlan Wansbrough <lochie@live.com> (http://lwansbrough.com)",

diff --git a/rules.js b/rules.js
@@ -10,69 +10,69 @@ var _ = require('lodash');
 module.exports = function(styles) {
   return {
     br: {
-      react: function(node, output) {
-        return React.createElement(Text, { style: styles.br }, '\n\n');
+      react: function(node, output, state) {
+        return React.createElement(Text, { key: state.key, style: styles.br }, '\n\n');
       }
     },
     codeBlock: {
-      react: function(node, output) {
-        console.log(node.content);
-        return React.createElement(Text, { style: styles.codeBlock }, null);
+      react: function(node, output, state) {
+        return React.createElement(Text, { key: state.key, style: styles.codeBlock }, null);
       }
     },
     em: {
-      react: function(node, output) {
-        return React.createElement(Text, { style: styles.em }, output(node.content));
+      react: function(node, output, state) {
+        return React.createElement(Text, { key: state.key, style: styles.em }, output(node.content));
       }
     },
     hr: {
-      react: function(node, output) {
-        return React.createElement(View, { style: styles.hr });
+      react: function(node, output, state) {
+        return React.createElement(View, { key: state.key, style: styles.hr });
       }
     },
     image: {
-      react: function(node, output) {
+      react: function(node, output, state) {
         return React.createElement(Image, {
+          key: state.key,
           source: { uri: node.target },
           style: styles.image
         });
       }
     },
     inlineCode: {
-      react: function(node, output) {
-        return React.createElement(Text, { style: styles.inlineCode }, node.content);
+      react: function(node, output, state) {
+        return React.createElement(Text, { key: state.key, style: styles.inlineCode }, node.content);
       }
     },
     paragraph: {
-      react: function(node, output) {
-        return React.createElement(View, { style: styles.paragraph }, output(node.content));
+      react: function(node, output, state) {
+        return React.createElement(View, { key: state.key, style: styles.paragraph }, output(node.content));
       }
     },
     strong: {
-      react: function(node, output) {
-        return React.createElement(Text, { style: styles.strong }, output(node.content));
+      react: function(node, output, state) {
+        return React.createElement(Text, { key: state.key, style: styles.strong }, output(node.content));
       }
     },
     table: {
-      react: function(node, output) {
+      react: function(node, output, state) {
         var headers = _.map(node.header, function(content, i) {
           return React.createElement(Text, { style: styles.tableHeaderCell }, output(content));
         });
 
         var header = React.createElement(View, { style: styles.tableHeader }, headers);
 
-        var rows = _.map(node.cells, function(row, i) {
-          var cells = _.map(row, function(content) {
-            return React.createElement(View, { style: styles.tableRowCell }, output(content));
+        var rows = _.map(node.cells, function(row, r) {
+          var cells = _.map(row, function(content, c) {
+            return React.createElement(View, { key: c, style: styles.tableRowCell }, output(content));
           });
           var rowStyles = [styles.tableRow];
-          if (node.cells.length - 1 == i) {
+          if (node.cells.length - 1 == r) {
             rowStyles.push(styles.tableRowLast);
           }
-          return React.createElement(View, { style: rowStyles }, cells);
+          return React.createElement(View, { key: r, style: rowStyles }, cells);
         });
 
-        return React.createElement(View, { style: styles.table }, [ header, rows ]);
+        return React.createElement(View, { key: state.key, style: styles.table }, [ header, rows ]);
       }
     },
     text: {
@@ -81,8 +81,8 @@ module.exports = function(styles) {
       }
     },
     u: {
-      react: function(node, output) {
-        return React.createElement(View, { style: styles.u }, output(node.content));
+      react: function(node, output, state) {
+        return React.createElement(View, { key: state.key, style: styles.u }, output(node.content));
       }
     }
   }