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