Resolve "Allow photos taken in portrait mode to be viewed in portrait mode"

android/build.gradle

@@ -32,6 +32,9 @@ allprojects {
             url("$rootDir/../node_modules/jsc-android/dist")
         }
 
+				// needed for react-native-image-crop-picker
+				maven { url "https://www.jitpack.io" }
+
         google()
         jcenter()
     }

ios/Podfile.lock

@@ -20,6 +20,7 @@ PODS:
     - GoogleMaps/Base
   - GooglePlaces (3.1.0):
     - GoogleMaps/Base (= 3.1.0)
+  - QBImagePickerController (3.4.0)
   - React (0.60.5):
     - React-Core (= 0.60.5)
     - React-DevSupport (= 0.60.5)
@@ -71,8 +72,6 @@ PODS:
     - GoogleMaps (~> 3.1.0)
     - GooglePlaces (~> 3.1.0)
     - React
-  - react-native-image-picker (1.1.0):
-    - React
   - react-native-maps (0.25.0):
     - React
   - React-RCTActionSheet (0.60.5):
@@ -98,10 +97,18 @@ PODS:
     - React-Core (= 0.60.5)
   - React-RCTWebSocket (0.60.5):
     - React-Core (= 0.60.5)
+  - RNCAsyncStorage (1.6.2):
+    - React
+  - RNImageCropPicker (0.25.2):
+    - QBImagePickerController
+    - React-Core
+    - React-RCTImage
+    - RSKImageCropper
   - RNSnackbar (2.0.2):
     - React
   - RNVectorIcons (6.6.0):
     - React
+  - RSKImageCropper (2.2.3)
   - yoga (0.60.5.React)
 
 DEPENDENCIES:
@@ -118,7 +125,6 @@ DEPENDENCIES:
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
   - "react-native-geolocation (from `../node_modules/@react-native-community/geolocation`)"
   - react-native-google-places (from `../node_modules/react-native-google-places`)
