@fadyshawky/react-native-magic 1.0.7 → 1.0.9

package/template/src/screens/home/HomeScreen.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import {
+  View,
+  StyleSheet,
+  ScrollView,
+  RefreshControl,
+  Dimensions,
+  Text,
+} from 'react-native';
+import {Colors} from '../../core/theme/colors';
+import {CommonSizes} from '../../core/theme/commonSizes';
+import {CommonStyles} from '../../core/theme/commonStyles';
+import {CarouselSection} from './components/CarouselSection';
+import {FeaturedCarousel} from './components/FeaturedCarousel';
+import {useHomeData} from './hooks/useHomeData';
+
+const {width} = Dimensions.get('window');
+
+export function HomeScreen(): JSX.Element {
+  const {
+    featuredItems,
+    trendingItems,
+    newItems,
+    recommendedItems,
+    isLoading,
+    refreshData,
+  } = useHomeData();
+
+  return (
+    <ScrollView
+      style={styles.container}
+      refreshControl={
+        <RefreshControl refreshing={isLoading} onRefresh={refreshData} />
+      }>
+      <View style={styles.content}>
+        {/* Featured Section */}
+        <View style={styles.featuredSection}>
+          <Text style={styles.sectionTitle}>Featured</Text>
+          <FeaturedCarousel items={featuredItems} />
+        </View>
+
+        {/* Trending Section */}
+        <View style={styles.carouselSection}>
+          <Text style={styles.sectionTitle}>Trending Now</Text>
+          <CarouselSection
+            items={trendingItems}
+            imageStyle={styles.trendingImage}
+          />
+        </View>
+
+        {/* New Arrivals Section */}
+        <View style={styles.carouselSection}>
+          <Text style={styles.sectionTitle}>New Arrivals</Text>
+          <CarouselSection
+            items={newItems}
+            imageStyle={styles.newArrivalsImage}
+          />
+        </View>
+
+        {/* Recommended Section */}
+        <View style={styles.carouselSection}>
+          <Text style={styles.sectionTitle}>Recommended for You</Text>
+          <CarouselSection
+            items={recommendedItems}
+            imageStyle={styles.recommendedImage}
+          />
+        </View>
+      </View>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.background,
+  },
+  content: {
+    paddingVertical: CommonSizes.spacing.medium,
+  },
+  featuredSection: {
+    marginBottom: CommonSizes.spacing.large,
+  },
+  carouselSection: {
+    marginBottom: CommonSizes.spacing.large,
+  },
+  sectionTitle: {
+    ...CommonStyles.h2_semiBold,
+    marginHorizontal: CommonSizes.spacing.large,
+    marginBottom: CommonSizes.spacing.medium,
+  },
+  trendingImage: {
+    width: width * 0.7,
+    height: 200,
+    borderRadius: CommonSizes.borderRadius.medium,
+  },
+  newArrivalsImage: {
+    width: width * 0.5,
+    height: 180,
+    borderRadius: CommonSizes.borderRadius.medium,
+  },
+  recommendedImage: {
+    width: width * 0.6,
+    height: 160,
+    borderRadius: CommonSizes.borderRadius.medium,
+  },
+});

package/template/src/screens/home/components/CarouselSection.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import {
+  Image,
+  ImageStyle,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {Colors} from '../../../core/theme/colors';
+import {CommonSizes} from '../../../core/theme/commonSizes';
+import {CarouselItem} from '../types';
+
+interface CarouselSectionProps {
+  items: CarouselItem[];
+  imageStyle?: ImageStyle;
+}
+
+export function CarouselSection({
+  items,
+  imageStyle,
+}: CarouselSectionProps): JSX.Element {
+  return (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      contentContainerStyle={styles.container}>
+      {items.map((item, index) => (
+        <TouchableOpacity
+          key={item.id}
+          style={styles.itemContainer}
+          onPress={() => item.onPress?.(item)}>
+          <Image
+            source={{uri: item.imageUrl}}
+            style={[styles.image, imageStyle]}
+          />
+          <View style={styles.textContainer}>
+            <Text style={styles.title} numberOfLines={1}>
+              {item.title}
+            </Text>
+            {item.subtitle && (
+              <Text style={styles.subtitle} numberOfLines={1}>
+                {item.subtitle}
+              </Text>
+            )}
+          </View>
+        </TouchableOpacity>
+      ))}
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: CommonSizes.spacing.large,
+  },
+  itemContainer: {
+    marginRight: CommonSizes.spacing.medium,
+  },
+  image: {
+    width: 200,
+    height: 150,
+    borderRadius: CommonSizes.borderRadius.medium,
+  },
+  textContainer: {
+    marginTop: CommonSizes.spacing.small,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: Colors.blueDarker,
+  },
+  subtitle: {
+    fontSize: 14,
+    color: Colors.blueDarker,
+    marginTop: 2,
+  },
+});

