-
-
Notifications
You must be signed in to change notification settings - Fork 118
/
Button.tsx
81 lines (72 loc) · 2.11 KB
/
Button.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
// Sh**t! I Smoke
// Copyright (C) 2018-2019 Marcelo S. Coelho, Amaury Martiny
// Sh**t! I Smoke is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
// Sh**t! I Smoke is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
// You should have received a copy of the GNU General Public License
// along with Sh**t! I Smoke. If not, see <http:https://www.gnu.org/licenses/>.
import { FontAwesome } from '@expo/vector-icons';
import React from 'react';
import {
StyleSheet,
Text,
TouchableOpacity,
TouchableOpacityProps
} from 'react-native';
import { scale } from 'react-native-size-matters';
import * as theme from '../../util/theme';
interface ButtonProps extends TouchableOpacityProps {
children: string;
icon?: string;
type?: 'primary' | 'secondary';
}
export function Button (props: ButtonProps) {
const { children, icon, onPress, style, type, ...rest } = props;
return (
<TouchableOpacity
onPress={onPress}
style={[
styles.bigButton,
type && type === 'secondary' ? styles.secondary : styles.primary,
style
]}
{...rest}
>
{icon && (
<FontAwesome
color={theme.primaryColor}
name={icon}
size={15}
style={styles.icon}
/>
)}
<Text style={styles.bigButtonText}>{children}</Text>
</TouchableOpacity>
);
}
const styles = StyleSheet.create({
bigButton: {
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'space-around',
paddingVertical: theme.spacing.tiny
},
bigButtonText: {
...theme.title,
color: theme.primaryColor
},
icon: {
marginRight: theme.spacing.tiny
},
primary: {
borderColor: theme.primaryColor,
borderRadius: scale(24),
borderWidth: scale(2)
},
secondary: {}
});