Add padding to AutoSizedImage

AutoSizedImage.js

@@ -33,11 +33,15 @@ export default class AutoSizedImage extends PureComponent {
 
   render() {
     const finalSize = {};
-    if (this.state.width > width) {
-      finalSize.width = width;
-      const ratio = width / this.state.width;
+    const padding = this.props.padding;
+    const maxWidth = width - padding;
+
+    if (this.state.width > maxWidth) {
+      finalSize.width = maxWidth;
+      const ratio = maxWidth / this.state.width;
       finalSize.height = this.state.height * ratio;
     }
+
     const style = Object.assign(
       baseStyle,
       this.props.style,

HTMLView.js

@@ -1,7 +1,8 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import htmlToElement from './htmlToElement';
-import {Linking, Platform, StyleSheet, View, ViewPropTypes} from 'react-native';
+import {Linking, Platform, StyleSheet, View} from 'react-native';
+import {ViewPropTypes} from 'deprecated-react-native-prop-types'
 
 const boldStyle = {fontWeight: 'bold'};
 const italicStyle = {fontStyle: 'italic'};
@@ -67,6 +68,7 @@ class HtmlView extends PureComponent {
   startHtmlRender(value, style, textComponentProps, nodeComponentProps) {
     const {
       addLineBreaks,
+      autoSizedImagePadding,
       onLinkPress,
       onLinkLongPress,
       stylesheet,
@@ -80,6 +82,7 @@ class HtmlView extends PureComponent {
 
     const opts = {
       addLineBreaks,
+      autoSizedImagePadding,
       linkHandler: onLinkPress,
       linkLongPressHandler: onLinkLongPress,
       styles: {...baseStyles, ...stylesheet, ...style},
@@ -135,6 +138,7 @@ class HtmlView extends PureComponent {
 
 HtmlView.propTypes = {
   addLineBreaks: PropTypes.bool,
+  autoSizedImagePadding: PropTypes.number,
   bullet: PropTypes.string,
   lineBreak: PropTypes.string,
   NodeComponent: PropTypes.func,
@@ -155,6 +159,7 @@ HtmlView.propTypes = {
 
 HtmlView.defaultProps = {
   addLineBreaks: true,
+  autoSizedImagePadding: 0,
   onLinkPress: url => Linking.openURL(url),
   onLinkLongPress: null,
   onError: console.error.bind(console),

README.md

@@ -42,6 +42,7 @@ props:
 - `paragraphBreak`: text which appears after every `p` element
 - `lineBreak`: text which appears after text elements which create a new line (`br`, headings)
 - `addLineBreaks`: when explicitly `false`, effectively sets `paragraphBreak` and `lineBreak` to `null`
+- `autoSizedImagePadding`: by default images will be resized to the width of the users' screen, if your view has padding you can set the padding here. Set the total padding, so `40` if your view has `20` on both sides.
 - `NodeComponent`, `nodeComponentProps`, `RootComponent`, `rootComponentProps`, `TextComponent`, `textComponentProps`: see [**Customizing things even further**](https://github.com/jsdf/react-native-htmlview#customizing-things-even-further) below.
 
 ### Example

__tests__/HTMLView-test.js

@@ -70,6 +70,20 @@ describe('<HTMLView/>', () => {
     ).toMatchSnapshot();
   });
 
+  it('should render an <Image /> with set width/height using padding', () => {
+    const imgSrc =
+      'https://facebook.github.io/react-native/img/header_logo.png';
+    const htmlContent = `<img src="${imgSrc}" width="6600" height="5800"/>`;
+
+    // should resize to 650, see default width: https://github.com/facebook/react-native/blob/master/jest/setup.js
+
+    expect(
+      renderer
+        .create(<HTMLView value={htmlContent} autoSizedImagePadding={100} />)
+        .toJSON()
+    ).toMatchSnapshot();
+  });
+
   it('should render inherited styles correctly', () => {
     const htmlContent = '<b>RED<u>BLUE<i>GREEN</i></u></b>';
     const stylesheet = StyleSheet.create({

__tests__/__snapshots__/HTMLView-test.js.snap

@@ -497,6 +497,27 @@ exports[`<HTMLView/> should render an <Image /> with set width/height 1`] = `
 </View>
 `;
 
+exports[`<HTMLView/> should render an <Image /> with set width/height using padding 1`] = `
+<View>
+  <Image
+    source={
+      Object {
+        "height": 571.2121212121211,
+        "uri": "https://facebook.github.io/react-native/img/header_logo.png",
+        "width": 650,
+      }
+    }
+    style={
+      Object {
+        "backgroundColor": "transparent",
+        "height": 571.2121212121211,
+        "width": 650,
+      }
+    }
+  />
+</View>
+`;
+
 exports[`<HTMLView/> should render an <Image />, with default width/height of 1 1`] = `
 <View>
   <Image

htmlToElement.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {StyleSheet, Text} from 'react-native';
+import {StyleSheet, Text, View} from 'react-native';
 import htmlparser from 'htmlparser2-without-node-native';
 import entities from 'entities';
 
@@ -17,13 +17,13 @@ const defaultOpts = {
 
 const Img = props => {
   const width =
-    parseInt(props.attribs['width'], 10) || parseInt(props.attribs['data-width'], 10) || 0;
+    parseInt(props.attribs['width'], 10) || parseInt(props.attribs['data-width'], 10) || 150;
   const height =
     parseInt(props.attribs['height'], 10) ||
     parseInt(props.attribs['data-height'], 10) ||
-    0;
+    150;
 
-  const imgStyle = {
+  let imgStyle = {
     width,
     height,
   };
@@ -33,7 +33,7 @@ const Img = props => {
     width,
     height,
   };
-  return <AutoSizedImage source={source} style={imgStyle} />;
+  return <AutoSizedImage source={source} style={imgStyle} padding={props.padding}/>;
 };
 
 export default function htmlToElement(rawHtml, customOpts = {}, done) {
@@ -42,6 +42,7 @@ export default function htmlToElement(rawHtml, customOpts = {}, done) {
     ...customOpts,
   };
 
+
   function inheritedStyle(parent) {
     if (!parent) return null;
     const style = StyleSheet.flatten(opts.styles[parent.name]) || {};
@@ -73,20 +74,45 @@ export default function htmlToElement(rawHtml, customOpts = {}, done) {
         const defaultStyle = opts.textComponentProps ? opts.textComponentProps.style : null;
         const customStyle = inheritedStyle(parent);
 
+        let additionalStyles = {};
+
+        if ((node.parent && node.parent.name === 'span') || (node.parent && node.parent.parent && node.parent.parent.name === 'span')) {
+          let attribs = node.parent.attribs;
+
+          if (node.parent.parent && ! attribs.style) {
+            attribs = node.parent.parent.attribs;
+          }
+
+          if (attribs.style) {
+            if (attribs.style.indexOf('color:') > -1) {
+
+              let re = /color: (.*);/g;
+
+              let array = re.exec(attribs.style);
+
+              additionalStyles = {color: array[1]};
+            }
+          }
+        }
+
         return (
           <TextComponent
             {...opts.textComponentProps}
             key={index}
-            style={[defaultStyle, customStyle]}
+            style={[defaultStyle, customStyle, additionalStyles]}
           >
             {entities.decodeHTML(node.data)}
           </TextComponent>
         );
       }
 
       if (node.type === 'tag') {
+        if (node.name === 'br') {
+          return (<Text>{'\n'}</Text>);
+        }
+
         if (node.name === 'img') {
-          return <Img key={index} attribs={node.attribs} />;
+          return <Img key={index} attribs={node.attribs} padding={opts.autoSizedImagePadding}/>;
         }
 
         let linkPressHandler = null;
@@ -136,16 +162,43 @@ export default function htmlToElement(rawHtml, customOpts = {}, done) {
             </TextComponent>);
           } else if (parent.name === 'ul') {
             listItemPrefix = (<TextComponent style={[defaultStyle, customStyle]}>
-              {opts.bullet}
+              -
             </TextComponent>);
           }
-          if (opts.addLineBreaks && index < list.length - 1) {
-            linebreakAfter = opts.lineBreak;
-          }
+          // if (opts.addLineBreaks && index < list.length - 1) {
+            linebreakAfter = '\n';
+          // }
+
+          return (
+              <View
+                  {...opts.nodeComponentProps}
+                  key={index}
+                  onPress={linkPressHandler}
+                  onLongPress={linkLongPressHandler}
+                  style={{ display: 'flex', flexDirection: 'row', marginTop: 5 }}
+              >
+                <View style={{width: 15}}>{listItemPrefix}</View>
+                <Text style={{paddingRight: 15}}>{domToElement(node.children, node)}</Text>
+              </View>
+          );
         }
 
         const {NodeComponent, styles} = opts;
 
+        if (node.name === 'ul' || node.name === 'ol') {
+          return (
+              <View
+                  {...opts.nodeComponentProps}
+                  key={index}
+                  onPress={linkPressHandler}
+                  style={!node.parent ? styles[node.name] : null}
+                  onLongPress={linkLongPressHandler}
+              >
+                {domToElement(node.children, node)}
+              </View>
+          )
+        }
+
         return (
           <NodeComponent
             {...opts.nodeComponentProps}

package.json

@@ -40,6 +40,7 @@
     "url": "git://github.com/jsdf/react-native-htmlview.git"
   },
   "dependencies": {
+    "deprecated-react-native-prop-types": "^2.3.0",
     "entities": "^1.1.1",
     "htmlparser2-without-node-native": "^3.9.2"
   }