@fadyshawky/react-native-magic 1.0.6 → 1.0.8

package/CHANGELOG.md

@@ -2,7 +2,32 @@
 
 All notable changes to this project will be documented in this file.
 
-## [1.0.6] - 2024-12-24
+## [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
+- Enhanced UI components for better user experience:
+  - Improved form input styling
+  - Updated button states for better feedback
+  - Refined error message displays
+  - Added loading spinners for async actions
+  - Standardized form layouts across authentication flows
+
+### Added
+- Responsive design improvements for mobile devices
+- Visual feedback for form validation states
+- Transition animations for state changes
+- Consistent error message styling
+
+## [1.0.6] - 2024-12-25
 
 ### Added
 - Added missing password reset handlers (`resetPasswordErrorHandler` and `resetPasswordLoadingHandler`) to user slice
@@ -17,6 +42,11 @@ All notable changes to this project will be documented in this file.
   - Error handling for failed registration attempts
   - Loading states during registration process
 
+### Fixed
+- Fixed password reset error handling in user slice
+- Resolved undefined handler errors in password reset flow
+- Improved registration flow error handling
+
 ## [1.0.5] - 2024-12-23
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fadyshawky/react-native-magic",
-  "version": "1.0.6",
+  "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/components/PrimaryButton.tsx

@@ -16,7 +16,7 @@ import {
   IIconPlatformProps,
   TouchablePlatformProps,
 } from '../../../types';
-import {Colors} from '../../core/theme/colors';
+import {Colors, NewColors} from '../../core/theme/colors';
 import {CommonSizes} from '../../core/theme/commonSizes';
 import {CommonStyles} from '../../core/theme/commonStyles';
 import {IconPlatform} from './IconPlatform';
@@ -203,7 +203,7 @@ const commonIcon: ImageStyle = {
 const solidStyles = StyleSheet.create({
   button: {
     ...commonButtonStyle,
-    backgroundColor: Colors.primary100,
+    backgroundColor: NewColors.blueNormalActive,
   } as ViewStyle,
   label: {
     ...commonLabelStyle,
@@ -217,12 +217,12 @@ const solidStyles = StyleSheet.create({
 const outlineStyles = StyleSheet.create({
   button: {
     ...commonButtonStyle,
-    borderColor: Colors.primary100,
+    borderColor: NewColors.blueNormalActive,
     borderWidth: 2,
   } as ViewStyle,
   label: {
     ...commonLabelStyle,
-    color: Colors.primary100,
+    color: NewColors.blueNormalActive,
   } as TextStyle,
   icon: {
     ...commonIcon,
@@ -255,7 +255,7 @@ const borderlessStyles = StyleSheet.create({
   } as ViewStyle,
   label: {
     ...commonLabelStyle,
-    color: Colors.primary100,
+    color: NewColors.blueNormalActive,
     textDecorationLine: 'underline',
   } as TextStyle,
   icon: {
@@ -278,7 +278,7 @@ const roundedButtonStyle: ViewStyle = {
 const smallSolidStyles = StyleSheet.create({
   button: {
     ...roundedButtonStyle,
-    backgroundColor: Colors.primary100,
+    backgroundColor: NewColors.blueNormalActive,
   } as ViewStyle,
   label: {
     ...CommonStyles.normalText,

package/template/src/common/components/PrimaryTextInput.tsx

@@ -21,7 +21,7 @@ import {
   View,
   ViewStyle,
 } from 'react-native';
-import {Colors} from '../../core/theme/colors';
+import {Colors, NewColors} from '../../core/theme/colors';
 import {isIos} from '../../core/theme/commonConsts';
 import {CommonSizes} from '../../core/theme/commonSizes';
 import {CommonStyles} from '../../core/theme/commonStyles';
@@ -192,7 +192,7 @@ function getInputContainerStyle(
   }
 }
 
-const selectionColor = Colors.primary100;
+const selectionColor = NewColors.blueNormalActive;
 
 const commonInputContainer: TextStyle = {
   flexDirection: 'row',

package/template/src/common/components/RadioIcon.tsx

@@ -1,6 +1,6 @@
 import React, {FC, memo, useMemo} from 'react';
 import {StyleSheet, View, ViewStyle} from 'react-native';
-import {Colors} from '../../core/theme/colors';
+import {Colors, NewColors} from '../../core/theme/colors';
 
 interface IProps {
   isSelected: boolean;
@@ -42,14 +42,14 @@ const commonInnerCircle: ViewStyle = {
 const styles = StyleSheet.create({
   outerCircle: {
     ...commonOuterCircle,
-    borderColor: Colors.primary100,
+    borderColor: NewColors.blueNormalActive,
   } as ViewStyle,
   outerCircleSelected: {
     ...commonOuterCircle,
-    borderColor: Colors.primary100,
+    borderColor: NewColors.blueNormalActive,
   } as ViewStyle,
   innerCircle: {
     ...commonInnerCircle,
-    backgroundColor: Colors.primary100,
+    backgroundColor: NewColors.blueNormalActive,
   } as ViewStyle,
 });

package/template/src/common/components/TryAgain.tsx

@@ -6,7 +6,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {Colors} from '../../core/theme/colors';
+import {Colors, NewColors} from '../../core/theme/colors';
 import {CommonSizes} from '../../core/theme/commonSizes';
 import {CommonStyles} from '../../core/theme/commonStyles';
 import {localization} from '../localization/localization';
@@ -42,7 +42,7 @@ const styles = StyleSheet.create({
   } as TextStyle,
   description: {
     ...CommonStyles.normalText,
-    color: Colors.primary100,
+    color: NewColors.blueNormalActive,
     textAlign: 'center',
     textDecorationLine: 'underline',
   } as TextStyle,

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/MainNavigation.tsx

@@ -27,24 +27,7 @@ function AppNavigator() {
           border: '#000',
           notification: '#ff0000',
         },
-        fonts: {
-          regular: {
-            fontFamily: Fonts.regular,
-            fontWeight: 'normal',
-          },
-          medium: {
-            fontFamily: Fonts.medium,
-            fontWeight: '500',
-          },
-          bold: {
-            fontFamily: Fonts.bold,
-            fontWeight: '700',
-          },
-          heavy: {
-            fontFamily: Fonts.bold,
-            fontWeight: '900',
-          },
-        },
+        fonts: DefaultTheme.fonts,
       }}
       onReady={() => {
         routeNameRef.current = navigationRef.current?.getCurrentRoute()?.name;

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/navigation/TabBar.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {View, Text, TouchableOpacity, Image, StyleSheet} from 'react-native';
 import {CommonStyles} from '../core/theme/commonStyles';
-import {Colors} from '../core/theme/colors';
+import {Colors, NewColors} from '../core/theme/colors';
 import {
   BottomTabBarProps,
   BottomTabNavigationOptions,
@@ -89,6 +89,6 @@ const styles = StyleSheet.create({
     color: Colors.gray,
   },
   labelFocused: {
-    color: Colors.primary100,
+    color: NewColors.blueNormalActive,
   },
 });

package/template/src/screens/Login/Login.tsx

@@ -19,7 +19,7 @@ import {useInputError} from '../../common/validations/hooks/useInputError';
 import {emailValidations} from '../../common/validations/profileValidations';
 import {useAppDispatch} from '../../core/store/reduxHelpers';
 import {userLogin} from '../../core/store/user/userActions';
-import {Colors} from '../../core/theme/colors';
+import {Colors, NewColors} from '../../core/theme/colors';
 import {CommonSizes} from '../../core/theme/commonSizes';
 import {CommonStyles} from '../../core/theme/commonStyles';
 import type {RootStackParamList} from '../../navigation/types';
@@ -151,14 +151,14 @@ const styles = StyleSheet.create({
   },
   forgotPassword: {
     ...CommonStyles.normalText,
-    color: Colors.primary100,
+    color: NewColors.blueNormalActive,
     textAlign: 'right',
     marginTop: 8,
     marginBottom: 24,
   },
   registerLink: {
     ...CommonStyles.normalText,
-    color: Colors.primary100,
+    color: NewColors.blueNormalActive,
     textAlign: 'center',
     marginTop: 16,
   },

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;
+}

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} from '../../core/theme/colors';
+import {Colors, NewColors} 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: Colors.primary100,
+    color: NewColors.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} from '../../core/theme/colors';
+import {Colors, NewColors} 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: Colors.primary100,
+    color: NewColors.blueNormalActive,
     textAlign: 'center',
     marginTop: 16,
   },

package/.vscode/settings.json

@@ -1,7 +0,0 @@
-{
-    "workbench.colorCustomizations": {
-        "activityBar.background": "#342D0C",
-        "titleBar.activeBackground": "#493F10",
-        "titleBar.activeForeground": "#FCFAF0"
-    }
-}