This is an expo project for an app. I would like to separate the code from the styles
// frontend/screens/SettingsScreen.js

import React, { useContext } from 'react';
import { View, StyleSheet, Alert, ScrollView, TouchableOpacity } from 'react-native';
import { Text, Button, Divider } from 'react-native-paper';
import { ThemeContext } from '../context/ThemeContext';
import { AuthContext } from '../context/AuthContext'; // Import AuthContext

const SettingsScreen = () => {
  const { theme, themeName, setThemeByName } = useContext(ThemeContext);
  const { signOut } = useContext(AuthContext);

  // Handler for the logout button
  const handleLogout = () => {
    Alert.alert(
      'Logout',
      'Are you sure you want to logout?',
      [
        { text: 'Cancel', style: 'cancel' },
        {
          text: 'Logout',
          style: 'destructive',
          onPress: () => signOut(),
        },
      ],
      { cancelable: true }
    );
  };

  // List of themes available
  const themesList = [
    { name: 'Light', key: 'light' },
    { name: 'Dark', key: 'dark' },
    { name: 'Deep Navy & Gold', key: 'navyGold' },
    { name: 'Black & Platinum', key: 'blackPlatinum' },
    { name: 'Emerald Green & Gold', key: 'emeraldGold' },
    { name: 'Charcoal & Rose Gold', key: 'charcoalRoseGold' },
  ];

  return (
    <ScrollView style={[styles.container, { backgroundColor: theme.colors.background }]}>
      <Text style={[styles.header, { color: theme.colors.text }]}>Select Theme</Text>

      {themesList.map((item) => (
        <TouchableOpacity
          key={item.key}
          style={[
            styles.themeOption,
            { borderColor: theme.colors.border },
            themeName === item.key && { borderColor: theme.colors.accent },
          ]}
          onPress={() => setThemeByName(item.key)}
        >
          <Text style={[styles.themeText, { color: theme.colors.text }]}>
            {item.name}
          </Text>
          {themeName === item.key && (
            <Text style={[styles.selectedText, { color: theme.colors.accent }]}>
              (Selected)
            </Text>
          )}
        </TouchableOpacity>
      ))}

      <Divider style={{ backgroundColor: theme.colors.border, marginVertical: 20 }} />

      {/* Logout Button */}
      <View style={styles.logoutContainer}>
        <Button
          mode="contained"
          icon="logout"
          onPress={handleLogout}
          style={styles.logoutButton}
          contentStyle={styles.buttonContent}
          labelStyle={{ color: theme.colors.onSurface }}
          accessibilityLabel="Logout"
          accessibilityHint="Logs you out of the application"
          color={theme.colors.primary}
        >
          Logout
        </Button>
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  header: {
    fontSize: 24,
    marginBottom: 16,
  },
  themeOption: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: 12,
    paddingHorizontal: 16,
    borderWidth: 1,
    borderRadius: 8,
    marginVertical: 6,
  },
  themeText: {
    fontSize: 18,
  },
  selectedText: {
    fontSize: 16,
  },
  logoutContainer: {
    marginTop: 20,
    alignItems: 'center',
  },
  logoutButton: {
    width: '100%',
    paddingVertical: 10,
    borderRadius: 8,
  },
  buttonContent: {
    height: 50,
    justifyContent: 'center',
  },
});

export default SettingsScreen;