react-native-salespanda 0.3.0 → 0.4.0

package/src/screens/HomeScreen.tsx

@@ -5,7 +5,11 @@ import {
   StyleSheet,
   TouchableOpacity,
   ScrollView,
+  Image,
+  FlatList,
+  Dimensions,
 } from 'react-native';
+import { Colors } from '../constants/Colors';
 
 interface MenuItemProps {
   title: string;
@@ -25,35 +29,78 @@ const MenuItem: React.FC<MenuItemProps> = ({ title, icon, onPress }) => {
 };
 
 export default function HomeScreen() {
+  const images = [
+    'https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=1200&auto=format&fit=crop',
+    'https://images.unsplash.com/photo-1482192596544-9eb780fc7f66?q=80&w=1200&auto=format&fit=crop',
+    'https://images.unsplash.com/photo-1522071820081-009f0129c71c?q=80&w=1200&auto=format&fit=crop',
+    'https://images.unsplash.com/photo-1501785888041-af3ef285b470?q=80&w=1200&auto=format&fit=crop',
+    'https://images.unsplash.com/photo-1460353581641-37baddab0fa2?q=80&w=1200&auto=format&fit=crop',
+    'https://images.unsplash.com/photo-1496302662116-35cc4f36df92?q=80&w=1200&auto=format&fit=crop',
+  ];
+  const screenWidth = Dimensions.get('window').width;
+  const [activeIndex, setActiveIndex] = React.useState(0);
+  const flatListRef = React.useRef<any>(null);
+
+  const handleMomentumScrollEnd = (e: any) => {
+    const offsetX = e.nativeEvent.contentOffset.x;
+    const index = Math.round(offsetX / screenWidth);
+    setActiveIndex(index);
+  };
+  React.useEffect(() => {
+    const id = setInterval(() => {
+      setActiveIndex((prev) => {
+        const next = (prev + 1) % images.length;
+        if (flatListRef.current) {
+          try {
+            flatListRef.current.scrollToIndex({ index: next, animated: true });
+          } catch {
+            // ignore scroll failures
+          }
+        }
+        return next;
+      });
+    }, 2500);
+    return () => clearInterval(id);
+  }, [images.length]);
+
   return (
     <ScrollView style={styles.scrollView}>
-      {/* WhatsApp Banner */}
-      <View style={styles.banner}>
-        <View style={styles.bannerContent}>
-          <Text style={styles.bannerText}>
-            Build strong relationships,{'\n'}
-            improve relations & productivity{'\n'}
-            by having conversations on{'\n'}
-            WhatsAppppppppp.
-          </Text>
-          <TouchableOpacity style={styles.startButton}>
-            <Text style={styles.startButtonText}>Start Sharing →</Text>
-          </TouchableOpacity>
-        </View>
-        <View style={styles.whatsappIconContainer}>
-          <View style={styles.whatsappIcon}>
-            <Text style={styles.whatsappText}>📱</Text>
-          </View>
+      {/* Edge-to-edge Image Carousel */}
+      <View style={styles.carouselContainer}>
+        <FlatList
+          ref={flatListRef}
+          data={images}
+          keyExtractor={(_, idx) => `${idx}`}
+          renderItem={({ item }) => (
+            <Image
+              source={{ uri: item }}
+              style={[styles.carouselImage, { width: screenWidth }]}
+            />
+          )}
+          horizontal
+          pagingEnabled
+          showsHorizontalScrollIndicator={false}
+          onMomentumScrollEnd={handleMomentumScrollEnd}
+          getItemLayout={(_, index) => ({
+            length: screenWidth,
+            offset: screenWidth * index,
+            index,
+          })}
+        />
+        {/* Overlay Indicators at bottom of the image */}
+        <View style={styles.carouselIndicatorsOverlay}>
+          {images.map((_, idx) => (
+            <View
+              key={idx}
+              style={[
+                styles.indicator,
+                idx === activeIndex ? styles.activeIndicator : null,
+              ]}
+            />
+          ))}
         </View>
       </View>
 
-      {/* Carousel Indicators */}
-      <View style={styles.carouselIndicators}>
-        <View style={[styles.indicator, styles.activeIndicator]} />
-        <View style={styles.indicator} />
-        <View style={styles.indicator} />
-      </View>
-
       {/* Menu Grid */}
       <View style={styles.menuGrid}>
         <MenuItem title="Content Library" icon="📚" />
@@ -79,69 +126,35 @@ export default function HomeScreen() {
 const styles = StyleSheet.create({
   scrollView: {
     flex: 1,
-  },
-  banner: {
-    backgroundColor: '#4a148c',
-    margin: 16,
-    borderRadius: 16,
-    padding: 20,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    minHeight: 180,
-  },
-  bannerContent: {
-    flex: 1,
-  },
-  bannerText: {
-    color: '#fff',
-    fontSize: 14,
-    lineHeight: 20,
-    marginBottom: 16,
-  },
-  startButton: {
-    backgroundColor: 'transparent',
-    borderWidth: 1,
-    borderColor: '#fff',
-    borderRadius: 20,
-    paddingVertical: 8,
-    paddingHorizontal: 16,
-    alignSelf: 'flex-start',
-  },
-  startButtonText: {
-    color: '#fff',
-    fontSize: 12,
-    fontWeight: '600',
-  },
-  whatsappIconContainer: {
-    marginLeft: 16,
-  },
-  whatsappIcon: {
-    width: 80,
-    height: 80,
-    borderRadius: 40,
-    backgroundColor: '#25D366',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  whatsappText: {
-    fontSize: 40,
-  },
-  carouselIndicators: {
+    backgroundColor: Colors.white,
+  },
+  carouselContainer: {
+    width: '100%',
+    backgroundColor: Colors.white, // subtle backplate for image load
+    position: 'relative',
+  },
+  carouselImage: {
+    height: 200,
+    resizeMode: 'cover',
+  },
+  carouselIndicatorsOverlay: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 12,
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    marginVertical: 16,
   },
   indicator: {
     width: 8,
     height: 8,
     borderRadius: 4,
-    backgroundColor: '#d0d0d0',
+    backgroundColor: Colors.divider,
     marginHorizontal: 4,
   },
   activeIndicator: {
-    backgroundColor: '#4a148c',
+    backgroundColor: Colors.white,
     width: 24,
   },
   menuGrid: {
@@ -153,25 +166,25 @@ const styles = StyleSheet.create({
   menuItem: {
     width: '31%',
     aspectRatio: 1,
-    backgroundColor: '#fff',
+    backgroundColor: Colors.white,
     borderRadius: 16,
     padding: 12,
     marginBottom: 12,
     alignItems: 'center',
     justifyContent: 'center',
-    shadowColor: '#000',
+    shadowColor: Colors.black,
     shadowOffset: { width: 0, height: 2 },
     shadowOpacity: 0.1,
     shadowRadius: 4,
     elevation: 3,
     borderWidth: 1,
-    borderColor: '#f0f0f0',
+    borderColor: Colors.border,
   },
   iconContainer: {
     width: 50,
     height: 50,
     borderRadius: 25,
-    backgroundColor: '#f5f5f5',
+    backgroundColor: Colors.divider,
     justifyContent: 'center',
     alignItems: 'center',
     marginBottom: 8,
@@ -182,7 +195,7 @@ const styles = StyleSheet.create({
   menuItemText: {
     fontSize: 11,
     textAlign: 'center',
-    color: '#333',
+    color: Colors.black,
     fontWeight: '500',
   },
 });

package/src/screens/NotificationsScreen.tsx

@@ -1,75 +1,14 @@
-import React from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  SafeAreaView,
-  ScrollView,
-  TouchableOpacity,
-} from 'react-native';
-
-interface NotificationItemProps {
-  title: string;
-  message: string;
-  time: string;
-  unread?: boolean;
-}
-
-const NotificationItem: React.FC<NotificationItemProps> = ({
-  title,
-  message,
-  time,
-  unread = false,
-}) => {
-  return (
-    <TouchableOpacity
-      style={[styles.notificationItem, unread && styles.unreadItem]}
-    >
-      <View style={styles.notificationContent}>
-        <Text style={styles.notificationTitle}>{title}</Text>
-        <Text style={styles.notificationMessage}>{message}</Text>
-        <Text style={styles.notificationTime}>{time}</Text>
-      </View>
-      {unread && <View style={styles.unreadDot} />}
-    </TouchableOpacity>
-  );
-};
+import { View, Text, StyleSheet, ScrollView } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { Colors } from '../constants/Colors';
 
 export default function NotificationsScreen() {
   return (
-    <SafeAreaView style={styles.container}>
+    <SafeAreaView style={styles.container} edges={['bottom']}>
       <View style={styles.header}>
-        <Text style={styles.headerTitle}>Notifications</Text>
+        <Text style={styles.headerTitle}>Notification</Text>
       </View>
-      <ScrollView style={styles.scrollView}>
-        <NotificationItem
-          title="New Message"
-          message="You have a new message from support team"
-          time="2 minutes ago"
-          unread={true}
-        />
-        <NotificationItem
-          title="Update Available"
-          message="A new version of the app is available"
-          time="1 hour ago"
-          unread={true}
-        />
-        <NotificationItem
-          title="Campaign Success"
-          message="Your email campaign has been sent successfully"
-          time="3 hours ago"
-        />
-        <NotificationItem
-          title="Reminder"
-          message="Don't forget to check your proposals"
-          time="Yesterday"
-        />
-        <NotificationItem
-          title="Welcome"
-          message="Welcome to Salespanda! Get started with your first campaign"
-          time="2 days ago"
-        />
-      </ScrollView>
+      <ScrollView style={styles.scrollView}></ScrollView>
     </SafeAreaView>
   );
 }
@@ -77,59 +16,19 @@ export default function NotificationsScreen() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#f5f5f5',
+    backgroundColor: Colors.background,
   },
   header: {
-    backgroundColor: '#fff',
+    backgroundColor: Colors.white,
     padding: 16,
-    borderBottomWidth: 1,
-    borderBottomColor: '#e0e0e0',
   },
   headerTitle: {
     fontSize: 20,
     fontWeight: '600',
-    color: '#333',
+    color: Colors.black,
     textAlign: 'center',
   },
   scrollView: {
     flex: 1,
   },
-  notificationItem: {
-    backgroundColor: '#fff',
-    padding: 16,
-    marginHorizontal: 16,
-    marginTop: 16,
-    borderRadius: 12,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-  unreadItem: {
-    backgroundColor: '#f0f4ff',
-  },
-  notificationContent: {
-    flex: 1,
-  },
-  notificationTitle: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: '#333',
-    marginBottom: 4,
-  },
-  notificationMessage: {
-    fontSize: 14,
-    color: '#666',
-    marginBottom: 8,
-  },
-  notificationTime: {
-    fontSize: 12,
-    color: '#999',
-  },
-  unreadDot: {
-    width: 10,
-    height: 10,
-    borderRadius: 5,
-    backgroundColor: '#4a148c',
-    marginLeft: 12,
-  },
 });

package/src/screens/ProfileScreen.tsx

@@ -1,55 +1,14 @@
-import {
-  View,
-  Text,
-  StyleSheet,
-  SafeAreaView,
-  TouchableOpacity,
-  Image,
-} from 'react-native';
+import { View, Text, StyleSheet, ScrollView } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { Colors } from '../constants/Colors';
 
 export default function ProfileScreen() {
   return (
-    <SafeAreaView style={styles.container}>
+    <SafeAreaView style={styles.container} edges={['bottom']}>
       <View style={styles.header}>
-        <Text style={styles.headerTitle}>Profile</Text>
-      </View>
-      <View style={styles.content}>
-        <View style={styles.profileSection}>
-          <Image
-            source={{ uri: 'https://via.placeholder.com/100x100' }}
-            style={styles.avatar}
-          />
-          <Text style={styles.name}>John Doe</Text>
-          <Text style={styles.email}>john.doe@example.com</Text>
-        </View>
-
-        <View style={styles.section}>
-          <TouchableOpacity style={styles.menuItem}>
-            <Text style={styles.menuItemIcon}>👤</Text>
-            <Text style={styles.menuItemText}>Edit Profile</Text>
-          </TouchableOpacity>
-
-          <TouchableOpacity style={styles.menuItem}>
-            <Text style={styles.menuItemIcon}>⚙️</Text>
-            <Text style={styles.menuItemText}>Settings</Text>
-          </TouchableOpacity>
-
-          <TouchableOpacity style={styles.menuItem}>
-            <Text style={styles.menuItemIcon}>🔔</Text>
-            <Text style={styles.menuItemText}>Notifications</Text>
-          </TouchableOpacity>
-
-          <TouchableOpacity style={styles.menuItem}>
-            <Text style={styles.menuItemIcon}>❓</Text>
-            <Text style={styles.menuItemText}>Help & Support</Text>
-          </TouchableOpacity>
-
-          <TouchableOpacity style={styles.menuItem}>
-            <Text style={styles.menuItemIcon}>🚪</Text>
-            <Text style={styles.menuItemText}>Logout</Text>
-          </TouchableOpacity>
-        </View>
+        <Text style={styles.headerTitle}>Anyaltics</Text>
       </View>
+      <ScrollView style={styles.scrollView}></ScrollView>
     </SafeAreaView>
   );
 }
@@ -57,65 +16,19 @@ export default function ProfileScreen() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#f5f5f5',
+    backgroundColor: Colors.background,
   },
   header: {
-    backgroundColor: '#fff',
+    backgroundColor: Colors.white,
     padding: 16,
-    borderBottomWidth: 1,
-    borderBottomColor: '#e0e0e0',
   },
   headerTitle: {
     fontSize: 20,
     fontWeight: '600',
-    color: '#333',
+    color: Colors.black,
     textAlign: 'center',
   },
-  content: {
+  scrollView: {
     flex: 1,
-    padding: 16,
-  },
-  profileSection: {
-    backgroundColor: '#fff',
-    borderRadius: 12,
-    padding: 24,
-    alignItems: 'center',
-    marginBottom: 16,
-  },
-  avatar: {
-    width: 100,
-    height: 100,
-    borderRadius: 50,
-    marginBottom: 16,
-  },
-  name: {
-    fontSize: 20,
-    fontWeight: '600',
-    color: '#333',
-    marginBottom: 4,
-  },
-  email: {
-    fontSize: 14,
-    color: '#666',
-  },
-  section: {
-    backgroundColor: '#fff',
-    borderRadius: 12,
-    overflow: 'hidden',
-  },
-  menuItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 16,
-    borderBottomWidth: 1,
-    borderBottomColor: '#f0f0f0',
-  },
-  menuItemIcon: {
-    fontSize: 24,
-    marginRight: 16,
-  },
-  menuItemText: {
-    fontSize: 16,
-    color: '#333',
   },
 });