@fadyshawky/react-native-magic 1.0.7 → 1.0.9

package/template/src/core/theme/themes.ts

@@ -0,0 +1,214 @@
+import {SearchBar} from 'react-native-screens';
+import {BlackColors, WhiteColors} from './colors';
+import {FontSizes} from './commonSizes';
+import {Fonts} from './fonts';
+import {Theme} from './types';
+import {TextStyle} from 'react-native';
+
+const spacing = {
+  xs: 4,
+  sm: 8,
+  md: 16,
+  lg: 24,
+  xl: 32,
+};
+
+const borderRadius = {
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 24,
+};
+
+const commonTextStyles = {
+  header1: {
+    fontFamily: Fonts.medium,
+    fontSize: FontSizes.header1,
+  },
+  header2: {
+    fontFamily: Fonts.normal,
+    fontSize: FontSizes.header2,
+  },
+  balanceTitle: {
+    fontFamily: Fonts.semiBold,
+    fontSize: FontSizes.body2,
+    textAlign: 'center',
+  },
+  balanceAmount: {
+    fontFamily: Fonts.normal,
+    fontSize: FontSizes.header2,
+    textAlign: 'center',
+  },
+  balanceLabel: {
+    fontFamily: Fonts.light,
+    fontSize: FontSizes.balanceLabel,
+  },
+  body1: {
+    fontFamily: Fonts.light,
+    fontSize: FontSizes.body1,
+  },
+  body2: {
+    fontFamily: Fonts.regular,
+    fontSize: FontSizes.body2,
+  },
+  button: {
+    fontFamily: Fonts.regular,
+    fontSize: FontSizes.button,
+  },
+  cards: {
+    fontFamily: Fonts.semiBold,
+    fontSize: FontSizes.card,
+  },
+  SearchBar: {
+    fontFamily: Fonts.light,
+    fontSize: FontSizes.searchBar,
+  },
+  label: {
+    fontFamily: Fonts.light,
+    fontSize: FontSizes.label,
+  },
+  hyperlink: {
+    fontFamily: Fonts.light,
+    fontSize: FontSizes.hyperlink,
+    textDecorationStyle: 'solid',
+    textDecorationLine: 'underline',
+    textDecorationColor: WhiteColors.indigoBlue,
+  } as TextStyle,
+  navBar: {
+    fontFamily: Fonts.normal,
+    fontSize: FontSizes.navBar,
+  },
+};
+
+export const lightTheme: Theme = {
+  mode: 'light',
+  colors: {
+    ...WhiteColors,
+  },
+  text: {
+    ...commonTextStyles,
+    header1: {
+      ...commonTextStyles.header1,
+      color: WhiteColors.black,
+    },
+    balanceTitle: {
+      ...commonTextStyles.balanceTitle,
+      color: WhiteColors.indigoBlue,
+      textAlign: 'center',
+    },
+    balanceAmount: {
+      ...commonTextStyles.balanceAmount,
+      color: WhiteColors.indigoBlue,
+      textAlign: 'center',
+    },
+    balanceLabel: {
+      ...commonTextStyles.balanceLabel,
+      color: WhiteColors.indigoBlue,
+    },
+    header2: {
+      ...commonTextStyles.header2,
+      color: WhiteColors.black,
+    },
+    body1: {
+      ...commonTextStyles.body1,
+      color: WhiteColors.black,
+    },
+    body2: {
+      ...commonTextStyles.body2,
+      color: WhiteColors.black,
+    },
+    button: {
+      ...commonTextStyles.button,
+      color: WhiteColors.white,
+    },
+    cards: {
+      ...commonTextStyles.cards,
+      color: WhiteColors.black,
+    },
+    SearchBar: {
+      ...commonTextStyles.SearchBar,
+      color: WhiteColors.black,
+    },
+    label: {
+      ...commonTextStyles.label,
+      color: WhiteColors.black,
+    },
+    hyperlink: {
+      ...commonTextStyles.hyperlink,
+      color: WhiteColors.indigoBlue,
+    },
+    navBar: {
+      ...commonTextStyles.navBar,
+      color: WhiteColors.white,
+    },
+  },
+  spacing,
+  borderRadius,
+};
+
+export const darkTheme: Theme = {
+  mode: 'dark',
+  colors: {
+    ...BlackColors,
+  },
+  text: {
+    ...commonTextStyles,
+    header1: {
+      ...commonTextStyles.header1,
+      color: BlackColors.mutedLavender,
+    },
+    header2: {
+      ...commonTextStyles.header2,
+      color: BlackColors.mutedLavender,
+    },
+    balanceTitle: {
+      ...commonTextStyles.balanceTitle,
+      color: BlackColors.mutedLavender,
+      textAlign: 'center',
+    },
+    balanceAmount: {
+      ...commonTextStyles.balanceAmount,
+      color: BlackColors.mutedLavender,
+      textAlign: 'center',
+    },
+    balanceLabel: {
+      ...commonTextStyles.balanceLabel,
+      color: BlackColors.mutedLavender,
+    },
+    body1: {
+      ...commonTextStyles.body1,
+      color: BlackColors.mutedLavender,
+    },
+    body2: {
+      ...commonTextStyles.body2,
+      color: BlackColors.mutedLavender,
+    },
+    button: {
+      ...commonTextStyles.button,
+      color: BlackColors.white,
+    },
+    cards: {
+      ...commonTextStyles.cards,
+      color: BlackColors.white,
+    },
+    SearchBar: {
+      ...commonTextStyles.SearchBar,
+      color: BlackColors.mutedLavender,
+    },
+    label: {
+      ...commonTextStyles.label,
+      color: BlackColors.black,
+    },
+    hyperlink: {
+      ...commonTextStyles.hyperlink,
+      color: BlackColors.mutedLavender,
+    },
+    navBar: {
+      ...commonTextStyles.navBar,
+      color: BlackColors.white,
+    },
+  },
+  spacing,
+  borderRadius,
+};

