@widergy/mobile-ui 1.16.2 → 1.16.3

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [1.16.3](https://github.com/widergy/mobile-ui/compare/v1.16.2...v1.16.3) (2024-08-08)
+
+
+### Bug Fixes
+
+* android highlight for markdown links ([#329](https://github.com/widergy/mobile-ui/issues/329)) ([0b712dc](https://github.com/widergy/mobile-ui/commit/0b712dc2bd364fcff8229766daf788ba2f4a2796))
+
 ## [1.16.2](https://github.com/widergy/mobile-ui/compare/v1.16.1...v1.16.2) (2024-08-08)
 
 

package/lib/components/Label/index.js

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { Text } from 'react-native';
 import Markdown from 'react-native-markdown-display';
 
@@ -25,29 +25,39 @@ const Label = ({
   const textVariants = Object.keys(textStyles);
   const customStyles = getCustomStyles(textVariants, props, textStyles);
 
+  const [pressed, setPressed] = useState(false);
+
   const styles = formatStyles(
     useMarkdown,
     [textStyles.base, textStyles.fontColor, customStyles, style],
-    markdownStyles
+    markdownStyles,
+    pressed
   );
 
   const LabelRenderer = useMarkdown ? Markdown : Text;
 
-  const propsByComponent = useMemo(
-    () =>
-      useMarkdown
-        ? {
-            mergeStyle: false,
-            onLinkPress,
-            children: markdownFormat(children)
-          }
-        : {
-            allowFontScaling: allowFontScaling ?? theme.allowFontScaling,
-            ...textProps,
-            children
-          },
-    [allowFontScaling, children, onLinkPress, textProps, theme.allowFontScaling, useMarkdown]
-  );
+  const propsByComponent = useMemo(() => {
+    const handleLinkPress = () => {
+      setPressed(true);
+      onLinkPress?.();
+      setTimeout(() => {
+        setPressed(false);
+      }, 200);
+      return true;
+    };
+
+    return useMarkdown
+      ? {
+          mergeStyle: false,
+          onLinkPress: handleLinkPress,
+          children: markdownFormat(children)
+        }
+      : {
+          allowFontScaling: allowFontScaling ?? theme.allowFontScaling,
+          ...textProps,
+          children
+        };
+  }, [allowFontScaling, children, onLinkPress, textProps, theme.allowFontScaling, useMarkdown]);
 
   return <LabelRenderer style={styles} {...propsByComponent} {...props} />;
 };

package/lib/components/Label/styles.js

@@ -1,6 +1,7 @@
 import { StyleSheet } from 'react-native';
 
 import { verticalScale, horizontalScale } from '../../utils/scaleUtils';
+import { IS_ANDROID } from '../../utils/platformUtils/constants';
 
 export const getTextStyles = (theme, color) =>
   StyleSheet.create({
@@ -101,5 +102,9 @@ export const markdownStyles = StyleSheet.create({
   ordered_list_icon: {
     height: '100%',
     paddingBottom: verticalScale(10)
-  }
+  },
+  link: pressed => ({
+    backgroundColor: IS_ANDROID && pressed ? 'lightgray' : 'transparent',
+    textDecorationLine: 'underline'
+  })
 });

package/lib/components/Label/utils.js

@@ -15,7 +15,7 @@ const flattenStyles = (obj = {}, styles) => {
   return obj;
 };
 
-export const formatStyles = (useMarkdown, styles, newMarkdownStyles = {}) => {
+export const formatStyles = (useMarkdown, styles, newMarkdownStyles = {}, pressed) => {
   const { paragraph } = newMarkdownStyles;
 
   const flattenedStyles = flattenStyles({}, styles);
@@ -27,7 +27,8 @@ export const formatStyles = (useMarkdown, styles, newMarkdownStyles = {}) => {
     bullet_list_icon,
     ordered_list,
     ordered_list_content,
-    ordered_list_icon
+    ordered_list_icon,
+    link
   } = markdownStyles;
 
   const paragraphStyle = { ...flattenedStyles, ...paragraph };
@@ -41,6 +42,7 @@ export const formatStyles = (useMarkdown, styles, newMarkdownStyles = {}) => {
         ordered_list,
         ordered_list_content,
         ordered_list_icon,
+        link: link(pressed),
         ...newMarkdownStyles,
         paragraph: paragraphStyle
       }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "1.16.2",
+  "version": "1.16.3",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [