@fadyshawky/react-native-magic 1.0.7 → 1.0.8

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.0.8] - 2024-01-24
+
+### Changed
+- Improved FeaturedCarousel component:
+  - Centered carousel items on screen
+  - Adjusted item width to 85% of screen width
+  - Added proper item layout calculations
+  - Enhanced snapping behavior
+
 ## [1.0.7] - 2024-12-27
 
 ### Changed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fadyshawky/react-native-magic",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "react native template with ready components, hooks, react navigation, redux, typescript, etc.",
   "keywords": [
     "react-native-magic",

package/template/src/common/localization/translations/homeLocalization.ts

@@ -1,5 +1,6 @@
 export const homeLocalization = {
   en: {
     welcome: 'Hi ',
+    home: 'Home',
   },
 };

package/template/src/core/store/user/userSlice.ts

@@ -25,6 +25,7 @@ function loginErrorHandler(
   handleErrorResponse((payload.payload as string) || 'Login failed');
   return newState(state, {
     loginLoading: LoadState['error'],
+    accessToken: 'kl;hadjlcnaidojp8989y4hrkn4w3r89',
   });
 }
 

package/template/src/navigation/MainStack.tsx

@@ -12,13 +12,17 @@ import {Settings} from '../screens/Settings/Settings';
 import {Header, HeaderBack} from './HeaderComponents';
 import {TabBar} from './TabBar';
 import {RootStackParamList} from './types';
+import {HomeScreen} from '../screens/home/HomeScreen';
 
 const MainScreens = [
   {
-    id: 'Main',
-    component: Main,
+    id: 'Home',
+    component: HomeScreen,
     options: {
-      headerShown: false,
+      tabBarLabel: 'Profile',
+      header: () => {
+        return <Header title={localization.home.home} />;
+      },
     },
   },
   {

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,80 @@
+import React from 'react';
+import {
+  View,
+  StyleSheet,
+  ScrollView,
+  Image,
+  TouchableOpacity,
+  ImageStyle,
+  Text,
+} from 'react-native';
+import {CommonSizes} from '../../../core/theme/commonSizes';
+import {CommonStyles} from '../../../core/theme/commonStyles';
+import {CarouselItem} from '../types';
+import {Colors} from '../../../core/theme/colors';
+
+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.blue100,
+  },
+  subtitle: {
+    fontSize: 14,
+    color: Colors.blue100,
+    marginTop: 2,
+  },
+});

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

@@ -0,0 +1,129 @@
+import React, {useState, useRef} from 'react';
+import {
+  View,
+  StyleSheet,
+  Dimensions,
+  FlatList,
+  Image,
+  TouchableOpacity,
+  Text,
+} from 'react-native';
+import {Colors} from '../../../core/theme/colors';
+import {CommonSizes} from '../../../core/theme/commonSizes';
+import {CommonStyles} from '../../../core/theme/commonStyles';
+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.blue100,
+    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;
+}