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