An auto height webview for React Native, even auto width for inline html
npm install @brown-bear/react-native-autoheight-webviewreact-native-webview as a peer dependency.
npm install @brown-bear/react-native-autoheight-webview react-native-webview
jsx
import AutoHeightWebView from '@brown-bear/react-native-autoheight-webview'
import { Dimensions } from 'react-native'
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: Tags are great for describing the essence of your story in a single word or phrase, but stories are rarely about a single thing. 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".
}}
scalesPageToFit={true}
viewportContent={'width=device-width, user-scalable=no'}
// Additional react-native-webview props supported
/>
`
📱 Demo
!Demo |
You can also try the demo project for a full example.
⚙️ API Reference
$3
| 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 |
| 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 |
$3
`js
interface FileObject {
href: string; // File URL or path
type: string; // MIME type (e.g., 'text/css')
rel: string; // Relationship (e.g., 'stylesheet')
}
``