aretherecookies-mobile/js/modals/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 theme from '../ui-theme';
import { Icon } from 'react-native-material-ui';

export default pure(({ children, isVisible }) => {
	return (
		<Modal isVisible={isVisible} backdropColor="black" backdropOpacity={0.7}>
			<View
				style={{
					flexDirection: 'column',
					backgroundColor: 'white',
					padding: 4,
					justifyContent: 'center',
					alignItems: 'stretch',
					borderRadius: 4,
					flexShrink: 1,
				}}
			>
				{children}
			</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>
	);
};