@fadyshawky/react-native-magic 2.0.2 → 2.0.4

package/package.json

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

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 {PrimaryColors} from '../../core/theme/colors';
 
 interface IProps {
   isSelected: boolean;
@@ -41,14 +41,14 @@ const commonInnerCircle: ViewStyle = {
 const styles = StyleSheet.create({
   outerCircle: {
     ...commonOuterCircle,
-    borderColor: Colors.blueNormalActive,
+    borderColor: PrimaryColors.PlatinateBlue_700,
   } as ViewStyle,
   outerCircleSelected: {
     ...commonOuterCircle,
-    borderColor: Colors.blueNormalActive,
+    borderColor: PrimaryColors.PlatinateBlue_700,
   } as ViewStyle,
   innerCircle: {
     ...commonInnerCircle,
-    backgroundColor: Colors.blueNormalActive,
+    backgroundColor: PrimaryColors.PlatinateBlue_700,
   } as ViewStyle,
 });

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

@@ -59,8 +59,8 @@ export const SearchBar: React.FC<SearchBarProps> = ({
   };
 
   const containerStyle: ViewStyle = {
-    backgroundColor: `${theme.colors.white}20`,
-    borderColor: theme.colors.mutedLavender30,
+    backgroundColor: `${theme.colors.grayScale_0}20`,
+    borderColor: theme.colors.grayScale_25,
   };
 
   // Set keyboard language specific properties
@@ -111,14 +111,14 @@ export const SearchBar: React.FC<SearchBarProps> = ({
         containerStyle,
         style as ViewStyle,
         {
-          backgroundColor: theme.colors.surface,
+          backgroundColor: theme.colors.grayScale_0,
           ...createThemedStyles(theme).dropShadow,
         },
       ]}>
       <Icon
         name="search"
         size={20}
-        color={theme.colors.mutedLavender}
+        color={theme.colors.grayScale_50}
         style={styles.searchIcon}
       />
       <TextInput
@@ -133,7 +133,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({
           inputStyle as TextStyle,
         ]}
         placeholder={placeholder || t('search', 'common')}
-        placeholderTextColor={`${theme.colors.mutedLavender}80`}
+        placeholderTextColor={`${theme.colors.grayScale_50}80`}
         value={value}
         onChangeText={onChangeText}
         autoCapitalize="none"
@@ -146,7 +146,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({
           <Icon
             name="close-circle"
             size={20}
-            color={theme.colors.mutedLavender}
+            color={theme.colors.grayScale_50}
           />
         </TouchableOpacity>
       )}

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

@@ -52,7 +52,7 @@ const Stepper: React.FC<StepperProps> = ({
                   isActive && styles.circleActive,
                 ]}>
                 {isCompleted ? (
-                  <Image source={ImageResources.complete} style={styles.icon} />
+                  <Image source={0} style={styles.icon} />
                 ) : (
                   <Text style={styles.stepNumber}>{index + 1}</Text>
                 )}

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

@@ -6,7 +6,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {Colors} from '../../core/theme/colors';
+import {PrimaryColors} from '../../core/theme/colors';
 import {CommonSizes} from '../../core/theme/commonSizes';
 import {CommonStyles} from '../../core/theme/commonStyles';
 import {localization} from '../localization/localization';
@@ -38,11 +38,11 @@ const styles = StyleSheet.create({
   title: {
     ...CommonStyles.normalText,
     textAlign: 'center',
-    marginBottom: CommonSizes.spacing.extraSmall,
+    marginBottom: CommonSizes.spacing.xSmall,
   } as TextStyle,
   description: {
     ...CommonStyles.normalText,
-    color: Colors.blueNormalActive,
+    color: PrimaryColors.PlatinateBlue_700,
     textAlign: 'center',
     textDecorationLine: 'underline',
   } as TextStyle,

package/template/src/navigation/MainStack.tsx

@@ -25,7 +25,7 @@ const MainScreens = [
 
 const AppStack = [
   {
-    id: 'Home',
+    id: 'Main',
     component: MainTabs,
     options: {
       headerShown: false,
@@ -45,7 +45,7 @@ const Tab = createBottomTabNavigator();
 function MainTabs() {
   return (
     <Tab.Navigator
-      initialRouteName="Main"
+      initialRouteName="Home"
       tabBar={props => <TabBar {...props} />}>
       {MainScreens.map(s => (
         <Tab.Screen

package/template/src/navigation/TabBar.tsx

@@ -1,13 +1,13 @@
 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 {
   BottomTabBarProps,
   BottomTabNavigationOptions,
 } from '@react-navigation/bottom-tabs';
 import {ImageSourcePropType} from 'react-native';
 import {toString} from 'lodash';
+import {NaturalColors, PrimaryColors} from '../core/theme/colors';
 
 interface TabBarOptions extends BottomTabNavigationOptions {
   selectedIcon: ImageSourcePropType;
@@ -86,9 +86,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   label: {
-    color: Colors.gray,
+    color: NaturalColors.grayScale_50,
   },
   labelFocused: {
-    color: Colors.blueNormalActive,
+    color: PrimaryColors.PlatinateBlue_700,
   },
 });

package/template/src/navigation/TopTabBar.tsx

@@ -1,13 +1,13 @@
 import {Animated, View, TouchableOpacity} from 'react-native';
-import {Colors} from '../core/theme/colors';
 import {CommonStyles, screenWidth} from '../core/theme/commonStyles';
+import {NaturalColors} from '../core/theme/colors';
 
 export function TopBar({state, descriptors, navigation, position}: any) {
   return (
     <View
       style={{
         flexDirection: 'row',
-        backgroundColor: Colors.gray,
+        backgroundColor: NaturalColors.grayScale_50,
         width: screenWidth - 60,
         alignSelf: 'center',
         height: 40,
@@ -56,7 +56,9 @@ export function TopBar({state, descriptors, navigation, position}: any) {
               flex: 1,
               alignItems: 'center',
               justifyContent: 'center',
-              backgroundColor: isFocused ? Colors.white : Colors.gray,
+              backgroundColor: isFocused
+                ? NaturalColors.grayScale_0
+                : NaturalColors.grayScale_50,
               borderRadius: 20,
             }}>
             <Animated.Text

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

@@ -1,13 +1,13 @@
 import React from 'react';
 import {
-  View,
-  StyleSheet,
-  ScrollView,
-  RefreshControl,
   Dimensions,
+  RefreshControl,
+  ScrollView,
+  StyleSheet,
   Text,
+  View,
 } from 'react-native';
-import {Colors} from '../../core/theme/colors';
+import {NaturalColors} from '../../core/theme/colors';
 import {CommonSizes} from '../../core/theme/commonSizes';
 import {CommonStyles} from '../../core/theme/commonStyles';
 import {CarouselSection} from './components/CarouselSection';
@@ -73,7 +73,7 @@ export function HomeScreen(): JSX.Element {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: Colors.background,
+    backgroundColor: NaturalColors.grayScale_0,
   },
   content: {
     paddingVertical: CommonSizes.spacing.medium,

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

@@ -8,9 +8,9 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {Colors} from '../../../core/theme/colors';
 import {CommonSizes} from '../../../core/theme/commonSizes';
 import {CarouselItem} from '../types';
+import {PrimaryColors} from '../../../core/theme/colors';
 
 interface CarouselSectionProps {
   items: CarouselItem[];
@@ -69,11 +69,11 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 16,
     fontWeight: '600',
-    color: Colors.blueDarker,
+    color: PrimaryColors.PlatinateBlue_700,
   },
   subtitle: {
     fontSize: 14,
-    color: Colors.blueDarker,
+    color: PrimaryColors.PlatinateBlue_700,
     marginTop: 2,
   },
 });

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

@@ -8,9 +8,9 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {Colors} from '../../../core/theme/colors';
 import {CommonSizes} from '../../../core/theme/commonSizes';
 import {CarouselItem} from '../types';
+import {NaturalColors, PrimaryColors} from '../../../core/theme/colors';
 
 const {width} = Dimensions.get('window');
 const ITEM_WIDTH = width * 0.85;
@@ -99,11 +99,11 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 20,
     fontWeight: '600',
-    color: Colors.white,
+    color: NaturalColors.grayScale_0,
   },
   subtitle: {
     fontSize: 16,
-    color: Colors.white,
+    color: NaturalColors.grayScale_0,
     marginTop: CommonSizes.spacing.small,
   },
   pagination: {
@@ -116,11 +116,11 @@ const styles = StyleSheet.create({
     width: 8,
     height: 8,
     borderRadius: 4,
-    backgroundColor: Colors.gray,
+    backgroundColor: NaturalColors.grayScale_50,
     marginHorizontal: 4,
   },
   activeDot: {
-    backgroundColor: Colors.blueDarker,
+    backgroundColor: PrimaryColors.PlatinateBlue_700,
     width: 12,
     height: 12,
     borderRadius: 6,

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

@@ -21,10 +21,10 @@ 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 {CommonSizes} from '../../core/theme/commonSizes';
 import {CommonStyles} from '../../core/theme/commonStyles';
 import type {RootStackParamList} from '../../navigation/types';
+import {NaturalColors, PrimaryColors} from '../../core/theme/colors';
 
 export default function RegistrationScreen(): JSX.Element {
   const dispatch = useAppDispatch();
@@ -178,7 +178,7 @@ export default function RegistrationScreen(): JSX.Element {
 const styles = StyleSheet.create({
   container: {
     flexGrow: 1,
-    backgroundColor: Colors.white,
+    backgroundColor: NaturalColors.grayScale_0,
     borderTopRightRadius: CommonSizes.spacing.large,
     borderTopLeftRadius: CommonSizes.spacing.large,
   },
@@ -191,7 +191,7 @@ const styles = StyleSheet.create({
   },
   loginLink: {
     ...CommonStyles.normalText,
-    color: Colors.blueNormalActive,
+    color: PrimaryColors.PlatinateBlue_700,
     textAlign: 'center',
     marginTop: 16,
   },

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

@@ -17,10 +17,10 @@ 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 {CommonSizes} from '../../core/theme/commonSizes';
 import {CommonStyles} from '../../core/theme/commonStyles';
 import type {RootStackParamList} from '../../navigation/types';
+import {NaturalColors, PrimaryColors} from '../../core/theme/colors';
 
 export default function ForgotPasswordScreen(): JSX.Element {
   const dispatch = useAppDispatch();
@@ -104,7 +104,7 @@ export default function ForgotPasswordScreen(): JSX.Element {
 const styles = StyleSheet.create({
   container: {
     flexGrow: 1,
-    backgroundColor: Colors.white,
+    backgroundColor: NaturalColors.grayScale_0,
     borderTopRightRadius: CommonSizes.spacing.large,
     borderTopLeftRadius: CommonSizes.spacing.large,
   },
@@ -122,7 +122,7 @@ const styles = StyleSheet.create({
   },
   loginLink: {
     ...CommonStyles.normalText,
-    color: Colors.blueNormalActive,
+    color: PrimaryColors.PlatinateBlue_700,
     textAlign: 'center',
     marginTop: 16,
   },