Python Test

import React from 'react';

import { View, Image } from 'react-native';
import Text from '/components/Text';
import { SvgUri } from 'react-native-svg';
const cheerio = require('cheerio');

/**
 * This is a TypeScript React function that converts HTML to React Native components.
 * @property {string} html - A string containing HTML code that needs to be converted to React Native
 * components.
 */
type Props = {
    html: string;
};

/* This is a function that takes in an object with a string property called `html` and returns an array
of React Native components (`JSX.Element[]`). The function uses the `cheerio` library to parse the
HTML string and then iterates through each HTML element using the `each` method. For each element,
the function checks the element's tag name and creates a corresponding React Native component. For
example, if the tag name is `p`, the function creates a `Text` component with the element's text
content. If the tag name is `img`, the function creates an `Image` component with the element's
`src`, `width`, and `height` attributes. The function recursively calls itself for any `div`
elements to handle nested HTML. Finally, the function returns an array of all the created React
Native components. */
const convertHtmlToReactNative = ({ html }: Props): JSX.Element[] => {
    const $ = cheerio.load(html);
    // console.log(html, "\n")
    const reactNativeComponents: JSX.Element[] = [];

    $('*').each((index: number, element: any) => {
        const tagName = $(element).prop('tagName').toLowerCase();
        switch (tagName) {
            case 'p':
                reactNativeComponents.push(<Text key={index} textAlign={"justify"} fontSize={16}>{$(element).text()}</Text>);
                break;
            case 'div':
                reactNativeComponents.push(<View key={index}>{convertHtmlToReactNative({ html: $(element).html() })}</View>);
                break;
            case 'img':
                // const src = $(element).attr('src');
                // reactNativeComponents.push(<Image key={index} source={{ uri: $(element).attr('src') ?? "" }} style={{ resizeMode: "cover", width: "100%", height: "auto" }} />);
                const src = $(element).attr('src');
                // const isBase64 = src && src.startsWith('data:image');
                // const uri = isBase64 ? src : undefined;
                // const resolvedSource = Image.resolveAssetSource({ uri });
                // "https://cdn3.olm.vn/upload/img_teacher/0405/img_teacher_2023-04-05_642d95b7284bb.jpg"
                reactNativeComponents.push(<Image
                    key={index}
                    source={{ uri: src }}
                    style={{ width: "100%", resizeMode: "stretch", maxHeight: "100%", minHeight: 200}}
                />);
                break;
            case 'ul':
                reactNativeComponents.push(<View key={index}>{convertHtmlToReactNative({html: $(element).html()})}</View>);
                break;
            case 'li':
                reactNativeComponents.push(<Text key={index}>&bull; {$(element).text()}</Text>);
                break;
            case 'ol':
                let count = 0;
                reactNativeComponents.push(<View key={index}>{convertHtmlToReactNative({html: $(element).html()}).map((component) => {
                    if (component.type === Text) {
                        count += 1;
                        return <Text key={count}>{count}. {component.props.children}</Text>;
                    }
                    return component;
                })}</View>);
                break;
            case 'svg':
                const svgXml = $(element).html();
                reactNativeComponents.push(<SvgUri key={index} uri={`data:image/svg+xml;utf8,${svgXml}`} />);
                break;
            // Add more cases for other HTML elements
            default:
                reactNativeComponents.push(<Text key={index} textAlign={"justify"} fontSize={16}>{$(element).text()}</Text>);
                break;
        }
    });
    // console.log(reactNativeComponents)
    return reactNativeComponents;
};

export default convertHtmlToReactNative;