Change text color of a html which was rendered by react-native-render

Question

I want to change all text's color of a html which was rendered by react-native-render-html

Jayraj Chhaya · Answer

To change the text color of an HTML rendered by react-native-render-html , you can make use of the renderersProps prop provided by the library. This prop allows you to customize the rendering of specific HTML elements. import React from 'react'; import { View, Text } from 'react-native'; import HTML from 'react-native-render-html'; const CustomTextRenderer = ({ children }) => ( {children} ); const App = () => { const renderersProps = { p: { renderers: { text: CustomTextRenderer, }, }, span: { renderers: { text: CustomTextRenderer, }, }, // Add more HTML elements as needed }; const htmlContent = ' This is a sample HTML. '; return ( ); }; export default App; we define a custom text renderer component CustomTextRenderer that wraps the text with a component and applies a red color style. We then pass this custom renderer to the renderersProps prop for the and HTML elements.

Chandru TS · Answer

source={{html: source}} contentWidth={width} baseStyle = {baseStyle} /> const baseStyle = { color: 'black' } This works for all the tags commonly

Change text color of a html which was rendered by react-native-render

Answers (2)