ImagePicker using native camera or gallery

This commit is contained in:
Bart Akeley 2017-06-24 22:38:14 -05:00
parent 6d6900c568
commit a1fa8790cf
20 changed files with 180 additions and 56 deletions

View file

@ -127,6 +127,8 @@ android {
}
dependencies {
compile project(':react-native-vector-icons')
compile project(':react-native-image-picker')
compile project(':react-native-google-places')
compile fileTree(dir: "libs", include: ["*.jar"])
compile "com.android.support:appcompat-v7:23.0.1"

View file

@ -6,6 +6,8 @@
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-sdk
android:minSdkVersion="16"

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View file

@ -3,6 +3,8 @@ package com.aretherecookies;
import android.app.Application;
import com.facebook.react.ReactApplication;
import com.oblador.vectoricons.VectorIconsPackage;
import com.imagepicker.ImagePickerPackage;
import com.arttitude360.reactnative.rngoogleplaces.RNGooglePlacesPackage;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
@ -24,6 +26,8 @@ public class MainApplication extends Application implements ReactApplication {
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new VectorIconsPackage(),
new ImagePickerPackage(),
new RNGooglePlacesPackage()
);
}

View file

@ -1,4 +1,8 @@
rootProject.name = 'AreThereCookies'
include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
include ':react-native-image-picker'
project(':react-native-image-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-picker/android')
include ':react-native-google-places'
project(':react-native-google-places').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-google-places/android')

View file

