Quiero renderizar mathjax cuando la clase "katequation" viene en datos. Tengo una página de datos que se renderiza. Hay algunas ecuaciones matemáticas largas que react-native-render-html no se renderizan en el formato adecuado, así que uso etiquetas HTML personalizadas. pero los datos que obtengo en props son datos de página completa, no los datos que están dentro de div
import React, { useEffect, useState , useRef, useCallback } from 'react'; import { StyleSheet , ImageBackground, Text, Share, BackHandler, TouchableOpacity, Dimensions, Linking, View, FlatList, RefreshControl, Pressable, Image, SectionList , ScrollView } from 'react-native'; import MathJax from 'react-native-mathjax'; import { WebView } from 'react-native-webview'; import table, { cssRulesFromSpecs ,defaultTableStylesSpecs , animationType , alterNode, alterData } from '@native-html/table-plugin'; import HTML , { IGNORED_TAGS , domNodeToHTMLString} from 'react-native-render-html'; const htmlProps = { alterNode, alterData, WebView, renderers: { table, div : (child ,htmlAttribs, passProps , data , domNode) => { return(<View > <MathJax html={data.source.html} style={{backgroundColor:'red'}}/> </View>)}, }, ignoredTags: IGNORED_TAGS, renderersProps: { table: { animationType: 'animated', tableStyleSpecs: {cellSpacingEm: 1.1, fitContainerWidth: true, thOddBackground: '#005082', thOddColor:'#ffffff', trEvenBackground: '#ffffff', trOddBackground: '#deeaf6', tdBorderColor: '#c9c9c9', thBorderColor: '#c9c9c9', outerBorderColor:'#c9c9c9', cellPaddingEm: .5, outerBorderWidthPx: 1, rowsBorderWidthPx: 1 , columnsBorderWidthPx: 1 , } }, }, alterNode, ignoredTags: IGNORED_TAGS, defaultTableStylesSpecs, cssRulesFromSpecs , defaultWebViewProps: {}, tagsStyles: { i: { textAlign: 'center', fontStyle: 'italic', color: 'grey' } , a: {fontFamily:'roboto', fontSize:18, paddingVertical:5}, table: {width: '95%', marginHorizontal:'2%' , borderColor:'#c9c9c9' , borderWidth:1 }}, classesStyles: { 'last-paragraph': { textAlign: 'right', color: 'teal', fontWeight: '800' }, 'blog-detail-table': {width: '95%', marginHorizontal:'2%' , borderColor:'#c9c9c9' , borderWidth:1 } } }; <HTML source={{html: item.description }} {...htmlProps} allowWhitespaceNodes ={false} automaticallyAdjustContentInsets={true} />