Publishing My First npm Package - @brown-bear/react-native-autoheight-webview

Aug 19, 2025

I'm excited to announce the release of my first npm package: @brown-bear/react-native-autoheight-webview – an updated and modernized version of the popular React Native auto-height WebView library.

The Problem

After updating my React Native projects to newer versions, I discovered that the original react-native-autoheight-webview library was no longer compatible with recent React Native releases. This library was essential for my apps, automatically adjusting WebView heights based on content to create seamless user experiences.

Rather than wait for an official update or search for alternatives, I decided to fork the original project and bring it up to date with modern React Native versions.

Introducing @brown-bear/react-native-autoheight-webview

This fork maintains all the functionality developers loved about the original while adding compatibility with the latest React Native versions and dependencies.

🚀 Key Features

• Auto Height: Automatically adjusts webview height based on content
• Auto Width: Supports auto width for inline HTML content
• Cross Platform: Works seamlessly on both iOS and Android
• Modern Compatibility: Updated for React Native >= 0.78
• Updated Dependencies: Compatible with react-native-webview >= 13.13.2
• Customizable: Support for custom CSS, JavaScript, and styling
• Performance Optimized: Efficient size calculation and updates

📦 Installation

npm install @brown-bear/react-native-autoheight-webview react-native-webview

📖 Quick Start

import AutoHeightWebView from '@brown-bear/react-native-autoheight-webview'
import { Dimensions } from 'react-native'

<AutoHeightWebView
  style={{ width: Dimensions.get('window').width - 15, marginTop: 35 }}
  customStyle={`
    * {
      font-family: 'Times New Roman';
    }
    p {
      font-size: 16px;
    }
  `}
  onSizeUpdated={size => console.log('New height:', size.height)}
  source={{ 
    html: `<p>Your dynamic HTML content here that will auto-resize!</p>` 
  }}
  scalesPageToFit={true}
  viewportContent={'width=device-width, user-scalable=no'}
/>

What's New in This Fork

• Updated React Native Support: Now works with React Native >= 0.78
• Modern WebView Compatibility: Compatible with the latest react-native-webview versions
• Improved Documentation: Clear installation and usage instructions
• Active Maintenance: Committed to keeping the library updated and bug-free
• Community Focus: Open to feedback, feature requests, and contributions

Try It Out

I've also created a demo project to showcase the library in action:

• Demo Repository: https://github.com/giannistolou/react-native-autoheight-webview-demo

Get Involved

Since I actively use this library in my own projects, I'm committed to maintaining it. I welcome:

• Testing: Try it in your projects and report any issues
• Feedback: Share your experience and suggestions
• Contributions: Pull requests and feature ideas are welcome
• Bug Reports: Help make the library more robust

Links

• npm Package: https://www.npmjs.com/package/@brown-bear/react-native-autoheight-webview
• GitHub Repository: https://github.com/giannistolou/react-native-autoheight-webview
• Issues & Discussions: https://github.com/giannistolou/react-native-autoheight-webview/issues
• Demo Project: https://github.com/giannistolou/react-native-autoheight-webview-demo

Credits

This package is a fork of the excellent original work by iou90. All credit for the core functionality goes to the original author and contributors.

Ready to give your React Native WebViews the auto-height functionality they deserve? Install @brown-bear/react-native-autoheight-webview today and let me know how it works for your projects!