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