react-native-web-community / React Native Web Webview
Licence: mit
React Native for Web implementation of RN's WebView
Stars: ✭ 79
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to React Native Web Webview
Customtabs Kotlin
Helpers of the Chrome Custom tabs re-written in Kotlin and with Architecture Components to offer a simpler API
Stars: ✭ 48 (-39.24%)
Mutual labels: webview
Lego Expo
Play with Lego bricks anywhere using Expo
Stars: ✭ 65 (-17.72%)
Mutual labels: react-native-web
Cl.kunder.webview
This cordova plugin enables you to open a second webview
Stars: ✭ 36 (-54.43%)
Mutual labels: webview
React Native Web Template
Template project for sharing code between iOS, Android & Web using monorepo
Stars: ✭ 45 (-43.04%)
Mutual labels: react-native-web
React Native Web Linear Gradient
React Native for Web implementation of react-native-linear-gradient
Stars: ✭ 68 (-13.92%)
Mutual labels: react-native-web
Android File Chooser
Handle Android file chooser click actions on all Android versions
Stars: ✭ 46 (-41.77%)
Mutual labels: webview
Ultimaterefreshview
UltimateRefreshView 实现下拉刷新,上拉加载更多的轻量级库;支持RecyclerView ,ListView ,ScrollView & WebView
Stars: ✭ 64 (-18.99%)
Mutual labels: webview
Andorid Litehybrid Webview
A android hybrid framework, works for H5 and native interactions via webview.
Stars: ✭ 39 (-50.63%)
Mutual labels: webview
Snackui
SnackUI 🍑 - the final React style library. With an *optimizing compiler* that lets you write views naturally, with easier DX, working on native and web at once, all while being faster than hand-rolling your own CSS.
Stars: ✭ 55 (-30.38%)
Mutual labels: react-native-web
Bywebview
🌐 WebView 全方面使用,JS交互、进度条、上传图片、错误页面、视频全屏播放、唤起原生App、获取网页源代码、被作为第三方浏览器打开、DeepLink、[腾讯x5使用示例]
Stars: ✭ 982 (+1143.04%)
Mutual labels: webview
Parser Javascript
Browser sniffing gone too far — A useragent parser library for JavaScript
Stars: ✭ 66 (-16.46%)
Mutual labels: webview
Popup Bridge Android
PopupBridge allows WebViews to open popup windows in a browser and send data back to the WebView
Stars: ✭ 31 (-60.76%)
Mutual labels: webview
Agentweb
AgentWeb is a powerful library based on Android WebView.
Stars: ✭ 8,375 (+10501.27%)
Mutual labels: webview
React Native Web Workspace
cross platform app with react in a monorepo
Stars: ✭ 74 (-6.33%)
Mutual labels: react-native-web
Rey
RE-imagined Youtube music player for web (& desktop)
Stars: ✭ 59 (-25.32%)
Mutual labels: react-native-web
react-native-web-webview
React Native for Web implementation of RN's WebView
Getting started
$ npm install react-native-web-webview --save
Alias the package in your webpack config:
resolve: {
alias: {
'react-native': 'react-native-web',
...
'react-native-webview': 'react-native-web-webview',
}
}
Add the following rule to your webpack config:
const rule = {
test: /postMock.html$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
},
},
};
Usage
import { WebView } from 'react-native-webview';
See RN's doc.
Supported props are:
source
onMessage
scrollEnabled
injectedJavaScript
style
Additional, web-specific props are:
-
newWindow
: (boolean|{ name: string, features: string}) This will open the source in a new window, optionally giving it an internal name and custom features. By default, the name iswebview
and there are no features set. This is useful when your target has X-Frame-Options or a no-CORS policy. It currently only supports asource
prop with amethod
set toPOST
. Please feel free to do a PR to support more request types! -
title
: (string) This prop will set thewebview
title.
Examples
See the storybook.
Contributing
PRs are welcome!
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].