1

I want to render mathjax when "katequation" class is comes in data i have a page of data which is rendered there are some long equations of math which react-native-render-html does not render in proper format so i use Custom HTML tags but the data i get in props is full page data not the data that is inside 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}
    />
Ghost Ops
  • 1,710
  • 2
  • 13
  • 23
Aman Saxena
  • 11
  • 2
  • Welcome to StackOverflow! To help the community help you out, you will have to take the habit of providing a maximum of information in your post. I suggest the following changes : - Provide `react-native-render-html` version used; - Format and indent the code to make it readable. Currently, indentation is hazardous which makes it very difficult to read. - Polish your spelling. I understand it can be difficult, especially for non-native speakers. But a clearly laid out problem will help the community help you. – Jules Sam. Randolph Nov 08 '21 at 13:34
  • As per your issue, I suggest you read the documentation for version 5 carefully, as you will find answers to your question. Especially, the section about custom renderers here: https://github.com/meliorence/react-native-render-html/blob/release/5.1/README.md#creating-custom-renderers Regarding the HTML extraction issue to pass down to MathJax, I suggest you follow this post: https://stackoverflow.com/q/63979897/2779871 – Jules Sam. Randolph Nov 08 '21 at 13:37

0 Answers0