@ -36,6 +36,18 @@
5E9157361DD0AC6A00FF2AA8 /* libRCTAnimation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5E9157331DD0AC6500FF2AA8 /* libRCTAnimation.a */; };
832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; };
280E457CAD9348CA8B03DD47 /* libRNGooglePlaces.a in Frameworks */ = {isa = PBXBuildFile; fileRef = ABA925E808304E17AEDC016B /* libRNGooglePlaces.a */; };
6D42E5626E694AD8B2E1F392 /* libRNImagePicker.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 4B39ECE2FC3546CDBD026A5B /* libRNImagePicker.a */; };
0BB615C49CCD433DA593C478 /* libRNVectorIcons.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5BFB7419F05149A0AA3B5196 /* libRNVectorIcons.a */; };
55FDEE79293C4EFA86063F22 /* Entypo.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 4D75338FE719450A97754019 /* Entypo.ttf */; };
7D83C54E807D47FCBF127E23 /* EvilIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 53F298ED1335413584C3533A /* EvilIcons.ttf */; };
36B20041268B4878A62CE84C /* FontAwesome.ttf in Resources */ = {isa = PBXBuildFile; fileRef = FF328AF2E4504AAD81574332 /* FontAwesome.ttf */; };
63AD07B6F9C740D4BA67D619 /* Foundation.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 3BA6445F50EA4148970391C2 /* Foundation.ttf */; };
42F9AC2255DF4556AC6D7967 /* Ionicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 39E5D242E4F44F41AB357CFE /* Ionicons.ttf */; };
BC10DD5B7CA14D9D9C7C8041 /* MaterialCommunityIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 452874387CAA42D7B120E03E /* MaterialCommunityIcons.ttf */; };
C45F4C3259C643E7A69C05D8 /* MaterialIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = C547107D34794AD7B535271C /* MaterialIcons.ttf */; };
2D3494321C8A477BB5FA1C40 /* Octicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 58F3E8D932CA42CCBE826FCC /* Octicons.ttf */; };
761A158B50BE4290B39D8637 /* SimpleLineIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 28807711BA664F9EB49B3B76 /* SimpleLineIcons.ttf */; };
B861BE92B155457990C8500E /* Zocial.ttf in Resources */ = {isa = PBXBuildFile; fileRef = D53B3F694EB44AC8B196FE53 /* Zocial.ttf */; };
/* End PBXBuildFile section */
/* Begin PBXContainerItemProxy section */
@ -257,6 +269,20 @@
832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "../node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = "<group>"; };
8A9E50571CB24ACDB143CECA /* RNGooglePlaces.xcodeproj */ = {isa = PBXFileReference; name = "RNGooglePlaces.xcodeproj"; path = "../node_modules/react-native-google-places/ios/RNGooglePlaces.xcodeproj"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; };
ABA925E808304E17AEDC016B /* libRNGooglePlaces.a */ = {isa = PBXFileReference; name = "libRNGooglePlaces.a"; path = "libRNGooglePlaces.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
1CDCCD20971D43E3A647B5AA /* RNImagePicker.xcodeproj */ = {isa = PBXFileReference; name = "RNImagePicker.xcodeproj"; path = "../node_modules/react-native-image-picker/ios/RNImagePicker.xcodeproj"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; };
4B39ECE2FC3546CDBD026A5B /* libRNImagePicker.a */ = {isa = PBXFileReference; name = "libRNImagePicker.a"; path = "libRNImagePicker.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
ABBDD4481F9A4A879DC2DA9B /* RNVectorIcons.xcodeproj */ = {isa = PBXFileReference; name = "RNVectorIcons.xcodeproj"; path = "../node_modules/react-native-vector-icons/RNVectorIcons.xcodeproj"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; };
5BFB7419F05149A0AA3B5196 /* libRNVectorIcons.a */ = {isa = PBXFileReference; name = "libRNVectorIcons.a"; path = "libRNVectorIcons.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
4D75338FE719450A97754019 /* Entypo.ttf */ = {isa = PBXFileReference; name = "Entypo.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Entypo.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
53F298ED1335413584C3533A /* EvilIcons.ttf */ = {isa = PBXFileReference; name = "EvilIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/EvilIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
FF328AF2E4504AAD81574332 /* FontAwesome.ttf */ = {isa = PBXFileReference; name = "FontAwesome.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
3BA6445F50EA4148970391C2 /* Foundation.ttf */ = {isa = PBXFileReference; name = "Foundation.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Foundation.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
39E5D242E4F44F41AB357CFE /* Ionicons.ttf */ = {isa = PBXFileReference; name = "Ionicons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Ionicons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
452874387CAA42D7B120E03E /* MaterialCommunityIcons.ttf */ = {isa = PBXFileReference; name = "MaterialCommunityIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
C547107D34794AD7B535271C /* MaterialIcons.ttf */ = {isa = PBXFileReference; name = "MaterialIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/MaterialIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
58F3E8D932CA42CCBE826FCC /* Octicons.ttf */ = {isa = PBXFileReference; name = "Octicons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Octicons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
28807711BA664F9EB49B3B76 /* SimpleLineIcons.ttf */ = {isa = PBXFileReference; name = "SimpleLineIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
D53B3F694EB44AC8B196FE53 /* Zocial.ttf */ = {isa = PBXFileReference; name = "Zocial.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Zocial.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
/* End PBXFileReference section */
/* Begin PBXFrameworksBuildPhase section */
@ -284,6 +310,8 @@
00C302EA1ABCBA2D00DB3ED1 /* libRCTVibration.a in Frameworks */,
139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */,
280E457CAD9348CA8B03DD47 /* libRNGooglePlaces.a in Frameworks */,
6D42E5626E694AD8B2E1F392 /* libRNImagePicker.a in Frameworks */,
0BB615C49CCD433DA593C478 /* libRNVectorIcons.a in Frameworks */,
);
runOnlyForDeploymentPostprocessing = 0;
};
@ -451,6 +479,8 @@
00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */,
139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */,
8A9E50571CB24ACDB143CECA /* RNGooglePlaces.xcodeproj */,
1CDCCD20971D43E3A647B5AA /* RNImagePicker.xcodeproj */,
ABBDD4481F9A4A879DC2DA9B /* RNVectorIcons.xcodeproj */,
);
name = Libraries;
sourceTree = "<group>";
@ -471,6 +501,7 @@
832341AE1AAA6A7D00B99B32 /* Libraries */,
00E356EF1AD99517003FC87E /* AreThereCookiesTests */,
83CBBA001A601CBA00E9B192 /* Products */,
F290692D4B774D01965F45E6 /* Resources */,
);
indentWidth = 2;
sourceTree = "<group>";
@ -487,6 +518,24 @@
name = Products;
sourceTree = "<group>";
};
F290692D4B774D01965F45E6 /* Resources */ = {
isa = PBXGroup;
children = (
4D75338FE719450A97754019 /* Entypo.ttf */,
53F298ED1335413584C3533A /* EvilIcons.ttf */,
FF328AF2E4504AAD81574332 /* FontAwesome.ttf */,
3BA6445F50EA4148970391C2 /* Foundation.ttf */,
39E5D242E4F44F41AB357CFE /* Ionicons.ttf */,
452874387CAA42D7B120E03E /* MaterialCommunityIcons.ttf */,
C547107D34794AD7B535271C /* MaterialIcons.ttf */,
58F3E8D932CA42CCBE826FCC /* Octicons.ttf */,
28807711BA664F9EB49B3B76 /* SimpleLineIcons.ttf */,
D53B3F694EB44AC8B196FE53 /* Zocial.ttf */,
);
name = Resources;
path = "";
sourceTree = "<group>";
};
/* End PBXGroup section */
/* Begin PBXNativeTarget section */
@ -845,6 +894,16 @@
files = (
13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */,
55FDEE79293C4EFA86063F22 /* Entypo.ttf in Resources */,
7D83C54E807D47FCBF127E23 /* EvilIcons.ttf in Resources */,
36B20041268B4878A62CE84C /* FontAwesome.ttf in Resources */,
63AD07B6F9C740D4BA67D619 /* Foundation.ttf in Resources */,
42F9AC2255DF4556AC6D7967 /* Ionicons.ttf in Resources */,
BC10DD5B7CA14D9D9C7C8041 /* MaterialCommunityIcons.ttf in Resources */,
C45F4C3259C643E7A69C05D8 /* MaterialIcons.ttf in Resources */,
2D3494321C8A477BB5FA1C40 /* Octicons.ttf in Resources */,
761A158B50BE4290B39D8637 /* SimpleLineIcons.ttf in Resources */,
B861BE92B155457990C8500E /* Zocial.ttf in Resources */,
);
runOnlyForDeploymentPostprocessing = 0;
};
@ -979,10 +1038,14 @@
LIBRARY_SEARCH_PATHS = (
"$(inherited)",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
HEADER_SEARCH_PATHS = (
"$(inherited)",
"$(SRCROOT)/../node_modules/react-native-google-places/ios",
"$(SRCROOT)/../node_modules/react-native-image-picker/ios",
"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
);
};
name = Debug;
@ -1004,10 +1067,14 @@
LIBRARY_SEARCH_PATHS = (
"$(inherited)",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
HEADER_SEARCH_PATHS = (
"$(inherited)",
"$(SRCROOT)/../node_modules/react-native-google-places/ios",
"$(SRCROOT)/../node_modules/react-native-image-picker/ios",
"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
);
};
name = Release;
@ -1030,6 +1097,8 @@
HEADER_SEARCH_PATHS = (
"$(inherited)",
"$(SRCROOT)/../node_modules/react-native-google-places/ios",
"$(SRCROOT)/../node_modules/react-native-image-picker/ios",
"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
);
};
name = Debug;
@ -1051,6 +1120,8 @@
HEADER_SEARCH_PATHS = (
"$(inherited)",
"$(SRCROOT)/../node_modules/react-native-google-places/ios",
"$(SRCROOT)/../node_modules/react-native-image-picker/ios",
"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
);
};
name = Release;
@ -1081,10 +1152,14 @@
LIBRARY_SEARCH_PATHS = (
"$(inherited)",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
HEADER_SEARCH_PATHS = (
"$(inherited)",
"$(SRCROOT)/../node_modules/react-native-google-places/ios",
"$(SRCROOT)/../node_modules/react-native-image-picker/ios",
"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
);
};
name = Debug;
@ -1115,10 +1190,14 @@
LIBRARY_SEARCH_PATHS = (
"$(inherited)",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
HEADER_SEARCH_PATHS = (
"$(inherited)",
"$(SRCROOT)/../node_modules/react-native-google-places/ios",
"$(SRCROOT)/../node_modules/react-native-image-picker/ios",
"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
);
};
name = Release;
@ -1144,6 +1223,8 @@
LIBRARY_SEARCH_PATHS = (
"$(inherited)",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
};
name = Debug;
@ -1169,6 +1250,8 @@
LIBRARY_SEARCH_PATHS = (
"$(inherited)",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
};
name = Release;

View file

@ -1,56 +1,68 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>CFBundleDevelopmentRegion</key>
<string>en</string>
<key>CFBundleDisplayName</key>
<string>AreThereCookies</string>
<key>CFBundleExecutable</key>
<string>$(EXECUTABLE_NAME)</string>
<key>CFBundleIdentifier</key>
<string>org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)</string>
<key>CFBundleInfoDictionaryVersion</key>
<string>6.0</string>
<key>CFBundleName</key>
<string>$(PRODUCT_NAME)</string>
<key>CFBundlePackageType</key>
<string>APPL</string>
<key>CFBundleShortVersionString</key>
<string>1.0</string>
<key>CFBundleSignature</key>
<string>????</string>
<key>CFBundleVersion</key>
<string>1</string>
<key>LSRequiresIPhoneOS</key>
<true/>
<key>UILaunchStoryboardName</key>
<string>LaunchScreen</string>
<key>UIRequiredDeviceCapabilities</key>
<array>
<string>armv7</string>
</array>
<key>UISupportedInterfaceOrientations</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
<string>UIInterfaceOrientationLandscapeLeft</string>
<string>UIInterfaceOrientationLandscapeRight</string>
</array>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>
<key>NSLocationWhenInUseUsageDescription</key>
<string></string>
<key>NSAppTransportSecurity</key>
<!--See http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/ -->
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
</dict>
</plist>
<dict>
<key>CFBundleDevelopmentRegion</key>
<string>en</string>
<key>CFBundleDisplayName</key>
<string>AreThereCookies</string>
<key>CFBundleExecutable</key>
<string>$(EXECUTABLE_NAME)</string>
<key>CFBundleIdentifier</key>
<string>org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)</string>
<key>CFBundleInfoDictionaryVersion</key>
<string>6.0</string>
<key>CFBundleName</key>
<string>$(PRODUCT_NAME)</string>
<key>CFBundlePackageType</key>
<string>APPL</string>
<key>CFBundleShortVersionString</key>
<string>1.0</string>
<key>CFBundleSignature</key>
<string>????</string>
<key>CFBundleVersion</key>
<string>1</string>
<key>LSRequiresIPhoneOS</key>
<true/>
<key>UILaunchStoryboardName</key>
<string>LaunchScreen</string>
<key>UIRequiredDeviceCapabilities</key>
<array>
<string>armv7</string>
</array>
<key>UISupportedInterfaceOrientations</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
<string>UIInterfaceOrientationLandscapeLeft</string>
<string>UIInterfaceOrientationLandscapeRight</string>
</array>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>
<key>NSLocationWhenInUseUsageDescription</key>
<string/>
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
<key>UIAppFonts</key>
<array>
<string>Entypo.ttf</string>
<string>EvilIcons.ttf</string>
<string>FontAwesome.ttf</string>
<string>Foundation.ttf</string>
<string>Ionicons.ttf</string>
<string>MaterialCommunityIcons.ttf</string>
<string>MaterialIcons.ttf</string>
<string>Octicons.ttf</string>
<string>SimpleLineIcons.ttf</string>
<string>Zocial.ttf</string>
</array>
</dict>
</plist>

View file

@ -3,9 +3,17 @@ import React from 'react';
import { Text, View, TouchableOpacity, Image } from 'react-native';
import { Icon } from 'react-native-material-ui';
import uiTheme from '../ui-theme.js';
import ReactNativeImagePicker from 'react-native-image-picker';
const { palette: { accentColor } } = uiTheme;
const openImagePicker = onCreateNew => () =>
ReactNativeImagePicker.showImagePicker({}, ({ didCancel, error, uri }) => {
if (!didCancel && !error) {
onCreateNew(uri);
}
});
export const ImageThumb = ({ uri, onPress }: { uri?: string, onPress: () => void }) =>
<TouchableOpacity onPress={onPress}>
<Image source={{ uri }} style={{ height: 35, width: 35, margin: 5 }} />
@ -13,7 +21,7 @@ export const ImageThumb = ({ uri, onPress }: { uri?: string, onPress: () => void
export const ImagePicker = ({ children, onCreateNew }: { children?: any, onCreateNew: Function }) =>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<TouchableOpacity onPress={onCreateNew}>
<TouchableOpacity onPress={openImagePicker(onCreateNew)}>
<View style={{ flexDirection: 'row' }}>
<Icon name="insert-photo" size={35} color={accentColor} style={{ margin: 5 }} />
{(!children || !children.length) &&

View file

@ -54,9 +54,10 @@ type Props = {
setPlace: (place: typeof PlaceRecord) => void,
removeImageAtIndex: (i: number) => () => void,
updatePlace: (place: GooglePlaceObject) => void,
addImage: (uri: string) => void,
};
const CreateFoodItem = (props: Props) => {
const { foodItem, toggleNameModal, setPropOfFoodItem, place, updatePlace, removeImageAtIndex } = props;
const { foodItem, toggleNameModal, setPropOfFoodItem, place, updatePlace, removeImageAtIndex, addImage } = props;
return (
<View style={{ ...theme.page.container, backgroundColor: 'white', padding: 10 }}>
@ -74,7 +75,7 @@ const CreateFoodItem = (props: Props) => {
style={{ height: 50 }}
/>
<Divider />
<ImagePicker onCreateNew={() => {}}>
<ImagePicker onCreateNew={addImage}>
{foodItem.images.map((image, index) =>
<ImageThumb key={index} uri={image} onPress={removeImageAtIndex(index)} />
)}
@ -101,6 +102,9 @@ export default compose(
setPropOfFoodItem: ({ foodItem, setFoodItem }: Props) => (prop: string) => (value: any) => {
setFoodItem(foodItem.set(prop, value));
},
addImage: ({ foodItem, setFoodItem }: Props) => (uri: string) => {
setFoodItem(foodItem.update('images', images => [uri].concat(images)));
},
removeImageAtIndex: ({ foodItem, setFoodItem }: Props) => (index: number) => () => {
setFoodItem(
foodItem.update('images', (images: Array<string>) => {

View file

@ -16,6 +16,7 @@
"react-native": "~0.42.0",
"react-native-drawer": "^2.3.0",
"react-native-google-places": "^2.1.0",
"react-native-image-picker": "^0.26.3",
"react-native-looped-carousel": "^0.1.5",
"react-native-material-ui": "^1.7.0",
"react-native-modal": "^2.2.0",

View file

@ -3555,6 +3555,10 @@ react-native-google-places@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/react-native-google-places/-/react-native-google-places-2.1.0.tgz#93ceb61b1349fa19d320f32c77b0441985b42d5a"
react-native-image-picker@^0.26.3:
version "0.26.3"
resolved "https://registry.yarnpkg.com/react-native-image-picker/-/react-native-image-picker-0.26.3.tgz#0ad2eede49501a7046d8046a73813696539c3dcd"
react-native-looped-carousel@^0.1.5:
version "0.1.7"
resolved "https://registry.yarnpkg.com/react-native-looped-carousel/-/react-native-looped-carousel-0.1.7.tgz#9e81aec732039250568e367383d0bd70ba4173e9"