@fadyshawky/react-native-magic 2.0.0 → 2.0.1

package/package.json

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

package/template/App.tsx

@@ -4,20 +4,17 @@
  *
  * @format
  */
-import React, {useEffect} from 'react';
-import {ImageBackground, LogBox, SafeAreaView, StatusBar} from 'react-native';
+import React from 'react';
+import {LogBox, SafeAreaView, StatusBar} from 'react-native';
 import {SheetProvider} from 'react-native-actions-sheet';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import {Provider} from 'react-redux';
 import {PersistGate} from 'redux-persist/integration/react';
 import {LocalizationProvider} from './src/common/localization/LocalizationProvider';
-import {
-  Languages,
-  DEFAULT_LANGUAGE,
-} from './src/common/localization/localization';
+import {DEFAULT_LANGUAGE} from './src/common/localization/localization';
 import {persistor, store} from './src/core/store/store';
-import AppNavigator from './src/navigation/MainNavigation';
 import {ThemeProvider, useTheme} from './src/core/theme/ThemeProvider';
+import AppNavigator from './src/navigation/MainNavigation';
 
 LogBox.ignoreAllLogs();
 

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

@@ -61,8 +61,8 @@ export const Card = ({
 
 const styles = StyleSheet.create({
   card: {
-    padding: CommonSizes.spacing.medium,
-    borderRadius: CommonSizes.borderRadius.large,
+    padding: CommonSizes.spacing.md,
+    borderRadius: CommonSizes.borderRadius.lg,
     alignItems: 'center',
     justifyContent: 'flex-start',
     gap: scaleHeight(10),
@@ -71,7 +71,7 @@ const styles = StyleSheet.create({
   },
   blurContainer: {
     flex: 1,
-    padding: CommonSizes.spacing.medium,
+    padding: CommonSizes.spacing.md,
     alignItems: 'center',
     justifyContent: 'center',
   },
@@ -80,9 +80,9 @@ const styles = StyleSheet.create({
     height: scaleHeight(100),
   },
   title: {
-    fontSize: CommonSizes.fontSize.body2,
+    fontSize: CommonSizes.font.medium,
     textAlign: 'center',
-    marginBottom: CommonSizes.spacing.small,
+    marginBottom: CommonSizes.spacing.sm,
   },
   dotsContainer: {
     flexDirection: 'row',

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

@@ -22,7 +22,7 @@ const styles = StyleSheet.create({
     ...CommonStyles.normalText,
     fontWeight: '600',
     textAlign: 'center',
-    marginBottom: CommonSizes.spacing.extraSmall,
+    marginBottom: CommonSizes.spacing.xs,
   } as TextStyle,
   description: {
     ...CommonStyles.normalText,

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

@@ -87,7 +87,7 @@ export const ImageCropPickerButton: FC<IProps> = memo(
         style={style}
         iconStyle={iconStyle}
         imageStyle={imageStyle}
-        onPressIn={onPress}
+        onPress={onPress}
         backgroundImage={image}
         icon={icon}
         disabled={disabled}

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

@@ -61,7 +61,7 @@ export const OTPInput: React.FC<OTPInputProps> = ({
     <RTLAwareView style={{...styles.container, ...style}}>
       {[0, 1, 2, 3, 4, 5].map(index => (
         <PrimaryTextInput
-          width={scaleWidth(78)}
+          containerStyle={{width: scaleWidth(78)}}
           key={index}
           inputRef={ref => (inputRefs.current[index] = ref)}
           style={[
@@ -94,14 +94,14 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     width: '100%',
-    gap: CommonSizes.spacing.small,
-    paddingHorizontal: CommonSizes.spacing.large,
+    gap: CommonSizes.spacing.sm,
+    paddingHorizontal: CommonSizes.spacing.lg,
   },
   input: {
     flex: 1,
-    height: CommonSizes.spacing.xxl,
+    height: CommonSizes.spacing.xl,
     borderWidth: 1,
-    borderRadius: CommonSizes.borderRadius.medium,
+    borderRadius: CommonSizes.borderRadius.md,
     textAlign: 'center',
   },
 });

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

@@ -73,7 +73,7 @@ const styles = StyleSheet.create({
     width: 120,
     alignItems: 'center',
     justifyContent: 'center',
-    borderRadius: CommonSizes.borderRadius.small,
+    borderRadius: CommonSizes.borderRadius.sm,
     borderWidth: 1,
   } as ViewStyle,
   image: {
@@ -82,7 +82,7 @@ const styles = StyleSheet.create({
     resizeMode: 'contain',
     alignItems: 'center',
     justifyContent: 'center',
-    borderRadius: CommonSizes.borderRadius.small,
+    borderRadius: CommonSizes.borderRadius.sm,
     overflow: 'hidden',
   } as ImageStyle,
   icon: {

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

@@ -17,7 +17,7 @@ import {
   TouchablePlatformProps,
 } from '../../../types';
 import {useTheme} from '../../core/theme/ThemeProvider';
-import {BorderRadius, Spacing} from '../../core/theme/commonSizes';
+import {CommonSizes} from '../../core/theme/commonSizes';
 import {createThemedStyles} from '../../core/theme/commonStyles';
 import {Theme} from '../../core/theme/types';
 import {IconPlatform} from './IconPlatform';
@@ -271,10 +271,10 @@ function createSmallSolidStyles(theme: Theme): IStyles {
   const commonStyles = createThemedStyles(theme);
   return StyleSheet.create({
     button: {
-      padding: Spacing.medium,
+      padding: CommonSizes.spacing.md,
       alignItems: 'center',
       justifyContent: 'center',
-      borderRadius: BorderRadius.extraLarge,
+      borderRadius: CommonSizes.borderRadius.xl,
       flexDirection: 'row',
       backgroundColor: theme.colors.indigoBlue,
       // width: 175,
@@ -295,10 +295,10 @@ function createSmallOutlineStyles(theme: Theme): IStyles {
   const commonStyles = createThemedStyles(theme);
   return StyleSheet.create({
     button: {
-      padding: Spacing.medium,
+      padding: CommonSizes.spacing.md,
       alignItems: 'center',
       justifyContent: 'center',
-      borderRadius: BorderRadius.extraLarge,
+      borderRadius: CommonSizes.borderRadius.xl,
       flexDirection: 'row',
       backgroundColor: 'transparent',
       width: 175,

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

@@ -21,7 +21,7 @@ import {
   View,
   ViewStyle,
 } from 'react-native';
-import {Colors, NewColors} from '../../core/theme/colors';
+import {Colors} from '../../core/theme/colors';
 import {isIos} from '../../core/theme/commonConsts';
 import {CommonSizes} from '../../core/theme/commonSizes';
 import {CommonStyles} from '../../core/theme/commonStyles';
@@ -59,7 +59,7 @@ export const PrimaryTextInput: FC<IProps> = memo(
     blurOnSubmit = true,
     disableFullscreenUI = true,
     enablesReturnKeyAutomatically = true,
-    underlineColorAndroid = Colors.transparent,
+    underlineColorAndroid = Colors.white,
     placeholderTextColor = Colors.gray,
     editable = true,
     clearButtonMode = 'while-editing',
@@ -192,17 +192,17 @@ function getInputContainerStyle(
   }
 }
 
-const selectionColor = NewColors.blueNormalActive;
+const selectionColor = Colors.blueNormalActive;
 
 const commonInputContainer: TextStyle = {
   flexDirection: 'row',
   alignItems: 'center',
   justifyContent: 'center',
-  minHeight: CommonSizes.spacing.extraLarge,
+  minHeight: CommonSizes.spacing.xl,
   textAlignVertical: 'center',
   textAlign: 'center',
   backgroundColor: Colors.white,
-  borderRadius: CommonSizes.borderRadius.medium,
+  borderRadius: CommonSizes.borderRadius.md,
   borderWidth: CommonSizes.borderWidth.small,
   borderColor: Colors.gray,
 };
@@ -215,10 +215,10 @@ const styles = StyleSheet.create({
     ...CommonStyles.normalText,
     flex: 1,
     textAlignVertical: 'center',
-    paddingStart: CommonSizes.spacing.medium,
+    paddingStart: CommonSizes.spacing.md,
     ...Platform.select({
       android: {
-        paddingEnd: CommonSizes.spacing.medium,
+        paddingEnd: CommonSizes.spacing.md,
       },
     }),
   } as TextStyle,
@@ -226,7 +226,7 @@ const styles = StyleSheet.create({
     ...commonInputContainer,
     ...Platform.select({
       ios: {
-        paddingEnd: CommonSizes.spacing.medium,
+        paddingEnd: CommonSizes.spacing.md,
       },
     }),
   } as TextStyle,
@@ -251,26 +251,26 @@ const styles = StyleSheet.create({
     ...commonInputContainer,
     ...Platform.select({
       android: {
-        borderColor: Colors.darkGray,
+        borderColor: Colors.gray,
       },
     }),
   } as TextStyle,
   label: {
     ...CommonStyles.body_regular,
-    paddingBottom: CommonSizes.spacing.extraSmall,
+    paddingBottom: CommonSizes.spacing.xs,
   } as TextStyle,
   hint: {
     ...CommonStyles.normalText,
     fontWeight: '200',
     fontSize: CommonSizes.font.small,
     lineHeight: CommonSizes.lineHeight.small,
-    paddingTop: CommonSizes.spacing.extraSmall,
+    paddingTop: CommonSizes.spacing.xs,
   } as TextStyle,
   error: {
     ...CommonStyles.normalText,
     color: Colors.red,
     fontSize: CommonSizes.font.small,
     lineHeight: CommonSizes.lineHeight.small,
-    paddingTop: CommonSizes.spacing.extraSmall,
+    paddingTop: CommonSizes.spacing.xs,
   } as TextStyle,
 });

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

@@ -46,13 +46,13 @@ export const RadioButton: FC<IProps> = memo(
 const commonLabel: TextStyle = {
   ...CommonStyles.normalText,
   flex: 1,
-  paddingStart: CommonSizes.spacing.extraSmall,
+  paddingStart: CommonSizes.spacing.xs,
 };
 
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
-    padding: CommonSizes.spacing.medium,
+    padding: CommonSizes.spacing.md,
     alignItems: 'center',
   } as ViewStyle,
   label: {

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

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

@@ -161,19 +161,19 @@ const styles = StyleSheet.create({
     height: 48,
     borderRadius: 16,
     borderWidth: 1,
-    paddingHorizontal: CommonSizes.spacing.medium,
-    marginHorizontal: CommonSizes.spacing.large,
-    marginBottom: CommonSizes.spacing.large,
+    paddingHorizontal: CommonSizes.spacing.md,
+    marginHorizontal: CommonSizes.spacing.lg,
+    marginBottom: CommonSizes.spacing.lg,
   },
   input: {
     flex: 1,
-    paddingVertical: CommonSizes.spacing.medium,
-    paddingHorizontal: CommonSizes.spacing.small,
+    paddingVertical: CommonSizes.spacing.md,
+    paddingHorizontal: CommonSizes.spacing.sm,
   },
   searchIcon: {
-    marginHorizontal: CommonSizes.spacing.small,
+    marginHorizontal: CommonSizes.spacing.sm,
   },
   clearButton: {
-    padding: CommonSizes.spacing.small,
+    padding: CommonSizes.spacing.sm,
   },
 });

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

@@ -27,7 +27,7 @@ const sharedStyle: ViewStyle = {
 const styles = StyleSheet.create({
   container: {
     ...sharedStyle,
-    marginHorizontal: CommonSizes.spacing.medium,
+    marginHorizontal: CommonSizes.spacing.md,
   } as ViewStyle,
   fullContainer: {
     ...sharedStyle,

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

@@ -38,7 +38,7 @@ const styles = StyleSheet.create({
   title: {
     ...CommonStyles.normalText,
     textAlign: 'center',
-    marginBottom: CommonSizes.spacing.extraSmall,
+    marginBottom: CommonSizes.spacing.xs,
   } as TextStyle,
   description: {
     ...CommonStyles.normalText,

package/template/src/common/helpers/defaultKeyIdExtractor.ts

@@ -1,5 +1,5 @@
 export function defaultKeyIdExtractor<T extends {id: string | number}>(
   item: T,
 ): string {
-  return item?._id;
+  return item?.id?.toString();
 }

package/template/src/common/helpers/stringsHelpers.ts

@@ -23,3 +23,7 @@ export function normalizeAndTrimWhitespace(text: string): string {
     ?.trimEnd() // Remove trailing whitespace
     ?.replace(/\s+/g, ' '); // Replace multiple whitespaces with single space
 }
+
+export function ensureString(text: string): string {
+  return text != null ? text : '';
+}

package/template/src/common/validations/errorValidations.ts

@@ -1,9 +1,8 @@
-import {localization} from '../localization/localization';
 import {unwrapResult} from '@reduxjs/toolkit';
 import {Alert} from 'react-native';
-import {IErrorResult, ErrorRepresentationType} from '../../../types';
 import Snackbar from 'react-native-snackbar';
-import {NewColors} from '../../core/theme/colors';
+import {ErrorRepresentationType, IErrorResult} from '../../../types';
+import {localization} from '../localization/localization';
 export function handlePromiseResult(
   promiseAction: Promise<any>,
   successMessage?: string,

package/template/src/core/api/errorHandler.ts

@@ -4,7 +4,8 @@
  * @param error The error caught from an API request
  * @returns A structured error object with message (as string) and details
  */
-import {ensureString} from '../utils/stringUtils';
+
+import {ensureString} from '../../common/helpers/stringsHelpers';
 
 export const extractServerError = (error: any) => {
   let errorObj = {

package/template/src/core/store/app/appSlice.ts

@@ -1,11 +1,19 @@
-import {createSlice} from '@reduxjs/toolkit';
-
-import {appInitialState} from './appState';
+import {createSlice, PayloadAction} from '@reduxjs/toolkit';
+import {newState} from '../../../common/utils/newState';
+import {Languages} from '../../../common/localization/localization';
+import {appInitialState, AppInitialEntity} from './appState';
 
 export const {reducer: AppReducer, actions} = createSlice({
   name: 'app',
   initialState: appInitialState,
-  reducers: {},
+  reducers: {
+    setLanguage: (state, action: PayloadAction<Languages>) => {
+      return newState(state, {
+        language: action.payload,
+        isRTL: action.payload === Languages.ar,
+      });
+    },
+  },
 });
 
-export const {} = actions;
+export const {setLanguage} = actions;

package/template/src/core/store/app/appState.ts

@@ -1,3 +1,11 @@
-export interface AppInitialEntity {}
+import {Languages} from '../../../common/localization/localization';
 
-export const appInitialState: AppInitialEntity = {};
+export interface AppInitialEntity {
+  language?: Languages;
+  isRTL?: boolean;
+}
+
+export const appInitialState: AppInitialEntity = {
+  language: undefined,
+  isRTL: false,
+};

package/template/src/core/theme/commonConsts.ts

@@ -9,7 +9,7 @@ import {
   StyleSheet,
 } from 'react-native';
 import DeviceInfo from 'react-native-device-info';
-import {createPerfectSize} from '../../common/utils';
+import {createPerfectSize} from '../../common/utils/createPerfectSize';
 
 const windowDimensions = Dimensions.get('window');
 export const isIos = Platform.OS == 'ios';

package/template/src/core/theme/commonSizes.ts

@@ -1,4 +1,4 @@
-import {ISize} from '../../types';
+import {ISize} from './types';
 
 export const CommonSizes = {
   font: {
@@ -13,7 +13,7 @@ export const CommonSizes = {
     largePlus: 28,
     extraLarge: 34,
     extraLargePlus: 44,
-  } as Readonly<ISize>,
+  } as Readonly<ISize['font']>,
   letterSpacing: {
     extraSmall: 0.07,
     extraSmallPlus: 0,
@@ -25,7 +25,7 @@ export const CommonSizes = {
     largePlus: 0.36,
     extraLarge: 0.37,
     extraLargePlus: 0.37,
-  } as Readonly<ISize>,
+  } as Readonly<ISize['letterSpacing']>,
   lineHeight: {
     extraSmall: 13,
     extraSmallPlus: 16,
@@ -37,34 +37,24 @@ export const CommonSizes = {
     largePlus: 34,
     extraLarge: 41,
     extraLargePlus: 52,
-  } as Readonly<ISize>,
+  } as Readonly<ISize['lineHeight']>,
   spacing: {
-    extraSmall: 8,
-    extraSmallPlus: 10,
-    small: 12,
-    smallPlus: 13,
-    medium: 16,
-    mediumPlus: 20,
-    large: 30,
-    largePlus: 40,
-    extraLarge: 48,
-    extraLargePlus: 56,
-  } as Readonly<ISize>,
+    xs: 4,
+    sm: 8,
+    md: 16,
+    lg: 24,
+    xl: 32,
+  } as Readonly<ISize['spacing']>,
   borderRadius: {
-    extraSmall: 4,
-    extraSmallPlus: 6,
-    small: 8,
-    smallPlus: 10,
-    medium: 12,
-    mediumPlus: 13,
-    large: 14,
-    largePlus: 16,
-    extraLarge: 18,
-    extraLargePlus: 30,
-  } as Readonly<ISize>,
+    xs: 4,
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 24,
+  } as Readonly<ISize['borderRadius']>,
   borderWidth: {
     small: 1,
     medium: 2,
     large: 3,
-  } as Readonly<ISize>,
+  } as Readonly<ISize['borderWidth']>,
 };

package/template/src/core/theme/types.ts

@@ -2,6 +2,65 @@ import {TextStyle} from 'react-native';
 
 export type ThemeMode = 'light' | 'dark';
 
+export interface ISize {
+  font: {
+    extraSmall: number;
+    extraSmallPlus: number;
+    small: number;
+    smallPlus: number;
+    medium: number;
+    mediumPlus: number;
+    extraMedium: number;
+    large: number;
+    largePlus: number;
+    extraLarge: number;
+    extraLargePlus: number;
+  };
+  letterSpacing: {
+    extraSmall: number;
+    extraSmallPlus: number;
+    small: number;
+    smallPlus: number;
+    medium: number;
+    mediumPlus: number;
+    large: number;
+    largePlus: number;
+    extraLarge: number;
+    extraLargePlus: number;
+  };
+  lineHeight: {
+    extraSmall: number;
+    extraSmallPlus: number;
+    small: number;
+    smallPlus: number;
+    medium: number;
+    mediumPlus: number;
+    large: number;
+    largePlus: number;
+    extraLarge: number;
+    extraLargePlus: number;
+  };
+  spacing: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+  };
+  borderRadius: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+  };
+  borderWidth: {
+    small: number;
+    medium: number;
+    large: number;
+  };
+}
+
 export interface Theme {
   mode: ThemeMode;
   colors: {

package/template/src/navigation/AuthStack.tsx

@@ -1,7 +1,6 @@
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
 import {useTranslation} from '../common/localization/LocalizationProvider';
 import {Login} from '../screens/Login/Login';
-import {OTPScreen} from '../screens/OTP/OTPScreen';
 import {Splash} from '../screens/splash/Splash';
 
 const Stack = createNativeStackNavigator();
@@ -24,13 +23,6 @@ export function AuthStack() {
         headerShown: false,
       },
     },
-    {
-      id: 'OTP',
-      component: OTPScreen,
-      options: {
-        headerShown: false,
-      },
-    },
   ];
 
   return (

package/template/src/navigation/HeaderComponents.tsx

@@ -35,7 +35,7 @@ const styles = StyleSheet.create({
     backgroundColor: 'white',
     justifyContent: 'flex-start',
     alignItems: 'center',
-    paddingHorizontal: CommonSizes.spacing.large,
+    paddingHorizontal: CommonSizes.spacing.lg,
     flexDirection: 'row',
   },
   titleContainer: {

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

@@ -139,13 +139,13 @@ const styles = StyleSheet.create({
   container: {
     flexGrow: 1,
     backgroundColor: Colors.white,
-    borderTopRightRadius: CommonSizes.spacing.large,
-    borderTopLeftRadius: CommonSizes.spacing.large,
+    borderTopRightRadius: CommonSizes.borderRadius.lg,
+    borderTopLeftRadius: CommonSizes.borderRadius.lg,
   },
   contentContainer: {
     justifyContent: 'center',
     alignItems: 'center',
-    paddingHorizontal: CommonSizes.spacing.large,
+    paddingHorizontal: CommonSizes.spacing.lg,
     paddingVertical: 26,
     gap: 16,
   },

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

@@ -76,32 +76,32 @@ const styles = StyleSheet.create({
     backgroundColor: Colors.background,
   },
   content: {
-    paddingVertical: CommonSizes.spacing.medium,
+    paddingVertical: CommonSizes.spacing.md,
   },
   featuredSection: {
-    marginBottom: CommonSizes.spacing.large,
+    marginBottom: CommonSizes.spacing.lg,
   },
   carouselSection: {
-    marginBottom: CommonSizes.spacing.large,
+    marginBottom: CommonSizes.spacing.lg,
   },
   sectionTitle: {
     ...CommonStyles.h2_semiBold,
-    marginHorizontal: CommonSizes.spacing.large,
-    marginBottom: CommonSizes.spacing.medium,
+    marginHorizontal: CommonSizes.spacing.lg,
+    marginBottom: CommonSizes.spacing.md,
   },
   trendingImage: {
     width: width * 0.7,
     height: 200,
-    borderRadius: CommonSizes.borderRadius.medium,
+    borderRadius: CommonSizes.borderRadius.md,
   },
   newArrivalsImage: {
     width: width * 0.5,
     height: 180,
-    borderRadius: CommonSizes.borderRadius.medium,
+    borderRadius: CommonSizes.borderRadius.md,
   },
   recommendedImage: {
     width: width * 0.6,
     height: 160,
-    borderRadius: CommonSizes.borderRadius.medium,
+    borderRadius: CommonSizes.borderRadius.md,
   },
 });

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

@@ -53,26 +53,26 @@ export function CarouselSection({
 
 const styles = StyleSheet.create({
   container: {
-    paddingHorizontal: CommonSizes.spacing.large,
+    paddingHorizontal: CommonSizes.spacing.lg,
   },
   itemContainer: {
-    marginRight: CommonSizes.spacing.medium,
+    marginRight: CommonSizes.spacing.md,
   },
   image: {
     width: 200,
     height: 150,
-    borderRadius: CommonSizes.borderRadius.medium,
+    borderRadius: CommonSizes.borderRadius.md,
   },
   textContainer: {
-    marginTop: CommonSizes.spacing.small,
+    marginTop: CommonSizes.spacing.sm,
   },
   title: {
-    fontSize: 16,
+    fontSize: CommonSizes.font.medium,
     fontWeight: '600',
     color: Colors.blueDarker,
   },
   subtitle: {
-    fontSize: 14,
+    fontSize: CommonSizes.font.small,
     color: Colors.blueDarker,
     marginTop: 2,
   },

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

@@ -87,13 +87,13 @@ const styles = StyleSheet.create({
   image: {
     width: '100%',
     height: '100%',
-    borderRadius: CommonSizes.borderRadius.large,
+    borderRadius: CommonSizes.borderRadius.lg,
   },
   overlay: {
     ...StyleSheet.absoluteFillObject,
     backgroundColor: 'rgba(0, 0, 0, 0.3)',
-    borderRadius: CommonSizes.borderRadius.large,
-    padding: CommonSizes.spacing.large,
+    borderRadius: CommonSizes.borderRadius.lg,
+    padding: CommonSizes.spacing.lg,
     justifyContent: 'flex-end',
   },
   title: {
@@ -104,13 +104,13 @@ const styles = StyleSheet.create({
   subtitle: {
     fontSize: 16,
     color: Colors.white,
-    marginTop: CommonSizes.spacing.small,
+    marginTop: CommonSizes.spacing.sm,
   },
   pagination: {
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    marginTop: CommonSizes.spacing.medium,
+    marginTop: CommonSizes.spacing.md,
   },
   dot: {
     width: 8,

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

@@ -179,13 +179,13 @@ const styles = StyleSheet.create({
   container: {
     flexGrow: 1,
     backgroundColor: Colors.white,
-    borderTopRightRadius: CommonSizes.spacing.large,
-    borderTopLeftRadius: CommonSizes.spacing.large,
+    borderTopRightRadius: CommonSizes.borderRadius.lg,
+    borderTopLeftRadius: CommonSizes.borderRadius.lg,
   },
   contentContainer: {
     justifyContent: 'center',
     alignItems: 'center',
-    paddingHorizontal: CommonSizes.spacing.large,
+    paddingHorizontal: CommonSizes.spacing.lg,
     paddingVertical: 26,
     gap: 16,
   },

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

@@ -105,13 +105,13 @@ const styles = StyleSheet.create({
   container: {
     flexGrow: 1,
     backgroundColor: Colors.white,
-    borderTopRightRadius: CommonSizes.spacing.large,
-    borderTopLeftRadius: CommonSizes.spacing.large,
+    borderTopRightRadius: CommonSizes.borderRadius.lg,
+    borderTopLeftRadius: CommonSizes.borderRadius.lg,
   },
   contentContainer: {
     justifyContent: 'center',
     alignItems: 'center',
-    paddingHorizontal: CommonSizes.spacing.large,
+    paddingHorizontal: CommonSizes.spacing.lg,
     paddingVertical: 26,
     gap: 16,
   },

package/template/install-dev.sh

@@ -1 +0,0 @@
-npm i --legacy-peer-deps --save-dev@babel/core @babel/preset-env @babel/runtime @react-native/babel-preset @react-native/eslint-config @react-native/metro-config @react-native/typescript-config @types/lodash @types/react @types/react-test-renderer babel-jest eslint jest prettier react-test-renderer typescript

package/template/install.sh

@@ -1 +0,0 @@
-npm i --legacy-peer-deps @react-native-async-storage/async-storage @react-native-camera-roll/camera-roll @react-native-community/datetimepicker @react-native-community/image-editor @react-native-community/netinfo @react-native-community/slider @react-navigation/bottom-tabs @react-navigation/drawer @react-navigation/material-top-tabs @react-navigation/native @react-navigation/native-stack @reduxjs/toolkit @shopify/flash-list @types/intl @types/jest @types/react-native-vector-icons @types/react-redux @typescript-eslint/eslint-plugin @typescript-eslint/parser axios babel-plugin-transform-remove-console dayjs detox eslint-config-react-strong eslint-import-resolver-typescript eslint-plugin-import eslint-plugin-jest eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-native eslint-plugin-unused-imports husky intl lint-staged lodash metro-react-native-babel-preset mime moment patch-package react react-dom react-native react-native-actions-sheet react-native-animated-pagination-dots react-native-bundle-visualizer react-native-calendars react-native-camera react-native-config react-native-config-node react-native-dev-menu react-native-device-info react-native-dropdown-select-list react-native-gesture-handler react-native-image-crop-picker react-native-image-resource-generator react-native-in-app-review react-native-keyboard-aware-scroll-view react-native-localization react-native-mask-input react-native-pager-view react-native-permissions react-native-reanimated react-native-reanimated-carousel react-native-safe-area-context react-native-screens react-native-sfsymbols react-native-share react-native-size-matters react-native-snackbar react-native-svg react-native-tab-view react-native-vector-icons react-native-version react-native-webview react-redux redux redux-persist redux-persist-transform-filter rn-fetch-blob @gorhom/bottom-sheet react-native-vision-camera

package/template/src/common/helpers/shareHelpers.ts

@@ -1,47 +0,0 @@
-import {Linking} from 'react-native';
-import Share, {ShareOptions} from 'react-native-share';
-import {isAndroid, isIos} from '../../core/theme/commonConsts';
-import {
-  ShareOpenResult,
-  ShareSingleOptions,
-  ShareSingleResult,
-} from 'react-native-share/lib/typescript/src/types';
-
-export async function showShareDialog(
-  options: ShareOptions,
-  completedCallback?: (result: ShareOpenResult) => void,
-  errorCallback?: (error: Error | unknown) => void,
-) {
-  try {
-    const result = await Share.open(options);
-    completedCallback?.(result);
-  } catch (error: Error | unknown) {
-    errorCallback?.(error);
-  }
-}
-
-export async function showShareSocialDialog(
-  options: ShareSingleOptions,
-  completedCallback?: (result: ShareSingleResult) => void,
-  errorCallback?: (error: Error | unknown) => void,
-) {
-  try {
-    const result = await Share.shareSingle(options);
-    completedCallback?.(result);
-  } catch (error: Error | unknown) {
-    errorCallback?.(error);
-  }
-}
-
-export async function isPackageInstalled(
-  androidPackageName?: string,
-  iosUrl?: string,
-): Promise<boolean> {
-  if (isAndroid && androidPackageName) {
-    return (await Share.isPackageInstalled(androidPackageName)).isInstalled;
-  } else if (isIos && iosUrl) {
-    return Linking.canOpenURL(iosUrl);
-  } else {
-    throw new Error('No arguments were given or the platform is not supported');
-  }
-}

package/template/src/types/react-native-config.d.ts

@@ -1,8 +0,0 @@
-declare module 'react-native-config' {
-  export interface NativeConfig {
-    API_BASE_URL: string;
-    [key: string]: string;
-  }
-  const Config: NativeConfig;
-  export default Config;
-}