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}> {
20  static defaultProps = {
21    onPress() {},
22  };
23  render() {
24    const { children, style, ...props } = this.props;
25    return (
26      <TouchableOpacity
27        activeOpacity={0.6}
28        style={StyleSheet.flatten([styles.touchable, style])}
29        {...props}>
30        <View style={styles.content}>
31          <Image source={googleIcon} style={styles.icon} />
32          <Text style={styles.text}>{children}</Text>
33        </View>
34      </TouchableOpacity>
35    );
36  }
37}
38
39const styles = StyleSheet.create({
40  touchable: {
41    shadowOpacity: 0.2,
42    shadowRadius: 1.5,
43    shadowOffset: { width: 0, height: 1 },
44    overflow: 'visible',
45    shadowColor: 'black',
46    backgroundColor: 'white',
47    borderRadius: 4,
48  },
49  content: {
50    flexDirection: 'row',
51    paddingHorizontal: 16,
52    paddingVertical: 12,
53    alignItems: 'center',
54    justifyContent: 'space-between',
55  },
56  icon: { width: 24, aspectRatio: 1 },
57  text: { color: 'gray', marginLeft: 12, fontSize: 16, fontWeight: '600' },
58});
59