iOS: Restored camera roll functionality

2024-11-27 08:21:03 +02:00 · 2020-10-15 12:11:13 +01:00 · 2020-10-15 12:11:13 +01:00 · 8e2875a91c
commit 8e2875a91c
parent 75f5edf2ad
8 changed files with 51 additions and 35 deletions
--- a/ReactNativeClient/index.js
+++ b/ReactNativeClient/index.js
@ -9,6 +9,10 @@
 import {LogBox, AppRegistry} from 'react-native';
 const {Root} = require('./root.js');

+// Seems JavaScript developers love adding warnings everywhere, even when these warnings can't be fixed
+// or don't really matter. Because we want important warnings to actually be fixed, we disable
+// all the useless ones, that way we aren't flooded by them when the app starts, and when there's
+// one we know it should be fixed (or added here).
 LogBox.ignoreLogs([
 	// Happens for example in react-native-side-menu, but the package is discontinued
 	// and we should just switch to a different one (or do it without a package).
@ -30,6 +34,11 @@ LogBox.ignoreLogs([
 	'Warning: componentWillReceiveProps has been renamed',
 	'Warning: componentWillUpdate has been renamed',
 	'Warning: componentWillMount has been renamed',
+
+	// Triggered by react-native-webview. Happens on slow devices when loading the note viewer.
+	// Apparently it can be safely ignored:
+	// https://github.com/react-native-webview/react-native-webview/issues/124
+	'Did not receive response to shouldStartLoad in time, defaulting to YES',
 ]);

 AppRegistry.registerComponent('Joplin', () => Root);
--- a/ReactNativeClient/ios/Joplin/Info.plist
+++ b/ReactNativeClient/ios/Joplin/Info.plist
@ -47,6 +47,8 @@
 	<string>To add geo-location information to a note. Can be disabled in app.</string>
 	<key>NSPhotoLibraryUsageDescription</key>
 	<string>To allow attaching images to a note</string>
+	<key>NSPhotoLibraryAddUsageDescription</key>
+	<string>The images will be displayed on your notes.</string>
 	<key>UIAppFonts</key>
 	<array/>
 	<key>UILaunchStoryboardName</key>
--- a/ReactNativeClient/ios/Podfile
+++ b/ReactNativeClient/ios/Podfile
@ -9,11 +9,6 @@ target 'Joplin' do
  config = use_native_modules!

  use_react_native!(:path => config["reactNativePath"])
-
-  target 'JoplinTests' do
-    inherit! :complete
-    # Pods for testing
-  end
  
  pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

@ -26,12 +21,3 @@ target 'Joplin' do
    flipper_post_install(installer)
  end
 end
-
-target 'Joplin-tvOS' do
-  # Pods for Joplin-tvOS
-
-  target 'Joplin-tvOSTests' do
-    inherit! :search_paths
-    # Pods for testing
-  end
-end
--- a/ReactNativeClient/ios/Podfile.lock
+++ b/ReactNativeClient/ios/Podfile.lock
@ -250,6 +250,8 @@ PODS:
    - React-Core
  - react-native-geolocation (2.0.2):
    - React
+  - react-native-image-picker (2.3.4):
+    - React-Core
  - react-native-image-resizer (1.3.0):
    - React-Core
  - react-native-slider (3.0.3):
@ -387,6 +389,7 @@ DEPENDENCIES:
  - react-native-camera (from `../node_modules/react-native-camera`)
  - react-native-document-picker (from `../node_modules/react-native-document-picker`)
  - "react-native-geolocation (from `../node_modules/@react-native-community/geolocation`)"
+  - react-native-image-picker (from `../node_modules/react-native-image-picker`)
  - react-native-image-resizer (from `../node_modules/react-native-image-resizer`)
  - "react-native-slider (from `../node_modules/@react-native-community/slider`)"
  - react-native-sqlite-storage (from `../node_modules/react-native-sqlite-storage`)
@ -469,6 +472,8 @@ EXTERNAL SOURCES:
    :path: "../node_modules/react-native-document-picker"
  react-native-geolocation:
    :path: "../node_modules/@react-native-community/geolocation"
+  react-native-image-picker:
+    :path: "../node_modules/react-native-image-picker"
  react-native-image-resizer:
    :path: "../node_modules/react-native-image-resizer"
  react-native-slider:
@ -555,6 +560,7 @@ SPEC CHECKSUMS:
  react-native-camera: 5c1fbfecf63b802b8ca4a71c60d30a71550fb348
  react-native-document-picker: b3e78a8f7fef98b5cb069f20fc35797d55e68e28
  react-native-geolocation: cbd9d6bd06bac411eed2671810f454d4908484a8
+  react-native-image-picker: 32d1ad2c0024ca36161ae0d5c2117e2d6c441f11
  react-native-image-resizer: b53bf95ad880100e20262687e41f76fdbc9df255
  react-native-slider: b733e17fdd31186707146debf1f04b5d94aa1a93
  react-native-sqlite-storage: ce71689c5a73b79390a1ab213555ae80979a5dc7
@ -584,6 +590,6 @@ SPEC CHECKSUMS:
  Yoga: 7d13633d129fd179e01b8953d38d47be90db185a
  YogaKit: f782866e155069a2cca2517aafea43200b01fd5a

-PODFILE CHECKSUM: c204794c7a4f7972e81faa624e36efda33d5db96
+PODFILE CHECKSUM: a0d1ca4e385ef46f9103f02206ebf612107dd508

 COCOAPODS: 1.9.3
--- a/ReactNativeClient/lib/components/NoteBodyViewer.tsx
+++ b/ReactNativeClient/lib/components/NoteBodyViewer.tsx
@ -140,8 +140,6 @@ export default class NoteBodyViewer extends Component {
 		const tempFile = `${Setting.value('resourceDir')}/NoteBodyViewer.html`
 		await shim.fsDriver().writeFile(tempFile, html, 'utf8');

-		console.info('WROTE TO ', tempFile);
-
 		// On iOS scalesPageToFit work like this:
 		//
 		// Find the widest image, resize it *and everything else* by x% so that
--- a/ReactNativeClient/lib/components/screens/note.js
+++ b/ReactNativeClient/lib/components/screens/note.js
@ -37,7 +37,7 @@ const NoteBodyViewer = require('lib/components/NoteBodyViewer').default;
 const DocumentPicker = require('react-native-document-picker').default;
 const ImageResizer = require('react-native-image-resizer').default;
 const shared = require('lib/components/shared/note-screen-shared.js');
-// const ImagePicker = require('react-native-image-picker');
+const ImagePicker = require('react-native-image-picker').default;
 const SelectDateTimeDialog = require('lib/components/SelectDateTimeDialog').default;
 const ShareExtension = require('lib/ShareExtension.js').default;
 const CameraView = require('lib/components/CameraView');
@ -506,13 +506,13 @@ class NoteScreenComponent extends BaseScreenComponent {
 		});
 	}

-	// showImagePicker(options) {
-	// 	return new Promise((resolve) => {
-	// 		ImagePicker.launchImageLibrary(options, response => {
-	// 			resolve(response);
-	// 		});
-	// 	});
-	// }
+	showImagePicker(options) {
+		return new Promise((resolve) => {
+			ImagePicker.launchImageLibrary(options, response => {
+				resolve(response);
+			});
+		});
+	}

 	async resizeImage(localFilePath, targetPath, mimeType) {
 		const maxSize = Resource.IMAGE_MAX_DIMENSION;
@ -664,10 +664,10 @@ class NoteScreenComponent extends BaseScreenComponent {
 		this.scheduleSave();
 	}

-	// async attachPhoto_onPress() {
-	// 	const response = await this.showImagePicker({ mediaType: 'photo', noData: true });
-	// 	await this.attachFile(response, 'image');
-	// }
+	async attachPhoto_onPress() {
+		const response = await this.showImagePicker({ mediaType: 'photo', noData: true });
+		await this.attachFile(response, 'image');
+	}

 	takePhoto_onPress() {
 		this.setState({ showCamera: true });
@ -821,15 +821,24 @@ class NoteScreenComponent extends BaseScreenComponent {
 			output.push({
 				title: _('Attach...'),
 				onPress: async () => {
-					const buttonId = await dialogs.pop(this, _('Choose an option'), [
-						{ text: _('Attach file'), id: 'attachFile' },
-						{ text: _('Take photo'), id: 'takePhoto' },
-						// { text: _('Attach photo'), id: 'attachPhoto' },
-					]);
+					const buttons = [];
+
+					// On iOS, it will show "local files", which means certain files saved from the browser
+					// and the iCloud files, but it doesn't include photos and images from the CameraRoll
+					//
+					// On Android, it will depend on the phone, but usually it will allow browing all files and photos.
+					buttons.push({ text: _('Attach file'), id: 'attachFile' });
+					
+					// Disabled on Android because it doesn't work due to permission issues, but enabled on iOS
+					// because that's only way to browse photos from the camera roll.
+					if (Platform.OS === 'ios') buttons.push({ text: _('Attach photo'), id: 'attachPhoto' });
+					buttons.push({ text: _('Take photo'), id: 'takePhoto' });
+
+					const buttonId = await dialogs.pop(this, _('Choose an option'), buttons);

 					if (buttonId === 'takePhoto') this.takePhoto_onPress();
 					if (buttonId === 'attachFile') this.attachFile_onPress();
-					// if (buttonId === 'attachPhoto') this.attachPhoto_onPress();
+					if (buttonId === 'attachPhoto') this.attachPhoto_onPress();
 				},
 			});
 		}
--- a/ReactNativeClient/package-lock.json
+++ b/ReactNativeClient/package-lock.json
@ -10869,6 +10869,11 @@
        "utf8": "^3.0.0"
      }
    },
+    "react-native-image-picker": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/react-native-image-picker/-/react-native-image-picker-2.3.4.tgz",
+      "integrity": "sha512-4UHu+zOyDT570r5mIbjH6h1iMrKIq/qfsKiAVUEZwncVegh0usJiEYNyJw4CEVwNeehmye/ia5sLDsa+kzIE4g=="
+    },
    "react-native-image-resizer": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/react-native-image-resizer/-/react-native-image-resizer-1.3.0.tgz",
--- a/ReactNativeClient/package.json
+++ b/ReactNativeClient/package.json
@ -66,6 +66,7 @@
    "react-native-dropdownalert": "^3.1.2",
    "react-native-file-viewer": "^2.1.4",
    "react-native-fs": "^2.16.6",
+    "react-native-image-picker": "^2.3.4",
    "react-native-image-resizer": "^1.3.0",
    "react-native-modal-datetime-picker": "^9.0.0",
    "react-native-popup-dialog": "^0.9.41",