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 { type List } from 'immutable';

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