react-native-salespanda 0.4.0 → 0.4.2

package/src/index.tsx

@@ -28,6 +28,12 @@ export {
 } from './config/SalespandaConfig';
 export type { SalespandaConfig } from './config/SalespandaConfig';
 
+// ============================================
+// FLAVOR CONFIGURATION
+// ============================================
+export { getFlavorConfig } from './config/FlavorConfig';
+export { default as FlavorConfig } from './config/FlavorConfig';
+
 // ============================================
 // NAVIGATION COMPONENTS
 // ============================================

package/src/navigation/AppNavigator.tsx

@@ -1,4 +1,5 @@
 import { NavigationContainer } from '@react-navigation/native';
+import { StyleSheet } from 'react-native';
 import BottomTabNavigator from './BottomTabNavigator';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { Colors } from '../constants/Colors';
@@ -6,12 +7,16 @@ import { Colors } from '../constants/Colors';
 export default function AppNavigator() {
   return (
     <NavigationContainer>
-      <SafeAreaView
-        style={{ flex: 1, backgroundColor: Colors.background }}
-        edges={['bottom', 'top']}
-      >
+      <SafeAreaView style={styles.container} edges={['bottom', 'top']}>
         <BottomTabNavigator />
       </SafeAreaView>
     </NavigationContainer>
   );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.background,
+  },
+});

package/src/navigation/BottomTabNavigator.tsx

@@ -1,5 +1,5 @@
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import { Image, View } from 'react-native';
+import { Image, View, StyleSheet } from 'react-native';
 import HomeScreen from '../screens/HomeScreen';
 import NotificationsScreen from '../screens/NotificationsScreen';
 import ReportsScreen from '../screens/ReportsScreen';
@@ -22,59 +22,48 @@ import CRMScreen from '../screens/CRMScreen';
 
 const Tab = createBottomTabNavigator();
 
-export default function BottomTabNavigator() {
-  const renderImageIcon =
-    (inactive: any, active: any) =>
-    ({ focused, size }: { focused: boolean; size: number }) => {
-      if (focused) {
-        return (
-          <View
-            style={{
-              width: 48,
-              height: 48,
-              borderRadius: 24,
-              alignItems: 'center',
-              justifyContent: 'center',
-              borderWidth: 4,
-              borderColor: Colors.white,
-              transform: [{ translateY: -6 }],
-            }}
-          >
-            <Image
-              source={active}
-              resizeMode="contain"
-              style={{ width: 42, height: 42, tintColor: Colors.primary }}
-            />
-          </View>
-        );
-      }
+interface TabIconProps {
+  focused: boolean;
+  size: number;
+}
+
+interface ImageIconProps {
+  inactive: any;
+  active: any;
+}
+
+function ImageIcon({ inactive, active }: ImageIconProps) {
+  return ({ focused, size }: TabIconProps) => {
+    if (focused) {
       return (
-        <Image
-          source={inactive}
-          resizeMode="contain"
-          style={{ width: size, height: size, tintColor: Colors.black30 }}
-        />
+        <View style={styles.activeIconContainer}>
+          <Image
+            source={active}
+            resizeMode="contain"
+            style={styles.activeIcon}
+          />
+        </View>
       );
-    };
+    }
+    return (
+      <Image
+        source={inactive}
+        resizeMode="contain"
+        style={[styles.inactiveIcon, { width: size, height: size }]}
+      />
+    );
+  };
+}
 
+export default function BottomTabNavigator() {
   return (
-    <SafeAreaView
-      style={{ flex: 1, backgroundColor: Colors.background }}
-      edges={['bottom']}
-    >
+    <SafeAreaView style={styles.container} edges={['bottom']}>
       <Tab.Navigator
         screenOptions={{
           headerShown: false,
           sceneStyle: { backgroundColor: Colors.background },
           tabBarShowLabel: false,
-          tabBarStyle: {
-            borderTopWidth: 1,
-            borderTopColor: Colors.border,
-            backgroundColor: Colors.white,
-            paddingBottom: 10,
-            paddingTop: 8,
-            height: 64,
-          },
+          tabBarStyle: styles.tabBar,
           tabBarItemStyle: { overflow: 'visible' },
         }}
       >
@@ -82,7 +71,10 @@ export default function BottomTabNavigator() {
           name="Home"
           component={HomeScreen}
           options={{
-            tabBarIcon: renderImageIcon(homeIcon, homeIconActive),
+            tabBarIcon: ImageIcon({
+              inactive: homeIcon,
+              active: homeIconActive,
+            }),
             headerShown: false,
           }}
         />
@@ -90,34 +82,73 @@ export default function BottomTabNavigator() {
           name="CRM"
           component={CRMScreen}
           options={{
-            tabBarIcon: renderImageIcon(crmIcon, crmIconActive),
+            tabBarIcon: ImageIcon({ inactive: crmIcon, active: crmIconActive }),
           }}
         />
         <Tab.Screen
           name="Reports"
           component={ReportsScreen}
           options={{
-            tabBarIcon: renderImageIcon(diaryIcon, diaryIconActive),
+            tabBarIcon: ImageIcon({
+              inactive: diaryIcon,
+              active: diaryIconActive,
+            }),
           }}
         />
         <Tab.Screen
           name="Notifications"
           component={NotificationsScreen}
           options={{
-            tabBarIcon: renderImageIcon(
-              notificationIcon,
-              notificationIconActive
-            ),
+            tabBarIcon: ImageIcon({
+              inactive: notificationIcon,
+              active: notificationIconActive,
+            }),
           }}
         />
         <Tab.Screen
           name="Profile"
           component={ProfileScreen}
           options={{
-            tabBarIcon: renderImageIcon(analyticsIcon, analyticsIconActive),
+            tabBarIcon: ImageIcon({
+              inactive: analyticsIcon,
+              active: analyticsIconActive,
+            }),
           }}
         />
       </Tab.Navigator>
     </SafeAreaView>
   );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.background,
+  },
+  tabBar: {
+    borderTopWidth: 1,
+    borderTopColor: Colors.border,
+    backgroundColor: Colors.white,
+    paddingBottom: 10,
+    paddingTop: 8,
+    height: 64,
+  },
+  activeIconContainer: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 4,
+    borderColor: Colors.white,
+    transform: [{ translateY: -6 }],
+  },
+  activeIcon: {
+    width: 42,
+    height: 42,
+    tintColor: Colors.primary,
+  },
+  inactiveIcon: {
+    tintColor: Colors.black30,
+  },
+});

