1import React from 'react';
2import {
3  StyleSheet,
4  Text,
5  TouchableHighlight,
6  View,
7  ActivityIndicator,
8  TouchableHighlightProps,
9  ViewStyle,
10} from 'react-native';
11import Colors from '../constants/Colors';
12
13interface Props extends TouchableHighlightProps {
14  disabled?: boolean;
15  loading?: boolean;
16  title?: string;
17  buttonStyle?: ViewStyle;
18}
19
20const Button: React.FunctionComponent<Props> = ({
21  disabled,
22  loading,
23  title,
24  onPress,
25  onPressIn,
26  style,
27  buttonStyle,
28  children,
29}) => (
30  <View style={[styles.container, style]}>
31    <TouchableHighlight
32      style={[styles.button, disabled && styles.disabledButton, buttonStyle]}
33      disabled={disabled || loading}
34      onPressIn={onPressIn}
35      onPress={onPress}
36      underlayColor={Colors.highlightColor}
37    >
38      {children || (
39        loading ? <ActivityIndicator size="small" color="white" /> : <Text style={styles.label}>{title}</Text>
40      )}
41    </TouchableHighlight>
42  </View>
43);
44
45const styles = StyleSheet.create({
46  container: {
47    alignItems: 'center',
48    justifyContent: 'center',
49  },
50  button: {
51    alignItems: 'center',
52    justifyContent: 'center',
53    borderRadius: 3,
54    paddingVertical: 8,
55    paddingHorizontal: 12,
56    backgroundColor: Colors.tintColor,
57  },
58  disabledButton: {
59    backgroundColor: Colors.disabled,
60  },
61  label: {
62    color: '#ffffff',
63    fontWeight: '700',
64  },
65});
66
67export default Button;
68