Home > Enterprise >  Correct way to convert html strings in React-Native?
Correct way to convert html strings in React-Native?

Time:08-08

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.

CodePudding user response:

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>
  );
}
  • Related