Update app, profile screen created

App.tsx

@@ -1,5 +1,5 @@
 import "react-native-gesture-handler";
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import {
   setBackgroundColorAsync,
   setPositionAsync,
@@ -10,11 +10,8 @@ import {
   NavigationContainer,
   NavigatorScreenParams,
 } from "@react-navigation/native";
-import {
-  createDrawerNavigator,
-  useDrawerProgress,
-} from "@react-navigation/drawer";
-
+import { createDrawerNavigator } from "@react-navigation/drawer";
+import { Feather } from "@expo/vector-icons";
 import {
   Accounts,
   Help,
@@ -28,7 +25,8 @@ import {
   Transactions,
 } from "./screens";
 import { DrawerContent } from "./components";
-import Animated from "react-native-reanimated";
+import { StatusBar } from "expo-status-bar";
+import { TouchableOpacity } from "react-native";
 
 export type DrawerParamList = {
   Home: undefined;
@@ -70,7 +68,6 @@ const DrawerNavigator = () => {
       drawerContent={(props) => {
         return <DrawerContent {...props} />;
       }}
-      useLegacyImplementation
     >
       <Drawer.Screen name="Home" component={Home} />
       <Drawer.Screen name="Profile" component={Profile} />
@@ -86,12 +83,13 @@ const DrawerNavigator = () => {
 export default function App() {
   useEffect(() => {
     setPositionAsync("absolute");
-    setBackgroundColorAsync("rgba(255, 255, 255, .1)");
+    setBackgroundColorAsync("rgba(255, 255, 255, 0.01)");
     setButtonStyleAsync("dark");
   }, []);
 
   return (
     <NavigationContainer>
+      <StatusBar style="dark" />
       <Stack.Navigator screenOptions={{ headerShown: false }}>
         <Stack.Screen name="Onboarding" component={Onboarding} />
         <Stack.Screen name="SignIn" component={SignIn} />

assets/index.ts

@@ -23,6 +23,7 @@ const images = {
   facebook: require("./facebook.png"),
   google: require("./google.png"),
   apple: require("./apple.png"),
+  userProfile: require("./userprofile.jpg"),
 };
 
 export default images;

components/Input.tsx

@@ -8,40 +8,41 @@ import {
   Image,
 } from "react-native";
 import React from "react";
+import { Feather } from "@expo/vector-icons";
 
 interface InputProps {
   textInput?: TextInputProps;
   placeholder?: string;
-  icon: ImageSourcePropType;
+  icon: keyof typeof Feather.glyphMap;
 }
 
-const Input = ({ textInput, placeholder, icon }: InputProps) => {
-  return (
-    <View style={styles.inputC}>
-      <Image source={icon} style={styles.icon} resizeMode="contain" />
-      <TextInput
-        placeholder={placeholder}
-        placeholderTextColor="grey"
-        {...textInput}
-        style={{ flex: 1 }}
-      />
-    </View>
-  );
-};
+const Input = ({ textInput, placeholder, icon }: InputProps) => (
+  <View style={styles.inputC}>
+    {icon && <Feather name={icon} size={22} color={"grey"} />}
+    <TextInput
+      placeholder={placeholder}
+      placeholderTextColor="grey"
+      {...textInput}
+      style={styles.input}
+    />
+  </View>
+);
 
 export default Input;
 
 const styles = StyleSheet.create({
   inputC: {
     flexDirection: "row",
     alignItems: "center",
-    paddingTop: 8,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: "#3A4276",
+    height: 45,
+    width: "100%",
     marginVertical: 8,
+    gap: 10,
   },
-  icon: {
-    width: 20,
-    height: 20,
+  input: {
+    flex: 1,
+    height: 45,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: "#3A4276",
   },
 });

components/ScaledView.tsx

@@ -0,0 +1,51 @@
+import { View, Text, ViewStyle, StatusBar } from "react-native";
+import React from "react";
+import { useDrawerProgress } from "@react-navigation/drawer";
+import Animated, {
+  Extrapolate,
+  interpolate,
+  useAnimatedStyle,
+  useDerivedValue,
+} from "react-native-reanimated";
+import { StyleSheet } from "react-native";
+
+interface ScaledViewProps {
+  children: React.ReactNode;
+  style?: ViewStyle;
+}
+
+const ScaledView = ({ children, style }: ScaledViewProps) => {
+  const progress = useDrawerProgress();
+  const scale = useDerivedValue(() => {
+    return interpolate(progress.value, [0, 1], [1, 0.75], Extrapolate.CLAMP);
+  });
+  const borderRadius = useDerivedValue(() => {
+    return interpolate(progress.value, [0, 1], [0, 30], Extrapolate.CLAMP);
+  });
+  const rotate = useDerivedValue(() => {
+    return interpolate(progress.value, [0, 1], [0, 10], Extrapolate.CLAMP);
+  });
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ scale: scale.value }, { rotateZ: -rotate.value + "deg" }],
+      borderRadius: borderRadius.value,
+    };
+  });
+  return (
+    <Animated.View style={[styles.container, animatedStyle, style]}>
+      {children}
+    </Animated.View>
+  );
+};
+
+export default ScaledView;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 16,
+    backgroundColor: "#fff",
+    paddingTop: StatusBar.currentHeight,
+  },
+});

components/index.ts

@@ -5,3 +5,4 @@ export { default as Input } from "./Input";
 export { default as AnimatedView } from "./AnimatedView";
 export { default as DrawerContent } from "./DrawerContent";
 export { default as CategorieTitle } from "./CategorieTitle";
+export { default as ScaledView } from "./ScaledView";