@brown-bear/react-native-autoheight-webview
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.
🚀 Features
- 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
📦 Installation
This package requires react-native-webview as a peer dependency.
npm install @brown-bear/react-native-autoheight-webview react-native-webview
📖 Usage
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
/>
📱 Demo
|
You can also try the demo project for a full example.
⚙️ API Reference
Props
| 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 |
FileObject
interface FileObject {
href: string; // File URL or path
type: string; // MIME type (e.g., 'text/css')
rel: string; // Relationship (e.g., 'stylesheet')
}
📋 Requirements
- React Native >= 0.78
- react-native-webview >= 13.13.2
📚 Documentation
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.
🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
📄 License
This project is licensed under the MIT License.
💝 Support
Support the Original Author (iou90)
Support This Fork
🔗 Links
- 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