@fadyshawky/react-native-magic 1.0.8 → 1.0.9

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

@@ -1 +1,17 @@
-export const Fonts = {};
+export const Fonts = {
+  // Inter Variable Font
+  regular: 'Inter-VariableFont_opsz,wght',
+  italic: 'Inter-Italic-VariableFont_opsz,wght',
+
+  // Kanit Font
+  medium: 'Kanit-Medium',
+
+  // Font weights for Inter Variable Font
+  thin: 'Inter-Thin',
+  light: 'Inter-Light',
+  normal: 'Inter-Regular',
+  semiBold: 'Inter-SemiBold',
+  bold: 'Inter-Bold',
+  extraBold: 'Inter-ExtraBold',
+  black: 'Inter-Black',
+};

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

@@ -0,0 +1,101 @@
+import {Dimensions, PixelRatio, Platform} from 'react-native';
+
+// Device dimensions
+export const {width: SCREEN_WIDTH, height: SCREEN_HEIGHT} =
+  Dimensions.get('window');
+
+// Base dimensions (based on design specifications)
+const BASE_WIDTH = 720;
+const BASE_HEIGHT = 1440;
+
+// Scale factors with increased scaling
+const wScale = (SCREEN_WIDTH / BASE_WIDTH) * 1.2; // Increased by 20%
+const hScale = (SCREEN_HEIGHT / BASE_HEIGHT) * 1.2; // Increased by 20%
+
+/**
+ * Scales width based on device screen width
+ * @param size - Size to scale
+ * @returns Scaled size
+ */
+export const scaleWidth = (size: number): number => {
+  return PixelRatio.roundToNearestPixel(size * wScale);
+};
+
+/**
+ * Scales height based on device screen height
+ * @param size - Size to scale
+ * @returns Scaled size
+ */
+export const scaleHeight = (size: number): number => {
+  return PixelRatio.roundToNearestPixel(size * hScale);
+};
+
+/**
+ * Scales size proportionally based on screen width
+ * More suitable for general scaling of UI elements
+ * @param size - Size to scale
+ * @returns Scaled size
+ */
+export const scale = (size: number): number => {
+  const scaleFactor = Math.min(wScale, hScale) * 1.1; // Additional 10% increase
+  return PixelRatio.roundToNearestPixel(size * scaleFactor);
+};
+
+/**
+ * Scales font size based on device screen size
+ * Includes platform-specific adjustments with smaller reduction
+ * @param size - Font size to scale
+ * @returns Scaled font size
+ */
+export const scaleFontSize = (size: number): number => {
+  const scaledSize = scale(size);
+  if (Platform.OS === 'ios') {
+    return Math.round(PixelRatio.roundToNearestPixel(scaledSize));
+  }
+  return Math.round(PixelRatio.roundToNearestPixel(scaledSize)) - 1; // Reduced from -2 to -1
+};
+
+/**
+ * Scales spacing/margin/padding based on screen width
+ * @param size - Size to scale
+ * @returns Scaled size
+ */
+export const scaleSpacing = (size: number): number => {
+  return PixelRatio.roundToNearestPixel(size * wScale * 1.1); // Additional 10% increase
+};
+
+/**
+ * Scales border radius based on screen width
+ * @param size - Size to scale
+ * @returns Scaled size
+ */
+export const scaleBorderRadius = (size: number): number => {
+  return PixelRatio.roundToNearestPixel(size * Math.min(wScale * 1.1, 1.3)); // Increased max scale from 1.2 to 1.3
+};
+
+/**
+ * Returns responsive value based on screen width breakpoints
+ * @param options - Object containing size values for different breakpoints
+ * @returns Appropriate value for current screen width
+ */
+export const responsiveSize = (options: {
+  small?: number;
+  medium?: number;
+  large?: number;
+  default: number;
+}): number => {
+  if (SCREEN_WIDTH < 720 && options.small !== undefined) {
+    return options.small;
+  }
+  if (SCREEN_WIDTH > 1080 && options.large !== undefined) {
+    return options.large;
+  }
+  if (
+    options.medium !== undefined &&
+    SCREEN_WIDTH >= 720 &&
+    SCREEN_WIDTH <= 1080
+  ) {
+    return options.medium;
+  }
+  return options.default;
+};

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,18 +1,10 @@
 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';
-import {HomeScreen} from '../screens/home/HomeScreen';
 
 const MainScreens = [
   {
@@ -20,9 +12,6 @@ const MainScreens = [
     component: HomeScreen,
     options: {
       tabBarLabel: 'Profile',
-      header: () => {
-        return <Header title={localization.home.home} />;
-      },
     },
   },
   {
@@ -30,9 +19,6 @@ const MainScreens = [
     component: Profile,
     options: {
       tabBarLabel: 'Profile',
-      header: () => {
-        return <Header title={localization.profile.studentProfile} />;
-      },
     },
   },
 ];
@@ -48,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,
   },
 });