package/template/src/core/theme/types.ts

@@ -0,0 +1,51 @@
+import {TextStyle} from 'react-native';
+
+export type ThemeMode = 'light' | 'dark';
+
+export interface Theme {
+  mode: ThemeMode;
+  colors: {
+    indigoBlue: string;
+    mutedLavender: string;
+    tintColor: string;
+    mutedLavender30: string;
+    balanceBackground: string;
+    white: string;
+    backgroundOpacity: string;
+    black: string;
+    background: string;
+    surface: string;
+    card: string;
+    shadow: string;
+    red: string;
+  };
+  text: {
+    header1: TextStyle;
+    header2: TextStyle;
+    balanceTitle: TextStyle;
+    balanceAmount: TextStyle;
+    balanceLabel: TextStyle;
+    body1: TextStyle;
+    body2: TextStyle;
+    button: TextStyle;
+    cards: TextStyle;
+    SearchBar: TextStyle;
+    label: TextStyle;
+    hyperlink: TextStyle;
+    navBar: TextStyle;
+  };
+  spacing: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+  };
+  borderRadius: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+  };
+}

package/template/src/navigation/AuthStack.tsx

@@ -1,43 +1,38 @@
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
+import {useTranslation} from '../common/localization/LocalizationProvider';
 import {Login} from '../screens/Login/Login';
+import {OTPScreen} from '../screens/OTP/OTPScreen';
 import {Splash} from '../screens/splash/Splash';
-import RegistrationScreen from '../screens/registration/RegistrationScreen';
-import ForgotPasswordScreen from '../screens/resetPassword/ForgotPasswordScreen';
 
 const Stack = createNativeStackNavigator();
 
