reza added add new user to drawer

src/components/Drawer.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import {
   View,
   Platform,
@@ -9,6 +9,7 @@ import {
   TouchableOpacity,
   Image,
   Appearance,
+  LayoutAnimation,
 } from "react-native";
 import { useNavigation } from "@react-navigation/native";
 import { Ionicons, AntDesign } from "@expo/vector-icons";
@@ -20,6 +21,9 @@ import Svg, { Path } from "react-native-svg";
 import tw from "tailwind-rn";
 import fontSize from "../constants/fontSize";
 import Colors from "../constants/Colors";
+import { drop } from "lodash";
+
+const ios = Platform.OS === "ios";
 
 if (
   Platform.OS === "android" &&
@@ -31,6 +35,8 @@ if (
 const Drawer = ({ position, setBoxPosition, user, mobile }) => {
   const [height, setHeight] = useState(Dimensions.get("window").height);
   const [width, setWidth] = useState(Dimensions.get("window").width);
+  const [dropdown, setDropdown] = useState(false);
+  const [dropdownHeight, setDropdownHeight] = useState(0);
 
   const colorScheme = Appearance.getColorScheme();
   const [routes, setRoutes] = useState([
@@ -113,6 +119,12 @@ const Drawer = ({ position, setBoxPosition, user, mobile }) => {
     setWidth(Dimensions.get("window").width);
   };
 
+  const animateDropdown = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    setDropdown(() => !dropdown);
+    setDropdownHeight(dropdownHeight === 0 ? fontSize.base + 30 : 0);
+  };
+
   return (
     <View
       style={[
@@ -137,7 +149,7 @@ const Drawer = ({ position, setBoxPosition, user, mobile }) => {
       <View style={[tw("w-4/5 bg-white h-full flex ")]}>
         <View
           style={[
-            tw("flex  items-end pt-12 pb-1 px-4"),
+            tw("flex items-end pt-12 px-4"),
             { backgroundColor: Colors.theme1[colorScheme].greenCF },
           ]}
         >
@@ -163,15 +175,16 @@ const Drawer = ({ position, setBoxPosition, user, mobile }) => {
           )}
           <View
             style={tw(
-              "flex flex-row-reverse w-full justify-between px-2 pb-3 mt-2"
+              "flex flex-row-reverse w-full justify-between px-2 pb-1 mt-2"
             )}
           >
-            <View style={tw("flex ")}>
+            <View style={tw("flex")}>
               <Text
                 style={{
                   fontSize: mobile ? fontSize.lg : fontSize.xl,
                   color: "white",
                   fontFamily: "demi",
+                  textAlign: ios ? "right" : "auto",
                 }}
               >
                 {user?.firstName + " " + user?.lastName}
@@ -182,6 +195,7 @@ const Drawer = ({ position, setBoxPosition, user, mobile }) => {
                   color: "white",
                   fontFamily: "bold",
                   marginTop: 5,
+                  textAlign: ios ? "right" : "auto",
                 }}
               >
                 {user?.cellphone}
@@ -192,8 +206,8 @@ const Drawer = ({ position, setBoxPosition, user, mobile }) => {
               xmlns="http://www.w3.org/2000/svg"
               width={24}
               height={24}
-              style={{ transform: [{ rotate: "-90deg" }] }}
-              onClick={() => setAddUserDropdown(() => !addUserDropdown)}
+              style={{ transform: [{ rotate: dropdown ? "90deg" : "-90deg" }], padding : 10 }}
+              onPress={() => animateDropdown()}
             >
               <Path
                 d="M15.002 19.92 8.479 13.4a1.986 1.986 0 0 1 0-2.8l6.523-6.52"
@@ -206,10 +220,45 @@ const Drawer = ({ position, setBoxPosition, user, mobile }) => {
             </Svg>
           </View>
         </View>
-        <View style={tw("flex-1 flex  px-4")}>
-          {routes.map((route, index) => (
-            <Route route={route} key={index} />
-          ))}
+        <View style={tw("flex-1 flex")}>
+          <View
+            style={[
+              tw(
+                `flex flex-row justify-between items-center w-full flex-row-reverse px-4 overflow-hidden`
+              ),
+              {
+                borderBottomWidth: 1,
+                borderColor: Colors.theme1[colorScheme].grayE3,
+                height: dropdownHeight,
+              },
+            ]}
+          >
+            <Text
+              style={{
+                fontSize: mobile ? fontSize.base : fontSize.xl,
+                fontFamily: "regular",
+                color: Colors.theme1[colorScheme].gray20,
+              }}
+            >
+              افزودن حساب کاربری جدید
+            </Text>
+            <Text
+              style={{
+                marginRight: 5,
+                marginTop: 3,
+                fontSize: fontSize.xl4,
+                fontFamily: "bold",
+                color: Colors.theme1[colorScheme].gray20 + "77",
+              }}
+            >
+              +
+            </Text>
+          </View>
+          <View style={tw("flex w-full px-4")}>
+            {routes.map((route, index) => (
+              <Route route={route} key={index} />
+            ))}
+          </View>
         </View>
       </View>
     </View>

src/components/Navbar.js

@@ -98,7 +98,7 @@ const Navbar = ({ notification, setBoxPosition, headerOptions }) => {
           {notification && (
             <View
               style={tw(
-                "h-2.5 w-2.5 absolute -left-1 -top-1 bg-red-500 rounded-full"
+                "h-2.5 w-2.5 absolute -left-1 -top-1 rounded-full"
               )}
             ></View>
           )}

src/screens/Blog/index.js

@@ -65,7 +65,7 @@ export const Blog = ({ getInfo, blog, getList, blogs, route }) => {
           <Hashtags />
           <View
             style={[
-              tw("w-full rounded-sm overflow-hidden relative bg-red-300"),
+              tw("w-full rounded-sm overflow-hidden relative"),
               { height: ((width - 32) / 4) * 2.8 },
             ]}
           >

src/screens/Product/components/Book.js

@@ -90,7 +90,7 @@ function Book({
           source={{ uri: `https://dnvn.ir/api/v1/file/${book?.fileIds}` }}
           resizeMode="contain"
           style={[
-            tw("rounded-sm bg-red-400"),
+            tw("rounded-sm"),
             { height: ((width / 3) * 4) / 2.6, width: width / 3 },
           ]}
         />

src/screens/Video/index.js

@@ -89,7 +89,7 @@ function Product({
               source={{ uri: `https://dnvn.ir/api/v1/file/${book?.fileIds}` }}
               resizeMode="contain"
               style={[
-                tw("rounded-sm ml-2 bg-red-400"),
+                tw("rounded-sm ml-2"),
                 { height: mobile ? width / 3 * 4 / 2.6 : 300, width: mobile ? width / 3 : 210 },
               ]}
             />