@moneylion/react-native-offer-carousel 1.10.2 → 1.11.1

package/src/capabilities/ui/elements/src/components/MarkdownText/components.tsx

@@ -1,11 +1,7 @@
 import React from "react";
-import { StyleSheet } from "react-native";
+import { Linking, StyleSheet } from "react-native";
 import { Abbreviation } from "./Abbreviation";
-import {
-	openUrl,
-	type ASTNode,
-	type RenderRules,
-} from "react-native-markdown-display";
+import { lexer } from "marked";
 import Text, {
 	type TextProps,
 	type TextWeight,
@@ -39,152 +35,161 @@ const BoldText = ({
 	return <Text testID={testID}>{processChildren(children)}</Text>;
 };
 
-// Helper to create text variants
-const createTextVariant =
-	(props: TextProps) => (node: ASTNode, children: React.ReactNode) => {
-		return (
-			<Text
-				key={node.key || `${node.type}-${node.index}`}
-				{...props}
-				testID={`${node.type}-${node.index}`}
-			>
-				{children}
-			</Text>
-		);
-	};
-
-export const createMarkdownComponents = ({
-	numberOfLines,
-	variant,
-	weight,
-	color,
-}: {
+export type RenderProps = {
 	numberOfLines?: number;
 	variant?: Variant;
 	weight?: TextWeight;
 	color?: keyof ThemeColors;
-}): RenderRules => {
-	// Keep track of the first list item
-	let isFirstListItem = true;
-
-	return {
-		// Headings
-		heading1: createTextVariant({ variant: "title-1" }),
-		heading2: createTextVariant({ variant: "title-2" }),
-		heading3: createTextVariant({ variant: "title-3" }),
-		heading4: createTextVariant({ variant: "title-4" }),
-		heading5: createTextVariant({ variant: "title-5" }),
-
-		// Lists
-		bullet_list: (node: ASTNode, children: React.ReactNode) => {
-			// Reset the flag when a new list starts
-			isFirstListItem = true;
-			return (
-				<Text
-					key={node.key || `${node.type}-${node.index}`}
-					variant={variant}
-					weight={weight}
-					color={color}
-					numberOfLines={numberOfLines}
-					style={styles.bulletList}
-					testID={`${node.type}-${node.index}`}
-				>
-					{children}
-				</Text>
-			);
-		},
-
-		// Links - Add detection for abbreviations in the text content
-		link: (node: ASTNode, children: React.ReactNode) => {
-			// Check if this link has a title attribute - if so, treat it as an abbreviation
-			if (node.attributes && node.attributes.title) {
+};
+
+// infer the type based on our entry point for rendering tokens
+type AssumedTokenType = ReturnType<typeof lexer>[number];
+
+/**
+ * Parses `content` and renders the marked token tree to React Native
+ * components.
+ *
+ * Recursively renders a marked token tree to React Native components. Other
+ * methods from marked are not suitable, as we need to build a component node
+ * and thread all the children into the parent element.
+ */
+export function renderMarkdown(
+	content: string,
+	{ numberOfLines, ...props }: RenderProps
+): React.ReactNode {
+	const tokens = lexer(content, { gfm: false });
+	let nodeIdx = 0;
+
+	function renderTokens(
+		tokenList: AssumedTokenType[] | undefined
+	): React.ReactNode {
+		if (!tokenList || tokenList.length === 0) {
+			return null;
+		}
+		return tokenList.map((token) => renderToken(token));
+	}
+
+	function renderToken(token: AssumedTokenType): React.ReactNode {
+		const id = nodeIdx++;
+		const key = `${token.type}-${id}`;
+
+		// general reference to child tokens for DRY-ness
+		const childTokens =
+			"tokens" in token && token.tokens ? token.tokens : undefined;
+
+		switch (token.type) {
+			case "heading": {
+				const variant = `title-${token.depth}` as Variant;
+
 				return (
-					<Abbreviation
-						key={node.key || `${node.type}-${node.index}`}
-						title={node.attributes.title}
+					<Text
+						key={key}
+						variant={variant}
+						testID={`heading${token.depth}-${id}`}
 					>
-						{children}
-					</Abbreviation>
+						{renderTokens(childTokens)}
+					</Text>
 				);
 			}
 
-			return (
-				<Text
-					key={node.key || `${node.type}-${node.index}`}
-					variant={variant}
-					weight={weight}
-					color={color}
-					style={styles.linkText}
-					onPress={() => openUrl(node.attributes.href || "")}
-					testID={`${node.type}-${node.index}`}
-				>
-					{children}
-				</Text>
-			);
-		},
-
-		// Custom parser for text to find potential abbreviation patterns
-		text: (node: ASTNode) => {
-			// If this implementation doesn't catch abbreviations, we'll need to
-			// pre-process the markdown before passing it to the renderer
-			return (
-				<Text
-					key={node.key || `${node.type}-${node.index}`}
-					variant={variant}
-					weight={weight}
-					color={color}
-				>
-					{node.content}
-				</Text>
-			);
-		},
-
-		// List items
-		list_item: (node: ASTNode, children: React.ReactNode) => {
-			// Only add \n if this is not the first item
-			const prefix = isFirstListItem ? "" : "\n";
-			// Set flag to false after the first item
-			isFirstListItem = false;
-
-			return (
-				<Text
-					key={node.key || `${node.type}-${node.index}`}
-					variant={variant || "body-3"}
-					weight={weight}
-					color={color}
-					testID={`${node.type}-${node.index}`}
-				>
-					<Text variant={"body-1"}>{prefix}• </Text>
-					{children}
-				</Text>
-			);
-		},
-
-		// Paragraphs
-		paragraph: (node: ASTNode, children: React.ReactNode) => {
-			return (
-				<Text
-					key={node.key || `${node.type}-${node.index}`}
-					variant={variant}
-					weight={weight}
-					color={color}
-					testID={`${node.type}-${node.index}`}
-				>
-					{children}
-				</Text>
-			);
-		},
-
-		strong: (node, children) => (
-			<BoldText
-				key={node.key || `${node.type}-${node.index}`}
-				testID={`${node.type}-${node.index}`}
-			>
-				{children}
-			</BoldText>
-		),
-	};
-};
+			case "paragraph":
+				return (
+					<Text key={key} {...props} testID={`paragraph-${id}`}>
+						{renderTokens(childTokens)}
+					</Text>
+				);
+
+			case "list": {
+				// attempt to assert child items as an array, since it is typed as any
+				const tokenItems: AssumedTokenType[] =
+					token.items && Array.isArray(token.items) ? token.items : [];
+
+				const renderedItems = tokenItems.map((item, i) => {
+					const itemId = nodeIdx++;
+					const prefix = i === 0 ? "" : "\n";
+
+					return (
+						<Text
+							key={`list_item-${itemId}`}
+							{...props}
+							variant={props.variant || "body-3"}
+							testID={`list_item-${itemId}`}
+						>
+							<Text variant="body-1">{prefix}• </Text>
+							{"tokens" in item ? renderTokens(item.tokens) : null}
+						</Text>
+					);
+				});
+
+				return (
+					<Text
+						key={key}
+						{...props}
+						numberOfLines={numberOfLines}
+						style={styles.bulletList}
+						testID={`bullet_list-${id}`}
+					>
+						{renderedItems}
+					</Text>
+				);
+			}
+
+			case "strong":
+				return (
+					<BoldText key={key} testID={`strong-${id}`}>
+						{renderTokens(childTokens)}
+					</BoldText>
+				);
+
+			case "text": {
+				const inlineChildren = renderTokens(childTokens);
+				if (inlineChildren) {
+					return <React.Fragment key={key}>{inlineChildren}</React.Fragment>;
+				}
+
+				return (
+					<Text key={key} {...props}>
+						{token.text}
+					</Text>
+				);
+			}
+
+			case "escape":
+				return (
+					<Text key={key} {...props}>
+						{token.text}
+					</Text>
+				);
+
+			case "link": {
+				if (token.title) {
+					return (
+						<Abbreviation key={key} title={token.title}>
+							{renderTokens(childTokens)}
+						</Abbreviation>
+					);
+				}
+
+				return (
+					<Text
+						key={key}
+						{...props}
+						style={styles.linkText}
+						onPress={() => Linking.openURL(token.href)}
+						testID={`link-${id}`}
+					>
+						{renderTokens(childTokens)}
+					</Text>
+				);
+			}
+
+			default:
+				return null;
+		}
+	}
+
+	return renderTokens(tokens);
+}
 
 const styles = StyleSheet.create({
 	bulletList: {
@@ -192,17 +197,6 @@ const styles = StyleSheet.create({
 		flexDirection: "column",
 		alignItems: "flex-start",
 	},
-	bulletPoint: {
-		width: 6,
-		height: 6,
-		borderRadius: 3,
-		backgroundColor: "black",
-		marginTop: 8,
-		marginRight: 8,
-	},
-	listItemText: {
-		marginBottom: 4,
-	},
 	linkText: {
 		textDecorationLine: "underline",
 	},

package/src/capabilities/ui/elements/src/components/MarkdownText/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import { createMarkdownComponents } from "./components";
+import { View } from "react-native";
+import { renderMarkdown } from "./components";
 import { preprocessMarkdown } from "./markdownPreprocessor";
-import Markdown from "react-native-markdown-display";
 import type { TextProps } from "../../../../../../components/Text";
 
 export interface Props extends TextProps {
@@ -15,38 +15,16 @@ export const MarkdownText = ({
 	weight,
 	variant,
 }: Props) => {
-	// Create style object for text properties
-	const textStyle = {
-		color: color,
-	};
+	const preparedContent = preprocessMarkdown(content);
 
-	// Prepare styles for markdown
-	const markdownStyles = {
-		body: {
-			...textStyle,
-			flexShrink: 1,
-		},
-		paragraph: {
-			flexShrink: 1,
-		},
-		// Include styles for all markdown elements that need to respect text properties
-		text: {
-			...textStyle,
-		},
-	};
-
-	// Use the factory function to create components with numberOfLines support
-	const customRules = createMarkdownComponents({
-		numberOfLines,
-		variant,
-		weight,
-		color,
-	});
-	// Preprocess the markdown to handle abbreviations
-	const processedContent = preprocessMarkdown(content);
 	return (
-		<Markdown rules={customRules} style={markdownStyles}>
-			{processedContent}
-		</Markdown>
+		<View style={{ flexShrink: 1 }}>
+			{renderMarkdown(preparedContent, {
+				numberOfLines,
+				color,
+				weight,
+				variant,
+			})}
+		</View>
 	);
 };

package/src/components/DynamicOffers/Render/DynamicOffersRender.tsx

@@ -8,7 +8,6 @@ import React, {
 import { productTypeBuilder as builder } from "../../../builder/builder";
 import { Offer } from "./Offer";
 import {
-	InteractionManager,
 	ScrollView,
 	StyleSheet,
 	View,
@@ -243,7 +242,7 @@ export const DynamicOffersRender = ({
 			setScrollViewWidth(width);
 
 			// Do an initial visibility check after layout
-			InteractionManager.runAfterInteractions(() => {
+			requestAnimationFrame(() => {
 				checkVisibleOffers();
 				initialCheckDone.current = true;
 			});

package/src/version.ts

@@ -1,2 +1,2 @@
 // Version is kept in sync with package.json via the sync-version script
-export const VERSION = "1.10.2";
+export const VERSION = "1.11.1";