aretherecookies-mobile/js/components/Modal.js

// flow
import React from 'react';
import { View, TouchableOpacity, Text, TextInput } from 'react-native';
import Modal from 'react-native-modal';
import { pure } from 'recompose';
import style from '../ui-theme';
import { Icon } from 'react-native-material-ui';

export default pure(({ children, isVisible }) => (
	<Modal isVisible={isVisible}>
		<View
			style={{
				flexDirection: 'column',
				backgroundColor: 'white',
				padding: 4,
				justifyContent: 'center',
				alignItems: 'stretch',
				borderRadius: 4,
				flexShrink: 1,
			}}
		>
			{children}
		</View>
	</Modal>
));

export const TextButton = ({ text, onPress }: { text: string, onPress: () => void }) => {
	return (
		<TouchableOpacity onPress={onPress}>
			<View style={{ paddingLeft: 10, flexShrink: 0 }}>
				<Text style={{ color: style.palette.accentColor, padding: 12, fontSize: 17 }}>
					{text}
				</Text>
			</View>
		</TouchableOpacity>
	);
};

type TextInputHeaderProps = {
	value: string,
	onChange: (val: string) => void,
	onClose: () => void,
	onSubmit: () => void,
};
export const TextInputHeader = ({ value, onChange, onClose, onSubmit }: TextInputHeaderProps) => {
	return (
		<View style={{ flexDirection: 'row', flexShrink: 0 }}>
			<Icon name="search" style={{ marginTop: 15, marginLeft: 5 }} />
			<TextInput
				style={{ flex: 1, height: 50 }}
				onChangeText={onChange}
				value={value}
				placeholder="search"
				onSubmitEditing={onSubmit}
			/>
			<TouchableOpacity onPress={onClose}>
				<Icon name="close" style={{ marginTop: 15, marginRight: 5 }} />
			</TouchableOpacity>
		</View>
	);
};