Drawer Navigator

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';

const Drawer = createDrawerNavigator();

// Screen components
const HomeScreen = ({ navigation }) => (
  <View style={styles.container}>
    <Text style={styles.title}>Home</Text>
    <Text style={styles.subtitle}>Welcome to the home screen!</Text>
    <TouchableOpacity
      style={styles.button}
      onPress={() => navigation.openDrawer()}
    >
      <Text style={styles.buttonText}>Open Drawer</Text>
    </TouchableOpacity>
  </View>
);

const ProfileScreen = () => (
  <View style={styles.container}>
    <Text style={styles.title}>Profile</Text>
    <Text style={styles.subtitle}>User profile information</Text>
  </View>
);

const SettingsScreen = () => (
  <View style={styles.container}>
    <Text style={styles.title}>Settings</Text>
    <Text style={styles.subtitle}>App settings and preferences</Text>
  </View>
);

const HelpScreen = () => (
  <View style={styles.container}>
    <Text style={styles.title}>Help</Text>
    <Text style={styles.subtitle}>Get help and support</Text>
  </View>
);

// Custom Drawer Content
const CustomDrawerContent = (props) => {
  return (
    <ScrollView style={styles.drawerContainer}>
      <View style={styles.drawerHeader}>
        <Text style={styles.drawerTitle}>My App</Text>
        <Text style={styles.drawerSubtitle}>Navigation Menu</Text>
      </View>
      
      <View style={styles.drawerContent}>
        <TouchableOpacity 
          style={styles.drawerItem}
          onPress={() => props.navigation.navigate('Home')}
        >
          <Icon name="home" size={24} color="#333" />
          <Text style={styles.drawerItemText}>Home</Text>
        </TouchableOpacity>
        
        <TouchableOpacity 
          style={styles.drawerItem}
          onPress={() => props.navigation.navigate('Profile')}
        >
          <Icon name="person" size={24} color="#333" />
          <Text style={styles.drawerItemText}>Profile</Text>
        </TouchableOpacity>
        
        <TouchableOpacity 
          style={styles.drawerItem}
          onPress={() => props.navigation.navigate('Settings')}
        >
          <Icon name="settings" size={24} color="#333" />
          <Text style={styles.drawerItemText}>Settings</Text>
        </TouchableOpacity>
        
        <TouchableOpacity 
          style={styles.drawerItem}
          onPress={() => props.navigation.navigate('Help')}
        >
          <Icon name="help" size={24} color="#333" />
          <Text style={styles.drawerItemText}>Help</Text>
        </TouchableOpacity>
      </View>
    </ScrollView>
  );
};

// Drawer Navigator
const DrawerNavigator = () => (
  <Drawer.Navigator
    drawerContent={(props) => <CustomDrawerContent {...props} />}
    screenOptions={{
      headerStyle: {
        backgroundColor: '#2196F3',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
      drawerStyle: {
        backgroundColor: '#f5f5f5',
        width: 280,
      },
    }}
  >
    <Drawer.Screen 
      name="Home" 
      component={HomeScreen}
      options={{
        drawerIcon: ({ color }) => (
          <Icon name="home" size={24} color={color} />
        ),
      }}
    />
    <Drawer.Screen 
      name="Profile" 
      component={ProfileScreen}
      options={{
        drawerIcon: ({ color }) => (
          <Icon name="person" size={24} color={color} />
        ),
      }}
    />
    <Drawer.Screen 
      name="Settings" 
      component={SettingsScreen}
      options={{
        drawerIcon: ({ color }) => (
          <Icon name="settings" size={24} color={color} />
        ),
      }}
    />
    <Drawer.Screen 
      name="Help" 
      component={HelpScreen}
      options={{
        drawerIcon: ({ color }) => (
          <Icon name="help" size={24} color={color} />
        ),
      }}
    />
  </Drawer.Navigator>
);

// Main App
const App = () => {
  return (
    <NavigationContainer>
      <DrawerNavigator />
    </NavigationContainer>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 10,
    color: '#333',
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
    textAlign: 'center',
    marginBottom: 20,
  },
  button: {
    backgroundColor: '#2196F3',
    padding: 15,
    borderRadius: 8,
    alignItems: 'center',
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
  drawerContainer: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  drawerHeader: {
    backgroundColor: '#2196F3',
    padding: 20,
    paddingTop: 40,
  },
  drawerTitle: {
    fontSize: 24,
    fontWeight: 'bold',
    color: 'white',
  },
  drawerSubtitle: {
    fontSize: 16,
    color: 'rgba(255, 255, 255, 0.8)',
    marginTop: 5,
  },
  drawerContent: {
    padding: 20,
  },
  drawerItem: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 15,
    borderRadius: 8,
    marginBottom: 5,
  },
  drawerItemText: {
    fontSize: 16,
    marginLeft: 15,
    color: '#333',
  },
});

export default App;