-const AuthScreens = [
-  {
-    id: 'Splash',
-    component: Splash,
-    options: {
-      headerShown: false,
-    },
-  },
-  {
-    id: 'Login',
-    component: Login,
-    options: {
-      headerShown: false,
+export function AuthStack() {
+  const t = useTranslation();
+
+  const AuthScreens = [
+    {
+      id: 'Splash',
+      component: Splash,
+      options: {
+        headerShown: false,
+      },
     },
-  },
-  {
-    id: 'Registration',
-    component: RegistrationScreen,
-    options: {
-      headerShown: false,
+    {
+      id: 'Login',
+      component: Login,
+      options: {
+        headerShown: false,
+      },
     },
-  },
-  {
-    id: 'ForgotPassword',
-    component: ForgotPasswordScreen,
-    options: {
-      headerShown: false,
+    {
+      id: 'OTP',
+      component: OTPScreen,
+      options: {
+        headerShown: false,
+      },
     },
-  },
-];
+  ];
 
-export function AuthStack() {
   return (
     <Stack.Navigator
       initialRouteName="Login"

package/template/src/navigation/HeaderComponents.tsx

@@ -1,78 +1,33 @@
-import {NativeStackNavigationProp} from '@react-navigation/native-stack';
 import React from 'react';
-import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import {StyleSheet, View} from 'react-native';
 import {CommonSizes} from '../core/theme/commonSizes';
-import {CommonStyles, screenWidth} from '../core/theme/commonStyles';
-import {RootStackParamList} from './types';
+import {screenWidth} from '../core/theme/commonStyles';
+import {scaleWidth} from '../core/theme/scaling';
 
-export function Header({title}: {title: string}) {
-  return (
-    <View style={styles.headerBase}>
-      <Text style={CommonStyles.h2_regular}>{title}</Text>
-    </View>
-  );
-}
-
-export function HeaderBack({
-  title,
-  navigation,
-}: {
-  title: string;
-  navigation: NativeStackNavigationProp<RootStackParamList>;
-}) {
+export function HeaderButton({onPress}: {onPress: () => void}) {
   return (
     <View style={styles.headerWithBack}>
-      <View style={styles.titleContainer}>
-        <Text style={CommonStyles.h2_regular}>{title}</Text>
-      </View>
-      <BackButton navigation={navigation} />
+      <View style={styles.logo} />
+      <View style={{width: 40}} />
     </View>
   );
 }
 
-export function WebViewHeader({
-  navigation,
-}: {
-  navigation: NativeStackNavigationProp<RootStackParamList>;
-}) {
-  return (
-    <View style={styles.webViewHeader}>
-      <BackButton navigation={navigation} />
-    </View>
-  );
-}
-
-function BackButton({
-  navigation,
-}: {
-  navigation: NativeStackNavigationProp<RootStackParamList>;
-}) {
-  return (
-    <TouchableOpacity
-      style={styles.backButton}
-      onPress={() => navigation.pop()}>
-      <Image style={styles.backIcon} source={0} />
-    </TouchableOpacity>
-  );
-}
-
 const styles = StyleSheet.create({
   headerBase: {
     width: '100%',
-    height: 80,
     backgroundColor: 'transparent',
     justifyContent: 'flex-end',
     alignItems: 'center',
-    marginBottom: 25,
   },
   headerWithBack: {
-    width: '100%',
+    width: screenWidth,
     height: 80,
     backgroundColor: 'transparent',
-    justifyContent: 'flex-start',
+    justifyContent: 'space-between',
     alignItems: 'center',
-    paddingHorizontal: CommonSizes.spacing.large,
     flexDirection: 'row',
+    paddingHorizontal: scaleWidth(16),
   },
   webViewHeader: {
     width: '100%',
@@ -90,13 +45,18 @@ const styles = StyleSheet.create({
     zIndex: 0,
   },
   backButton: {
-    width: 60,
+    width: 40,
     height: 40,
-    justifyContent: 'flex-end',
   },
   backIcon: {
-    width: 20,
-    height: 20,
+    width: 40,
+    height: 40,
     resizeMode: 'contain',
+    alignSelf: 'flex-start',
+  },
+  logo: {
+    width: '50%',
+    // height: 66,
+    resizeMode: 'center',
   },
 });

package/template/src/navigation/MainNavigation.tsx

@@ -4,11 +4,10 @@ import {DefaultTheme, NavigationContainer} from '@react-navigation/native';
 import * as React from 'react';
 import {useRef} from 'react';
 import {useAppSelector} from '../core/store/reduxHelpers';
+import {Colors} from '../core/theme/colors';
 import {AuthStack} from './AuthStack';
 import {AppMainNavigator} from './MainStack';
 import {navigationRef} from './RootNavigation';
-import {NewColors} from '../core/theme/colors';
-import {Fonts} from '../core/theme/fonts';
 
 function AppNavigator() {
   const routeNameRef = useRef<string | undefined>(undefined);
@@ -17,20 +16,20 @@ function AppNavigator() {
   return (
     <NavigationContainer
       ref={navigationRef}
+      onReady={() => {
+        routeNameRef.current = navigationRef.current?.getCurrentRoute()?.name;
+      }}
       theme={{
         dark: false,
         colors: {
           primary: '#000',
-          background: NewColors.background,
+          background: Colors.background,
           card: '#fff',
           text: '#000',
           border: '#000',
           notification: '#ff0000',
         },
         fonts: DefaultTheme.fonts,
-      }}
-      onReady={() => {
-        routeNameRef.current = navigationRef.current?.getCurrentRoute()?.name;
       }}>
       {!accessToken ? <AuthStack /> : <AppMainNavigator />}
     </NavigationContainer>

package/template/src/navigation/MainStack.tsx

@@ -1,24 +1,17 @@
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
-import {
-  createNativeStackNavigator,
-  NativeStackHeaderProps,
-  NativeStackNavigationProp,
-} from '@react-navigation/native-stack';
+import {createNativeStackNavigator} from '@react-navigation/native-stack';
 import React from 'react';
-import {localization} from '../common/localization/localization';
-import {Main} from '../screens/main/Main';
+import {HomeScreen} from '../screens/home/HomeScreen';
 import {Profile} from '../screens/profile/Profile';
 import {Settings} from '../screens/Settings/Settings';
-import {Header, HeaderBack} from './HeaderComponents';
 import {TabBar} from './TabBar';
-import {RootStackParamList} from './types';
 
 const MainScreens = [
   {
-    id: 'Main',
-    component: Main,
+    id: 'Home',
+    component: HomeScreen,
     options: {
-      headerShown: false,
+      tabBarLabel: 'Profile',
     },
   },
   {
@@ -26,9 +19,6 @@ const MainScreens = [
     component: Profile,
     options: {
       tabBarLabel: 'Profile',
-      header: () => {
-        return <Header title={localization.profile.studentProfile} />;
-      },
     },
   },
 ];
@@ -44,18 +34,7 @@ const AppStack = [
   {
     id: 'Settings',
     component: Settings,
-    options: {
-      header: (props: NativeStackHeaderProps) => {
-        return (
-          <HeaderBack
-            title={'Settings'}
-            navigation={
-              props.navigation as NativeStackNavigationProp<RootStackParamList>
-            }
-          />
-        );
-      },
-    },
+    options: {},
   },
 ];
 

package/template/src/navigation/RootNavigation.tsx

@@ -1,12 +1,6 @@
 import {createNavigationContainerRef} from '@react-navigation/native';
 import {CommonActions} from '@react-navigation/native';
-
-type RootStackParamList = {
-  Home: undefined;
-  // Add other screens here
-  Profile: {userId: string};
-  Settings: undefined;
-};
+import {RootStackParamList} from './types';
 
 export const navigationRef = createNavigationContainerRef<RootStackParamList>();
 

package/template/src/navigation/TabBar.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {View, Text, TouchableOpacity, Image, StyleSheet} from 'react-native';
 import {CommonStyles} from '../core/theme/commonStyles';
-import {Colors, NewColors} from '../core/theme/colors';
+import {Colors} from '../core/theme/colors';
 import {
   BottomTabBarProps,
   BottomTabNavigationOptions,
@@ -89,6 +89,6 @@ const styles = StyleSheet.create({
     color: Colors.gray,
   },
   labelFocused: {
-    color: NewColors.blueNormalActive,
+    color: Colors.blueNormalActive,
   },
 });

package/template/src/navigation/TopTabBar.tsx

@@ -14,7 +14,7 @@ export function TopBar({state, descriptors, navigation, position}: any) {
         borderRadius: 20,
         marginBottom: 24,
       }}>
-      {state.routes.map((route, index) => {
+      {state.routes.map((route: any, index: any) => {
         const {options} = descriptors[route.key];
         const label =
           options.tabBarLabel !== undefined

package/template/src/screens/Login/Login.tsx

@@ -19,7 +19,7 @@ import {useInputError} from '../../common/validations/hooks/useInputError';
 import {emailValidations} from '../../common/validations/profileValidations';
 import {useAppDispatch} from '../../core/store/reduxHelpers';
 import {userLogin} from '../../core/store/user/userActions';
-import {Colors, NewColors} from '../../core/theme/colors';
+import {Colors} from '../../core/theme/colors';
 import {CommonSizes} from '../../core/theme/commonSizes';
 import {CommonStyles} from '../../core/theme/commonStyles';
 import type {RootStackParamList} from '../../navigation/types';
@@ -151,14 +151,14 @@ const styles = StyleSheet.create({
   },
   forgotPassword: {
     ...CommonStyles.normalText,
-    color: NewColors.blueNormalActive,
+    color: Colors.blueNormalActive,
     textAlign: 'right',
     marginTop: 8,
     marginBottom: 24,
   },
   registerLink: {
     ...CommonStyles.normalText,
-    color: NewColors.blueNormalActive,
+    color: Colors.blueNormalActive,
     textAlign: 'center',
     marginTop: 16,
   },