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

const { palette: { accentColor } } = uiTheme;

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={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>;