Can't replace some tags to react-native element or just use svg

[idanlevi1]

Decision Table

• [X] My issue does not look like “The HTML attribute 'xxx' is ignored” (unless we claim support for it)
• [X] My issue does not look like “The HTML element <yyy> is not rendered”

Good Faith Declaration

• [X] I have read the HELP document here: https://git.io/JBi6R
• [X] I have read the CONTRIBUTING document here: https://git.io/JJ0Pg
• [X] I have confirmed that this bug has not been reported yet

Description

I have this html: <blockquote>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</blockquote>

and it needs to look like the image:

I think to take the blockquote and replace it with my custom component and add the quotes with svg but I don't know how to do this... I tried to use customHTMLElementModels but I don't know how to replace to my custom react native component I also tried another way, to insert svg tag inside (regex, replace...) but the SVG not showing... `

      </svg>
      <blockquote>לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית נולום ארווס סאפיאן - פוסיליס קוויס, אקווזמן קוואזי במר מודוף לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית נולום ארווס סאפיאן - פוסיליס קוויס, אקווזמן קוואזי במר מודוף.</blockquote>`

Any suggestions? 🙏🏽

React Native Information

react native:  `0.68.2v`

RNRH Version

react-native-render-html: 6.3.4v

Tested Platforms

• [X] Android
• [X] iOS
• [ ] Web
• [ ] MacOS
• [ ] Windows

Reproduction Platforms

• [X] Android
• [X] iOS
• [ ] Web
• [ ] MacOS
• [ ] Windows

Minimal, Reproducible Example

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Additional Notes

No response

[idanlevi1]

My solution:

const BlockquoteRender = ({ TDefaultRenderer, textProps, ...props }) => {
    const tchildrenAreText = props.tnode.children.every(
      (t) => t.type === "text" || t.type === "phrasing"
    );
    const children = <TNodeChildrenRenderer tnode={props.tnode} />;
    return (
      <TDefaultRenderer {...props} >
        <View style={styles(theme).blockquoteSvgTop}>
          <Quotes />
        </View>
        {tchildrenAreText ? <Text style={{ zIndex: 2 }}>{children}</Text> : children}
        <View style={styles(theme).blockquoteSvgBottom}>
          <Quotes />
        </View>
      </TDefaultRenderer>
    );
  };

  const renderers = {
    iframe: IframeRenderer,
    blockquote: BlockquoteRender,
  };

and added style:

const styles = (theme: any) => StyleSheet.create({
  blockquoteSvgTop: {
    position: 'absolute',
    left: -18,
    top: -20,
  },
  blockquoteSvgBottom: {
    position: 'absolute',
    right: -18,
    bottom: -20,
    transform: [{ rotateX: "180deg" }, { rotateY: "180deg" }],
  }
});