Guys I am stuck here and I cant understand what to do. I have created an drawer menu in react native using nativewind, here's the code and image
import React from "react";
import {
View,
Text,
Image,
ScrollView,
Pressable,
Animated,
StyleSheet,
Touchable,
TouchableWithoutFeedback,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import {
Ionicons,
MaterialCommunityIcons,
AntDesign,
EvilIcons,
Entypo,
Feather,
} from "@expo/vector-icons";
import { Tab, TabView } from "@rneui/themed";
import { useState, useEffect, useRef } from "react";
// Components
import Divider from "../Components/Divider";
import IndividualCard from "../Components/IndividualCard";
import DebateCard from "../Components/DebateCard";
import Votes from "../Components/Votes";
import PollsCard from "../Components/PollsCard";
const ClubPageScreen = ({ navigation }) => {
const [showContent1, setShowContent1] = useState(true);
const [showContent2, setShowContent2] = useState(false);
const handleButton1Click = () => {
setShowContent1(true);
setShowContent2(false);
};
const handleButton2Click = () => {
setShowContent1(false);
setShowContent2(true);
};
const [index, setIndex] = React.useState(0);
**const [isOpen, setIsOpen] = useState(false);
const drawerWidth = 250; // Width of the drawer
const animationDuration = 300; // Animation duration in milliseconds
const drawerAnimation = new Animated.Value(isOpen ? drawerWidth : 0);
const toggleDrawer = () => {
setIsOpen(!isOpen);
Animated.timing(drawerAnimation, {
toValue: isOpen ? 0 : drawerWidth,
duration: animationDuration,
useNativeDriver: false,
}).start();
};
const drawerStyles = {
transform: [{ translateX: drawerAnimation }],
};**
return (
<SafeAreaView>
**{isOpen && (
<View className="">
<Animated.View className="" pointerEvents={isOpen ? "auto" : "none"}>
<Pressable className="absolute inset-0">
<Text>close</Text>
</Pressable>
</Animated.View>
<Animated.View className="h-full w-72 bg-white">
<Text className="tex-center tex-2xl mt-10 p-5">
I am inside the drawer
</Text>
</Animated.View>
</View>
)}**
<View className="bg-[#262626] py-4 px-4">
<View className="flex-row justify-between">
<View className=" flex-row items-center gap-x-3">
**<Pressable className="" onPress={toggleDrawer}>
<Feather name="menu" size={30} color="white" />
</Pressable>**
<Text className="text-white text-xl font-medium">
Aspirant Club{" "}
<Entypo name="chevron-down" size={20} color="white" />
</Text>
</View>
<Pressable
className="text-white text-xl my-auto"
onPress={() => navigation.navigate("GeneralChatScreen")}
>
<Image
source={require("../app/assets/icons/chat-white.png")}
className="w-6 h-6"
/>
</Pressable>
</View>
<Tab
value={index}
onChange={(e) => setIndex(e)}
indicatorStyle={{
backgroundColor: "white",
height: 2,
}}
>
<Tab.Item TouchableComponent={TouchableWithoutFeedback}>
<Text className="text-white text-lg mt-7">My Work</Text>
</Tab.Item>
<Tab.Item TouchableComponent={TouchableWithoutFeedback}>
<Text className="text-white text-lg mt-7">
Club's Feed
<View className="p-1 h-1 bg-red-700 rounded-full -translate-y-3 -translate-x-2"></View>
</Text>
</Tab.Item>
</Tab>
</View>
<View>
{showContent1 && <MyWork navigation={navigation} />}
{showContent2 && (
<ScrollView>
{/* Discussions */}
<View className="bg-white px-4 py-5">
<View className="flex flex-row justify-start gap-5">
<View className=" bg-indigo-100/50 rounded-full px-3 py-1">
<Text className="text-indigo-600 font-medium">
Discussions
</Text>
</View>
<View className=" bg-indigo-100/50 rounded-full px-3 py-1">
<Text>Debates</Text>
</View>
</View>
</View>
{/* Individual Cards */}
<IndividualCard
content={{
title:
"Indian education system: A discussion on edu-system of our India",
description:
"From Access to Quality: Addressing the Challenges and Opportunities. Participate in",
image: "../app/assets/discussion-img.png",
}}
/>
{/* Polling Cards */}
<PollsCard
title={"that are the best ways to crack SSC 'CGL' exam?"}
/>
<DebateCard
content={{
title: "that are the best ways to crack SSC 'CGL' exam?",
description:
"Any student who has given this exam earlier, please share your priceless experience to...",
}}
/>
{/* Votes */}
<Votes />
</ScrollView>
)}
</View>
</SafeAreaView>
);
};
export default ClubPageScreen;
const MyWork = ({ navigation }) => (
<View className="my-7">
<View className="flex-row justify-between px-5 pb-5">
<Text className="font-medium text-lg">Today's task</Text>
<Text className="text-indigo-700 text-lg">+ Add Task</Text>
</View>
<ScrollView className="">
<View className="bg-gray-200 rounded-t-3xl p-10 pb-96">
<NoTaskCard
title={"No task available for today!"}
navigation={navigation}
/>
<TaskCard date={""} time={""} subject={""} chapter={""} question={""} />
<TaskCard date={""} time={""} subject={""} chapter={""} question={""} />
<TaskCard date={""} time={""} subject={""} chapter={""} question={""} />
<TaskCard date={""} time={""} subject={""} chapter={""} question={""} />
<TaskCard date={""} time={""} subject={""} chapter={""} question={""} />
<TaskCard date={""} time={""} subject={""} chapter={""} question={""} />
<TaskCard date={""} time={""} subject={""} chapter={""} question={""} />
<TaskCard date={""} time={""} subject={""} chapter={""} question={""} />
<TaskCard date={""} time={""} subject={""} chapter={""} question={""} />
</View>
</ScrollView>
</View>
);
const NoTaskCard = ({ title, navigation }) => (
<View className="bg-white p-5 rounded-xl justify-center items-center gap-y-3 py-10">
<Text className="text-gray-400 text-xl">{title}</Text>
<Pressable
className="bg-indigo-700 p-3 px-5 rounded-xl"
onPress={() => navigation.navigate("TaskForm")}
>
<Text className="text-white text-lg">Create task</Text>
</Pressable>
</View>
);
const TaskCard = ({ date, time, chapter, question, subject, navigation }) => (
<View className="bg-white p-5 rounded-lg py-3 mt-2">
<View className="flex-row justify-between">
<View className="flex-row items-center gap-x-1">
<Image
source={require("../app/assets/icons/calendar.png")}
className="w-5 h-5"
/>
<Text>03 Feb 2023</Text>
<Text>@ 3Pm</Text>
</View>
<View>
<Image
source={require("../app/assets/icons/edit.png")}
className="w-7 h-7"
/>
</View>
</View>
<Divider />
<View className="flex-row mt-3 gap-x-3">
<Text className="text-[15px]">Subject :</Text>
<Text className="text-gray-600">Modern History</Text>
</View>
<View className="flex-row mt-3 gap-x-3">
<Text className="text-[15px]">Chapter :</Text>
<Text className="text-gray-600 pr-16">
Portuguese in India, Dutch in India, Danes in India, The English, The
French, more
</Text>
</View>
<View className="flex-row mt-3 gap-x-3">
<Text className="text-[15px]">Questions :</Text>
<Text className="text-gray-600">Total 45 questions</Text>
</View>
<View className="bg-indigo-700 p-2 mt-3 rounded-xl">
<Text className="text-white text-lg text-center">Complete Task</Text>
</View>
</View>
);
I have made the particular code bold on here which needs focus. So the problem is I need to make it something like this but I cannot understand how to do so.
Can someone help me make this type of drawer design ?(the design of the content of the drawer is not required just the design of the outer UI)
I tried referring youtube videos but didn't helped me
