69 lines
1.8 KiB
TypeScript
69 lines
1.8 KiB
TypeScript
import { useState } from 'react';
|
|
import { Text, StyleSheet, Animated, Pressable } from "react-native";
|
|
import { useAuth } from '../context/AuthContext';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
|
|
export default function LogoutButton() {
|
|
const { clearAuth } = useAuth();
|
|
const [scale] = useState(new Animated.Value(1));
|
|
|
|
const handlePress = async () => {
|
|
// Animate button press
|
|
Animated.sequence([
|
|
Animated.spring(scale, {
|
|
toValue: 0.95,
|
|
useNativeDriver: true,
|
|
}),
|
|
Animated.spring(scale, {
|
|
toValue: 1,
|
|
useNativeDriver: true,
|
|
})
|
|
]).start();
|
|
|
|
await clearAuth();
|
|
};
|
|
|
|
return (
|
|
<Animated.View style={{ transform: [{ scale }] }}>
|
|
<Pressable
|
|
onPress={handlePress}
|
|
style={({ pressed }) => [
|
|
styles.button,
|
|
pressed && styles.buttonPressed
|
|
]}
|
|
>
|
|
<Ionicons name="log-out-outline" size={20} color="#fff" />
|
|
<Text style={styles.buttonText}>Logout</Text>
|
|
</Pressable>
|
|
</Animated.View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
button: {
|
|
backgroundColor: '#dc3545',
|
|
paddingHorizontal: 20,
|
|
paddingVertical: 12,
|
|
borderRadius: 8,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: 8,
|
|
shadowColor: '#000',
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: 2,
|
|
},
|
|
shadowOpacity: 0.25,
|
|
shadowRadius: 3.84,
|
|
elevation: 5,
|
|
},
|
|
buttonPressed: {
|
|
backgroundColor: '#c82333',
|
|
},
|
|
buttonText: {
|
|
color: '#fff',
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
},
|
|
}); |