React Native is a really popular mobile app development framework. However when running a web application using the React Native Webview, i noticed that it lacked several essential features. To enhance the React Native Webview to support the missing essential features (as of version 0.52) i will be starting a series of blog posts which would ultimately help the React Native developers out there .
In part 1 of this series we will be looking on how to add support for file uploads for both iOS & Android. This means enabling support for </input type=“file“> (Browse button) to upload a file by selecting from the gallery or by taking a photo using the camera.
Supporting File Uploads in iOS
To enable support for file uploads in iOS you just have to add the NSPhotoLibraryUsageDescription key and a description explaining why your app needs photo library access, into your info.plist file.
Supporting File Uploads in Android
To enable support for file uploads in Android, it’s not easy as for iOS. You will need to write native android code to provide the support.
First we need to create a native UI component which extends the React Native Webview UI component. For more details on creating native UI components please refer the official docs: https://facebook.github.io/react-native/docs/native-components-android.html
To begin create a folder named advancedwebview inside android -> app -> src -> main -> java -> com -> yourpackage (These names are used for this tutorial and you are free to name them however you like). Inside the folder you created create a java file named AdvancedWebViewManager.java and add the following code.
package com.yourpackage.advancedwebview;
import android.content.Intent;
import android.net.Uri;
import android.webkit.ValueCallback;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import com.facebook.react.uimanager.annotations.ReactProp;
import com.facebook.react.views.webview.ReactWebViewManager;
public class AdvancedWebviewManager extends ReactWebViewManager {
private ValueCallback mUploadMessage;
private final static int FCR=1;
public WebView webview = null;
private AdvancedWebviewPackage aPackage;
public String getName() {
return "AdvancedWebView";
}
@ReactProp(name = "enabledUploadAndroid")
public void enabledUploadAndroid(WebView view, boolean enabled) {
if(enabled) {
webview = view;
final AdvancedWebviewModule module = this.aPackage.getModule();
view.setWebChromeClient(new WebChromeClient(){
//For Android 3.0+
public void openFileChooser(ValueCallback uploadMsg){
module.setUploadMessage(uploadMsg);
mUploadMessage = uploadMsg;
Intent i = new Intent(Intent.ACTION_GET_CONTENT);
i.addCategory(Intent.CATEGORY_OPENABLE);
i.setType("*/*");
module.getActivity().startActivityForResult(Intent.createChooser(i, "File Chooser"), FCR);
}
// For Android 3.0+, above method not supported in some android 3+ versions, in such case we use this
public void openFileChooser(ValueCallback uploadMsg, String acceptType){
module.setUploadMessage(uploadMsg);
mUploadMessage = uploadMsg;
Intent i = new Intent(Intent.ACTION_GET_CONTENT);
i.addCategory(Intent.CATEGORY_OPENABLE);
i.setType("*/*");
module.getActivity().startActivityForResult(
Intent.createChooser(i, "File Browser"),
FCR);
}
//For Android 4.1+
public void openFileChooser(ValueCallback uploadMsg, String acceptType, String capture){
module.setUploadMessage(uploadMsg);
mUploadMessage = uploadMsg;
Intent i = new Intent(Intent.ACTION_GET_CONTENT);
i.addCategory(Intent.CATEGORY_OPENABLE);
i.setType("*/*");
module.getActivity().startActivityForResult(Intent.createChooser(i, "File Chooser"), FCR);
}
//For Android 5.0+
public boolean onShowFileChooser(
WebView webView, ValueCallback<Uri[]> filePathCallback,
WebChromeClient.FileChooserParams fileChooserParams) {
module.setmUploadCallbackAboveL(filePathCallback);
/*if(mUMA != null){
mUMA.onReceiveValue(null);
}*/
if (module.grantPermissions()) {
module.uploadImage(filePathCallback);
}
return true;
}
});
}
}
public void setPackage(AdvancedWebviewPackage aPackage){
this.aPackage = aPackage;
}
public AdvancedWebviewPackage getPackage(){
return this.aPackage;
}
}
enabledUploadAndroid is a prop passed from the Javascript side. When passed true enabledUploadAndroid method will be called and WebChromeClient which has filechooser methods which will fire when </input type=“file“> is clicked will be set for the webview.
The following permissions should be added to the AndroidManifest.xml to allow the app to access camera and the internal storage.
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.CAMERA"/>
Next we need to create a module file for our AdvancedWebview which will hold the rest of the methods which is required to perform the upload file task. Inside android -> app -> src -> main -> java -> com -> yourpackage ->advancedwebview create a file named AdvancedWebviewModule.java and add the following code to it.
package com.yourpackage.advancedwebview;
import android.Manifest;
import android.annotation.SuppressLint;
import android.annotation.TargetApi;
import android.app.Activity;
import android.content.ClipData;
import android.content.Intent;
import android.content.pm.PackageManager;
import android.net.Uri;
import android.os.Build;
import android.os.Environment;
import android.provider.MediaStore;
import android.support.v4.content.ContextCompat;
import android.util.Log;
import android.webkit.ValueCallback;
import android.webkit.WebView;
import android.widget.Toast;
import com.facebook.react.bridge.ActivityEventListener;
import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.common.annotations.VisibleForTesting;
import com.facebook.react.modules.core.PermissionAwareActivity;
import com.facebook.react.modules.core.PermissionListener;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import static android.app.Activity.RESULT_OK;
import static android.content.ContentValues.TAG;
import static android.content.Context.NOTIFICATION_SERVICE;
public class AdvancedWebviewModule extends ReactContextBaseJavaModule implements ActivityEventListener {
private ValueCallback mUploadMessage;
private ValueCallback<Uri[]> mUploadCallbackAboveL;
private String mCM;
public static final int MY_PERMISSIONS_REQUEST_STORAGE = 1;
public static final int MY_PERMISSIONS_REQUEST_ALL = 2;
private final int NOTIFICATION_ID = 1;
public String downUrl = null;
private final static int FCR=1;
private ValueCallback<Uri[]> mUMA;
private String[] permissions = {Manifest.permission.CAMERA,Manifest.permission.WRITE_EXTERNAL_STORAGE};
@VisibleForTesting
public static final String REACT_CLASS = "AdvancedWebview";
public ReactContext REACT_CONTEXT;
public AdvancedWebviewModule(ReactApplicationContext context){
super(context);
REACT_CONTEXT = context;
context.addActivityEventListener(this);
}
private AdvancedWebviewPackage aPackage;
public void setPackage(AdvancedWebviewPackage aPackage) {
this.aPackage = aPackage;
}
public AdvancedWebviewPackage getPackage() {
return this.aPackage;
}
@Override
public String getName(){
return REACT_CLASS;
}
@SuppressWarnings("unused")
public Activity getActivity() {
return getCurrentActivity();
}
public ReactContext getReactContext(){
return REACT_CONTEXT;
}
@ReactMethod
public void getUrl(Callback errorCallback,
final Callback successCallback) {
try {
final WebView view = getPackage().getManager().webview;
if(getPackage().getManager().webview != null) {
view.post(new Runnable() {
@Override
public void run() {
successCallback.invoke(view.getUrl());
}
});
}else{
successCallback.invoke("");
}
}catch(Exception e){
errorCallback.invoke(e.getMessage());
}
}
public void setUploadMessage(ValueCallback uploadMessage) {
mUploadMessage = uploadMessage;
}
public void setmUploadCallbackAboveL(ValueCallback<Uri[]> mUploadCallbackAboveL) {
this.mUploadCallbackAboveL = mUploadCallbackAboveL;
}
public void setmCM(String mCM) {
this.mCM = mCM;
}
@Override
public void onActivityResult(Activity activity, int requestCode, int resultCode, Intent data) {
//super.onActivityResult(activity,requestCode, resultCode, intent);
if (requestCode == 1) {
if (null == mUploadMessage && null == mUploadCallbackAboveL) return;
Uri result = data == null || resultCode != RESULT_OK ? null : data.getData();
if (mUploadCallbackAboveL != null) {
onActivityResultAboveL(requestCode, resultCode, data);
} else if (mUploadMessage != null) {
mUploadMessage.onReceiveValue(result);
mUploadMessage = null;
}
}
}
@Override
public void onNewIntent(Intent intent) {
}
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
private void onActivityResultAboveL(int requestCode, int resultCode, Intent data) {
if (requestCode != 1
|| mUploadCallbackAboveL == null) {
return;
}
Uri[] results = null;
if (resultCode == RESULT_OK) {
if (data == null) {
if(mCM != null){
results = new Uri[]{Uri.parse(mCM)};
}
} else {
String dataString = data.getDataString();
ClipData clipData = data.getClipData();
if (clipData != null) {
results = new Uri[clipData.getItemCount()];
for (int i = 0; i < clipData.getItemCount(); i++) {
ClipData.Item item = clipData.getItemAt(i);
results[i] = item.getUri();
}
}
if (dataString != null)
results = new Uri[]{Uri.parse(dataString)};
}
}
mUploadCallbackAboveL.onReceiveValue(results);
mUploadCallbackAboveL = null;
return;
}
private PermissionListener listener = new PermissionListener() {
@Override
public boolean onRequestPermissionsResult(int requestCode, String[] permissions, int[] grantResults) {
switch (requestCode) {
case MY_PERMISSIONS_REQUEST_ALL: {
// If request is cancelled, the result arrays are empty.
if (grantResults.length > 0
&& grantResults[0] == PackageManager.PERMISSION_GRANTED) {
if(mUploadCallbackAboveL != null){
uploadImage(mUploadCallbackAboveL);
}
} else {
Toast.makeText(getActivity(),"Please allow App Name to access storage to upload the image", Toast.LENGTH_LONG).show();
}
return true;
}
}
return false;
}
};
public boolean grantPermissions() {
if(Build.VERSION.SDK_INT < Build.VERSION_CODES.M){
return true;
}
boolean result = true;
for (String permission:permissions){
if (ContextCompat.checkSelfPermission(this.getActivity(),
permission)
!= PackageManager.PERMISSION_GRANTED) {
result = false;
}
}
if(!result){
PermissionAwareActivity activity = getPermissionAwareActivity();
activity.requestPermissions(permissions, MY_PERMISSIONS_REQUEST_ALL,listener);
}
return result;
}
private PermissionAwareActivity getPermissionAwareActivity() {
Activity activity = getCurrentActivity();
if (activity == null) {
throw new IllegalStateException("Tried to use permissions API while not attached to an " +
"Activity.");
} else if (!(activity instanceof PermissionAwareActivity)) {
throw new IllegalStateException("Tried to use permissions API but the host Activity doesn't" +
" implement PermissionAwareActivity.");
}
return (PermissionAwareActivity) activity;
}
public void uploadImage(ValueCallback<Uri[]> filePathCallback){
mUMA = filePathCallback;
Intent takePictureIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
if (takePictureIntent.resolveActivity(getActivity().getPackageManager()) != null) {
File photoFile = null;
try {
photoFile = createImageFile();
takePictureIntent.putExtra("PhotoPath", mCM);
} catch (IOException ex) {
Log.e(TAG, "Image file creation failed", ex);
}
if (photoFile != null) {
mCM = "file:" + photoFile.getAbsolutePath();
setmCM(mCM);
takePictureIntent.putExtra(MediaStore.EXTRA_OUTPUT, Uri.fromFile(photoFile));
} else {
takePictureIntent = null;
}
}
Intent contentSelectionIntent = new Intent(Intent.ACTION_GET_CONTENT);
contentSelectionIntent.addCategory(Intent.CATEGORY_OPENABLE);
contentSelectionIntent.setType("*/*");
Intent[] intentArray;
if (takePictureIntent != null) {
intentArray = new Intent[]{takePictureIntent};
} else {
intentArray = new Intent[0];
}
Intent chooserIntent = new Intent(Intent.ACTION_CHOOSER);
chooserIntent.putExtra(Intent.EXTRA_INTENT, contentSelectionIntent);
chooserIntent.putExtra(Intent.EXTRA_TITLE, "Image Chooser");
chooserIntent.putExtra(Intent.EXTRA_INITIAL_INTENTS, intentArray);
getActivity().startActivityForResult(chooserIntent, FCR);
}
// Create an image file
private File createImageFile() throws IOException{
@SuppressLint("SimpleDateFormat") String timeStamp = new SimpleDateFormat("yyyyMMdd_HHmmss").format(new Date());
String imageFileName = "img_"+timeStamp+"_";
File storageDir = Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES);
return File.createTempFile(imageFileName,".jpg",storageDir);
}
}
Starting from Android 6.0 (API level 23), we also need to request for permission at run time. The grantPermissions method in the above code is used to acquire the required permission during run time.
Now we need to register the above created View Manager to let android know that it exists. For that first we need to create a class which extends ReactPackage. Inside android -> app -> src -> main -> java -> com -> yourpackage ->advancedwebview create a file named AdvancedWebviewPackage.java and add the following code to it.
package com.yourpackage.advancedwebview;
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Collections;
import java.util.List;
public class AdvancedWebviewPackage implements ReactPackage {
private AdvancedWebviewManager manager;
private AdvancedWebviewModule module;
public List<Class<? extends JavaScriptModule>> createJSModules() {
return Collections.emptyList();
}
@Override public List createViewManagers(ReactApplicationContext reactContext) {
manager = new AdvancedWebviewManager();
manager.setPackage(this);
return Arrays.<ViewManager>asList(manager);
}
@Override public List createNativeModules( ReactApplicationContext reactContext) {
List modules = new ArrayList<>();
module = new AdvancedWebviewModule(reactContext);
module.setPackage(this);
modules.add(module);
return modules;
}
public AdvancedWebviewManager getManager(){
return manager;
}
public AdvancedWebviewModule getModule(){
return module;
}
}
View manager registrations happens inside the createViewManagers method. Still our main android application is not aware about our newly created package class. To let it know we need to add it to our application’s android -> app -> src -> main -> java -> com -> yourpackage ->MainApplication.java file’s getPackages() method as shown below.
package com.yourpackage;
import android.app.Application;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import com.yourpackage.advancedwebview.AdvancedWebviewPackage;
import java.util.Arrays;
import java.util.List;
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new AdvancedWebviewPackage() //add this
);
}
@Override
protected String getJSMainModuleName() {
return "index";
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
}
}
After writing the required native code we need to access it from the react native side. For that create a file named AdvancedWebview.android.js outside the android folder (With your other react native JS files) and add the following code to it. This code was taken from https://github.com/facebook/react-native/blob/master/Libraries/Components/WebView/WebView.android.js and was modified according to our need. Added enabledUploadAndroid proptype to it which is required to enable the native code which we discussed above.
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
*
*/
'use strict';
var EdgeInsetsPropType = require('EdgeInsetsPropType');
var ActivityIndicator = require('ActivityIndicator');
var React = require('React');
var PropTypes = require('prop-types');
var ReactNative = require('ReactNative');
var StyleSheet = require('StyleSheet');
var UIManager = require('UIManager');
var View = require('View');
var ViewPropTypes = require('ViewPropTypes');
var deprecatedPropType = require('deprecatedPropType');
var keyMirror = require('fbjs/lib/keyMirror');
var requireNativeComponent = require('requireNativeComponent');
var resolveAssetSource = require('resolveAssetSource');
var ADVANCED_WEBVIEW_REF = 'advancedwebview';
var WebViewState = keyMirror({
IDLE: null,
LOADING: null,
ERROR: null,
});
var defaultRenderLoading = () => (
<View style={styles.loadingView}>
<ActivityIndicator
style={styles.loadingProgressBar}
/>
</View>
);
/**
* Renders a native WebView.
*/
class AdvancedWebView extends React.Component {
static get extraNativeComponentConfig() {
return {
nativeOnly: {
messagingEnabled: PropTypes.bool,
},
};
}
static propTypes = {
...ViewPropTypes,
renderError: PropTypes.func,
renderLoading: PropTypes.func,
onLoad: PropTypes.func,
onLoadEnd: PropTypes.func,
onLoadStart: PropTypes.func,
onError: PropTypes.func,
automaticallyAdjustContentInsets: PropTypes.bool,
contentInset: EdgeInsetsPropType,
onNavigationStateChange: PropTypes.func,
onMessage: PropTypes.func,
onContentSizeChange: PropTypes.func,
startInLoadingState: PropTypes.bool, // force WebView to show loadingView on first load
style: ViewPropTypes.style,
html: deprecatedPropType(
PropTypes.string,
'Use the `source` prop instead.'
),
url: deprecatedPropType(
PropTypes.string,
'Use the `source` prop instead.'
),
/**
* Loads static html or a uri (with optional headers) in the WebView.
*/
source: PropTypes.oneOfType([
PropTypes.shape({
/*
* The URI to load in the WebView. Can be a local or remote file.
*/
uri: PropTypes.string,
/*
* The HTTP Method to use. Defaults to GET if not specified.
* NOTE: On Android, only GET and POST are supported.
*/
method: PropTypes.oneOf(['GET', 'POST']),
/*
* Additional HTTP headers to send with the request.
* NOTE: On Android, this can only be used with GET requests.
*/
headers: PropTypes.object,
/*
* The HTTP body to send with the request. This must be a valid
* UTF-8 string, and will be sent exactly as specified, with no
* additional encoding (e.g. URL-escaping or base64) applied.
* NOTE: On Android, this can only be used with POST requests.
*/
body: PropTypes.string,
}),
PropTypes.shape({
/*
* A static HTML page to display in the WebView.
*/
html: PropTypes.string,
/*
* The base URL to be used for any relative links in the HTML.
*/
baseUrl: PropTypes.string,
}),
/*
* Used internally by packager.
*/
PropTypes.number,
]),
/**
* Used on Android only, JS is enabled by default for WebView on iOS
* @platform android
*/
javaScriptEnabled: PropTypes.bool,
/**
* Used on Android Lollipop and above only, third party cookies are enabled
* by default for WebView on Android Kitkat and below and on iOS
* @platform android
*/
thirdPartyCookiesEnabled: PropTypes.bool,
/**
* Used on Android only, controls whether DOM Storage is enabled or not
* @platform android
*/
domStorageEnabled: PropTypes.bool,
/**
* Sets the JS to be injected when the webpage loads.
*/
injectedJavaScript: PropTypes.string,
/**
* Sets whether the webpage scales to fit the view and the user can change the scale.
*/
scalesPageToFit: PropTypes.bool,
/**
* Sets the user-agent for this WebView. The user-agent can also be set in native using
* WebViewConfig. This prop will overwrite that config.
*/
userAgent: PropTypes.string,
/**
* Used to locate this view in end-to-end tests.
*/
testID: PropTypes.string,
/**
* Determines whether HTML5 audio & videos require the user to tap before they can
* start playing. The default value is `false`.
*/
mediaPlaybackRequiresUserAction: PropTypes.bool,
/**
* Boolean that sets whether JavaScript running in the context of a file
* scheme URL should be allowed to access content from any origin.
* Including accessing content from other file scheme URLs
* @platform android
*/
allowUniversalAccessFromFileURLs: PropTypes.bool,
/**
* Function that accepts a string that will be passed to the WebView and
* executed immediately as JavaScript.
*/
injectJavaScript: PropTypes.func,
/**
* Specifies the mixed content mode. i.e WebView will allow a secure origin to load content from any other origin.
*
* Possible values for `mixedContentMode` are:
*
* - `'never'` (default) - WebView will not allow a secure origin to load content from an insecure origin.
* - `'always'` - WebView will allow a secure origin to load content from any other origin, even if that origin is insecure.
* - `'compatibility'` - WebView will attempt to be compatible with the approach of a modern web browser with regard to mixed content.
* @platform android
*/
mixedContentMode: PropTypes.oneOf([
'never',
'always',
'compatibility'
]),
/**
* Used on Android only, controls whether form autocomplete data should be saved
* @platform android
*/
saveFormDataDisabled: PropTypes.bool,
/**
* Override the native component used to render the WebView. Enables a custom native
* WebView which uses the same JavaScript as the original WebView.
*/
nativeConfig: PropTypes.shape({
/*
* The native component used to render the WebView.
*/
component: PropTypes.any,
/*
* Set props directly on the native component WebView. Enables custom props which the
* original WebView doesn't pass through.
*/
props: PropTypes.object,
/*
* Set the ViewManager to use for communcation with the native side.
* @platform ios
*/
viewManager: PropTypes.object,
}),
/*
* Used on Android only, controls whether the given list of URL prefixes should
* make {@link com.facebook.react.views.webview.ReactWebViewClient} to launch a
* default activity intent for those URL instead of loading it within the webview.
* Use this to list URLs that WebView cannot handle, e.g. a PDF url.
* @platform android
*/
urlPrefixesForDefaultIntent: PropTypes.arrayOf(PropTypes.string),
/*
*Custom attribute used on Android only,
* Provides support for the browse button to enable upload files
*/
enabledUploadAndroid: PropTypes.bool,
};
static defaultProps = {
javaScriptEnabled : true,
thirdPartyCookiesEnabled: true,
scalesPageToFit: true,
saveFormDataDisabled: false
};
state = {
viewState: WebViewState.IDLE,
lastErrorEvent: null,
startInLoadingState: true,
};
componentWillMount() {
if (this.props.startInLoadingState) {
this.setState({viewState: WebViewState.LOADING});
}
}
render() {
var otherView = null;
if (this.state.viewState === WebViewState.LOADING) {
otherView = (this.props.renderLoading || defaultRenderLoading)();
} else if (this.state.viewState === WebViewState.ERROR) {
var errorEvent = this.state.lastErrorEvent;
otherView = this.props.renderError && this.props.renderError(
errorEvent.domain,
errorEvent.code,
errorEvent.description);
} else if (this.state.viewState !== WebViewState.IDLE) {
console.error('RCTWebView invalid state encountered: ' + this.state.loading);
}
var webViewStyles = [styles.container, this.props.style];
if (this.state.viewState === WebViewState.LOADING ||
this.state.viewState === WebViewState.ERROR) {
// if we're in either LOADING or ERROR states, don't show the webView
webViewStyles.push(styles.hidden);
}
var source = this.props.source || {};
if (this.props.html) {
source.html = this.props.html;
} else if (this.props.url) {
source.uri = this.props.url;
}
if (source.method === 'POST' && source.headers) {
console.warn('WebView: `source.headers` is not supported when using POST.');
} else if (source.method === 'GET' && source.body) {
console.warn('WebView: `source.body` is not supported when using GET.');
}
const nativeConfig = this.props.nativeConfig || {};
let NativeWebView = nativeConfig.component || RCTWebView;
var webView =
<NativeWebView
ref={ADVANCED_WEBVIEW_REF}
key="webViewKey"
style={webViewStyles}
source={resolveAssetSource(source)}
scalesPageToFit={this.props.scalesPageToFit}
injectedJavaScript={this.props.injectedJavaScript}
userAgent={this.props.userAgent}
javaScriptEnabled={this.props.javaScriptEnabled}
thirdPartyCookiesEnabled={this.props.thirdPartyCookiesEnabled}
domStorageEnabled={this.props.domStorageEnabled}
messagingEnabled={typeof this.props.onMessage === 'function'}
onMessage={this.onMessage}
contentInset={this.props.contentInset}
automaticallyAdjustContentInsets={this.props.automaticallyAdjustContentInsets}
onContentSizeChange={this.props.onContentSizeChange}
onLoadingStart={this.onLoadingStart}
onLoadingFinish={this.onLoadingFinish}
onLoadingError={this.onLoadingError}
testID={this.props.testID}
mediaPlaybackRequiresUserAction={this.props.mediaPlaybackRequiresUserAction}
allowUniversalAccessFromFileURLs={this.props.allowUniversalAccessFromFileURLs}
mixedContentMode={this.props.mixedContentMode}
saveFormDataDisabled={this.props.saveFormDataDisabled}
urlPrefixesForDefaultIntent={this.props.urlPrefixesForDefaultIntent}
enabledUploadAndroid={this.props.enabledUploadAndroid}
{...nativeConfig.props}
/>;
return (
<View>
{webView}
{otherView}
</View>
);
}
goForward = () => {
UIManager.dispatchViewManagerCommand(
this.getWebViewHandle(),
UIManager.RCTWebView.Commands.goForward,
null
);
};
goBack = () => {
UIManager.dispatchViewManagerCommand(
this.getWebViewHandle(),
UIManager.RCTWebView.Commands.goBack,
null
);
};
reload = () => {
this.setState({
viewState: WebViewState.LOADING
});
UIManager.dispatchViewManagerCommand(
this.getWebViewHandle(),
UIManager.RCTWebView.Commands.reload,
null
);
};
stopLoading = () => {
UIManager.dispatchViewManagerCommand(
this.getWebViewHandle(),
UIManager.RCTWebView.Commands.stopLoading,
null
);
};
postMessage = (data) => {
UIManager.dispatchViewManagerCommand(
this.getWebViewHandle(),
UIManager.RCTWebView.Commands.postMessage,
[String(data)]
);
};
/**
* Injects a javascript string into the referenced WebView. Deliberately does not
* return a response because using eval() to return a response breaks this method
* on pages with a Content Security Policy that disallows eval(). If you need that
* functionality, look into postMessage/onMessage.
*/
injectJavaScript = (data) => {
UIManager.dispatchViewManagerCommand(
this.getWebViewHandle(),
UIManager.RCTWebView.Commands.injectJavaScript,
[data]
);
};
/**
* We return an event with a bunch of fields including:
* url, title, loading, canGoBack, canGoForward
*/
updateNavigationState = (event) => {
if (this.props.onNavigationStateChange) {
this.props.onNavigationStateChange(event.nativeEvent);
}
};
getWebViewHandle = () => {
return ReactNative.findNodeHandle(this.refs[RCT_WEBVIEW_REF]);
};
onLoadingStart = (event) => {
var onLoadStart = this.props.onLoadStart;
onLoadStart && onLoadStart(event);
this.updateNavigationState(event);
};
onLoadingError = (event) => {
event.persist(); // persist this event because we need to store it
var {onError, onLoadEnd} = this.props;
onError && onError(event);
onLoadEnd && onLoadEnd(event);
console.warn('Encountered an error loading page', event.nativeEvent);
this.setState({
lastErrorEvent: event.nativeEvent,
viewState: WebViewState.ERROR
});
};
onLoadingFinish = (event) => {
var {onLoad, onLoadEnd} = this.props;
onLoad && onLoad(event);
onLoadEnd && onLoadEnd(event);
this.setState({
viewState: WebViewState.IDLE,
});
this.updateNavigationState(event);
};
onMessage = (event: Event) => {
var {onMessage} = this.props;
onMessage && onMessage(event);
}
}
var RCTWebView = requireNativeComponent('AdvancedWebView', AdvancedWebView, AdvancedWebView.extraNativeComponentConfig);
var styles = StyleSheet.create({
container: {
flex: 1,
},
hidden: {
height: 0,
flex: 0, // disable 'flex:1' when hiding a View
},
loadingView: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
loadingProgressBar: {
height: 20,
},
});
module.exports = AdvancedWebView;
The below line in the above code is used to retrieve the native UI component to the react native side. The first parameter of requireNativeComponent is the name of the UI component and it should match the name specified inside the getName() method in the AdvancedWebViewManager class which we discussed above.
var RCTWebView = requireNativeComponent('AdvancedWebView', AdvancedWebView, AdvancedWebView.extraNativeComponentConfig);
We have now arrived to the final step which is to run the created AdvancedWebview UI component. You could run it by importing the AdvancedWebView component and adding it inside the render method of the class as you would do it with the WebView component provided by React Native. Additionally you will have to add the enabledUploadAndroid prop to enable the file upload functionality which we just created. An example code is shown below.
.....
import {Dimensions} from 'react-native';
import AdvancedWebView from 'path/AdvancedWebview.android';
....
render() {
const { width, height } = Dimensions.get('window');
return (
<View style={styles.container}>
<AdvancedWebView
source={{ uri: "https://lakshinkarunaratne.wordpress.com/"}}
style={{ flex: 1,width,height}}
enabledUploadAndroid = {true}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
Please note that this AdvancedWebview will work only on Android for now and you will have to use the regular WebView component for iOS. In one of my later blog posts i will cover on how to extend its functionality to use it on iOS as well.
Sample application based on the tutorial
https://github.com/lakshin/react-webview-tutorial01
Lakshin Karunaratne 