1import React from 'react';
2import {
3  Image,
4  StyleProp,
5  StyleSheet,
6  Text,
7  TouchableOpacity,
8  View,
9  ViewStyle,
10} from 'react-native';
11
12const googleIcon = {
13  uri:
14    'https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/200px-Google_%22G%22_Logo.svg.png',
15};
16
17export default class GoogleSignInButton extends React.PureComponent<{
18  style?: StyleProp<ViewStyle>;
19  disabled?: boolean;
20}> {
21  static defaultProps = {
22    onPress() {},
23  };
24  render() {
25    const { children, style, disabled, ...props } = this.props;
26    return (
27      <TouchableOpacity
28        disabled={disabled}
29        activeOpacity={0.6}
30        style={StyleSheet.flatten([styles.touchable, style])}
31        {...props}>
32        <View style={styles.content}>
33          <Image source={googleIcon} style={styles.icon} />
34          <Text style={styles.text}>{children}</Text>
35        </View>
36      </TouchableOpacity>
37    );
38  }
39}
40
41const styles = StyleSheet.create({
42  touchable: {
43    shadowOpacity: 0.2,
44    shadowRadius: 1.5,
45    shadowOffset: { width: 0, height: 1 },
46    overflow: 'visible',
47    shadowColor: 'black',
48    backgroundColor: 'white',
49    borderRadius: 4,
50  },
51  content: {
52    flexDirection: 'row',
53    paddingHorizontal: 16,
54    paddingVertical: 12,
55    alignItems: 'center',
56    justifyContent: 'space-between',
57  },
58  icon: { width: 24, aspectRatio: 1 },
59  text: { color: 'gray', marginLeft: 12, fontSize: 16, fontWeight: '600' },
60});
61