-  - react-native-image-picker (from `../node_modules/react-native-image-picker`)
   - react-native-maps (from `../node_modules/react-native-maps`)
   - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
   - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`)
@@ -130,6 +136,8 @@ DEPENDENCIES:
   - React-RCTText (from `../node_modules/react-native/Libraries/Text`)
   - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
   - React-RCTWebSocket (from `../node_modules/react-native/Libraries/WebSocket`)
+  - "RNCAsyncStorage (from `../node_modules/@react-native-community/async-storage`)"
+  - RNImageCropPicker (from `../node_modules/react-native-image-crop-picker`)
   - RNSnackbar (from `../node_modules/react-native-snackbar`)
   - RNVectorIcons (from `../node_modules/react-native-vector-icons`)
   - yoga (from `../node_modules/react-native/ReactCommon/yoga`)
@@ -139,6 +147,8 @@ SPEC REPOS:
     - boost-for-react-native
     - GoogleMaps
     - GooglePlaces
+    - QBImagePickerController
+    - RSKImageCropper
 
 EXTERNAL SOURCES:
   A0Auth0:
@@ -167,8 +177,6 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-community/geolocation"
   react-native-google-places:
     :path: "../node_modules/react-native-google-places"
-  react-native-image-picker:
-    :path: "../node_modules/react-native-image-picker"
   react-native-maps:
     :path: "../node_modules/react-native-maps"
   React-RCTActionSheet:
@@ -191,6 +199,10 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/Libraries/Vibration"
   React-RCTWebSocket:
     :path: "../node_modules/react-native/Libraries/WebSocket"
+  RNCAsyncStorage:
+    :path: "../node_modules/@react-native-community/async-storage"
+  RNImageCropPicker:
+    :path: "../node_modules/react-native-image-crop-picker"
   RNSnackbar:
     :path: "../node_modules/react-native-snackbar"
   RNVectorIcons:
@@ -206,6 +218,7 @@ SPEC CHECKSUMS:
   glog: 1f3da668190260b06b429bb211bfbee5cd790c28
   GoogleMaps: 5c13302e6fe6bb6e686b267196586b91cd594225
   GooglePlaces: e874db179f2675c4f3eeda0b686b540273a578b0
+  QBImagePickerController: d54cf93db6decf26baf6ed3472f336ef35cae022
   React: 53c53c4d99097af47cf60594b8706b4e3321e722
   React-Core: ba421f6b4f4cbe2fb17c0b6fc675f87622e78a64
   React-cxxreact: 8384287780c4999351ad9b6e7a149d9ed10a2395
@@ -215,7 +228,6 @@ SPEC CHECKSUMS:
   React-jsinspector: e08662d1bf5b129a3d556eb9ea343a3f40353ae4
   react-native-geolocation: a7b94614afbd5fd8350e0233a2025c8228fc8041
   react-native-google-places: 34e976a0e13cb55cc9603ef2fa6764ed534af806
-  react-native-image-picker: 7a85cf7b0a53845f03ae52fb4592a2748ded069b
   react-native-maps: 190c02ca533fddac5bb49cf17bdece3644612107
   React-RCTActionSheet: b0f1ea83f4bf75fb966eae9bfc47b78c8d3efd90
   React-RCTAnimation: 359ba1b5690b1e87cc173558a78e82d35919333e
@@ -227,10 +239,13 @@ SPEC CHECKSUMS:
   React-RCTText: b074d89033583d4f2eb5faf7ea2db3a13c7553a2
   React-RCTVibration: 2105b2e0e2b66a6408fc69a46c8a7fb5b2fdade0
   React-RCTWebSocket: cd932a16b7214898b6b7f788c8bddb3637246ac4
+  RNCAsyncStorage: 60a80e72d95bf02a01cace55d3697d9724f0d77f
+  RNImageCropPicker: f675353bbe18f66113a39b319c0aeb36655a6e4c
   RNSnackbar: f6d5a0f66f5e75794e1d94b62827b78ce37bd530
   RNVectorIcons: 0bb4def82230be1333ddaeee9fcba45f0b288ed4
+  RSKImageCropper: a446db0e8444a036b34f3c43db01b2373baa4b2a
   yoga: 312528f5bbbba37b4dcea5ef00e8b4033fdd9411
 
-PODFILE CHECKSUM: 702016785759f22e0f5c7560c54f1797f93efccf
+PODFILE CHECKSUM: ee2999c6a9ba049d4cee2b2a6ec09d970f38352a
 
 COCOAPODS: 1.8.0.beta.2

ios/aretherecookies.xcodeproj/project.pbxproj

@@ -518,6 +518,7 @@
 				"${PODS_ROOT}/Target Support Files/Pods-aretherecookies/Pods-aretherecookies-resources.sh",
 				"${PODS_ROOT}/GoogleMaps/Maps/Frameworks/GoogleMaps.framework/Resources/GoogleMaps.bundle",
 				"${PODS_ROOT}/GooglePlaces/Frameworks/GooglePlaces.framework/Resources/GooglePlaces.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/QBImagePickerController/QBImagePicker.bundle",
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/AntDesign.ttf",
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Entypo.ttf",
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/EvilIcons.ttf",
@@ -534,11 +535,13 @@
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Octicons.ttf",
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf",
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Zocial.ttf",
+				"${PODS_ROOT}/RSKImageCropper/RSKImageCropper/RSKImageCropperStrings.bundle",
 			);
 			name = "[CP] Copy Pods Resources";
 			outputPaths = (
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/GoogleMaps.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/GooglePlaces.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/QBImagePicker.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AntDesign.ttf",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Entypo.ttf",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EvilIcons.ttf",
@@ -555,6 +558,7 @@
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Octicons.ttf",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/SimpleLineIcons.ttf",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Zocial.ttf",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RSKImageCropperStrings.bundle",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;

ios/aretherecookies/Info.plist

@@ -38,7 +38,7 @@
 		</dict>
 	</dict>
 	<key>NSLocationWhenInUseUsageDescription</key>
-	<string/>
+	<string></string>
 	<key>UIAppFonts</key>
 	<array>
 		<string>MaterialIcons.ttf</string>
@@ -75,6 +75,8 @@
 		<string>UIInterfaceOrientationLandscapeLeft</string>
 		<string>UIInterfaceOrientationLandscapeRight</string>
 	</array>
+	<key>NSPhotoLibraryUsageDescription</key>
+	<string>Photos can be uploaded to create new food items for business you love!</string>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
 </dict>

js/apis/ImagesApi.js

@@ -1,37 +1,37 @@
 // @flow
-import type { ImageRaw } from "../records/ImageRecord";
+import type { ImageRaw } from '../records/ImageRecord';
-import { fetchRequest, fetchRequestBinary } from "./FetchApi";
+import { fetchRequest, fetchRequestBinary } from './FetchApi';
 
 export const getImages = (foodItemId: string): Promise<Array<ImageRaw>> => {
 	return fetchRequest({
 		endpoint: `/images/${foodItemId}`,
-		method: "GET"
+		method: 'GET',
 	});
 };
 
 export const addImage = async ({
 	foodItemId,
 	username,
-	imageUri
+	imageUri,
 }: {
 	foodItemId: string,
 	username: string,
-	imageUri: string
+	imageUri: string,
 }) => {
 	const body = new FormData();
 
 	// $FlowFixMe - react-native does different stuff with FormData
-	body.append("photo", {
+	body.append('photo', {
 		uri: imageUri,
-		type: "image/jpeg",
+		type: 'image/jpeg',
-		name: "photo.jpg"
+		name: 'photo.jpg',
 	});
 
-	body.append("username", username);
+	body.append('username', username);
 
 	const res = await fetchRequestBinary({
 		endpoint: `/images/${foodItemId}`,
-		body
+		body,
 	});
 
 	if (!res.ok) {

js/helpers/ImagePickerHelpers.js

@@ -1,13 +1,11 @@
 // @flow
-import * as ReactNativeImagePicker from 'react-native-image-picker';
+import ImagePicker from 'react-native-image-crop-picker';
 
 const IMAGE_MAX_WIDTH = 512;
-const IMAGE_QUALITY = 0.8;
+const IMAGE_MAX_HEIGHT = 384;
 
 export const openImagePicker = () =>
-	new Promise((resolve, reject) =>
+	ImagePicker.openPicker({
-		ReactNativeImagePicker.showImagePicker(
+		width: IMAGE_MAX_WIDTH,
-			{ maxWidth: IMAGE_MAX_WIDTH, quality: IMAGE_QUALITY },
+		height: IMAGE_MAX_HEIGHT,
-			({ didCancel, error, uri }) => (!didCancel && !error ? resolve(uri) : reject(error))
+	});
-		)
-	);

js/pages/CreateFoodItem.js

@@ -39,7 +39,7 @@ type Props = {
 	place: ?PlaceRecord,
 	updatePlace: (place: GooglePlaceObject) => void,
 	addImage: (uri: string) => void,
-	setImagePreview: (index?: number) => void,
+	setImagePreview: (imageURI?: string) => void,
 	loading: boolean,
 	setLoading: (arg: boolean) => void,
 	emitPlace: (place: Object) => void,
@@ -116,8 +116,8 @@ const CreateFoodItem = (props: Props) => {
 				placeholder="Quantity"
 			/>
 			<ImagePicker onCreateNew={addImage}>
-				{foodItem.images.map((image, index) => (
+				{foodItem.images.map((imageURI: string) => (
-					<ImageThumb key={index} uri={image} onPress={() => setImagePreview(index)} />
+					<ImageThumb key={imageURI} uri={imageURI} onPress={() => setImagePreview(imageURI)} />
 				))}
 			</ImagePicker>
 		</View>
@@ -131,7 +131,7 @@ const ImagePreviewComp = compose(
 			onClose: () => setImagePreview(-1),
 			onDelete: () => {
 				setFoodItem(foodItem.deleteIn(['images', imagePreview]));
-				setImagePreview(-1);
+				setImagePreview(null);
 			},
 			imageSrc: foodItem.images.get(imagePreview),
 		};
@@ -143,11 +143,11 @@ const setPropOfFoodItem = ({ foodItem, setFoodItem }: Props) => (prop: string) =
 };
 
 const addImage = ({ foodItem, setFoodItem }: Props) => async () => {
-	const uri = await openImagePicker();
+	const { path } = await openImagePicker();
 	Snackbar.show({
 		title: 'Photo added.',
 	});
-	setFoodItem(foodItem.update('images', images => images.add(uri)));
+	setFoodItem(foodItem.update('images', images => images.add(path)));
 };
 
 const updatePlace = ({ foodItem, setFoodItem, emitPlace }: Props) => placeDetails => {
@@ -175,7 +175,7 @@ export default compose(
 	withPlaceForFoodItem,
 	withPlaceActions,
 	withState('nameModalOpen', 'setNameModalOpen', false),
-	withState('imagePreview', 'setImagePreview', -1),
+	withState('imagePreview', 'setImagePreview', null),
 	withState('categoryModalOpen', 'setCategoryModalOpen', false),
 	withState('quantityModalOpen', 'setQuantityModalOpen', false),
 	withHandlers({
@@ -211,7 +211,7 @@ export default compose(
 			onUpdateProp: 'setName',
 		})
 	),
-	branch(({ imagePreview }) => imagePreview > -1, ImagePreviewComp),
+	branch(({ imagePreview }) => !!imagePreview, ImagePreviewComp),
 	branch(
 		({ categoryModalOpen }) => !!categoryModalOpen,
 		wrapModalComponent({

js/pages/FoodItemDetail.js

@@ -208,7 +208,7 @@ export default compose(
 			if (!foodItem) {
 				return;
 			}
-			const imageUri = await openImagePicker();
+			const { path: imageUri } = await openImagePicker();
 			setImagesLoading(true);
 			await addImage({ foodItemId: foodItem.id, imageUri });
 			setImagesLoading(false);

package.json

@@ -25,7 +25,7 @@
   "react-native-auth0": "^1.5.0",
   "react-native-geolocation-service": "^3.1.0",
   "react-native-google-places": "^3.1.2",
-  "react-native-image-picker": "^1.1.0",
+  "react-native-image-crop-picker": "^0.25.2",
   "react-native-loading-spinner-overlay": "^1.0.1",
   "react-native-looped-carousel": "^0.1.13",
   "react-native-maps": "^0.25.0",

yarn.lock

@@ -5775,10 +5775,10 @@ react-native-google-places@^3.1.2:
   resolved "https://registry.yarnpkg.com/react-native-google-places/-/react-native-google-places-3.1.2.tgz#6aa11f76da6bd58aa9ec1d1b3e2c85edb4ced2ce"
   integrity sha512-aKPbGHga3k/Vkfw9NMf/1t0sivdqxn4qzCbEyAfmhxO7Mlqv9Nljjnez6rp6MZGwh89ss3/a9lhM4ulyZ6o0ew==
 
-react-native-image-picker@^1.1.0:
+react-native-image-crop-picker@^0.25.2:
-  version "1.1.0"
+  version "0.25.2"
-  resolved "https://registry.yarnpkg.com/react-native-image-picker/-/react-native-image-picker-1.1.0.tgz#c2a0523886edb4cf2cdc008ad0a71433142a4d53"
+  resolved "https://registry.yarnpkg.com/react-native-image-crop-picker/-/react-native-image-crop-picker-0.25.2.tgz#241e598e6bd601248c319483c19508f9bc9a203e"
-  integrity sha512-/KjHf4NNAjl6XM7FQuqvGDz1wB9sRdLf86+2yksLW/QTRR7CitX4TLCM8ZF9CX6Y0MsCTndkZia3zWE+nt/GiA==
+  integrity sha512-LZX9gJb5q1q6Oo1jXj1FyNEEDkvfynZMeE3M9jhFjJdvknMf/eui7GlmSokzQ4A1MLxKmcLSVDGw2L1HTBAO6A==
 
 react-native-loading-spinner-overlay@^1.0.1:
   version "1.0.1"