Link does not redirect properly when pressed

[adriandotdev]

Hello

I just wanted to ask if you guys know the issue here?

I have a Markdown and links are not properly working. I am expecting that whenever links are clicked/pressed, it automatically redirects to the given link

Hoping for your response, guys

Thank you.

Here's my code

import type { ImageLoadEventData } from "expo-image";
import { Image } from "expo-image";
import * as emoji from "node-emoji";
import React, { useCallback, useState } from "react";
import { Linking, ScrollView, StyleSheet } from "react-native";
import Markdown from "react-native-markdown-display";

interface MarkdownDisplayProps {
  copy: string;
  withScrollView?: boolean;
}

const MarkdownDisplay = ({
  copy,
  withScrollView = false,
}: MarkdownDisplayProps) => {
  const processedCopy = emoji.emojify(copy);

  const [imageHeight, setImageHeight] = useState(200);

  const handleImageLoad = useCallback((e: ImageLoadEventData) => {
    const { height } = e.source;
    setImageHeight(height);
  }, []);

  const renderMarkdown = useCallback(
    () => (
      <Markdown
        style={markdownStyles}
        onLinkPress={(url) => {
          Linking.openURL(url).catch((err) =>
            console.error("Cannot open URL:", err),
          );
          return false; // prevents default internal behavior
        }}
        rules={{
          image: (node) => {
            const { src, alt } = node.attributes;
            return (
              <Image
                key={node.key}
                source={{ uri: src }}
                alt={alt ?? ""}
                style={[markdownStyles.image, { height: imageHeight }]}
                contentFit="fill"
                onLoad={handleImageLoad}
              />
            );
          },
        }}
      >
        {copy}
      </Markdown>
    ),
    [processedCopy, imageHeight, handleImageLoad],
  );

  if (!withScrollView) return renderMarkdown();

  return <ScrollView>{renderMarkdown()}</ScrollView>;
};

const markdownStyles = StyleSheet.create({
  heading1: { fontSize: 64, fontFamily: "Archivo-Exp-700", color: "#1E252F" },
  heading2: { fontSize: 56, fontFamily: "Archivo-Exp-700", color: "#1E252F" },
  heading3: { fontSize: 40, fontFamily: "Archivo-Exp-700", color: "#1E252F" },
  heading4: { fontSize: 40, fontFamily: "Archivo-Exp-700", color: "#1E252F" },
  heading5: { fontSize: 24, fontFamily: "Archivo-Exp-700", color: "#1E252F" },
  heading6: {
    fontSize: 18,
    fontFamily: "Archivo-Exp-700",
    color: "#1E252F",
    marginVertical: 8,
  },
  paragraph: {
    fontSize: 16,
    fontFamily: "Archivo-500",
    lineHeight: 24,
    color: "#1E252F",
  },
  list_item: {
    fontSize: 16,
    fontFamily: "Archivo-500",
    lineHeight: 24,
    color: "#1E252F",
  },
  link: { color: "blue", textDecorationLine: "underline" },
  hr: {
    height: 1,
    backgroundColor: "#1E252F",
    opacity: 0.3,
    marginVertical: 16,
    width: "100%",
  },
  image: { width: "100%", height: 200, borderRadius: 8 },
});

export default MarkdownDisplay;