TextRenderer.tsx

import { Alert, StyleSheet, View } from 'react-native';
import {
  EnrichedText,
  type OnLinkPressEvent,
  type OnMentionPressEvent,
  type OnImagePressEvent,
} from 'react-native-enriched-html';
import { enrichedTextHtmlStyle } from '../constants/editorConfig';

interface TextRendererProps {
  nodes: Array<string>;
}

export const TextRenderer = ({ nodes }: TextRendererProps) => {
  const handleLinkPress = (e: OnLinkPressEvent) => {
    Alert.alert('Link Pressed', `You pressed the link: ${e.url}`);
  };

  const handleMentionPress = (e: OnMentionPressEvent) => {
    Alert.alert(
      'Mention Pressed',
      `You pressed the mention: text: ${e.text}, type: ${e.indicator}, attributes: ${JSON.stringify(e.attributes)}`
    );
  };

  const handleImagePress = (e: OnImagePressEvent) => {
    Alert.alert(
      'Image Pressed',
      `You pressed the image: ${JSON.stringify(e.image)}`
    );
  };

  if (nodes.length === 0) {
    return null;
  }

  return (
    <View style={styles.container}>
      {nodes.map((node, index) => (
        <EnrichedText
          key={index}
          style={styles.text}
          htmlStyle={enrichedTextHtmlStyle}
          onLinkPress={handleLinkPress}
          onMentionPress={handleMentionPress}
          onImagePress={handleImagePress}
        >
          {node}
        </EnrichedText>
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    width: '100%',
    padding: 16,
    borderWidth: StyleSheet.hairlineWidth,
    marginVertical: 16,
    borderRadius: 8,
  },
  text: {
    fontSize: 18,
    color: 'black',
    marginTop: 4,
    fontFamily: 'Nunito-Regular',
  },
});