Mobile: Resolves #350: Open non-image resources in external application

ReactNativeClient/android/app/build.gradle

@@ -137,6 +137,7 @@ android {
 }
 
 dependencies {
+    compile project(':react-native-file-viewer')
 	compile project(':react-native-securerandom')
 	compile project(':react-native-push-notification')
 	compile project(':react-native-fs')

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.vinzscam.reactnativefileviewer.RNFileViewerPackage;
 import net.rhogan.rnsecurerandom.RNSecureRandomPackage;
 import com.dieam.reactnativepushnotification.ReactNativePushNotificationPackage;
 import com.imagepicker.ImagePickerPackage;
@@ -33,6 +34,7 @@ public class MainApplication extends Application implements ReactApplication {
 			return Arrays.<ReactPackage>asList(
 				new ImageResizerPackage(),
 				new MainReactPackage(),
+            new RNFileViewerPackage(),
             new RNSecureRandomPackage(),
             new ReactNativePushNotificationPackage(),
 				new ImagePickerPackage(),

ReactNativeClient/android/settings.gradle

@@ -1,4 +1,6 @@
 rootProject.name = 'Joplin'
+include ':react-native-file-viewer'
+project(':react-native-file-viewer').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-file-viewer/android')
 include ':react-native-securerandom'
 project(':react-native-securerandom').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-securerandom/android')
 include ':react-native-push-notification'

ReactNativeClient/ios/Joplin.xcodeproj/project.pbxproj

@@ -5,7 +5,6 @@
 	};
 	objectVersion = 46;
 	objects = {
-
 /* Begin PBXBuildFile section */
 		00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */; };
 		00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */; };
@@ -44,6 +43,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 */; };
+		82C61D3DAE0A4666883001E9 /* libRNFileViewer.a in Frameworks */ = {isa = PBXBuildFile; fileRef = CCDC2774CD86466F897D88E2 /* libRNFileViewer.a */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -436,6 +436,8 @@
 		F5E37D05726A4A08B2EE323A /* libRNFetchBlob.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRNFetchBlob.a; sourceTree = "<group>"; };
 		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 = "<group>"; };
 		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 = "<group>"; };
+		59F5448FAF7345F8B568BD00 /* RNFileViewer.xcodeproj */ = {isa = PBXFileReference; name = "RNFileViewer.xcodeproj"; path = "../node_modules/react-native-file-viewer/ios/RNFileViewer.xcodeproj"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; };
+		CCDC2774CD86466F897D88E2 /* libRNFileViewer.a */ = {isa = PBXFileReference; name = "libRNFileViewer.a"; path = "libRNFileViewer.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -466,6 +468,7 @@
 				AE6BB3A2FDA34D01864A721A /* libRNVectorIcons.a in Frameworks */,
 				AF99EEC6C55042F7BFC87583 /* libRNImagePicker.a in Frameworks */,
 				F3D0BB525E6C490294D73075 /* libRNSecureRandom.a in Frameworks */,
+				82C61D3DAE0A4666883001E9 /* libRNFileViewer.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -729,6 +732,7 @@
 				711CBD21F0894B83A2D8E234 /* RNVectorIcons.xcodeproj */,
 				A4716DB8654B431D894F89E1 /* RNImagePicker.xcodeproj */,
 				252BD7B86BF7435B960DA901 /* RNSecureRandom.xcodeproj */,
+				59F5448FAF7345F8B568BD00 /* RNFileViewer.xcodeproj */,
 			);
 			name = Libraries;
 			sourceTree = "<group>";
@@ -1346,12 +1350,14 @@
 					"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
 					"$(SRCROOT)..\node_modules\neact-native-image-pickerios",
 					"$(SRCROOT)..\node_modules\neact-native-securerandomios",
+					"$(SRCROOT)\..\node_modules\react-native-file-viewer\ios",
 				);
 				INFOPLIST_FILE = Joplin/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				LIBRARY_SEARCH_PATHS = (
 					"$(inherited)",
 					"\"$(SRCROOT)/Joplin\"",
+					"\"$(SRCROOT)/Joplin\"",
 				);
 				OTHER_LDFLAGS = (
 					"$(inherited)",
@@ -1386,12 +1392,14 @@
 					"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
 					"$(SRCROOT)..\node_modules\neact-native-image-pickerios",
 					"$(SRCROOT)..\node_modules\neact-native-securerandomios",
+					"$(SRCROOT)\..\node_modules\react-native-file-viewer\ios",
 				);
 				INFOPLIST_FILE = Joplin/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				LIBRARY_SEARCH_PATHS = (
 					"$(inherited)",
 					"\"$(SRCROOT)/Joplin\"",
+					"\"$(SRCROOT)/Joplin\"",
 				);
 				OTHER_LDFLAGS = (
 					"$(inherited)",

ReactNativeClient/lib/components/screens/note.js

@@ -35,6 +35,8 @@ const ImagePicker = require('react-native-image-picker');
 const AlarmService = require('lib/services/AlarmService.js');
 const { SelectDateTimeDialog } = require('lib/components/select-date-time-dialog.js');
 
+import FileViewer from 'react-native-file-viewer';
+
 class NoteScreenComponent extends BaseScreenComponent {
 
 	static navigationOptions(options) {
@@ -131,6 +133,9 @@ class NoteScreenComponent extends BaseScreenComponent {
 								noteId: item.id,
 							});
 						}, 5);
+					} else if (item.type_ === BaseModel.TYPE_RESOURCE) {
+						const resourcePath = Resource.fullPath(item);
+						await FileViewer.open(resourcePath);
 					} else {
 						throw new Error(_('The Joplin mobile app does not currently support this type of link: %s', BaseModel.modelTypeToName(item.type_)));
 					}

ReactNativeClient/package-lock.json

@@ -6506,6 +6506,11 @@
         }
       }
     },
+    "react-native-file-viewer": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/react-native-file-viewer/-/react-native-file-viewer-1.0.5.tgz",
+      "integrity": "sha512-/5lwmVPliEOIJMoRby9tb1s9VPxUH1ru7BfdCKxZAwZI5LoOY1qHZuUMtCHAlIKLH1DHu8fhjleJuXbRHaCuLQ=="
+    },
     "react-native-fs": {
       "version": "2.8.5",
       "resolved": "https://registry.npmjs.org/react-native-fs/-/react-native-fs-2.8.5.tgz",

ReactNativeClient/package.json

@@ -31,6 +31,7 @@
     "react-native-document-picker": "^2.1.0",
     "react-native-dropdownalert": "^3.1.2",
     "react-native-fetch-blob": "^0.10.6",
+    "react-native-file-viewer": "^1.0.5",
     "react-native-fs": "^2.8.5",
     "react-native-image-picker": "^0.26.7",
     "react-native-image-resizer": "^1.0.0",