@fadyshawky/react-native-magic 2.2.0 → 2.3.0

package/template/src/design-system/tokens/index.ts

@@ -0,0 +1,3 @@
+export * from './palette';
+export * from './typography-spacing';
+export * from './brand';

package/template/src/design-system/tokens/palette.ts

@@ -0,0 +1,4 @@
+export {
+  PrimaryColors,
+  NaturalColors,
+} from '../../core/theme/colors';

package/template/src/design-system/tokens/typography-spacing.ts

@@ -0,0 +1,2 @@
+export { Fonts } from '../../core/theme/fonts';
+export { CommonSizes } from '../../core/theme/commonSizes';

package/template/src/navigation/AuthStack.tsx

@@ -1,5 +1,4 @@
 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';
@@ -7,8 +6,6 @@ import {Splash} from '../screens/splash/Splash';
 const Stack = createNativeStackNavigator();
 
 export function AuthStack() {
-  const t = useTranslation();
-
   const AuthScreens = [
     {
       id: 'Splash',
@@ -35,7 +32,7 @@ export function AuthStack() {
 
   return (
     <Stack.Navigator
-      initialRouteName="Login"
+      initialRouteName="Splash"
       screenOptions={{animation: 'none'}}>
       {AuthScreens.map(s => (
         <Stack.Screen

package/template/src/navigation/HeaderComponents.tsx

@@ -20,7 +20,7 @@ export function HeaderBack({onPress}: {onPress: () => void}) {
     <View style={styles.headerWithBack}>
       <BackButton onPress={onPress} />
       <Image source={0} style={styles.logo} />
-      <View style={{width: 40}} />
+      <View style={styles.spacer} />
     </View>
   );
 }
@@ -30,13 +30,13 @@ export function HeaderButton({onPress}: {onPress: () => void}) {
     <View style={styles.headerWithBack}>
       <BackButton onPress={onPress} />
       <View style={styles.logo} />
-      <View style={{width: 40}} />
+      <View style={styles.spacer} />
     </View>
   );
 }
 
 export function WebViewHeader({
-  navigation,
+  navigation: _navigation,
 }: {
   navigation: NativeStackNavigationProp<RootStackParamList>;
 }) {
@@ -95,6 +95,9 @@ const styles = StyleSheet.create({
     position: 'absolute',
     zIndex: 0,
   },
+  spacer: {
+    width: 40,
+  },
   backButton: {
     width: 40,
     height: 40,

package/template/src/navigation/MainStack.tsx

@@ -1,14 +1,18 @@
-import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import {
+  BottomTabBarProps,
+  createBottomTabNavigator,
+} from '@react-navigation/bottom-tabs';
 import React from 'react';
 import {useTranslation} from '../common/localization/LocalizationProvider';
 
-import {createNativeStackNavigator} from '@react-navigation/native-stack';
 import {Profile} from '../screens';
+import {ComponentsScreen} from '../screens/components/ComponentsScreen';
 import {HomeScreen} from '../screens/home/HomeScreen';
 import {TabBar} from './TabBar';
 
 const Tab = createBottomTabNavigator();
-const Stack = createNativeStackNavigator();
+
+const renderTabBar = (props: BottomTabBarProps) => <TabBar {...props} />;
 
 export function AppMainNavigator() {
   const t = useTranslation();
@@ -24,6 +28,16 @@ export function AppMainNavigator() {
         selectedIcon: 0,
       },
     },
+    {
+      id: 'Components',
+      component: ComponentsScreen,
+      options: {
+        tabBarLabel: t('tabs.Components', 'mainNavigation'),
+        headerShown: false,
+        icon: 0,
+        selectedIcon: 0,
+      },
+    },
     {
       id: 'Account',
       component: Profile,
@@ -41,9 +55,7 @@ export function AppMainNavigator() {
       initialRouteName="Main"
       backBehavior="history"
       detachInactiveScreens
-      tabBar={props => {
-        return <TabBar {...props} />;
-      }}
+      tabBar={renderTabBar}
       screenOptions={{
         tabBarHideOnKeyboard: true,
       }}>

package/template/src/navigation/RootNavigation.tsx

@@ -5,23 +5,20 @@ import {RootStackParamList} from './types';
 export const navigationRef = createNavigationContainerRef<RootStackParamList>();
 
 export function navigate<T extends keyof RootStackParamList>(
-  name: never,
+  name: T,
   params?: RootStackParamList[T],
 ) {
   if (navigationRef.isReady()) {
-    // Type assertion is not needed since name and params are already properly typed
-    navigationRef.current?.navigate(name, params);
+    (navigationRef.current as any)?.navigate(name as never, params as never);
   }
 }
 
-// Function to reset the navigation stack and navigate to the "Home" screen
+// Reset the navigation stack to the main (authenticated) screen.
 export const resetToHomeScreen = () => {
   navigationRef.dispatch(
     CommonActions.reset({
       index: 0,
-      routes: [{name: 'Home'}],
+      routes: [{name: 'Main'}],
     }),
   );
 };
-
-// Call the function to reset the navigation stack and navigate to the "Home" screen

package/template/src/navigation/TabBar.tsx

@@ -32,7 +32,7 @@ export function TabBar({state, descriptors, navigation}: BottomTabBarProps) {
   const {theme} = useTheme();
   const t = useTranslation();
   const isRTL = useRTL();
-  const tabArray = ['Main', 'Financials', 'Account'];
+  const tabArray = ['Main', 'Components', 'Account'];
 
   // Create a copy of routes array to avoid modifying the original
   const routesToRender = [...state.routes].filter(r =>
@@ -102,11 +102,7 @@ export function TabBar({state, descriptors, navigation}: BottomTabBarProps) {
               onLongPress={onLongPress}
               style={styles.tabButton}>
               <Image
-                style={{
-                  width: scaleWidth(57),
-                  height: scaleHeight(63),
-                  resizeMode: 'contain',
-                }}
+                style={styles.tabIcon}
                 source={isFocused ? options.selectedIcon : options.icon}
               />
               <RTLAwareText style={[theme.text.navBar]}>
@@ -139,6 +135,11 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: 'center',
   },
+  tabIcon: {
+    width: scaleWidth(57),
+    height: scaleHeight(63),
+    resizeMode: 'contain',
+  },
   label: {},
   labelFocused: {
     color: PrimaryColors.PlatinateBlue_400,

package/template/src/navigation/types.ts

@@ -1,35 +1,14 @@
+/**
+ * Routes actually registered in the navigators:
+ *   AuthStack  → Splash, Login, OTP
+ *   Main tabs  → Main (Home), Account (Profile)
+ * Keep this in sync with AuthStack.tsx / MainStack.tsx when you add a screen.
+ */
 export type RootStackParamList = {
-  Home: undefined;
-  Details: {id: string};
-  Login: undefined;
-  Registration: undefined;
-  ForgotPassword: undefined;
-  Main: undefined;
-  Profile: undefined;
-  Settings: undefined;
   Splash: undefined;
+  Login: undefined;
   OTP: {phone?: string};
-  ForceChangePassword: undefined;
-  Services: {providerID: string};
-  SingleService: {serviceID?: string};
-  InquiredBill: undefined;
-  Loading: undefined;
-  PaymentConfirmation: {
-    paymentData: {
-      amountToBePaid: string;
-      billInfo: any;
-      fees: number;
-      currencyCode: string;
-      billRec: {
-        BillingAcct: string;
-        BillerId: string;
-        BillTypeCode: number;
-        BillRefNumber: string;
-        BillStatus: string;
-      };
-    };
-  };
-  Categories: undefined;
-  Providers: {categoryID: string};
-  ReceiptScreen: {type: 'print' | 'history'; historyID?: string};
+  Main: undefined;
+  Components: undefined;
+  Account: undefined;
 };

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

@@ -4,13 +4,16 @@ import React, {useRef, useState} from 'react';
 import {StyleSheet} from 'react-native';
 import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
 import {ButtonType} from '../../../types';
+import {AppTextInput} from '../../common/components/AppTextInput';
+import {Chip} from '../../common/components/Chip';
 import {Container} from '../../common/components/Container';
+import {Logo} from '../../common/components/Logo';
 import {PrimaryButton} from '../../common/components/PrimaryButton';
-import {PrimaryTextInput} from '../../common/components/PrimaryTextInput';
 import {RTLAwareText} from '../../common/components/RTLAwareText';
 import {RTLAwareView} from '../../common/components/RTLAwareView';
+import {Languages} from '../../common/localization/localization';
 import {
-  useRTL,
+  useLocalization,
   useTranslation,
 } from '../../common/localization/LocalizationProvider';
 import {phoneValidations} from '../../common/validations/authValidations';
@@ -19,7 +22,6 @@ import {useInputError} from '../../common/validations/hooks/useInputError';
 import {useAppDispatch} from '../../core/store/reduxHelpers';
 import {userLogin} from '../../core/store/user/userActions';
 import {CommonSizes} from '../../core/theme/commonSizes';
-import {Fonts} from '../../core/theme/fonts';
 import {useTheme} from '../../core/theme/ThemeProvider';
 import type {RootStackParamList} from '../../navigation/types';
 
@@ -33,7 +35,7 @@ export function Login(): JSX.Element {
   const scroll = useRef<KeyboardAwareScrollView>(null);
   const {theme} = useTheme();
   const t = useTranslation();
-  const isRTL = useRTL();
+  const {currentLanguage, changeLanguage} = useLocalization();
 
   const {error: phoneError, recheckValue: recheckPhone} = useInputError(
     phone,
@@ -47,31 +49,27 @@ export function Login(): JSX.Element {
   async function loginUser() {
     const phoneValid = recheckPhone() === null;
     const passwordValid = recheckPassword() === null;
-
     if (!phoneValid || !passwordValid) {
       return;
     }
     try {
       setLoading(true);
-      const result = await dispatch(
-        userLogin({
-          phone: phone,
-          password,
-        }),
-      );
-
+      const result = await dispatch(userLogin({phone, password}));
       if (userLogin.fulfilled.match(result)) {
-        navigation.navigate('OTP', {phone: phone});
+        navigation.navigate('OTP', {phone});
       }
-    } catch (error) {
+    } catch {
     } finally {
       setLoading(false);
     }
   }
 
-  const goToForgotPassword = () => {
-    navigation.navigate('ForgotPassword');
-  };
+  const toggleLanguage = () =>
+    changeLanguage(
+      currentLanguage === Languages.ar ? Languages.en : Languages.ar,
+    );
+
+  const descriptionColor = {color: theme.colors.grayScale_200};
 
   return (
     <Container
@@ -83,41 +81,52 @@ export function Login(): JSX.Element {
       withoutPadding
       extendedBackground
       backgroundColor={theme.colors.background_2}>
-      <Header />
-      <RTLAwareText style={{...theme.text.header1, textAlign: 'center'}}>
+      <RTLAwareView style={styles.topRow}>
+        <Chip
+          label={currentLanguage === Languages.ar ? 'العربية' : 'English'}
+          onPress={toggleLanguage}
+        />
+      </RTLAwareView>
+      <RTLAwareView style={styles.logoWrap}>
+        <Logo size={72} variant="gradient" />
+      </RTLAwareView>
+      <RTLAwareText style={[theme.text.header3, styles.center]}>
         {t('welcome', 'login')}
       </RTLAwareText>
-      <PrimaryTextInput
+      <RTLAwareText
+        style={[theme.text.bodyMediumRegular, styles.center, descriptionColor]}>
+        {t('welcome_description', 'login')}
+      </RTLAwareText>
+      <AppTextInput
+        label={t('phoneOrEmail', 'login')}
         value={phone}
         onChangeText={setPhone}
         error={phoneError}
         keyboardType="numeric"
         placeholder={t('EnterPhone', 'login')}
       />
-      <PrimaryTextInput
+      <AppTextInput
+        label={t('Password', 'login')}
         value={password}
         onChangeText={setPassword}
         error={passwordError}
-        secureTextEntry={true}
-        keyboardType="numeric"
+        secureTextEntry
         placeholder={t('EnterPassword', 'login')}
       />
-
-      <RTLAwareView
-        style={{width: '100%', alignItems: isRTL ? 'flex-start' : 'flex-end'}}>
-        <PrimaryButton
-          label={t('forgetPassword', 'login')}
-          onPressIn={goToForgotPassword}
-          type={ButtonType.borderless}
-        />
-      </RTLAwareView>
       <PrimaryButton
-        label={t('Login', 'login')}
+        label={t('signIn', 'login')}
         onPressIn={loginUser}
         isLoading={loading}
         disabled={loading}
         type={ButtonType.solid}
       />
+      <RTLAwareView style={styles.helpWrap}>
+        <PrimaryButton
+          label={t('needHelp', 'login')}
+          type={ButtonType.borderless}
+          onPressIn={() => {}}
+        />
+      </RTLAwareView>
     </Container>
   );
 }
@@ -131,18 +140,9 @@ const styles = StyleSheet.create({
     gap: CommonSizes.spacing.xl,
     justifyContent: 'flex-start',
   },
-  contentContainer: {
-    flexGrow: 1,
-  },
-  formContainer: {
-    alignItems: 'center',
-    paddingHorizontal: CommonSizes.spacing.large,
-    gap: CommonSizes.spacing.large,
-  },
-  title: {
-    textAlign: 'center',
-    fontSize: CommonSizes.font.bodyLarge,
-    fontWeight: 'bold',
-    fontFamily: Fonts.regular,
-  },
+  contentContainer: {flexGrow: 1},
+  center: {textAlign: 'center'},
+  topRow: {flexDirection: 'row', justifyContent: 'flex-end'},
+  logoWrap: {alignItems: 'center'},
+  helpWrap: {alignItems: 'center'},
 });

package/template/src/screens/OTP/OTPScreen.tsx

@@ -9,10 +9,7 @@ import {OTPInput} from '../../common/components/OTPInput';
 import {PrimaryButton} from '../../common/components/PrimaryButton';
 import {RTLAwareText} from '../../common/components/RTLAwareText';
 import {RTLAwareView} from '../../common/components/RTLAwareView';
-import {
-  useRTL,
-  useTranslation,
-} from '../../common/localization/LocalizationProvider';
+import {useTranslation} from '../../common/localization/LocalizationProvider';
 import {useInputError} from '../../common/validations/hooks/useInputError';
 import {useAppDispatch} from '../../core/store/reduxHelpers';
 import {verifyOTP} from '../../core/store/user/userActions';
@@ -34,7 +31,6 @@ export function OTPScreen(): JSX.Element {
   const {theme} = useTheme();
   const {phone} = route.params as {phone: string};
   const t = useTranslation();
-  const isRTL = useRTL();
 
   const {error: otpError, recheckValue: recheckOTP} = useInputError(
     otp,
@@ -51,7 +47,7 @@ export function OTPScreen(): JSX.Element {
     try {
       setLoading(true);
 
-      const result = await dispatch(
+      await dispatch(
         verifyOTP({
           verification_code: otp?.toString(),
           mobile_number: phone,
@@ -59,7 +55,7 @@ export function OTPScreen(): JSX.Element {
           scheme_id: 1,
         }),
       );
-    } catch (error) {
+    } catch {
     } finally {
       setLoading(false);
     }
@@ -97,10 +93,10 @@ export function OTPScreen(): JSX.Element {
       extendedBackground
       backgroundColor={theme.colors.background_2}>
       <HeaderBack onPress={() => navigation.goBack()} />
-      <RTLAwareText style={{...theme.text.header1, textAlign: 'center'}}>
+      <RTLAwareText style={[theme.text.header1, styles.center]}>
         {t('title', 'otp')}
       </RTLAwareText>
-      <RTLAwareText style={{...theme.text.body2, textAlign: 'center'}}>
+      <RTLAwareText style={[theme.text.body2, styles.center]}>
         {t('subtitle', 'otp')}
       </RTLAwareText>
       <View style={styles.inputContainer}>
@@ -148,6 +144,7 @@ const styles = StyleSheet.create({
   contentContainer: {
     flexGrow: 1,
   },
+  center: {textAlign: 'center'},
   inputContainer: {
     width: '100%',
     marginTop: CommonSizes.spacing.large,