An auto height webview for React Native, with support for auto width on inline HTML content. This is a fork of the original project iou90.
- Auto Height: Automatically adjusts webview height based on content
- Auto Width: Supports auto width for inline HTML content
- Cross Platform: Works on both iOS and Android
- Customizable: Support for custom CSS, JavaScript, and styling
- Performance Optimized: Efficient size calculation and updates
This package requires react-native-webview as a peer dependency.
npm install @brown-bear/react-native-autoheight-webview react-native-webview
import AutoHeightWebView from '@brown-bear/react-native-autoheight-webview'
import { Dimensions } from 'react-native'
<AutoHeightWebView
style={{
width: Dimensions.get('window').width - 15,
marginTop: 35
}}
customScript={document.body.style.background = 'lightyellow';}
customStyle={ * { font-family: 'Times New Roman'; } p { font-size: 16px; } }
onSizeUpdated={size => console.log(size.height)}
files={[{
href: 'cssfileaddress',
type: 'text/css',
rel: 'stylesheet'
}]}
source={{
html: <p style="font-weight: 400;font-style: normal;font-size: 21px;line-height: 1.58;letter-spacing: -.003em;"> Tags are great for describing the essence of your story in a single word or phrase, but stories are rarely about a single thing. <span style="background-color: transparent !important;background-image: linear-gradient(to bottom, rgba(146, 249, 190, 1), rgba(146, 249, 190, 1));"> If I pen a story about moving across the country to start a new job in a car with my husband, two cats, a dog, and a tarantula, I wouldn't only tag the piece with "moving". I'd also use the tags "pets", "marriage", "career change", and "travel tips". </span> </p>
}}
scalesPageToFit={true}
viewportContent={'width=device-width, user-scalable=no'}
// Additional react-native-webview props supported
/>
|
You can also try the demo project for a full example.
| Prop | Type | Default | Description |
|---|---|---|---|
| style | ViewStyle |
- | Component styling. For iOS text selection issues, reduce width by 15+ and add marginTop 35+ |
| customScript | string |
- | Custom JavaScript code to inject into the webview |
| customStyle | string |
- | Custom CSS content added to the page's <head> |
| onSizeUpdated | function |
- | Callback triggered when height or width changes |
| files | FileObject[] |
- | Array of local or remote files to include |
| source | object |
- | WebView source object (HTML, URI, etc.) |
| scalesPageToFit | boolean |
false |
Enable page scaling (differs from react-native-webview default) |
| scrollEnabledWithZoomedin | boolean |
false |
Allow scrolling on iOS when zoomed in |
| viewportContent | string |
'width=device-width' (iOS) |
Viewport meta tag content |
| showsVerticalScrollIndicator | boolean |
false |
Show vertical scroll indicator |
| showsHorizontalScrollIndicator | boolean |
false |
Show horizontal scroll indicator |
| originWhitelist | string[] |
['*'] |
Allowed origins for navigation |
interface FileObject {
href: string; // File URL or path
type: string; // MIME type (e.g., 'text/css')
rel: string; // Relationship (e.g., 'stylesheet')
}- React Native >= 0.78
- react-native-webview >= 13.13.2
For earlier versions and migration guides, see the original author's README.
Note: Bug fixes and new features are only included in the latest version.
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License.
- Repository: https://github.com/giannistolou/react-native-autoheight-webview
- npm Package: @brown-bear/react-native-autoheight-webview
- Issues: Report bugs or request features
Made with ❤️ by the React Native community
