aretherecookies-mobile/js/components/ImagePicker.js

//@flow
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 }} />
	</TouchableOpacity>;

export const ImagePicker = ({ children, onCreateNew }: { children?: any, onCreateNew: Function }) =>
	<View style={{ flexDirection: 'row', marginTop: 10 }}>
		<TouchableOpacity onPress={openImagePicker(onCreateNew)}>
			<View style={{ flexDirection: 'row' }}>
				<Icon name="insert-photo" size={35} color={accentColor} style={{ margin: 5 }} />
				{(!children || !children.length) &&
					<View style={{ flexDirection: 'column', justifyContent: 'center' }}>
						<Text style={{ fontSize: 16 }}>Add Images</Text>
					</View>}
			</View>
		</TouchableOpacity>
		{children}
	</View>;