first ewallet app commit

.expo-shared/assets.json

@@ -0,0 +1,4 @@
+{
+  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
+  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
+}

.gitignore

@@ -0,0 +1,14 @@
+node_modules/
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "git.ignoreLimitWarning": true
+}

App.tsx

@@ -0,0 +1,103 @@
+import "react-native-gesture-handler";
+import React, { useEffect } from "react";
+import {
+  setBackgroundColorAsync,
+  setPositionAsync,
+  setButtonStyleAsync,
+} from "expo-navigation-bar";
+import { createStackNavigator } from "@react-navigation/stack";
+import {
+  NavigationContainer,
+  NavigatorScreenParams,
+} from "@react-navigation/native";
+import {
+  createDrawerNavigator,
+  useDrawerProgress,
+} from "@react-navigation/drawer";
+
+import {
+  Accounts,
+  Help,
+  Home,
+  Onboarding,
+  Profile,
+  Settings,
+  SignIn,
+  SignUp,
+  Stats,
+  Transactions,
+} from "./screens";
+import { DrawerContent } from "./components";
+import Animated from "react-native-reanimated";
+
+export type DrawerParamList = {
+  Home: undefined;
+  Profile: undefined;
+  Accounts: undefined;
+  Transactions: undefined;
+  Stats: undefined;
+  Settings: undefined;
+  Help: undefined;
+};
+
+export type StackParamList = {
+  Onboarding: undefined;
+  SignIn: undefined;
+  SignUp: undefined;
+  Main: NavigatorScreenParams<DrawerParamList>;
+};
+
+const Stack = createStackNavigator<StackParamList>();
+const Drawer = createDrawerNavigator<DrawerParamList>();
+
+const DrawerNavigator = () => {
+  return (
+    <Drawer.Navigator
+      screenOptions={{
+        headerShown: false,
+        drawerType: "slide",
+        overlayColor: "transparent",
+        drawerStyle: {
+          flex: 1,
+          width: "60%",
+          backgroundColor: "transparent",
+        },
+        sceneContainerStyle: {
+          backgroundColor: "transparent",
+        },
+      }}
+      initialRouteName="Home"
+      drawerContent={(props) => {
+        return <DrawerContent {...props} />;
+      }}
+      useLegacyImplementation
+    >
+      <Drawer.Screen name="Home" component={Home} />
+      <Drawer.Screen name="Profile" component={Profile} />
+      <Drawer.Screen name="Accounts" component={Accounts} />
+      <Drawer.Screen name="Transactions" component={Transactions} />
+      <Drawer.Screen name="Stats" component={Stats} />
+      <Drawer.Screen name="Settings" component={Settings} />
+      <Drawer.Screen name="Help" component={Help} />
+    </Drawer.Navigator>
+  );
+};
+
+export default function App() {
+  useEffect(() => {
+    setPositionAsync("absolute");
+    setBackgroundColorAsync("rgba(255, 255, 255, .1)");
+    setButtonStyleAsync("dark");
+  }, []);
+
+  return (
+    <NavigationContainer>
+      <Stack.Navigator screenOptions={{ headerShown: false }}>
+        <Stack.Screen name="Onboarding" component={Onboarding} />
+        <Stack.Screen name="SignIn" component={SignIn} />
+        <Stack.Screen name="SignUp" component={SignUp} />
+        <Stack.Screen name="Main" component={DrawerNavigator} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}

README.md

@@ -0,0 +1 @@
+# ewallet

app.json

@@ -0,0 +1,33 @@
+{
+  "expo": {
+    "name": "eWallet",
+    "slug": "eWallet",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

assets/index.ts

@@ -0,0 +1,28 @@
+const images = {
+  pattern: require("./pattern.png"),
+  profile: require("./profile.png"),
+  plus: require("./plus.png"),
+  arrow: require("./arrow.png"),
+  avatar1: require("./avatar1.png"),
+  avatar2: require("./avatar2.png"),
+  avatar3: require("./avatar3.png"),
+  cashback: require("./cashback.png"),
+  close: require("./close.png"),
+  flash: require("./flash.png"),
+  logo: require("./logo.png"),
+  menu: require("./menu.png"),
+  money: require("./money.png"),
+  more: require("./more.png"),
+  movie: require("./movie.png"),
+  phone: require("./phone.png"),
+  plane: require("./plane.png"),
+  power: require("./power.png"),
+  temp: require("./temp.png"),
+  scan: require("./scan.png"),
+  filter: require("./filter.png"),
+  facebook: require("./facebook.png"),
+  google: require("./google.png"),
+  apple: require("./apple.png"),
+};
+
+export default images;

babel.config.js

@@ -0,0 +1,7 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ["babel-preset-expo"],
+    plugins: ["react-native-reanimated/plugin"],
+  };
+};

components/AnimatedView.tsx

@@ -0,0 +1,29 @@
+import { StatusBar, View } from "react-native";
+import React from "react";
+import { useDrawerProgress } from "@react-navigation/drawer";
+import Animated, {
+  interpolate,
+  useAnimatedStyle,
+} from "react-native-reanimated";
+
+interface AnimatedViewProps {
+  children: React.ReactNode;
+}
+
+const AnimatedView = ({ children }: AnimatedViewProps) => {
+  const progress = useDrawerProgress();
+  return (
+    <View
+      style={{
+        flex: 1,
+        paddingHorizontal: 16,
+        paddingTop: StatusBar.currentHeight,
+        backgroundColor: "#fff",
+      }}
+    >
+      {children}
+    </View>
+  );
+};
+
+export default AnimatedView;

components/Button.tsx

@@ -0,0 +1,64 @@
+import { StyleSheet, Text, View, ViewStyle } from "react-native";
+import React from "react";
+import { Image } from "react-native";
+import images from "../assets";
+import { TouchableOpacity } from "react-native";
+import { ImageSourcePropType } from "react-native";
+
+interface ButtonProps {
+  label: string;
+  cstyle?: ViewStyle;
+  isPrimary?: boolean;
+  withIcon?: boolean;
+  icon: ImageSourcePropType;
+  onPress: () => void;
+}
+
+const Button: React.FC<ButtonProps> = ({
+  cstyle,
+  label,
+  onPress,
+  isPrimary,
+  withIcon,
+  icon,
+}) => {
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      style={[
+        styles.btnC,
+        cstyle,
+        { backgroundColor: isPrimary ? "#FFAC30" : "transparent" },
+      ]}
+    >
+      <Text
+        style={{
+          fontSize: isPrimary ? 18 : 15,
+          fontWeight: isPrimary ? "bold" : "500",
+          marginEnd: 5,
+        }}
+      >
+        {label}
+      </Text>
+      {withIcon && (
+        <Image source={icon} style={styles.icon} resizeMode="contain" />
+      )}
+    </TouchableOpacity>
+  );
+};
+
+export default Button;
+
+const styles = StyleSheet.create({
+  btnC: {
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  btnLabel: {
+    fontSize: 18,
+    fontWeight: "bold",
+    marginEnd: 5,
+  },
+  icon: { marginTop: 3 },
+});

components/CategorieTitle.tsx

@@ -0,0 +1,42 @@
+import {
+  View,
+  Text,
+  ImageSourcePropType,
+  Image,
+  TouchableOpacity,
+} from "react-native";
+import React from "react";
+
+interface CategorieTitleProps {
+  label: string;
+  withIcon?: boolean;
+  icon: ImageSourcePropType;
+}
+
+const CategorieTitle: React.FC<CategorieTitleProps> = ({
+  label,
+  icon,
+  withIcon,
+}) => {
+  return (
+    <View
+      style={{
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        marginVertical: 20,
+      }}
+    >
+      <Text style={{ color: "#3A4276", fontSize: 16, fontWeight: "600" }}>
+        {label}
+      </Text>
+      {withIcon && (
+        <TouchableOpacity>
+          <Image source={icon} style={{ width: 24 }} resizeMode="contain" />
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
+
+export default CategorieTitle;