Documentation available at;
https://docs.nocodeventure.com/react-native-plugins/react-native-webview
Editor link:
https://bubble.io/page?id=ncv-react-plugins&tab=Design&name=webview&type=pageVideo preview:
https://9b4251e2ffea50d34f12e429488421f9.cdn.bubble.io/f1742377868002x399583288266876600/Video%20Demo.mp4Preview link:
https://ncv-react-plugins.bubbleapps.io/version-test/api/1.1/mobile/preview?debug_mode=false&preview_view=webview## Usage
### Properties
- **URL** (required): The web address to load in the WebView
### States
- **currentUrl**: The current URL loaded in the WebView
### Events
- **loaded**: Triggered when the WebView has finished loading the URL
## Implementation Details
This plugin uses the `react-native-webview` library which is already included in Bubble's mobile app ecosystem. The component provides a clean interface with a loading spinner while content is being fetched.
## Example Use Cases
- Embedding documentation in your app
- Displaying external content like maps, dashboards, or third-party services
- Creating in-app browsers
- Displaying HTML content
## Setup in Bubble
1. Add the WebView component to your mobile app page
2. Set the URL property to your desired web address
3. Use the "loaded" event to perform actions after the content has loaded
4. Access the "currentUrl" state to monitor the current loaded URL
## Limitations
- The WebView respects the same-origin policy and other web security features
- Some websites may prevent embedding in WebViews
- Performance depends on the complexity of the loaded website