Fix form keyboard issues and sticky footers in agent screens
This commit is contained in:
Abin Toppo
@@ -0,0 +1,193 @@
|
||||
import React from 'react';
|
||||
import { View, StyleSheet } from 'react-native';
|
||||
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
|
||||
import { createNativeStackNavigator } from '@react-navigation/native-stack';
|
||||
import Ionicons from '@react-native-vector-icons/ionicons';
|
||||
|
||||
import { useTheme } from '../theme';
|
||||
import type {
|
||||
AgentTabParamList,
|
||||
AgentDashboardStackParamList,
|
||||
AgentCustomersStackParamList,
|
||||
AgentCollectionsStackParamList,
|
||||
AgentLoansStackParamList,
|
||||
AgentProfileStackParamList,
|
||||
} from '../modules/agent/navigation/agentNavigationTypes';
|
||||
|
||||
import AgentDashboardScreen from '../modules/agent/screens/AgentDashboardScreen';
|
||||
import AgentRouteScreen from '../modules/agent/screens/AgentRouteScreen';
|
||||
|
||||
import CustomerListScreen from '../modules/agent/screens/CustomerListScreen';
|
||||
import CustomerDetailScreen from '../modules/agent/screens/CustomerDetailScreen';
|
||||
import AddEditCustomerScreen from '../modules/agent/screens/AddEditCustomerScreen';
|
||||
import CustomerInstallmentHistoryScreen from '../modules/agent/screens/CustomerInstallmentHistoryScreen';
|
||||
|
||||
import DailyCollectionScreen from '../modules/agent/screens/DailyCollectionScreen';
|
||||
import CollectionHistoryScreen from '../modules/agent/screens/CollectionHistoryScreen';
|
||||
import CollectionReceiptScreen from '../modules/agent/screens/CollectionReceiptScreen';
|
||||
|
||||
import AgentLoansScreen from '../modules/agent/screens/AgentLoansScreen';
|
||||
import CreateLoanRequestScreen from '../modules/agent/screens/CreateLoanRequestScreen';
|
||||
import AccountOpeningScreen from '../modules/agent/screens/AccountOpeningScreen';
|
||||
import CommissionDashboardScreen from '../modules/agent/screens/CommissionDashboardScreen';
|
||||
|
||||
import AgentProfileScreen from '../modules/agent/screens/AgentProfileScreen';
|
||||
import SmsHistoryScreen from '../modules/agent/screens/SmsHistoryScreen';
|
||||
import AgentChangePasswordScreen from '../modules/agent/screens/AgentChangePasswordScreen';
|
||||
|
||||
const Tab = createBottomTabNavigator<AgentTabParamList>();
|
||||
|
||||
const DashboardStack = createNativeStackNavigator<AgentDashboardStackParamList>();
|
||||
const DashboardNavigator = () => (
|
||||
<DashboardStack.Navigator screenOptions={{ headerShown: false }}>
|
||||
<DashboardStack.Screen name="AgentDashboardMain" component={AgentDashboardScreen} />
|
||||
<DashboardStack.Screen name="AgentRoute" component={AgentRouteScreen} />
|
||||
</DashboardStack.Navigator>
|
||||
);
|
||||
|
||||
const CustomersStack = createNativeStackNavigator<AgentCustomersStackParamList>();
|
||||
const CustomersNavigator = () => (
|
||||
<CustomersStack.Navigator screenOptions={{ headerShown: false }}>
|
||||
<CustomersStack.Screen name="CustomerList" component={CustomerListScreen} />
|
||||
<CustomersStack.Screen name="CustomerDetail" component={CustomerDetailScreen} />
|
||||
<CustomersStack.Screen name="AddEditCustomer" component={AddEditCustomerScreen} />
|
||||
<CustomersStack.Screen name="CustomerInstallmentHistory" component={CustomerInstallmentHistoryScreen} />
|
||||
</CustomersStack.Navigator>
|
||||
);
|
||||
|
||||
const CollectionsStack = createNativeStackNavigator<AgentCollectionsStackParamList>();
|
||||
const CollectionsNavigator = () => (
|
||||
<CollectionsStack.Navigator screenOptions={{ headerShown: false }}>
|
||||
<CollectionsStack.Screen name="DailyCollection" component={DailyCollectionScreen} />
|
||||
<CollectionsStack.Screen name="CollectionHistory" component={CollectionHistoryScreen} />
|
||||
<CollectionsStack.Screen name="CollectionReceipt" component={CollectionReceiptScreen} />
|
||||
</CollectionsStack.Navigator>
|
||||
);
|
||||
|
||||
const LoansStack = createNativeStackNavigator<AgentLoansStackParamList>();
|
||||
const LoansNavigator = () => (
|
||||
<LoansStack.Navigator screenOptions={{ headerShown: false }}>
|
||||
<LoansStack.Screen name="AgentLoansMain" component={AgentLoansScreen} />
|
||||
<LoansStack.Screen name="CreateLoanRequest" component={CreateLoanRequestScreen} />
|
||||
<LoansStack.Screen name="AccountOpening" component={AccountOpeningScreen} />
|
||||
<LoansStack.Screen name="CommissionDashboard" component={CommissionDashboardScreen} />
|
||||
</LoansStack.Navigator>
|
||||
);
|
||||
|
||||
const ProfileStack = createNativeStackNavigator<AgentProfileStackParamList>();
|
||||
const ProfileNavigator = () => (
|
||||
<ProfileStack.Navigator screenOptions={{ headerShown: false }}>
|
||||
<ProfileStack.Screen name="AgentProfileMain" component={AgentProfileScreen} />
|
||||
<ProfileStack.Screen name="SmsHistory" component={SmsHistoryScreen} />
|
||||
<ProfileStack.Screen name="AgentChangePassword" component={AgentChangePasswordScreen} />
|
||||
</ProfileStack.Navigator>
|
||||
);
|
||||
|
||||
type TabIconName =
|
||||
| 'home-outline' | 'home'
|
||||
| 'people-outline' | 'people'
|
||||
| 'wallet-outline' | 'wallet'
|
||||
| 'document-text-outline' | 'document-text'
|
||||
| 'person-outline' | 'person';
|
||||
|
||||
const TabIcon = ({ color, focused, name }: { color: string; focused: boolean; name: TabIconName }) => {
|
||||
const activeBackground = focused ? `${color}22` : 'transparent';
|
||||
return (
|
||||
<View style={[styles.iconFrame, { borderColor: color, backgroundColor: activeBackground }]}>
|
||||
<Ionicons name={name} size={18} color={color} />
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export const AgentNavigator = () => {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<Tab.Navigator
|
||||
screenOptions={{
|
||||
headerShown: false,
|
||||
lazy: true,
|
||||
tabBarActiveTintColor: theme.colors.primary,
|
||||
tabBarInactiveTintColor: theme.colors.textMuted,
|
||||
tabBarStyle: {
|
||||
backgroundColor: theme.colors.white,
|
||||
borderTopColor: theme.colors.cardBorder,
|
||||
borderTopWidth: 1,
|
||||
height: 90,
|
||||
paddingBottom: 30,
|
||||
paddingTop: 12,
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
elevation: 20,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: -4 },
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 8,
|
||||
},
|
||||
tabBarLabelStyle: {
|
||||
fontSize: 10,
|
||||
fontWeight: '700',
|
||||
marginTop: 6,
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 0.5,
|
||||
},
|
||||
tabBarItemStyle: {
|
||||
paddingVertical: 5,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Tab.Screen
|
||||
name="AgentDashboard"
|
||||
component={DashboardNavigator}
|
||||
options={{
|
||||
title: 'Home',
|
||||
tabBarIcon: ({ color, focused }) => <TabIcon color={color} focused={focused} name={focused ? 'home' : 'home-outline'} />,
|
||||
}}
|
||||
/>
|
||||
<Tab.Screen
|
||||
name="AgentCustomers"
|
||||
component={CustomersNavigator}
|
||||
options={{
|
||||
title: 'Clients',
|
||||
tabBarIcon: ({ color, focused }) => <TabIcon color={color} focused={focused} name={focused ? 'people' : 'people-outline'} />,
|
||||
}}
|
||||
/>
|
||||
<Tab.Screen
|
||||
name="AgentCollections"
|
||||
component={CollectionsNavigator}
|
||||
options={{
|
||||
title: 'Collect',
|
||||
tabBarIcon: ({ color, focused }) => <TabIcon color={color} focused={focused} name={focused ? 'wallet' : 'wallet-outline'} />,
|
||||
}}
|
||||
/>
|
||||
<Tab.Screen
|
||||
name="AgentLoans"
|
||||
component={LoansNavigator}
|
||||
options={{
|
||||
title: 'Workspace',
|
||||
tabBarIcon: ({ color, focused }) => <TabIcon color={color} focused={focused} name={focused ? 'document-text' : 'document-text-outline'} />,
|
||||
}}
|
||||
/>
|
||||
<Tab.Screen
|
||||
name="AgentProfile"
|
||||
component={ProfileNavigator}
|
||||
options={{
|
||||
title: 'Profile',
|
||||
tabBarIcon: ({ color, focused }) => <TabIcon color={color} focused={focused} name={focused ? 'person' : 'person-outline'} />,
|
||||
}}
|
||||
/>
|
||||
</Tab.Navigator>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
iconFrame: {
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: 8,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,19 @@
|
||||
import React from 'react';
|
||||
import { createNativeStackNavigator } from '@react-navigation/native-stack';
|
||||
|
||||
import type { AuthStackParamList } from './types';
|
||||
import LoginScreen from '../modules/auth/screens/LoginScreen';
|
||||
|
||||
const Stack = createNativeStackNavigator<AuthStackParamList>();
|
||||
|
||||
export const AuthNavigator = () => (
|
||||
<Stack.Navigator
|
||||
initialRouteName="Login"
|
||||
screenOptions={{
|
||||
headerShown: false,
|
||||
animation: 'slide_from_right',
|
||||
}}
|
||||
>
|
||||
<Stack.Screen name="Login" component={LoginScreen} />
|
||||
</Stack.Navigator>
|
||||
);
|
||||
@@ -0,0 +1,21 @@
|
||||
import React from 'react';
|
||||
import { createNativeStackNavigator } from '@react-navigation/native-stack';
|
||||
|
||||
import CardsOverviewScreen from '../modules/cards/screens/CardsOverviewScreen';
|
||||
import CardDetailsScreen from '../modules/cards/screens/CardDetailsScreen';
|
||||
import RequestPhysicalCardScreen from '../modules/cards/screens/RequestPhysicalCardScreen';
|
||||
import ApplyCreditCardScreen from '../modules/cards/screens/ApplyCreditCardScreen';
|
||||
import type { CardsStackParamList } from './types';
|
||||
|
||||
const Stack = createNativeStackNavigator<CardsStackParamList>();
|
||||
|
||||
export const CardsNavigator = () => {
|
||||
return (
|
||||
<Stack.Navigator screenOptions={{ headerShown: false }}>
|
||||
<Stack.Screen name="CardsOverview" component={CardsOverviewScreen} />
|
||||
<Stack.Screen name="CardDetails" component={CardDetailsScreen} />
|
||||
<Stack.Screen name="RequestPhysicalCard" component={RequestPhysicalCardScreen} />
|
||||
<Stack.Screen name="ApplyCreditCard" component={ApplyCreditCardScreen} />
|
||||
</Stack.Navigator>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,17 @@
|
||||
import React from 'react';
|
||||
import { createNativeStackNavigator } from '@react-navigation/native-stack';
|
||||
import EmployeeHomeScreen from '../modules/employee/screens/EmployeeHomeScreen';
|
||||
|
||||
export type EmployeeStackParamList = {
|
||||
EmployeeHome: undefined;
|
||||
};
|
||||
|
||||
const Stack = createNativeStackNavigator<EmployeeStackParamList>();
|
||||
|
||||
export const EmployeeNavigator = () => {
|
||||
return (
|
||||
<Stack.Navigator screenOptions={{ headerShown: false }}>
|
||||
<Stack.Screen name="EmployeeHome" component={EmployeeHomeScreen} />
|
||||
</Stack.Navigator>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,24 @@
|
||||
import React from 'react';
|
||||
import { createNativeStackNavigator } from '@react-navigation/native-stack';
|
||||
import HomeScreen from '../modules/home/screens/HomeScreen';
|
||||
import MiniStatementScreen from '../modules/home/screens/MiniStatementScreen';
|
||||
import AccountDetailsScreen from '../modules/home/screens/AccountDetailsScreen';
|
||||
import ReKycScreen from '../modules/home/screens/ReKycScreen';
|
||||
import { LoanNavigator } from './LoanNavigator';
|
||||
import { InsuranceNavigator } from './InsuranceNavigator';
|
||||
import type { HomeStackParamList } from './types';
|
||||
|
||||
const Stack = createNativeStackNavigator<HomeStackParamList>();
|
||||
|
||||
export const HomeNavigator = () => {
|
||||
return (
|
||||
<Stack.Navigator screenOptions={{ headerShown: false }}>
|
||||
<Stack.Screen name="HomeMain" component={HomeScreen} />
|
||||
<Stack.Screen name="MiniStatement" component={MiniStatementScreen} />
|
||||
<Stack.Screen name="AccountDetails" component={AccountDetailsScreen} />
|
||||
<Stack.Screen name="ReKyc" component={ReKycScreen} />
|
||||
<Stack.Screen name="LoanFlow" component={LoanNavigator} />
|
||||
<Stack.Screen name="InsuranceFlow" component={InsuranceNavigator} />
|
||||
</Stack.Navigator>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,33 @@
|
||||
import React from 'react';
|
||||
import { createNativeStackNavigator } from '@react-navigation/native-stack';
|
||||
|
||||
import type { InsuranceStackParamList } from './types';
|
||||
import BuyInsuranceScreen from '../modules/insurance/screens/BuyInsuranceScreen';
|
||||
import InsuranceCalculatorScreen from '../modules/insurance/screens/InsuranceCalculatorScreen';
|
||||
import InsuranceClaimsScreen from '../modules/insurance/screens/InsuranceClaimsScreen';
|
||||
import InsuranceComparisonScreen from '../modules/insurance/screens/InsuranceComparisonScreen';
|
||||
import InsuranceDashboardScreen from '../modules/insurance/screens/InsuranceDashboardScreen';
|
||||
import InsuranceDocumentsScreen from '../modules/insurance/screens/InsuranceDocumentsScreen';
|
||||
import InsuranceNotificationsScreen from '../modules/insurance/screens/InsuranceNotificationsScreen';
|
||||
import InsurancePoliciesScreen from '../modules/insurance/screens/InsurancePoliciesScreen';
|
||||
import InsurancePolicyDetailsScreen from '../modules/insurance/screens/InsurancePolicyDetailsScreen';
|
||||
import InsuranceRenewalsScreen from '../modules/insurance/screens/InsuranceRenewalsScreen';
|
||||
|
||||
const Stack = createNativeStackNavigator<InsuranceStackParamList>();
|
||||
|
||||
export const InsuranceNavigator = () => {
|
||||
return (
|
||||
<Stack.Navigator screenOptions={{ headerShown: false }}>
|
||||
<Stack.Screen name="InsuranceDashboard" component={InsuranceDashboardScreen} />
|
||||
<Stack.Screen name="BuyInsurance" component={BuyInsuranceScreen} />
|
||||
<Stack.Screen name="InsurancePolicies" component={InsurancePoliciesScreen} />
|
||||
<Stack.Screen name="InsurancePolicyDetails" component={InsurancePolicyDetailsScreen} />
|
||||
<Stack.Screen name="InsuranceRenewals" component={InsuranceRenewalsScreen} />
|
||||
<Stack.Screen name="InsuranceClaims" component={InsuranceClaimsScreen} />
|
||||
<Stack.Screen name="InsuranceDocuments" component={InsuranceDocumentsScreen} />
|
||||
<Stack.Screen name="InsuranceCalculator" component={InsuranceCalculatorScreen} />
|
||||
<Stack.Screen name="InsuranceComparison" component={InsuranceComparisonScreen} />
|
||||
<Stack.Screen name="InsuranceNotifications" component={InsuranceNotificationsScreen} />
|
||||
</Stack.Navigator>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,33 @@
|
||||
import React from 'react';
|
||||
import { createNativeStackNavigator } from '@react-navigation/native-stack';
|
||||
|
||||
import type { LoanStackParamList } from './types';
|
||||
import LoanDashboardScreen from '../modules/loan/screens/LoanDashboardScreen';
|
||||
import LoanTypesListingScreen from '../modules/loan/screens/LoanTypesListingScreen';
|
||||
import LoanEligibilityCheckScreen from '../modules/loan/screens/LoanEligibilityCheckScreen';
|
||||
import LoanCalculatorScreen from '../modules/loan/screens/LoanCalculatorScreen';
|
||||
import ApplyLoanScreen from '../modules/loan/screens/ApplyLoanScreen';
|
||||
import LoanTrackingScreen from '../modules/loan/screens/LoanTrackingScreen';
|
||||
import ActiveLoanDetailsScreen from '../modules/loan/screens/ActiveLoanDetailsScreen';
|
||||
import EmiPaymentScreen from '../modules/loan/screens/EmiPaymentScreen';
|
||||
import LoanHistoryScreen from '../modules/loan/screens/LoanHistoryScreen';
|
||||
import LoanDocumentsScreen from '../modules/loan/screens/LoanDocumentsScreen';
|
||||
|
||||
const Stack = createNativeStackNavigator<LoanStackParamList>();
|
||||
|
||||
export const LoanNavigator = () => {
|
||||
return (
|
||||
<Stack.Navigator screenOptions={{ headerShown: false }}>
|
||||
<Stack.Screen name="LoanDashboard" component={LoanDashboardScreen} />
|
||||
<Stack.Screen name="LoanTypesListing" component={LoanTypesListingScreen} />
|
||||
<Stack.Screen name="LoanEligibilityCheck" component={LoanEligibilityCheckScreen} />
|
||||
<Stack.Screen name="LoanCalculator" component={LoanCalculatorScreen} />
|
||||
<Stack.Screen name="ApplyLoan" component={ApplyLoanScreen} />
|
||||
<Stack.Screen name="LoanTracking" component={LoanTrackingScreen} />
|
||||
<Stack.Screen name="ActiveLoanDetails" component={ActiveLoanDetailsScreen} />
|
||||
<Stack.Screen name="EmiPayment" component={EmiPaymentScreen} />
|
||||
<Stack.Screen name="LoanHistory" component={LoanHistoryScreen} />
|
||||
<Stack.Screen name="LoanDocuments" component={LoanDocumentsScreen} />
|
||||
</Stack.Navigator>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,204 @@
|
||||
import React from 'react';
|
||||
import { StyleSheet, View } from 'react-native';
|
||||
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
|
||||
import {
|
||||
CommonActions,
|
||||
type NavigationState,
|
||||
type PartialState,
|
||||
} from '@react-navigation/native';
|
||||
import Ionicons from '@react-native-vector-icons/ionicons';
|
||||
|
||||
import { useTheme } from '../theme';
|
||||
import { HomeNavigator } from './HomeNavigator';
|
||||
import { CardsNavigator } from './CardsNavigator';
|
||||
import { ServicesNavigator } from './ServicesNavigator';
|
||||
import { PaymentsNavigator } from './PaymentsNavigator';
|
||||
import { ProfileNavigator } from '../modules/profile/navigation/ProfileNavigator';
|
||||
import type { MainTabParamList } from './types';
|
||||
|
||||
const Tab = createBottomTabNavigator<MainTabParamList>();
|
||||
|
||||
type TabIconName =
|
||||
| 'home-outline'
|
||||
| 'home'
|
||||
| 'wallet-outline'
|
||||
| 'wallet'
|
||||
| 'grid-outline'
|
||||
| 'grid'
|
||||
| 'card-outline'
|
||||
| 'card'
|
||||
| 'person-outline'
|
||||
| 'person';
|
||||
|
||||
type TabBarIconProps = {
|
||||
color: string;
|
||||
focused: boolean;
|
||||
};
|
||||
|
||||
const TabIcon = ({
|
||||
color,
|
||||
focused,
|
||||
name,
|
||||
}: {
|
||||
color: string;
|
||||
focused: boolean;
|
||||
name: TabIconName;
|
||||
}) => {
|
||||
const activeBackground = focused ? `${color}22` : 'transparent';
|
||||
|
||||
return (
|
||||
<View style={[styles.iconFrame, { borderColor: color, backgroundColor: activeBackground }]}>
|
||||
<Ionicons name={name} size={18} color={color} />
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const HomeTabBarIcon = ({ color, focused }: TabBarIconProps) => (
|
||||
<TabIcon color={color} focused={focused} name={focused ? 'home' : 'home-outline'} />
|
||||
);
|
||||
|
||||
const PaymentsTabBarIcon = ({ color, focused }: TabBarIconProps) => (
|
||||
<TabIcon color={color} focused={focused} name={focused ? 'wallet' : 'wallet-outline'} />
|
||||
);
|
||||
|
||||
const ServicesTabBarIcon = ({ color, focused }: TabBarIconProps) => (
|
||||
<TabIcon color={color} focused={focused} name={focused ? 'grid' : 'grid-outline'} />
|
||||
);
|
||||
|
||||
const CardsTabBarIcon = ({ color, focused }: TabBarIconProps) => (
|
||||
<TabIcon color={color} focused={focused} name={focused ? 'card' : 'card-outline'} />
|
||||
);
|
||||
|
||||
const ProfileTabBarIcon = ({ color, focused }: TabBarIconProps) => (
|
||||
<TabIcon color={color} focused={focused} name={focused ? 'person' : 'person-outline'} />
|
||||
);
|
||||
|
||||
export const MainTabNavigator = () => {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<Tab.Navigator
|
||||
screenOptions={{
|
||||
headerShown: false,
|
||||
lazy: true,
|
||||
tabBarActiveTintColor: theme.colors.primary,
|
||||
tabBarInactiveTintColor: theme.colors.textMuted,
|
||||
tabBarStyle: {
|
||||
backgroundColor: theme.colors.white,
|
||||
borderTopColor: theme.colors.cardBorder,
|
||||
borderTopWidth: 1,
|
||||
height: 90,
|
||||
paddingBottom: 30,
|
||||
paddingTop: 12,
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
elevation: 20,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: -4 },
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 8,
|
||||
},
|
||||
tabBarLabelStyle: {
|
||||
fontSize: 10,
|
||||
fontWeight: '700',
|
||||
marginTop: 6,
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 0.5,
|
||||
},
|
||||
tabBarItemStyle: {
|
||||
paddingVertical: 5,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Tab.Screen
|
||||
name="Home"
|
||||
component={HomeNavigator}
|
||||
options={{
|
||||
title: 'Home',
|
||||
tabBarIcon: HomeTabBarIcon,
|
||||
}}
|
||||
/>
|
||||
<Tab.Screen
|
||||
name="Payments"
|
||||
component={PaymentsNavigator}
|
||||
options={{
|
||||
title: 'Payments',
|
||||
tabBarIcon: PaymentsTabBarIcon,
|
||||
}}
|
||||
/>
|
||||
<Tab.Screen
|
||||
name="Services"
|
||||
component={ServicesNavigator}
|
||||
options={{
|
||||
title: 'Hub',
|
||||
tabBarIcon: ServicesTabBarIcon,
|
||||
}}
|
||||
listeners={({ navigation, route }) => ({
|
||||
tabPress: (event) => {
|
||||
const state = navigation.getState();
|
||||
const focusedRoute = state.routes[state.index];
|
||||
|
||||
if (focusedRoute?.key !== route.key) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
const nestedState = (
|
||||
state.routes.find((item) => item.key === route.key) as
|
||||
| (typeof route & {
|
||||
state?: NavigationState | PartialState<NavigationState>;
|
||||
})
|
||||
| undefined
|
||||
)?.state;
|
||||
|
||||
if (
|
||||
nestedState?.type === 'stack' &&
|
||||
'key' in nestedState &&
|
||||
typeof nestedState.key === 'string'
|
||||
) {
|
||||
navigation.dispatch({
|
||||
...CommonActions.reset({
|
||||
index: 0,
|
||||
routes: [{ name: 'ServicesHub' }],
|
||||
}),
|
||||
target: nestedState.key,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
navigation.navigate('Services', { screen: 'ServicesHub' });
|
||||
},
|
||||
})}
|
||||
/>
|
||||
<Tab.Screen
|
||||
name="Cards"
|
||||
component={CardsNavigator}
|
||||
options={{
|
||||
title: 'Cards',
|
||||
tabBarIcon: CardsTabBarIcon,
|
||||
}}
|
||||
/>
|
||||
<Tab.Screen
|
||||
name="Profile"
|
||||
component={ProfileNavigator}
|
||||
options={{
|
||||
title: 'Profile',
|
||||
tabBarIcon: ProfileTabBarIcon,
|
||||
}}
|
||||
/>
|
||||
</Tab.Navigator>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
iconFrame: {
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: 8,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,44 @@
|
||||
import React from 'react';
|
||||
import { createNativeStackNavigator } from '@react-navigation/native-stack';
|
||||
import { useTheme } from '../theme';
|
||||
import type { PaymentsStackParamList } from './types';
|
||||
|
||||
import PaymentsHomeScreen from '../modules/payments/screens/PaymentsHomeScreen';
|
||||
import BeneficiariesListScreen from '../modules/payments/screens/BeneficiariesListScreen';
|
||||
import AddBeneficiaryScreen from '../modules/payments/screens/AddBeneficiaryScreen';
|
||||
import TransferTypeScreen from '../modules/payments/screens/TransferTypeScreen';
|
||||
import { PaymentFormScreen } from '../modules/payments/screens/PaymentFormScreen';
|
||||
import { PaymentConfirmationScreen } from '../modules/payments/screens/PaymentConfirmationScreen';
|
||||
import { TransactionSuccessScreen } from '../modules/payments/screens/TransactionSuccessScreen';
|
||||
|
||||
const Stack = createNativeStackNavigator<PaymentsStackParamList>();
|
||||
|
||||
export const PaymentsNavigator = () => {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<Stack.Navigator
|
||||
screenOptions={{
|
||||
headerShown: false,
|
||||
contentStyle: { backgroundColor: theme.colors.background },
|
||||
animation: 'slide_from_right',
|
||||
}}
|
||||
>
|
||||
<Stack.Screen name="PaymentsHub" component={PaymentsHomeScreen} />
|
||||
<Stack.Screen name="BeneficiariesList" component={BeneficiariesListScreen} />
|
||||
<Stack.Screen
|
||||
name="AddBeneficiary"
|
||||
component={AddBeneficiaryScreen}
|
||||
options={{ presentation: 'modal', animation: 'slide_from_bottom' }}
|
||||
/>
|
||||
<Stack.Screen name="TransferTypeSelection" component={TransferTypeScreen} />
|
||||
<Stack.Screen name="PaymentForm" component={PaymentFormScreen} />
|
||||
<Stack.Screen name="PaymentConfirmation" component={PaymentConfirmationScreen} />
|
||||
<Stack.Screen
|
||||
name="TransactionSuccess"
|
||||
component={TransactionSuccessScreen}
|
||||
options={{ gestureEnabled: false, animation: 'fade' }}
|
||||
/>
|
||||
</Stack.Navigator>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,51 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
DarkTheme,
|
||||
NavigationContainer,
|
||||
} from '@react-navigation/native';
|
||||
|
||||
import { useAppSelector } from '../app/hooks';
|
||||
import { selectAuthHydrating, selectIsAuthenticated, selectAuthRole } from '../modules/auth/store/authSelectors';
|
||||
import { useTheme } from '../theme';
|
||||
import { AuthNavigator } from './AuthNavigator';
|
||||
import { MainTabNavigator } from './MainTabNavigator';
|
||||
import { EmployeeNavigator } from './EmployeeNavigator';
|
||||
import { AgentNavigator } from './AgentNavigator';
|
||||
|
||||
export const RootNavigator = () => {
|
||||
const theme = useTheme();
|
||||
const isHydrating = useAppSelector(selectAuthHydrating);
|
||||
const isAuthenticated = useAppSelector(selectIsAuthenticated);
|
||||
const role = useAppSelector(selectAuthRole);
|
||||
|
||||
const renderAppStack = () => {
|
||||
switch (role) {
|
||||
case 'Employee':
|
||||
return <EmployeeNavigator />;
|
||||
case 'Agent':
|
||||
return <AgentNavigator />;
|
||||
case 'User':
|
||||
default:
|
||||
return <MainTabNavigator />;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<NavigationContainer
|
||||
theme={{
|
||||
...DarkTheme,
|
||||
colors: {
|
||||
...DarkTheme.colors,
|
||||
background: theme.colors.background,
|
||||
card: theme.colors.backgroundElevated,
|
||||
text: theme.colors.textPrimary,
|
||||
primary: theme.colors.accent,
|
||||
border: theme.colors.cardBorder,
|
||||
notification: theme.colors.accent,
|
||||
},
|
||||
}}
|
||||
>
|
||||
{isAuthenticated ? renderAppStack() : <AuthNavigator />}
|
||||
</NavigationContainer>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,80 @@
|
||||
import React from 'react';
|
||||
import { createNativeStackNavigator } from '@react-navigation/native-stack';
|
||||
|
||||
import DepositCalculatorScreen from '../modules/deposit/screens/DepositCalculatorScreen';
|
||||
import DepositDetailsScreen from '../modules/deposit/screens/DepositDetailsScreen';
|
||||
import DepositsOverviewScreen from '../modules/deposit/screens/DepositsOverviewScreen';
|
||||
import OpenFixedDepositScreen from '../modules/deposit/screens/OpenFixedDepositScreen';
|
||||
import OpenRecurringDepositScreen from '../modules/deposit/screens/OpenRecurringDepositScreen';
|
||||
import ServicesHubScreen from '../modules/services/screens/ServicesHubScreen';
|
||||
|
||||
// New Modules
|
||||
import ChequeServicesHubScreen from '../modules/services/screens/ChequeServicesHubScreen';
|
||||
import ChequeBookRequestScreen from '../modules/services/screens/ChequeBookRequestScreen';
|
||||
import StopPaymentScreen from '../modules/services/screens/StopPaymentScreen';
|
||||
import ChequeTrackingScreen from '../modules/services/screens/ChequeTrackingScreen';
|
||||
import CertificatesHubScreen from '../modules/services/screens/CertificatesHubScreen';
|
||||
import CertificateListScreen from '../modules/services/screens/CertificateListScreen';
|
||||
import ServiceRequestsHubScreen from '../modules/services/screens/ServiceRequestsHubScreen';
|
||||
import PositivePayScreen from '../modules/services/screens/PositivePayScreen';
|
||||
import SpecialInstructionsScreen from '../modules/services/screens/SpecialInstructionsScreen';
|
||||
import Form15G15HScreen from '../modules/services/screens/Form15G15HScreen';
|
||||
import BranchLocatorScreen from '../modules/services/screens/BranchLocatorScreen';
|
||||
import AwarenessListScreen from '../modules/awareness/screens/AwarenessListScreen';
|
||||
import AwarenessDetailScreen from '../modules/awareness/screens/AwarenessDetailScreen';
|
||||
import FinancialProtectionScreen from '../modules/schemes/screens/FinancialProtectionScreen';
|
||||
import SchemeDetailScreen from '../modules/schemes/screens/SchemeDetailScreen';
|
||||
import DeafHubScreen from '../modules/schemes/screens/DeafHubScreen';
|
||||
import DeafClaimFlowScreen from '../modules/schemes/screens/DeafClaimFlowScreen';
|
||||
import DicgcHubScreen from '../modules/schemes/screens/DicgcHubScreen';
|
||||
import SchemeEnrollmentScreen from '../modules/schemes/screens/SchemeEnrollmentScreen';
|
||||
import SchemeSuccessScreen from '../modules/schemes/screens/SchemeSuccessScreen';
|
||||
|
||||
import type { ServicesStackParamList } from './types';
|
||||
|
||||
const Stack = createNativeStackNavigator<ServicesStackParamList>();
|
||||
|
||||
export const ServicesNavigator = () => {
|
||||
return (
|
||||
<Stack.Navigator screenOptions={{ headerShown: false }} initialRouteName="ServicesHub">
|
||||
<Stack.Screen name="ServicesHub" component={ServicesHubScreen} />
|
||||
<Stack.Screen name="DepositsOverview" component={DepositsOverviewScreen} />
|
||||
<Stack.Screen name="DepositDetails" component={DepositDetailsScreen} />
|
||||
<Stack.Screen name="OpenFixedDeposit" component={OpenFixedDepositScreen} />
|
||||
<Stack.Screen name="OpenRecurringDeposit" component={OpenRecurringDepositScreen} />
|
||||
<Stack.Screen name="DepositCalculator" component={DepositCalculatorScreen} />
|
||||
|
||||
{/* Cheque Services */}
|
||||
<Stack.Screen name="ChequeServicesHub" component={ChequeServicesHubScreen} />
|
||||
<Stack.Screen name="ChequeBookRequest" component={ChequeBookRequestScreen} />
|
||||
<Stack.Screen name="StopPayment" component={StopPaymentScreen} />
|
||||
<Stack.Screen name="ChequeTracking" component={ChequeTrackingScreen} />
|
||||
|
||||
{/* Certificates */}
|
||||
<Stack.Screen name="CertificatesHub" component={CertificatesHubScreen} />
|
||||
<Stack.Screen name="CertificateList" component={CertificateListScreen} />
|
||||
|
||||
{/* Service Requests */}
|
||||
<Stack.Screen name="ServiceRequestsHub" component={ServiceRequestsHubScreen} />
|
||||
<Stack.Screen name="PositivePay" component={PositivePayScreen} />
|
||||
<Stack.Screen name="SpecialInstructions" component={SpecialInstructionsScreen} />
|
||||
<Stack.Screen name="Form15G15H" component={Form15G15HScreen} />
|
||||
|
||||
{/* Branch Locator */}
|
||||
<Stack.Screen name="BranchLocator" component={BranchLocatorScreen} />
|
||||
|
||||
{/* Cyber Security Awareness */}
|
||||
<Stack.Screen name="AwarenessList" component={AwarenessListScreen} />
|
||||
<Stack.Screen name="AwarenessDetail" component={AwarenessDetailScreen} />
|
||||
|
||||
{/* Financial Protection & Schemes */}
|
||||
<Stack.Screen name="FinancialProtectionMain" component={FinancialProtectionScreen} />
|
||||
<Stack.Screen name="SchemeDetails" component={SchemeDetailScreen} />
|
||||
<Stack.Screen name="DeafHub" component={DeafHubScreen} />
|
||||
<Stack.Screen name="DeafClaimFlow" component={DeafClaimFlowScreen} />
|
||||
<Stack.Screen name="DicgcHub" component={DicgcHubScreen} />
|
||||
<Stack.Screen name="SchemeEnrollment" component={SchemeEnrollmentScreen} />
|
||||
<Stack.Screen name="SchemeSuccess" component={SchemeSuccessScreen} />
|
||||
</Stack.Navigator>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,129 @@
|
||||
import type { NavigatorScreenParams } from '@react-navigation/native';
|
||||
|
||||
export type AuthStackParamList = {
|
||||
Login: undefined;
|
||||
};
|
||||
|
||||
import type { LoanCategory } from '../types/app';
|
||||
import type { InsuranceCategory } from '../modules/insurance/types';
|
||||
|
||||
export type LoanStackParamList = {
|
||||
LoanDashboard: undefined;
|
||||
LoanTypesListing: undefined;
|
||||
LoanEligibilityCheck: { category?: LoanCategory };
|
||||
LoanCalculator: { prefillAmount?: number; prefillRate?: number; prefillTenure?: number };
|
||||
ApplyLoan: { category: LoanCategory; eligibleAmount?: number };
|
||||
LoanTracking: undefined;
|
||||
ActiveLoanDetails: { loanId: string };
|
||||
EmiPayment: { loanId: string };
|
||||
LoanHistory: undefined;
|
||||
LoanDocuments: { applicationId?: string };
|
||||
};
|
||||
|
||||
export type HomeStackParamList = {
|
||||
HomeMain: undefined;
|
||||
MiniStatement: { accountId: string };
|
||||
AccountDetails: { accountId: string };
|
||||
ReKyc: { accountId: string };
|
||||
LoanFlow: NavigatorScreenParams<LoanStackParamList> | undefined;
|
||||
InsuranceFlow: NavigatorScreenParams<InsuranceStackParamList> | undefined;
|
||||
};
|
||||
|
||||
export type InsuranceStackParamList = {
|
||||
InsuranceDashboard: undefined;
|
||||
BuyInsurance: { category?: InsuranceCategory } | undefined;
|
||||
InsurancePolicies: undefined;
|
||||
InsurancePolicyDetails: { policyId: string };
|
||||
InsuranceRenewals: { policyId?: string } | undefined;
|
||||
InsuranceClaims: { policyId?: string } | undefined;
|
||||
InsuranceDocuments: undefined;
|
||||
InsuranceCalculator: { category?: InsuranceCategory } | undefined;
|
||||
InsuranceComparison: { planIds: string[]; category: InsuranceCategory };
|
||||
InsuranceNotifications: undefined;
|
||||
};
|
||||
|
||||
export type CardsStackParamList = {
|
||||
CardsOverview: undefined;
|
||||
CardDetails: { cardId: string };
|
||||
RequestPhysicalCard: undefined;
|
||||
ApplyCreditCard: undefined;
|
||||
};
|
||||
|
||||
export type PaymentsStackParamList = {
|
||||
PaymentsHub: undefined;
|
||||
BeneficiariesList: undefined;
|
||||
AddBeneficiary: undefined;
|
||||
TransferTypeSelection: { beneficiaryId: string };
|
||||
PaymentForm: { beneficiaryId: string; transferType: 'IMPS' | 'NEFT' | 'RTGS' };
|
||||
PaymentConfirmation: {
|
||||
beneficiaryId: string;
|
||||
transferType: 'IMPS' | 'NEFT' | 'RTGS';
|
||||
amount: number;
|
||||
remarks?: string;
|
||||
};
|
||||
TransactionSuccess: {
|
||||
transactionId: string;
|
||||
amount: number;
|
||||
beneficiaryName: string;
|
||||
isPending: boolean; // True for NEFT typically
|
||||
};
|
||||
};
|
||||
|
||||
export type ServicesStackParamList = {
|
||||
ServicesHub: undefined;
|
||||
DepositsOverview: { initialKind?: 'fd' | 'rd' } | undefined;
|
||||
DepositDetails: { depositId: string; kind: 'fd' | 'rd' };
|
||||
OpenFixedDeposit: undefined;
|
||||
OpenRecurringDeposit: undefined;
|
||||
DepositCalculator: { initialKind?: 'fd' | 'rd' } | undefined;
|
||||
ChequeServicesHub: undefined;
|
||||
ChequeBookRequest: undefined;
|
||||
StopPayment: undefined;
|
||||
ChequeTracking: undefined;
|
||||
CertificatesHub: undefined;
|
||||
CertificateList: { category: string; title: string };
|
||||
ServiceRequestsHub: undefined;
|
||||
PositivePay: undefined;
|
||||
SpecialInstructions: undefined;
|
||||
Form15G15H: undefined;
|
||||
BranchLocator: undefined;
|
||||
AwarenessList: undefined;
|
||||
AwarenessDetail: { articleId: string };
|
||||
FinancialProtectionMain: undefined;
|
||||
SchemeDetails: { schemeId: string };
|
||||
// Financial Protection Flows
|
||||
DeafHub: undefined;
|
||||
DeafClaimFlow: { depositId: string };
|
||||
DicgcHub: undefined;
|
||||
SchemeEnrollment: { schemeId: string };
|
||||
SchemeSuccess: { schemeId: string; referenceNumber: string };
|
||||
};
|
||||
|
||||
export type ProfileStackParamList = {
|
||||
ProfileMain: undefined;
|
||||
AccountManagement: undefined;
|
||||
AddAccount: undefined;
|
||||
HelpSupport: undefined;
|
||||
LegalInfo: undefined;
|
||||
EditProfile: undefined;
|
||||
LanguageSettings: undefined;
|
||||
NotificationSettings: undefined;
|
||||
PrivacySettings: undefined;
|
||||
AboutApp: undefined;
|
||||
ChangePin: undefined;
|
||||
ChangePassword: undefined;
|
||||
SecuritySettings: undefined;
|
||||
};
|
||||
|
||||
export type MainTabParamList = {
|
||||
Home: NavigatorScreenParams<HomeStackParamList>;
|
||||
Payments: NavigatorScreenParams<PaymentsStackParamList>;
|
||||
Services: NavigatorScreenParams<ServicesStackParamList>;
|
||||
Cards: NavigatorScreenParams<CardsStackParamList> | undefined;
|
||||
Profile: NavigatorScreenParams<ProfileStackParamList>;
|
||||
};
|
||||
|
||||
export type RootStackParamList = {
|
||||
Auth: undefined; // Simplified
|
||||
App: undefined; // Simplified
|
||||
};
|
||||
Reference in New Issue
Block a user