Merge pull request #54 from gmsgowtham/minor/image-style

feat(minor): support image styling
gmsgowtham · Oct 14, 2022 · 4aea3ba · 4aea3ba
2 parents 713d4f1 + e173840
commit 4aea3ba
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 18 deletions.
diff --git a/examples/react-native-marked-sample/src/App.tsx b/examples/react-native-marked-sample/src/App.tsx
@@ -20,7 +20,7 @@ export default function App() {
       />
       <SafeAreaView>
         <Markdown
-          value={json.body_markdown_4}
+          value={json.body_markdown_1}
           flatListProps={{
             contentContainerStyle: styles.container,
           }}

diff --git a/src/components/MDImage.tsx b/src/components/MDImage.tsx
@@ -1,13 +1,14 @@
 import React, { memo, useEffect } from 'react';
-import { Image } from 'react-native';
+import { Image, ImageStyle } from 'react-native';
 import FitImage from 'react-native-fit-image';
 
 interface MDImageProps {
   uri: string;
   alt?: string;
+  style?: ImageStyle;
 }
 
-const MDImage = ({ uri, alt }: MDImageProps) => {
+const MDImage = ({ uri, alt, style }: MDImageProps) => {
   useEffect(() => {
     Image.prefetch(uri);
   }, [uri]);
@@ -19,6 +20,7 @@ const MDImage = ({ uri, alt }: MDImageProps) => {
       accessibilityHint={undefined}
       source={{ uri }}
       resizeMode="cover"
+      style={style}
     />
   );
 };

diff --git a/src/lib/Parser.tsx b/src/lib/Parser.tsx
@@ -127,7 +127,8 @@ class Parser {
         case 'image': {
           return this.renderer.getImageNode(
             token.href,
-            token.text || token.title
+            token.text || token.title,
+            this.styles.image
           );
         }
         case 'strong': {
@@ -223,7 +224,8 @@ class Parser {
             this.renderer.getImageLinkNode(
               t.href,
               imageToken.href,
-              imageToken.text || imageToken.title
+              imageToken.text || imageToken.title,
+              this.styles.image
             )
           );
         }

diff --git a/src/lib/Renderer.tsx b/src/lib/Renderer.tsx
@@ -6,6 +6,7 @@ import {
   TouchableHighlight,
   TextStyle,
   ViewStyle,
+  ImageStyle,
 } from 'react-native';
 import MarkedList from '@jsamr/react-native-li';
 import Disc from '@jsamr/counter-style/presets/disc';
@@ -41,8 +42,13 @@ class Renderer {
     );
   };
 
-  getImageLinkNode = (href: string, imageUrl: string, alt?: string) => {
-    const imageNode = this.getImageNode(imageUrl, alt);
+  getImageLinkNode = (
+    href: string,
+    imageUrl: string,
+    alt?: string,
+    style?: ImageStyle
+  ) => {
+    const imageNode = this.getImageNode(imageUrl, alt, style);
     return (
       <TouchableHighlight
         accessibilityRole="link"
@@ -87,8 +93,10 @@ class Renderer {
     );
   }
 
-  getImageNode(uri: string, alt?: string) {
-    return <MDImage key={generateRandomString()} uri={uri} alt={alt} />;
+  getImageNode(uri: string, alt?: string, style?: ImageStyle) {
+    return (
+      <MDImage key={generateRandomString()} uri={uri} alt={alt} style={style} />
+    );
   }
 
   getListNode(

diff --git a/src/lib/__tests__/__snapshots__/Markdown.spec.tsx.snap b/src/lib/__tests__/__snapshots__/Markdown.spec.tsx.snap
@@ -3725,6 +3725,11 @@ exports[`Images Linking Images 1`] = `
         >
           <Memo(MDImage)
             alt="An old rock in the desert"
+            style={
+              {
+                "resizeMode": "cover",
+              }
+            }
             uri="/assets/images/shiprock.jpg"
           />
         </TouchableHighlight>
@@ -3786,8 +3791,12 @@ exports[`Images Linking Images 1`] = `
             accessibilityIgnoresInvertColors={true}
             style={
               [
-                undefined,
-                {},
+                {
+                  "resizeMode": "cover",
+                },
+                {
+                  "flexGrow": 1,
+                },
                 {
                   "height": 0,
                 },
@@ -3852,6 +3861,11 @@ exports[`Images Render 1`] = `
       >
         <Memo(MDImage)
           alt="The San Juan Mountains are beautiful!"
+          style={
+            {
+              "resizeMode": "cover",
+            }
+          }
           uri="https://dummyimage.com/100x100/fff/aaa"
         />
       </View>,
@@ -3899,8 +3913,12 @@ exports[`Images Render 1`] = `
           accessibilityIgnoresInvertColors={true}
           style={
             [
-              undefined,
-              {},
+              {
+                "resizeMode": "cover",
+              },
+              {
+                "flexGrow": 1,
+              },
               {
                 "height": 0,
               },
@@ -6107,6 +6125,11 @@ exports[`Lists Elements in Lists: Images 1`] = `
           >
             <Memo(MDImage)
               alt={null}
+              style={
+                {
+                  "resizeMode": "cover",
+                }
+              }
               uri="https://dummyimage.com/100x100/fff/aaa"
             />
           </View>
@@ -6339,8 +6362,12 @@ exports[`Lists Elements in Lists: Images 1`] = `
               accessibilityIgnoresInvertColors={true}
               style={
                 [
-                  undefined,
-                  {},
+                  {
+                    "resizeMode": "cover",
+                  },
+                  {
+                    "flexGrow": 1,
+                  },
                   {
                     "height": 0,
                   },
@@ -9428,6 +9455,11 @@ exports[`Paragraphs Paragraph with Image 1`] = `
         </Text>
         <Memo(MDImage)
           alt="Chat"
+          style={
+            {
+              "resizeMode": "cover",
+            }
+          }
           uri="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5kq947hwxmjvlmhrbnm6.png"
         />
       </View>,
@@ -9496,8 +9528,12 @@ exports[`Paragraphs Paragraph with Image 1`] = `
           accessibilityIgnoresInvertColors={true}
           style={
             [
-              undefined,
-              {},
+              {
+                "resizeMode": "cover",
+              },
+              {
+                "flexGrow": 1,
+              },
               {
                 "height": 0,
               },

diff --git a/src/theme/styles.ts b/src/theme/styles.ts
@@ -119,6 +119,9 @@ const getStyles = (
       ...fontStyle.regular,
       flexShrink: 1,
     },
+    image: {
+      resizeMode: 'cover',
+    },
   });
 
   return {

diff --git a/src/theme/types.ts b/src/theme/types.ts
@@ -1,4 +1,4 @@
-import type { TextStyle, ViewStyle } from 'react-native';
+import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
 
 export interface MarkedStyles {
   container?: ViewStyle;
@@ -20,6 +20,7 @@ export interface MarkedStyles {
   hr?: ViewStyle;
   list?: ViewStyle;
   li?: TextStyle;
+  image?: ImageStyle;
 }
 
 export type ColorKeys = 'background' | 'code' | 'link' | 'text' | 'border';