From 122bc290354252a3643ed4bebdc1e37c7d12b2c9 Mon Sep 17 00:00:00 2001 From: Laurent Cozic Date: Fri, 14 Jun 2019 08:11:15 +0100 Subject: [PATCH] Mobile: Upgraded WebView --- ReactNativeClient/android/app/build.gradle | 1 + .../net/cozic/joplin/MainApplication.java | 2 ++ ReactNativeClient/android/settings.gradle | 2 ++ .../ios/Joplin.xcodeproj/project.pbxproj | 9 +++++++++ .../lib/components/note-body-viewer.js | 10 ++++++++-- .../lib/components/screens/note.js | 6 +++++- .../lib/components/screens/onedrive-login.js | 3 ++- ReactNativeClient/lib/synchronizer.js | 2 +- ReactNativeClient/package-lock.json | 19 +++++++++++++++++++ ReactNativeClient/package.json | 1 + ReactNativeClient/run_ios.sh | 1 + 11 files changed, 51 insertions(+), 5 deletions(-) create mode 100755 ReactNativeClient/run_ios.sh diff --git a/ReactNativeClient/android/app/build.gradle b/ReactNativeClient/android/app/build.gradle index a125290c5..e06e161e0 100644 --- a/ReactNativeClient/android/app/build.gradle +++ b/ReactNativeClient/android/app/build.gradle @@ -141,6 +141,7 @@ android { } dependencies { + implementation project(':react-native-webview') compile project(':react-native-push-notification') implementation (project(':react-native-camera')) { // This is required because com.google.firebase requires v16.0.x of com.google.android.gms diff --git a/ReactNativeClient/android/app/src/main/java/net/cozic/joplin/MainApplication.java b/ReactNativeClient/android/app/src/main/java/net/cozic/joplin/MainApplication.java index dd1dade19..cbe8ba0ad 100644 --- a/ReactNativeClient/android/app/src/main/java/net/cozic/joplin/MainApplication.java +++ b/ReactNativeClient/android/app/src/main/java/net/cozic/joplin/MainApplication.java @@ -3,6 +3,7 @@ package net.cozic.joplin; import android.app.Application; import com.facebook.react.ReactApplication; +import com.reactnativecommunity.webview.RNCWebViewPackage; import com.dieam.reactnativepushnotification.ReactNativePushNotificationPackage; import org.reactnative.camera.RNCameraPackage; import com.vinzscam.reactnativefileviewer.RNFileViewerPackage; @@ -39,6 +40,7 @@ public class MainApplication extends Application implements ReactApplication { protected List getPackages() { return Arrays.asList( new MainReactPackage(), + new RNCWebViewPackage(), new ReactNativePushNotificationPackage(), new ImageResizerPackage(), new RNCameraPackage(), diff --git a/ReactNativeClient/android/settings.gradle b/ReactNativeClient/android/settings.gradle index 384eae030..1d900eee4 100644 --- a/ReactNativeClient/android/settings.gradle +++ b/ReactNativeClient/android/settings.gradle @@ -1,4 +1,6 @@ rootProject.name = 'Joplin' +include ':react-native-webview' +project(':react-native-webview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview/android') include ':react-native-camera' project(':react-native-camera').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-camera/android') include ':react-native-file-viewer' diff --git a/ReactNativeClient/ios/Joplin.xcodeproj/project.pbxproj b/ReactNativeClient/ios/Joplin.xcodeproj/project.pbxproj index b85a5ab45..d317d7413 100644 --- a/ReactNativeClient/ios/Joplin.xcodeproj/project.pbxproj +++ b/ReactNativeClient/ios/Joplin.xcodeproj/project.pbxproj @@ -48,6 +48,7 @@ EC11356C90E9419799A2626F /* EvilIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 51BCEC3BC28046C8BB19531F /* EvilIcons.ttf */; }; F3D0BB525E6C490294D73075 /* libRNSecureRandom.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 22647ACF9A4C45918C44C599 /* libRNSecureRandom.a */; }; FBF57CE2F0F448FA9A8985E2 /* libsqlite3.0.tbd in Frameworks */ = {isa = PBXBuildFile; fileRef = 0EB8BCAEA9AA41CAAE460443 /* libsqlite3.0.tbd */; }; + 45E8D3F9FBA0410E82E28A0D /* libRNCWebView.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 4C7A5EE79128470A920D4971 /* libRNCWebView.a */; }; /* End PBXBuildFile section */ /* Begin PBXContainerItemProxy section */ @@ -468,6 +469,8 @@ FC908F114F494130A324B402 /* RNCamera.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RNCamera.xcodeproj; path = "../node_modules/react-native-camera/ios/RNCamera.xcodeproj"; sourceTree = ""; }; FD370E24D76E461D960DD85D /* Feather.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Feather.ttf; path = "../node_modules/react-native-vector-icons/Fonts/Feather.ttf"; sourceTree = ""; }; FF411B45E68B4A8CBCC35777 /* Ionicons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Ionicons.ttf; path = "../node_modules/react-native-vector-icons/Fonts/Ionicons.ttf"; sourceTree = ""; }; + DECA9B559982480BBD8F9E84 /* RNCWebView.xcodeproj */ = {isa = PBXFileReference; name = "RNCWebView.xcodeproj"; path = "../node_modules/react-native-webview/ios/RNCWebView.xcodeproj"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; }; + 4C7A5EE79128470A920D4971 /* libRNCWebView.a */ = {isa = PBXFileReference; name = "libRNCWebView.a"; path = "libRNCWebView.a"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; }; /* End PBXFileReference section */ /* Begin PBXFrameworksBuildPhase section */ @@ -503,6 +506,7 @@ F3D0BB525E6C490294D73075 /* libRNSecureRandom.a in Frameworks */, 82C61D3DAE0A4666883001E9 /* libRNFileViewer.a in Frameworks */, 12AE298E1C0E445682922DAB /* libRNCamera.a in Frameworks */, + 45E8D3F9FBA0410E82E28A0D /* libRNCWebView.a in Frameworks */, ); runOnlyForDeploymentPostprocessing = 0; }; @@ -797,6 +801,7 @@ 252BD7B86BF7435B960DA901 /* RNSecureRandom.xcodeproj */, 59F5448FAF7345F8B568BD00 /* RNFileViewer.xcodeproj */, FC908F114F494130A324B402 /* RNCamera.xcodeproj */, + DECA9B559982480BBD8F9E84 /* RNCWebView.xcodeproj */, ); name = Libraries; sourceTree = ""; @@ -1450,6 +1455,7 @@ "$(SRCROOT)..\node_modules\neact-native-securerandomios", "$(SRCROOT)..\node_modules\neact-native-file-viewerios", "$(SRCROOT)/../node_modules/react-native-camera/ios/**", + "$(SRCROOT)/../node_modules/react-native-webview/ios", ); INFOPLIST_FILE = Joplin/Info.plist; LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks"; @@ -1458,6 +1464,7 @@ "\"$(SRCROOT)/Joplin\"", "\"$(SRCROOT)/Joplin\"", "\"$(SRCROOT)/Joplin\"", + "\"$(SRCROOT)/Joplin\"", ); OTHER_LDFLAGS = ( "$(inherited)", @@ -1494,6 +1501,7 @@ "$(SRCROOT)..\node_modules\neact-native-securerandomios", "$(SRCROOT)..\node_modules\neact-native-file-viewerios", "$(SRCROOT)/../node_modules/react-native-camera/ios/**", + "$(SRCROOT)/../node_modules/react-native-webview/ios", ); INFOPLIST_FILE = Joplin/Info.plist; LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks"; @@ -1502,6 +1510,7 @@ "\"$(SRCROOT)/Joplin\"", "\"$(SRCROOT)/Joplin\"", "\"$(SRCROOT)/Joplin\"", + "\"$(SRCROOT)/Joplin\"", ); OTHER_LDFLAGS = ( "$(inherited)", diff --git a/ReactNativeClient/lib/components/note-body-viewer.js b/ReactNativeClient/lib/components/note-body-viewer.js index e6b87f72f..15799c3e9 100644 --- a/ReactNativeClient/lib/components/note-body-viewer.js +++ b/ReactNativeClient/lib/components/note-body-viewer.js @@ -1,5 +1,6 @@ const React = require('react'); const Component = React.Component; -const { Platform, WebView, View } = require('react-native'); +const { Platform, View } = require('react-native'); +const { WebView } = require('react-native-webview'); const { themeStyle } = require('lib/components/global-style.js'); const Resource = require('lib/models/Resource.js'); const Setting = require('lib/models/Setting.js'); @@ -99,6 +100,7 @@ class NoteBodyViewer extends Component { highlightedKeywords: this.props.highlightedKeywords, resources: this.props.noteResources,//await shared.attachedResources(bodyToRender), codeTheme: theme.codeThemeCss, + postMessageSyntax: 'window.ReactNativeWebView.postMessage', }; let result = this.mdToHtml_.render(bodyToRender, this.props.webViewStyle, mdOptions); @@ -108,7 +110,7 @@ class NoteBodyViewer extends Component { const injectedJs = [this.mdToHtml_.injectedJavaScript()]; injectedJs.push(shim.injectedJs('webviewLib')); - injectedJs.push('webviewLib.initialize({ postMessage: msg => { return postMessage(msg); } });'); + injectedJs.push('webviewLib.initialize({ postMessage: msg => { return window.ReactNativeWebView.postMessage(msg); } });'); injectedJs.push(` const readyStateCheckInterval = setInterval(function() { if (document.readyState === "complete") { @@ -162,9 +164,13 @@ class NoteBodyViewer extends Component { baseUrl: 'file://' + Setting.value('resourceDir') + '/', }; + // Note: useWebKit={false} is needed to go around this bug: + // https://github.com/react-native-community/react-native-webview/issues/376 + return (