File size: 2,235 Bytes
5c876be | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | import React from 'react';
import { StyleSheet, View } from 'react-native';
import { useTheme, Button, ActivityIndicator, Text } from 'react-native-paper';
export interface GoogleButtonProps {
/** Callback when the button is pressed */
onPress: () => void;
/** Whether the sign-in is in progress */
loading?: boolean;
}
/**
* Styled Google sign-in button. Displays the Google "G" logo,
* "Continue with Google" text, and an ActivityIndicator while loading.
* Uses Paper's contained-tonal Button mode.
*/
export function GoogleButton({ onPress, loading = false }: GoogleButtonProps) {
const theme = useTheme();
return (
<Button
mode="contained-tonal"
onPress={onPress}
disabled={loading}
style={[
styles.button,
{
backgroundColor: loading
? theme.colors.surfaceDisabled
: '#FFFFFF',
borderRadius: 24,
},
]}
contentStyle={styles.content}
labelStyle={[
styles.label,
{
color: loading
? theme.colors.onSurfaceDisabled
: theme.colors.onSurface,
},
]}
icon={() => (
<GoogleGIcon color={loading ? theme.colors.onSurfaceDisabled : '#4285F4'} />
)}
>
Continue with Google
</Button>
);
}
/**
* Renders a simple "G" Google logo using a coloured Text element
* styled to mimic the Google brand mark.
*/
function GoogleGIcon({ color = '#4285F4' }: { color?: string }) {
return (
<View style={styles.gContainer}>
<Text
style={[
styles.gText,
{ color },
]}
>
G
</Text>
</View>
);
}
const styles = StyleSheet.create({
button: {
width: '100%',
paddingVertical: 4,
borderColor: '#DDDDDD',
borderWidth: 1,
},
content: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
paddingVertical: 6,
gap: 12,
},
label: {
fontSize: 16,
fontWeight: '600',
letterSpacing: 0.2,
},
gContainer: {
width: 24,
height: 24,
alignItems: 'center',
justifyContent: 'center',
},
gText: {
fontSize: 22,
fontWeight: '700',
fontStyle: 'italic',
},
});
|