77 lines
2.3 KiB
TypeScript
77 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import { TouchableOpacity } from 'react-native';
|
|
import { createNativeStackNavigator } from '@react-navigation/native-stack';
|
|
import Icon from 'react-native-vector-icons/Ionicons';
|
|
import { CustomersScreen, CustomerDetailsScreen, AddCustomerScreen } from '@features';
|
|
import { route, RouteParams } from '@utils';
|
|
import { useTheme } from '@theme';
|
|
|
|
export type CustomersStackParamList = Pick<
|
|
RouteParams,
|
|
'customersList' | 'customerDetails' | 'addCustomer'
|
|
>;
|
|
|
|
const Stack = createNativeStackNavigator<CustomersStackParamList>();
|
|
|
|
export const CustomersStack = () => {
|
|
const { theme: colors } = useTheme();
|
|
|
|
return (
|
|
<Stack.Navigator
|
|
screenOptions={{
|
|
headerStyle: {
|
|
backgroundColor: colors.header,
|
|
},
|
|
headerTitleStyle: {
|
|
fontSize: 17,
|
|
fontWeight: '700',
|
|
color: colors.text,
|
|
},
|
|
headerTitleAlign: 'center',
|
|
headerTintColor: colors.text,
|
|
headerShadowVisible: false,
|
|
}}>
|
|
<Stack.Screen
|
|
name={route.customersList}
|
|
component={CustomersScreen}
|
|
options={({ navigation }) => ({
|
|
headerTitle: 'Customers',
|
|
headerRight: () => (
|
|
<TouchableOpacity
|
|
onPress={() => navigation.navigate(route.addCustomer)}
|
|
style={{
|
|
marginRight: 8,
|
|
backgroundColor: colors.icon,
|
|
width: 32,
|
|
height: 32,
|
|
borderRadius: 16,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
shadowColor: colors.icon,
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.25,
|
|
shadowRadius: 3.84,
|
|
elevation: 3,
|
|
}}
|
|
activeOpacity={0.7}
|
|
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
|
|
<Icon name="add" size={20} color="#FFFFFF" />
|
|
</TouchableOpacity>
|
|
),
|
|
})}
|
|
/>
|
|
<Stack.Screen
|
|
name={route.customerDetails}
|
|
component={CustomerDetailsScreen}
|
|
options={{ headerTitle: 'Customer Details' }}
|
|
/>
|
|
<Stack.Screen
|
|
name={route.addCustomer}
|
|
component={AddCustomerScreen}
|
|
options={{ headerTitle: 'Add Customer' }}
|
|
/>
|
|
</Stack.Navigator>
|
|
);
|
|
};
|
|
|