Users:

Add Users:
QUESTION # 02:
import React, { useState } from "react"; import { View, Text, Image, StyleSheet,
TouchableOpacity, Alert, ScrollView } from "reactnative"; import { createDrawerNavigator }
from "@react-navigation/drawer"; import { NavigationContainer } from "@react-
navigation/native"; import { DrawerContentScrollView, DrawerItem } from "@react-
navigation/drawer"; const HomeScreen = () => (
<ScrollView contentContainerStyle={styles.screen}>
<Text style={styles.screenTitle}>Welcome to the Home Screen</Text>
<Text style={styles.contentText}>
Here, you can find an overview of the app and explore the various features available for
both Admins and Users.
</Text>
</ScrollView> ); const
AdminScreen = () => (
<ScrollView contentContainerStyle={styles.screen}>
<Text style={styles.screenTitle}>Admin Dashboard</Text>
<Text style={styles.contentText}>
As an Admin, you can manage users, view analytics, and perform other administrative
tasks. Use this dashboard to make important decisions.
</Text>
<Text style={styles.sectionTitle}>Recent User Activity:</Text>
<Text style={styles.contentText}>- User John Doe logged in</Text>
<Text style={styles.contentText}>- Admin Jane Doe added a new post</Text>
<Text style={styles.contentText}>- User Alice updated profile information</Text>
</ScrollView> ); const
UserScreen = () => (
<ScrollView contentContainerStyle={styles.screen}>
<Text style={styles.screenTitle}>User Dashboard</Text>
<Text style={styles.contentText}>
Welcome, User! This is your personal dashboard where you can access your data, customize
your profile, and explore features tailored to you.
</Text>
<Text style={styles.sectionTitle}>Your Recent Activity:</Text>
 <Text style={styles.contentText}>- You updated your profile picture</Text>
<Text style={styles.contentText}>- You commented on an article "React Native Tips"</Text>
<Text style={styles.contentText}>- You liked the post "Getting started with React
Native"</Text>
</ScrollView>
); const Drawer = createDrawerNavigator(); const
CustomDrawerContent = ({ navigation, role, setRole }) => {
return (
<DrawerContentScrollView>
<View style={styles.profileContainer}>
<Image source={{ uri:
"https://via.placeholder.com/100", }}
style={styles.profileImage} />
<Text style={styles.profileName}>
{role === "admin" ? "Admin User" : "Regular User"}
</Text>
</View> <DrawerItem
label="Home" onPress={() =>
navigation.navigate("Home")}
labelStyle={styles.drawerLabel} />
{role === "admin" && (
<DrawerItem label="Admin Dashboard"
onPress={() => navigation.navigate("Admin")}
labelStyle={styles.drawerLabel} /> )}
{role === "user" && ( <DrawerItem
label="User Dashboard" onPress={() =>
navigation.navigate("User")}
labelStyle={styles.drawerLabel} /> )}
<View style={styles.logoutContainer}>
<TouchableOpacity
style={styles.logoutButton} onPress={()
=> {
setRole(null); // Reset role on logout
Alert.alert("Logged Out", "You have been logged out.");
navigation.navigate("Home"); }} >
<Text style={styles.logoutText}>Logout</Text>
</TouchableOpacity> </View>
</DrawerContentScrollView> ); };
const App = () => { const [role, setRole] =
useState("admin"); return (
<NavigationContainer>
<Drawer.Navigator
drawerContent={(props) => (
<CustomDrawerContent {...props} role={role} setRole={setRole} />
)} >
<Drawer.Screen name="Home" component={HomeScreen} />
{role === "admin" && (
<Drawer.Screen name="Admin" component={AdminScreen} /> )}
{role === "user" && (
<Drawer.Screen name="User" component={UserScreen} /> )}
 </Drawer.Navigator>
</NavigationContainer> ); }; const styles = StyleSheet.create({ screen: { flex:
1, alignItems: "center", padding: 20, backgroundColor: "#f9f9f9",}, screenTitle: {
fontSize: 24, fontWeight: "bold", color: "#007bff", marginBottom: 10, }, sectionTitle:
{ fontSize: 18, fontWeight: "bold", color: "#007bff", marginTop: 20, marginBottom: 10,
}, contentText: { fontSize: 16, color: "#333", textAlign: "center", marginVertical:
10, lineHeight: 24, }, profileContainer: { alignItems: "center", marginBottom: 20,
paddingVertical: 20, backgroundColor:"#007bff",
}, profileImage: { width: 80, height: 80, borderRadius: 40,
marginBottom: 10, }, profileName: { color: "#fff",
fontSize: 18, fontWeight: "bold",
}, drawerLabel: { fontSize: 16, fontWeight: "600", color: "#333", },
logoutContainer: { marginTop: 20, paddingHorizontal: 10, },
logoutButton: { backgroundColor: "#dc3545", padding: 10, borderRadius:
8, }, logoutText: { color: "#fff", textAlign: "center", fontSize: 16,
fontWeight: "bold", },
});
export default
App;

Home Screen:

Admin Screen:

Admin Dashboard:
When Logout User page will be open:
Display Of Jobs:

Adding New Jobs:

Deleting A Job: