iOS: Restored camera roll functionality

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);

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>

ReactNativeClient/ios/Podfile

@@ -10,11 +10,6 @@ target 'Joplin' do
 
   use_react_native!(:path => config["reactNativePath"])
   
-  target 'JoplinTests' do
-    inherit! :complete
-    # Pods for testing
-  end
-  
   pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
 
   # Enables Flipper.
@@ -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

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

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

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) {
+	showImagePicker(options) {
-	// 	return new Promise((resolve) => {
+		return new Promise((resolve) => {
-	// 		ImagePicker.launchImageLibrary(options, response => {
+			ImagePicker.launchImageLibrary(options, response => {
-	// 			resolve(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() {
+	async attachPhoto_onPress() {
-	// 	const response = await this.showImagePicker({ mediaType: 'photo', noData: true });
+		const response = await this.showImagePicker({ mediaType: 'photo', noData: true });
-	// 	await this.attachFile(response, 'image');
+		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'), [
+					const buttons = [];
-						{ text: _('Attach file'), id: 'attachFile' },
+
-						{ text: _('Take photo'), id: 'takePhoto' },
+					// On iOS, it will show "local files", which means certain files saved from the browser
-						// { text: _('Attach photo'), id: 'attachPhoto' },
+					// 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();
 				},
 			});
 		}

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",

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",