React Native Beauty Webview for easy usage
🌟 Features
- Easy usage
- Easy to configure
- Beauty UI
- Default click and copy url
- Open on browser
- See title of website on header
- Navigation
⭐️ Screenshot
⬇️ Installation
Install react-native-webview
More information about installation of react-native-webview, click here
$ yarn add react-native-webview or $ npm install --save react-native-webview
Install @react-native-community/clipboard
More information about installation of clipboard, click here
$ yarn add @react-native-community/clipboard or $ npm install --save @react-native-community/clipboard
Link native dependencies for IOS
Link native dependencies of @react-native-community/clipboard and @react-native-community/react-native-webview. If your react native verison is lower than 0.60.x, you must check the official documentation of these packages to link correctly.
$ cd ios && pod install
Install our package
$ yarn add react-native-beauty-webview or $ npm install --save react-native-beauty-webview
🔦 Example Usage
import React, {useState} from 'react';import from 'react-native';import BeautyWebView from 'react-native-beauty-webview'; const App = =>
📎 Config
Params | Type | Default | Required | Description |
---|---|---|---|---|
visible | boolean | false | YES | Visibility of modal |
onPressClose | function | - | YES | Run on press the close button (You must set visibilty as false) |
url | string | - | YES | URL of the website |
backgroundColor | string | #fff | - | Background color of view |
headerContent | 'dark' or 'light' | 'dark' | - | Content type of header items like icons |
headerBackground | string | #fff | - | Background of header |
progressColor | string | #2196f3 | - | Color of the progress bar |
loadingText | string | 'Loading...' | - | Text of the loading |
copyLinkTitle | string | 'Copy Link' | - | Text of the copy menu item |
openBrowserTitle | string | 'Open on Browser' | - | Text of the opening on bowser menu item |
extraMenuItems | Array | - | - | Extra menu items, you can see detail on usage part on above |
animationType | 'slide' or 'fade' | 'slide' | - | Animation type of modal |
progressBarType | 'normal' or 'background' | 'normal' | - | Progress bar type |
onLoadEnd | func | - | - | Run at end of the loading |
onLoadStart | func | - | - | Run before start loading |
navigationVisible | boolean | true | - | Show navigation buttons |
closeIcon | Component | - | - | Close icon of header |
menuIcon | Component | - | - | Menu icon of header |
onGoBack | func | - | - | Run at going back |
onGoForward | func | - | - | Run at going forward |
⚠️ Dependency
@react-native-community/react-native-webview
You must install @react-native-community/react-native-webview package correctly before use this package. For more information, please click here
@react-native-community/clipboard
You must install @react-native-community/clipboard package correctly before use this package. For more information, please click here
📋 References
mxck/react-native-material-menu
For menu component, I took advantages of this resource. More information about this resource, please click here