aretherecookies-mobile/js/modals/Modal.js

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

export default pure(({ children, isVisible }) => {
	return (
		<Modal visible={isVisible} transparent={true} animationType="fade" onRequestClose={() => {}}>
			<View
				style={{
					flex: 1,
					backgroundColor: 'rgba(0,0,0,0.7)',
					alignItems: 'center',
					justifyContent: 'center',
				}}>
				<View
					style={{
						flexDirection: 'column',
						backgroundColor: 'white',
						padding: 4,
						justifyContent: 'center',
						alignItems: 'stretch',
						borderRadius: 4,
						flexShrink: 1,
					}}>
					{children}
				</View>
			</View>
		</Modal>
	);
});

export const TextButton = ({
	text,
	onPress,
	style = {},
}: {
	text: string,
	onPress: () => void,
	style: Object,
}) => {
	return (
		<TouchableOpacity onPress={onPress}>
			<View style={{ flexShrink: 0, ...style }}>
				<Text style={{ color: theme.palette.accentColor, padding: 12, fontSize: 16 }}>{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>
	);
};