package/template/src/screens/home/components/FeaturedCarousel.tsx

@@ -0,0 +1,128 @@
+import React, {useRef, useState} from 'react';
+import {
+  Dimensions,
+  FlatList,
+  Image,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {Colors} from '../../../core/theme/colors';
+import {CommonSizes} from '../../../core/theme/commonSizes';
+import {CarouselItem} from '../types';
+
+const {width} = Dimensions.get('window');
+const ITEM_WIDTH = width * 0.85;
+
+interface FeaturedCarouselProps {
+  items: CarouselItem[];
+}
+
+export function FeaturedCarousel({items}: FeaturedCarouselProps): JSX.Element {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const flatListRef = useRef<FlatList>(null);
+
+  const renderItem = ({item}: {item: CarouselItem}) => (
+    <TouchableOpacity
+      style={styles.itemContainer}
+      onPress={() => item.onPress?.(item)}>
+      <Image source={{uri: item.imageUrl}} style={styles.image} />
+      <View style={styles.overlay}>
+        <Text style={styles.title}>{item.title}</Text>
+        {item.subtitle && <Text style={styles.subtitle}>{item.subtitle}</Text>}
+      </View>
+    </TouchableOpacity>
+  );
+
+  const renderDot = (index: number) => (
+    <View
+      key={index}
+      style={[styles.dot, index === activeIndex && styles.activeDot]}
+    />
+  );
+
+  const handleScroll = (event: any) => {
+    const slideSize = event.nativeEvent.layoutMeasurement.width;
+    const index = event.nativeEvent.contentOffset.x / slideSize;
+    const roundIndex = Math.round(index);
+    setActiveIndex(roundIndex);
+  };
+
+  return (
+    <View>
+      <FlatList
+        ref={flatListRef}
+        data={items}
+        renderItem={renderItem}
+        horizontal
+        pagingEnabled
+        showsHorizontalScrollIndicator={false}
+        onScroll={handleScroll}
+        snapToAlignment="center"
+        decelerationRate="fast"
+        snapToInterval={ITEM_WIDTH}
+        contentContainerStyle={styles.listContainer}
+        getItemLayout={(_, index) => ({
+          length: ITEM_WIDTH,
+          offset: ITEM_WIDTH * index,
+          index,
+        })}
+      />
+      <View style={styles.pagination}>
+        {items.map((_, index) => renderDot(index))}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  listContainer: {
+    paddingHorizontal: (width - ITEM_WIDTH) / 2,
+  },
+  itemContainer: {
+    width: ITEM_WIDTH,
+    height: 250,
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+    borderRadius: CommonSizes.borderRadius.large,
+  },
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    borderRadius: CommonSizes.borderRadius.large,
+    padding: CommonSizes.spacing.large,
+    justifyContent: 'flex-end',
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: '600',
+    color: Colors.white,
+  },
+  subtitle: {
+    fontSize: 16,
+    color: Colors.white,
+    marginTop: CommonSizes.spacing.small,
+  },
+  pagination: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: CommonSizes.spacing.medium,
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: Colors.gray,
+    marginHorizontal: 4,
+  },
+  activeDot: {
+    backgroundColor: Colors.blueDarker,
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+  },
+});

package/template/src/screens/home/hooks/useHomeData.ts

