@fadyshawky/react-native-magic 2.0.3 → 2.0.5

package/template/src/navigation/HeaderComponents.tsx

@@ -1,18 +1,93 @@
+import {NativeStackNavigationProp} from '@react-navigation/native-stack';
 import React from 'react';
-import {StyleSheet, View} from 'react-native';
+import {Image, StyleSheet, TouchableOpacity, View} from 'react-native';
+import {ImageResources} from '../common/ImageResources.g';
 import {CommonSizes} from '../core/theme/commonSizes';
 import {screenWidth} from '../core/theme/commonStyles';
+import {useTheme} from '../core/theme/ThemeProvider';
+import {RootStackParamList} from './types';
+import {useRTL} from '../common/localization/LocalizationProvider';
 import {scaleWidth} from '../core/theme/scaling';
+export function Header() {
+  return (
+    <View style={styles.headerBase}>
+      <Image source={ImageResources.light_header_logo} style={styles.logo} />
+    </View>
+  );
+}
+
+export function HeaderBack({onPress}: {onPress: () => void}) {
+  return (
+    <View style={styles.headerWithBack}>
+      <BackButton onPress={onPress} />
+      <Image source={ImageResources.light_header_logo} style={styles.logo} />
+      <View style={{width: 40}} />
+    </View>
+  );
+}
 
 export function HeaderButton({onPress}: {onPress: () => void}) {
   return (
     <View style={styles.headerWithBack}>
+      <BackButton onPress={onPress} />
       <View style={styles.logo} />
       <View style={{width: 40}} />
     </View>
   );
 }
 
