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