@@ -0,0 +1,60 @@
+import {useState, useEffect} from 'react';
+import {CarouselItem} from '../types';
+
+export function useHomeData() {
+  const [isLoading, setIsLoading] = useState(false);
+  const [featuredItems, setFeaturedItems] = useState<CarouselItem[]>([]);
+  const [trendingItems, setTrendingItems] = useState<CarouselItem[]>([]);
+  const [newItems, setNewItems] = useState<CarouselItem[]>([]);
+  const [recommendedItems, setRecommendedItems] = useState<CarouselItem[]>([]);
+
+  const fetchData = async () => {
+    setIsLoading(true);
+    try {
+      // Simulate API calls
+      // Replace with actual API calls in production
+      setFeaturedItems([
+        {
+          id: '1',
+          title: 'Featured Item 1',
+          subtitle: 'Discover amazing features',
+          imageUrl: 'https://picsum.photos/800/400',
+        },
+        // Add more items...
+      ]);
+
+      setTrendingItems([
+        {
+          id: '1',
+          title: 'Trending Item 1',
+          subtitle: 'Hot right now',
+          imageUrl: 'https://picsum.photos/700/400',
+        },
+        // Add more items...
+      ]);
+
+      // Similar for newItems and recommendedItems...
+    } catch (error) {
+      console.error('Error fetching home data:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const refreshData = () => {
+    fetchData();
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  return {
+    isLoading,
+    featuredItems,
+    trendingItems,
+    newItems,
+    recommendedItems,
+    refreshData,
+  };
+}

package/template/src/screens/home/types.ts

@@ -0,0 +1,7 @@
+export interface CarouselItem {
+  id: string;
+  title: string;
+  subtitle?: string;
+  imageUrl: string;
+  onPress?: (item: CarouselItem) => void;
+}

package/template/src/screens/registration/RegistrationScreen.tsx

@@ -21,7 +21,7 @@ import {
 } from '../../common/validations/profileValidations';
 import {useAppDispatch} from '../../core/store/reduxHelpers';
 import {userRegister} from '../../core/store/user/userActions';
-import {Colors, NewColors} from '../../core/theme/colors';
+import {Colors} from '../../core/theme/colors';
 import {CommonSizes} from '../../core/theme/commonSizes';
 import {CommonStyles} from '../../core/theme/commonStyles';
 import type {RootStackParamList} from '../../navigation/types';
@@ -191,7 +191,7 @@ const styles = StyleSheet.create({
   },
   loginLink: {
     ...CommonStyles.normalText,
-    color: NewColors.blueNormalActive,
+    color: Colors.blueNormalActive,
     textAlign: 'center',
     marginTop: 16,
   },

package/template/src/screens/resetPassword/ForgotPasswordScreen.tsx

@@ -17,7 +17,7 @@ import {useInputError} from '../../common/validations/hooks/useInputError';
 import {emailValidations} from '../../common/validations/profileValidations';
 import {useAppDispatch} from '../../core/store/reduxHelpers';
 import {resetPassword} from '../../core/store/user/userActions';
-import {Colors, NewColors} from '../../core/theme/colors';
+import {Colors} from '../../core/theme/colors';
 import {CommonSizes} from '../../core/theme/commonSizes';
 import {CommonStyles} from '../../core/theme/commonStyles';
 import type {RootStackParamList} from '../../navigation/types';
@@ -122,7 +122,7 @@ const styles = StyleSheet.create({
   },
   loginLink: {
     ...CommonStyles.normalText,
-    color: NewColors.blueNormalActive,
+    color: Colors.blueNormalActive,
     textAlign: 'center',
     marginTop: 16,
   },

package/template/src/utils/stringBuilder.js

@@ -0,0 +1,25 @@
+// Initializes a new instance of the StringBuilder class
+// and appends the given value if supplied
+function StringBuilder(value) {
+  this.strings = new Array('');
+  this.append(value);
+}
+
+// Appends the given value to the end of this instance.
+StringBuilder.prototype.append = function (value) {
+  if (value) {
+    this.strings.push(value);
+  }
+};
+
+// Clears the string buffer
+StringBuilder.prototype.clear = function () {
+  this.strings.length = 1;
+};
+
+// Converts this instance to a String.
+StringBuilder.prototype.toString = function () {
+  return this.strings.join('');
+};
+
+export default StringBuilder;