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