+export function HomeHeader({onPress}: {onPress: () => void}) {
+  return (
+    <View style={styles.headerWithBack}>
+      <RefreshButton onPress={onPress} />
+      <Image source={ImageResources.light_header_logo} 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({onPress}: {onPress: () => void}) {
+  const {theme} = useTheme();
+  const isRTL = useRTL();
+  return (
+    <TouchableOpacity style={styles.backButton} onPressIn={onPress}>
+      <Image
+        tintColor={theme.colors.tintColor}
+        style={{
+          ...styles.backIcon,
+          transform: [{rotate: isRTL ? '180deg' : '0deg'}],
+        }}
+        source={ImageResources.arrow_left}
+      />
+    </TouchableOpacity>
+  );
+}
+
+function RefreshButton({onPress}: {onPress: () => void}) {
+  const {theme} = useTheme();
+  return (
+    <TouchableOpacity style={styles.backButton} onPressIn={onPress}>
+      <Image
+        tintColor={theme.colors.tintColor}
+        style={styles.backIcon}
+        source={ImageResources.repeat}
+      />
+    </TouchableOpacity>
+  );
+}
+
 const styles = StyleSheet.create({
   headerBase: {
     width: '100%',

package/template/src/navigation/MainNavigation.tsx

@@ -7,6 +7,8 @@ import {useAppSelector} from '../core/store/reduxHelpers';
 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);
@@ -22,7 +24,7 @@ function AppNavigator() {
         dark: false,
         colors: {
           primary: '#000',
-          background: 'white',
+          background: NewColors.background,
           card: '#fff',
           text: '#000',
           border: '#000',

package/template/src/navigation/MainStack.tsx

@@ -1,52 +1,143 @@
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
-import {createNativeStackNavigator} from '@react-navigation/native-stack';
 import React from 'react';
-import {HomeScreen} from '../screens/home/HomeScreen';
-import {Profile} from '../screens/profile/Profile';
-import {Settings} from '../screens/Settings/Settings';
+import {ImageResources} from '../common/ImageResources.g';
+import {useTranslation} from '../common/localization/LocalizationProvider';
+
 import {TabBar} from './TabBar';
+import {createNativeStackNavigator} from '@react-navigation/native-stack';
+import {
+  Favorites,
+  History,
+  Profile,
+  Services,
+  SingleService,
+  InquiredBill,
+  PaymentConfirmation,
+  Categories,
+  Providers,
+  ReceiptScreen,
+} from '../screens';
+import {ForceChangePasswordScreen} from '../screens/ForceChangePassword/ForceChangePasswordScreen';
+import {HomeScreen} from '../screens/home/HomeScreen';
+
+const Tab = createBottomTabNavigator();
+const Stack = createNativeStackNavigator();
 
-const MainScreens = [
-  {
-    id: 'Home',
-    component: HomeScreen,
-    options: {
-      tabBarLabel: 'Profile',
+export function AppMainNavigator() {
+  const t = useTranslation();
+
+  const MainScreens = [
+    {
+      id: 'Main',
+      component: HomeScreen,
+      options: {
+        tabBarLabel: t('tabs.Main', 'mainNavigation'),
+        headerShown: false,
+        icon: ImageResources.services,
+        selectedIcon: ImageResources.services,
+      },
     },
-  },
-  {
-    id: 'Profile',
-    component: Profile,
-    options: {
-      tabBarLabel: 'Profile',
+    {
+      id: 'Favorites',
+      component: Favorites,
+      options: {
+        tabBarLabel: t('tabs.Favorites', 'mainNavigation'),
+        headerShown: false,
+        icon: ImageResources.favourites,
+        selectedIcon: ImageResources.favourites,
+      },
     },
-  },
-];
-
-const AppStack = [
-  {
-    id: 'Home',
-    component: MainTabs,
-    options: {
-      headerShown: false,
+    {
+      id: 'Financials',
+      component: History,
+      options: {
+        tabBarLabel: t('tabs.Financials', 'mainNavigation'),
+        headerShown: false,
+        icon: ImageResources.financials,
+        selectedIcon: ImageResources.financials,
+      },
     },
-  },
-  {
-    id: 'Settings',
-    component: Settings,
-    options: {},
-  },
-];
-
-const Stack = createNativeStackNavigator();
-
-const Tab = createBottomTabNavigator();
+    {
+      id: 'Account',
+      component: Profile,
+      options: {
+        tabBarLabel: t('tabs.Account', 'mainNavigation'),
+        headerShown: false,
+        icon: ImageResources.account,
+        selectedIcon: ImageResources.account,
+      },
+    },
+    {
+      id: 'ForceChangePassword',
+      component: ForceChangePasswordScreen,
+      options: {
+        headerShown: false,
+        title: t('screens.ForceChangePassword', 'mainNavigation'),
+      },
+    },
+    {
+      id: 'Services',
+      component: Services,
+      options: {
+        headerShown: false,
+        title: t('screens.Services', 'mainNavigation'),
+      },
+    },
+    {
+      id: 'SingleService',
+      component: SingleService,
+      options: {
+        headerShown: false,
+      },
+    },
+    {
+      id: 'InquiredBill',
+      component: InquiredBill,
+      options: {
+        headerShown: false,
+      },
+    },
+    {
+      id: 'PaymentConfirmation',
+      component: PaymentConfirmation,
+      options: {
+        headerShown: false,
+      },
+    },
+    {
+      id: 'ReceiptScreen',
+      component: ReceiptScreen,
+      options: {
+        headerShown: false,
+      },
+    },
+    {
+      id: 'Categories',
+      component: Categories,
+      options: {
+        headerShown: false,
+      },
+    },
+    {
+      id: 'Providers',
+      component: Providers,
+      options: {
+        headerShown: false,
+      },
+    },
+  ];
 
-function MainTabs() {
   return (
     <Tab.Navigator
-      initialRouteName="Home"
-      tabBar={props => <TabBar {...props} />}>
+      initialRouteName="Main"
+      backBehavior="history"
+      detachInactiveScreens
+      tabBar={props => {
+        return <TabBar {...props} />;
+      }}
+      screenOptions={{
+        tabBarHideOnKeyboard: true,
+      }}>
       {MainScreens.map(s => (
         <Tab.Screen
           key={s.id}
@@ -58,20 +149,3 @@ function MainTabs() {
     </Tab.Navigator>
   );
 }
-
-export function AppMainNavigator() {
-  return (
-    <Stack.Navigator screenOptions={{animation: 'none'}}>
-      {AppStack.map(s => {
-        return (
-          <Stack.Screen
-            key={s.id}
-            name={s.id}
-            component={s.component}
-            options={s.options}
-          />
-        );
-      })}
-    </Stack.Navigator>
-  );
-}

package/template/src/navigation/TabBar.tsx

@@ -1,13 +1,26 @@
-import React from 'react';
-import {View, Text, TouchableOpacity, Image, StyleSheet} from 'react-native';
-import {CommonStyles} from '../core/theme/commonStyles';
 import {
   BottomTabBarProps,
   BottomTabNavigationOptions,
 } from '@react-navigation/bottom-tabs';
-import {ImageSourcePropType} from 'react-native';
 import {toString} from 'lodash';
-import {NaturalColors, PrimaryColors} from '../core/theme/colors';
+import React from 'react';
+import {
+  Image,
+  ImageSourcePropType,
+  StyleSheet,
+  TouchableOpacity,
+} from 'react-native';
+import {RTLAwareText} from '../common/components/RTLAwareText';
+import {RTLAwareView} from '../common/components/RTLAwareView';
+import {
+  useRTL,
+  useTranslation,
+} from '../common/localization/LocalizationProvider';
+import {BlackColors, NewColors} from '../core/theme/colors';
+import {CommonSizes} from '../core/theme/commonSizes';
+import {CommonStyles} from '../core/theme/commonStyles';
+import {scaleHeight, scaleWidth} from '../core/theme/scaling';
+import {useTheme} from '../core/theme/ThemeProvider';
 
 interface TabBarOptions extends BottomTabNavigationOptions {
   selectedIcon: ImageSourcePropType;
@@ -16,58 +29,94 @@ interface TabBarOptions extends BottomTabNavigationOptions {
 }
 
 export function TabBar({state, descriptors, navigation}: BottomTabBarProps) {
-  return (
-    <View style={styles.container}>
-      {state.routes.map((route, index) => {
-        const {options} = descriptors[route.key] as unknown as {
-          options: TabBarOptions;
-        };
-        const label =
-          options.tabBarLabel !== undefined
-            ? options.tabBarLabel
-            : options.title !== undefined
-            ? options.title
-            : route.name;
+  const {theme} = useTheme();
+  const t = useTranslation();
+  const isRTL = useRTL();
+  const tabArray = ['Main', 'Financials', 'Account'];
 
-        const isFocused = state.index === index;
+  // Create a copy of routes array to avoid modifying the original
+  const routesToRender = [...state.routes].filter(r =>
+    tabArray.includes(r.name),
+  );
+
+  // If RTL, reverse the order of tabs
+  if (isRTL) {
+    routesToRender.reverse();
+  }
+
+  return (
+    state.index <= 3 && (
+      <RTLAwareView style={styles.container}>
+        {routesToRender.map((route, index) => {
+          // Calculate the correct index in the original array for focused state
+          const originalIndex = isRTL ? state.routes.length - 1 - index : index;
+          const isFocused = state.index === originalIndex;
 
-        const onPress = () => {
-          const event = navigation.emit({
-            type: 'tabPress',
-            target: route.key,
-            canPreventDefault: true,
-          });
+          const {options} = descriptors[route.key] as unknown as {
+            options: TabBarOptions;
+          };
 
-          if (!isFocused && !event.defaultPrevented) {
-            navigation.navigate(route.name, route.params);
+          // Get localized tab name
+          let label = route.name;
+          if (options.tabBarLabel !== undefined) {
+            label = options.tabBarLabel as string;
+          } else if (options.title !== undefined) {
+            label = options.title;
+          } else {
+            // Try to get localized name from mainNavigation translations
+            const localizedName = t(`tabs.${route.name}`, 'mainNavigation');
+            if (localizedName !== `tabs.${route.name}`) {
+              label = localizedName;
+            }
           }
-        };
 
-        const onLongPress = () => {
-          navigation.emit({
-            type: 'tabLongPress',
-            target: route.key,
-          });
-        };
+          const onPress = () => {
+            const event = navigation.emit({
+              type: 'tabPress',
+              target: route.key,
+              canPreventDefault: true,
+            });
 
-        return (
-          <TouchableOpacity
-            key={route.key}
-            accessibilityRole="button"
-            accessibilityState={isFocused ? {selected: true} : {}}
-            accessibilityLabel={options.tabBarAccessibilityLabel}
-            testID={options.tabBarTestID}
-            onPress={onPress}
-            onLongPress={onLongPress}
-            style={styles.tabButton}>
-            <Image source={isFocused ? options.selectedIcon : options.icon} />
-            <Text style={[styles.label, isFocused && styles.labelFocused]}>
-              {toString(label)}
-            </Text>
-          </TouchableOpacity>
-        );
-      })}
-    </View>
+            if (!isFocused && !event.defaultPrevented) {
+              navigation.navigate(route.name, route.params);
+            }
+          };
+
+          const onLongPress = () => {
+            navigation.emit({
+              type: 'tabLongPress',
+              target: route.key,
+            });
+          };
+
+          return (
+            <TouchableOpacity
+              key={route.key}
+              accessibilityRole="button"
+              accessibilityState={isFocused ? {selected: true} : {}}
+              accessibilityLabel={
+                options.tabBarAccessibilityLabel || label?.toString()
+              }
+              testID={options.tabBarTestID}
+              onPressIn={onPress}
+              onLongPress={onLongPress}
+              style={styles.tabButton}>
+              <Image
+                style={{
+                  width: scaleWidth(57),
+                  height: scaleHeight(63),
+                  resizeMode: 'contain',
+                }}
+                source={isFocused ? options.selectedIcon : options.icon}
+              />
+              <RTLAwareText style={[theme.text.navBar]}>
+                {toString(label)}
+              </RTLAwareText>
+            </TouchableOpacity>
+          );
+        })}
+      </RTLAwareView>
+    )
   );
 }
 
@@ -75,20 +124,23 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     alignItems: 'center',
-    height: 100,
-    borderTopLeftRadius: 50,
-    borderTopRightRadius: 50,
+    height: scaleHeight(130),
+    borderTopLeftRadius: CommonSizes.borderRadius.huge,
+    borderTopRightRadius: CommonSizes.borderRadius.huge,
     justifyContent: 'space-evenly',
-    ...CommonStyles.shadow,
+    ...CommonStyles.dropShadow,
+    backgroundColor: BlackColors.indigoBlue,
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
   },
   tabButton: {
     flex: 1,
     alignItems: 'center',
   },
-  label: {
-    color: NaturalColors.grayScale_50,
-  },
+  label: {},
   labelFocused: {
-    color: PrimaryColors.PlatinateBlue_700,
+    color: NewColors.blueNormalActive,
   },
 });

package/template/src/navigation/types.ts

@@ -8,4 +8,28 @@ export type RootStackParamList = {
   Profile: undefined;
   Settings: undefined;
   Splash: 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};
 };

package/template/src/screens/Categories/Categories.tsx

@@ -0,0 +1,141 @@
+import {useIsFocused, useNavigation} from '@react-navigation/native';
+import {NativeStackNavigationProp} from '@react-navigation/native-stack';
+import React, {useEffect, useRef} from 'react';
+import {StyleSheet, View} from 'react-native';
+import {SkypeIndicator} from 'react-native-indicators';
+import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
+import {LoadState} from '../../../types';
+import {Card} from '../../common/components/Cards';
+import {Container} from '../../common/components/Container';
+import {FlatListWrapper} from '../../common/components/FlatListWrapper';
+import {ImageResources} from '../../common/ImageResources.g';
+import {useTranslation} from '../../common/localization/LocalizationProvider';
+import {CommonSizes} from '../../core/theme/commonSizes';
+import {scaleHeight, scaleWidth} from '../../core/theme/scaling';
+import {useTheme} from '../../core/theme/ThemeProvider';
+import {HeaderBack} from '../../navigation/HeaderComponents';
+import {RootStackParamList} from '../../navigation/types';
+import {useCategoriesData} from './hooks/useCategoriesData';
+import {setSelectedCategory} from '../../core/store/Categories/categorySlice';
+import {useAppDispatch} from '../../core/store/reduxHelpers';
+
+export function Categories(): JSX.Element {
+  const {isLoading, fetchData, categories} = useCategoriesData();
+  const t = useTranslation();
+  const navigation =
+    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+  const {theme} = useTheme();
+  const scroll = useRef<KeyboardAwareScrollView>(null);
+  const isFocused = useIsFocused();
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    if (isFocused && categories.length === 0) {
+      fetchData();
+    }
+  }, [isFocused]);
+
+  return (
+    <Container
+      ref={scroll}
+      testID={'CategoriesScreenID'}
+      contentContainerStyle={styles.contentContainer}
+      style={styles.container}
+      backgroundImage={ImageResources[`${theme.mode}_background_1`]}
+      withoutPadding
+      withoutScroll
+      backgroundColor={theme.colors.background}>
+      {isLoading ? (
+        <SkypeIndicator size={80} color={theme.colors.mutedLavender} />
+      ) : (
+        <>
+          <HeaderBack onPress={navigation.goBack} />
+          <FlatListWrapper
+            contentContainerStyle={{
+              alignItems: 'center',
+              paddingBottom: scaleHeight(50),
+            }}
+            style={{
+              flex: 1,
+              alignSelf: 'center',
+            }}
+            ItemSeparatorComponent={() => (
+              <View style={{height: CommonSizes.spacing.large}} />
+            )}
+            keyExtractor={(item, index) => `${item.id}-${index}`}
+            loadState={
+              isLoading ? LoadState['loadingMore'] : LoadState['pullToRefresh']
+            }
+            data={categories}
+            numColumns={3}
+            renderItem={({item, index}) => (
+              <Card
+                cardStyle={{
+                  width: scaleWidth(187),
+                  height: scaleHeight(260),
+                }}
+                key={item.id}
+                icon={{uri: item.img_url}}
+                title={item.name}
+                onPress={() => {
+                  dispatch(setSelectedCategory(item));
+                  navigation.navigate('Providers', {
+                    categoryID: item?.id?.toString(),
+                  });
+                }}
+                marginRight={
+                  (index % 3) + 1 !== 3 ? CommonSizes.spacing.medium : undefined
+                }
+              />
+            )}
+          />
+        </>
+      )}
+    </Container>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    borderTopRightRadius: CommonSizes.spacing.large,
+    borderTopLeftRadius: CommonSizes.spacing.large,
+    gap: CommonSizes.spacing.large,
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+  },
+  contentContainer: {
+    flexGrow: 1,
+  },
+  searchBar: {
+    width: '90%',
+    alignSelf: 'center',
+    marginTop: CommonSizes.spacing.medium,
+  },
+  formContainer: {
+    alignItems: 'center',
+    paddingHorizontal: CommonSizes.spacing.large,
+    gap: CommonSizes.spacing.large,
+  },
+  balanceSection: {
+    alignItems: 'center',
+    justifyContent: 'space-evenly',
+    gap: CommonSizes.spacing.large,
+  },
+  seeMoreSection: {
+    alignItems: 'center',
+    gap: CommonSizes.spacing.large,
+    alignSelf: 'center',
+  },
+  sectionImage: {
+    width: scaleWidth(120),
+    height: scaleHeight(70),
+  },
+  amountText: {
+    textAlign: 'left',
+  },
+  balanceCard: {
+    width: '100%',
+    borderRadius: CommonSizes.spacing.huge,
+  },
+});