react-native-html-component
v1.0.3
Published
This allows you to render HTML content within your application. It accepts a string of HTML content as a prop and renders it within a WebView component. This makes it easy to integrate rich HTML content into your React Native application.
Downloads
345
Maintainers
caioedutReadme
React Native HTML Component
This allows you to render HTML content within your application. It accepts a string of HTML content as a prop and renders it within a WebView component. This makes it easy to integrate rich HTML content into your React Native application.
Installation
Expo
expo install react-native-html-component react-native-webviewOther
npm install react-native-html-component react-native-webview
# OR
yarn add react-native-html-component react-native-webview
#OR
pnpm add react-native-html-component react-native-webview
Usage
import Html from 'react-native-html-component';
export default function App() {
return (
<Html html="<p>Hello World!</p>" />
)
}Props
html
A string that represents the HTML content to be rendered.
➤ Type: string
allowTextSelection
An optional boolean that determines whether text selection is allowed.
➤ Type: boolean
➤ Default: false
backgroundColor
An optional string that sets the background color of the root html.
➤ Type: string
➤ Default: 'transparent'
color
An optional string that sets the text color of the root html.
➤ Type: string
➤ Default: '#000000'
css
An optional string with pure css that will be injected into the html.
➤ Type: string
delay
Delay in milliseconds to calculate the element height. It is recommended to use values above 50ms to avoid rendering whitespace.
➤ Type: number
➤ Default: 50
fontSize
An optional number that sets the font size of the root html.
➤ Type: number
➤ Default: 16
style
An optional StyleProp object that can be used to apply custom styles to the component.
➤ Type: StyleProp<ViewStyle>
onNavigate
Event fires every time a link is pressed or the url is changed in some way.
The default action opens the url in the browser with Linking.open(url).
Return true or false to enable or disable the default action.
➤ Type: ({ url: string }) => boolean