Line is overlapped to each other

[ayushkumarbhadani]

Here is what I have in my code:

<Markdown
  style={{
    body: {
      maxWidth: Dimensions.get("window").width - 150,
      color: item?.role === "user" ? "white" : "black",
    },
    p: {
      height: "auto",
    },
    ul: {
      height: "auto",
    },
    li: {
      height: "auto",
    },
    ol: {
      height: "auto",
    },
  }}
  className={`text-md ${
    item?.role === "user" ? "text-white" : "text-black"
  }`}
>
  {item?.content}
</Markdown>

[ngdbao]

I encounter the same issue sometimes

[ayushkumarbhadani]

@ngdbao This is somewhat working for me, although it is not 100% working but it is better that the default implementation.

const listItemRulesForMarkdown = {
    list_item: (node, children, parent, styles, inheritedStyles = {}) => {
      const refStyle = {
        ...inheritedStyles,
        ...StyleSheet.flatten(styles.list_item),
      };

      const arr = Object.keys(refStyle);
      const modifiedInheritedStylesObj = {};

      for (let b = 0; b < arr.length; b++) {
        if (textStyleProps.includes(arr[b])) {
          modifiedInheritedStylesObj[arr[b]] = refStyle[arr[b]];
        }
      }

      const commonStyles = {
        marginLeft: hasParents(parent, "bullet_list") ? 20 : 0, // Indent bullet lists
        maxWidth: "100%",
        marginTop: 5,
        marginBottom: 5,
      };

      if (hasParents(parent, "bullet_list")) {
        return (
          <View key={node.key} style={commonStyles}>
            <View
              style={{
                flexDirection: "row",
                alignItems: "flex-start", // Align items to the start
              }}
            >
              <Text
                style={[modifiedInheritedStylesObj, styles.bullet_list_icon]}
                accessible={false}
              >
                {Platform.select({
                  android: "\u2022",
                  ios: "\u00B7",
                  default: "\u2022",
                })}
              </Text>
              <Text style={{ flexShrink: 1 }}>{children}</Text>
              {/* Change View to Text */}
            </View>
          </View>
        );
      }

      if (hasParents(parent, "ordered_list")) {
        const orderedListIndex = parent.findIndex(
          (el) => el.type === "ordered_list"
        );

        const orderedList = parent[orderedListIndex];
        let listItemNumber;

        if (orderedList.attributes && orderedList.attributes.start) {
          listItemNumber = orderedList.attributes.start + node.index;
        } else {
          listItemNumber = node.index + 1;
        }

        return (
          <View key={node.key} style={commonStyles}>
            <View
              style={{
                flexDirection: "row",
                alignItems: "flex-start", // Align items to the start
                marginBottom: 15,
              }}
            >
              <Text
                style={[modifiedInheritedStylesObj, styles.ordered_list_icon]}
              >
                {listItemNumber}
                {node.markup}
              </Text>
              <Text style={{ flexShrink: 1 }}>{children}</Text>
              {/* Change View to Text */}
            </View>
          </View>
        );
      }

      return (
        <View key={node.key} style={commonStyles}>
          {children}
        </View>
      );
    }};

Here is how you will use the above implementation with the Markdown:

<Markdown
  debugPrintTree
  rules={
    Platform.OS === "ios"
      ? {
          ...tableRulesForMarkdown,
          ...listItemRulesForMarkdown,
        }
      : {
          ...listItemRulesForMarkdown,
        }
  }
  style={{
    body: {
      maxWidth: Dimensions.get("window").width - 150,
      color: item?.role === "user" ? "white" : "black",
    },

    paragraph: {
      height: "auto",
    },
    text: {
      height: "auto",
    },
    ul: {
      height: "auto",
    },
    li: {
      height: "auto",
    },
    ol: {
      height: "auto",
    },
    list_item: {
      height: "auto",
      paddingBottom: 10,
      paddingTop: 10,
    },
    ordered_list_icon: {
      marginLeft: 5,
      marginRight: 5,
    },
    table: Platform.OS === "ios" && styles.table,
    thead: Platform.OS === "ios" && styles.thead,
    tbody: Platform.OS === "ios" && styles.tbody,
    th:
      Platform.OS === "ios"
        ? styles.th
        : { backgroundColor: "#f1f1f1" },
    tr: Platform.OS === "ios" && styles.tr,
    td: Platform.OS === "ios" && styles.td,
  }}
  className={`text-md ${
    item?.role === "user" ? "text-white" : "text-black"
  }`}
>
  {item?.content} // Markdown content here..
</Markdown>

[ngdbao]

@ayushkumarbhadani thanks for sharing. Turn out, the Issue comes from custom rules of list_item.

[armandokun]

Is there a more robust solution to this problem? @iamacup

[AlexanderBich]

I'm also experiencing this issue, and the solution above does not help

[ayushkumarbhadani]

@AlexanderBich you can try writing your own rules using the rules prop. Meanwhile, I don't think there is any permanent solution. It occurs only sometimes though.

[AlexanderBich]

@ayushkumarbhadani thank you, actually wrapping Markdown component with flexDirection: 'row' wrapper has helped me, I no longer see the text going outside of the container and overlapping other elements

[ayushkumarbhadani]

Most Welcome @AlexanderBich

[quannguyen291]

@AlexanderBich You saved my day!

[H-hang-H]

good

[weizhe412]

@ayushkumarbhadani thank you, actually wrapping Markdown component with flexDirection: 'row' wrapper has helped me, I no longer see the text going outside of the container and overlapping other elements

save my life !