Modern Settings Screen with Gesture Handling

                                        import React, { useState } from 'react';
import {
  StyleSheet,
  SafeAreaView,
  View,
  Text,
  TouchableOpacity,
  TextInput,
  StatusBar,
  ScrollView,
} from 'react-native';
import { Ionicons, MaterialIcons, Feather } from '@expo/vector-icons';
import { Switch, GestureHandlerRootView } from 'react-native-gesture-handler'; // Corrected import

const SettingsScreen = () => {
  // State to manage dark mode toggle
  const [darkMode, setDarkMode] = useState(false);

  return (
    // Wrap the entire SafeAreaView with GestureHandlerRootView for gesture handling
    <GestureHandlerRootView style={styles.container}>
      <SafeAreaView style={styles.container}>
        <StatusBar backgroundColor="white" barStyle="dark-content" />
        <ScrollView>
          {/* Header Section */}
          <View style={styles.header}>
            <TouchableOpacity>
              <Ionicons name="arrow-back" size={24} color="#000" />
            </TouchableOpacity>
            <Text style={styles.title}>Settings</Text>
            <TouchableOpacity>
              <Ionicons name="close" size={24} color="#000" />
            </TouchableOpacity>
          </View>

          {/* Search Bar Section */}
          <View style={styles.searchContainer}>
            <TextInput
              style={styles.searchInput}
              placeholder="Search settings"
              placeholderTextColor="#888"
            />
            <Feather name="search" size={20} color="#888" style={styles.searchIcon} />
          </View>

          {/* Support Section */}
          <View style={styles.section}>
            <Text style={styles.sectionTitle}>Support</Text>
            <TouchableOpacity style={styles.item}>
              <View style={styles.itemContent}>
                <Ionicons name="help-circle-outline" size={20} color="#000" />
                <Text style={styles.itemText}>Help Center</Text>
              </View>
              <Ionicons name="chevron-forward" size={20} color="#888" />
            </TouchableOpacity>
            <TouchableOpacity style={styles.item}>
              <View style={styles.itemContent}>
                <MaterialIcons name="info-outline" size={20} color="#000" />
                <Text style={styles.itemText}>Guidelines</Text>
              </View>
              <Ionicons name="chevron-forward" size={20} color="#888" />
            </TouchableOpacity>
            <TouchableOpacity style={styles.item}>
              <View style={styles.itemContent}>
                <Ionicons name="chatbubble-outline" size={20} color="#000" />
                <Text style={styles.itemText}>Contact Us</Text>
              </View>
              <Ionicons name="chevron-forward" size={20} color="#888" />
            </TouchableOpacity>
            <TouchableOpacity style={styles.item}>
              <View style={styles.itemContent}>
                <Ionicons name="cart-outline" size={20} color="#000" />
                <Text style={styles.itemText}>Restore Purchases</Text>
              </View>
              <Ionicons name="chevron-forward" size={20} color="#888" />
            </TouchableOpacity>
          </View>

          {/* Subscription Section */}
          <View style={styles.section}>
            <Text style={styles.sectionTitle}>Subscription</Text>
            <TouchableOpacity style={styles.item}>
              <View style={styles.itemContent}>
                <Ionicons name="card-outline" size={20} color="#000" />
                <Text style={styles.itemText}>Manage Subscription</Text>
              </View>
              <Ionicons name="chevron-forward" size={20} color="#888" />
            </TouchableOpacity>
          </View>

          {/* Settings Section */}
          <View style={styles.section}>
            <Text style={styles.sectionTitle}>Settings</Text>
            <TouchableOpacity style={styles.item}>
              <View style={styles.itemContent}>
                <Ionicons name="notifications-outline" size={20} color="#000" />
                <Text style={styles.itemText}>Notification Settings</Text>
              </View>
              <Ionicons name="chevron-forward" size={20} color="#888" />
            </TouchableOpacity>
            <TouchableOpacity style={styles.item}>
              <View style={styles.itemContent}>
                <Ionicons name="search-outline" size={20} color="#000" />
                <Text style={styles.itemText}>Discovery Settings</Text>
              </View>
              <Ionicons name="chevron-forward" size={20} color="#888" />
            </TouchableOpacity>
            <TouchableOpacity style={styles.item}>
              <View style={styles.itemContent}>
                <Ionicons name="list-outline" size={20} color="#000" />
                <Text style={styles.itemText}>Feed Settings</Text>
              </View>
              <Ionicons name="chevron-forward" size={20} color="#888" />
            </TouchableOpacity>
            <View style={styles.item}>
              <View style={styles.itemContent}>
                <Ionicons name="moon-outline" size={20} color="#000" />
                <Text style={styles.itemText}>Dark Mode</Text>
              </View>
              <Switch
                value={darkMode}
                onValueChange={setDarkMode}
                trackColor={{ false: '#767577', true: '#81b0ff' }}
                thumbColor={darkMode ? '#fff' : '#f4f3f4'}
              />
            </View>
          </View>
        </ScrollView>
      </SafeAreaView>
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingTop: 10,
    paddingBottom: 20,
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#000',
  },
  searchContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 16,
    marginBottom: 20,
  },
  searchInput: {
    flex: 1,
    height: 40,
    backgroundColor: '#f5f5f5',
    borderRadius: 10,
    paddingLeft: 40,
    paddingRight: 10,
    fontSize: 16,
    color: '#000',
  },
  searchIcon: {
    position: 'absolute',
    left: 26,
  },
  section: {
    paddingHorizontal: 16,
    marginBottom: 20,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#000',
    marginBottom: 15,
  },
  item: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  itemContent: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  itemText: {
    fontSize: 16,
    color: '#000',
    marginLeft: 15,
  },
});

export default SettingsScreen;