1

In React-Native, what is the correct way to convert and display the html string without html quotes and tags?

This is an example text:

"What is the name of James Dean's character in the 1955 movie "Rebel Without a Cause"?"

In React, dangerouslysetinnerhtml option does the trick, but in native I couldn't display it correctly.

Anthon Santhez
  • 402
  • 1
  • 7
  • 13
  • You mean to render it? That would need to be done with a [`WebView`](https://reactnative.dev/docs/0.60/webview). Something like ``. Or if you mean to decode it / strip out any HTML characters, then [this answer](https://stackoverflow.com/a/9609450/979052) should help. Eitherway, you should update your question to make it a bit clearer, and show what you've tried so far. – Alicia Sykes Aug 06 '22 at 19:32
  • @Lissy93 Hi. Yes your second guess is what I want. I just want to decode it, get rid of the quotes etc. I mean not to render, just get rid of the html characters and quotes. But the link that you suggested didn't apply. I tried those: str = str.replace(/ – Anthon Santhez Aug 07 '22 at 10:00

1 Answers1

0

The React Native docs recommend React Native WebView.

There are alternative libraries that you can use as well such as react-native-htmlview. This library takes HTML content and renders it as native views.

npm install react-native-render-html

import { ScrollView, useWindowDimensions } from "react-native";
import RenderHTML from "react-native-render-html";


function App() {
  const { width } = useWindowDimensions();
  const HTML = `What is the name of James Dean's character in the 1955 movie "Rebel Without a Cause"?`
  return (
    <ScrollView style={{ flex: 1 }}>
      <RenderHTML contentWidth={width} source={{ HTML }} />
    </ScrollView>
  );
}
notjames
  • 81
  • 5
  • Thank you, I test it tomorrow and accept if I can succeed – Anthon Santhez Aug 06 '22 at 22:00
  • Now I made it working. But the style is plain text. Is there a way to change the text styles? color, fontWeight etc ? – Anthon Santhez Aug 07 '22 at 13:06
  • To style react-native-render-html, follow this guide from their official [website](https://meliorence.github.io/react-native-render-html/docs/guides/styling). There are four style props that you can choose from depending on what you are intending to do. They have an example showing how to use one of the styling props, and you can essentially apply the same concept with the other styling props. I hope this answers your question. – notjames Aug 07 '22 at 21:09
  • I styled it already, accepting your answer, thanks! – Anthon Santhez Aug 07 '22 at 21:29