package/src/navigation/DrawerNavigator.tsx

@@ -38,9 +38,12 @@ const DrawerItem: React.FC<DrawerItemProps> = ({
   );
 };
 
-function CustomDrawerContent(props: any) {
-  const { navigation } = props;
+interface CustomDrawerContentProps {
+  navigation: any;
+  state?: any;
+}
 
+function CustomDrawerContent({ navigation }: CustomDrawerContentProps) {
   const [expanded, setExpanded] = React.useState<Record<string, boolean>>({
     'Campaign': false,
     'Sales WAR Room': false,
@@ -131,7 +134,7 @@ function CustomDrawerContent(props: any) {
                 onPress={() => toggle(group.label)}
                 activeOpacity={0.7}
               >
-                <Text style={[styles.drawerLabel, { flex: 1 }]}>
+                <Text style={[styles.drawerLabel, styles.flexOne]}>
                   {group.label}
                 </Text>
                 <Text style={styles.chevron}>{isOpen ? '▾' : '▸'}</Text>
@@ -156,10 +159,14 @@ function CustomDrawerContent(props: any) {
   );
 }
 
+function renderDrawerContent(props: any) {
+  return <CustomDrawerContent navigation={props.navigation} />;
+}
+
 export default function DrawerNavigator() {
   return (
     <Drawer.Navigator
-      drawerContent={(props) => <CustomDrawerContent {...props} />}
+      drawerContent={renderDrawerContent}
       screenOptions={{
         headerShown: true,
         drawerType: 'slide',
@@ -288,4 +295,7 @@ const styles = StyleSheet.create({
     color: Colors.white,
     fontWeight: '500',
   },
+  flexOne: {
+    flex: 1,
+  },
 });

package/src/screens/CRMScreen.tsx

@@ -8,7 +8,7 @@ export default function CRMScreen() {
       <View style={styles.header}>
         <Text style={styles.headerTitle}>CRM</Text>
       </View>
-      <ScrollView style={styles.scrollView}></ScrollView>
+      <ScrollView style={styles.scrollView} />
     </SafeAreaView>
   );
 }

package/src/screens/NotificationsScreen.tsx

@@ -8,7 +8,7 @@ export default function NotificationsScreen() {
       <View style={styles.header}>
         <Text style={styles.headerTitle}>Notification</Text>
       </View>
-      <ScrollView style={styles.scrollView}></ScrollView>
+      <ScrollView style={styles.scrollView} />
     </SafeAreaView>
   );
 }

package/src/screens/ProfileScreen.tsx

@@ -8,7 +8,7 @@ export default function ProfileScreen() {
       <View style={styles.header}>
         <Text style={styles.headerTitle}>Anyaltics</Text>
       </View>
-      <ScrollView style={styles.scrollView}></ScrollView>
+      <ScrollView style={styles.scrollView} />
     </SafeAreaView>
   );
 }

package/src/screens/ReportsScreen.tsx

@@ -8,7 +8,7 @@ export default function NotificationsScreen() {
       <View style={styles.header}>
         <Text style={styles.headerTitle}>Reports</Text>
       </View>
-      <ScrollView style={styles.scrollView}></ScrollView>
+      <ScrollView style={styles.scrollView} />
     </SafeAreaView>
   );
 }