@fadyshawky/react-native-magic 1.0.2 → 1.0.4

package/template/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "reactnativemagic",
+  "name": "@fadyshawky/react-native-magic",
   "version": "0.0.1",
   "private": true,
   "scripts": {
@@ -13,10 +13,12 @@
     "ios": "react-native run-ios",
     "lint": "eslint .",
     "start": "react-native start",
+    "start:development": "ENVFILE=.env.development react-native start --reset-cache",
+    "start:production": "ENVFILE=.env.production react-native start --reset-cache",
+    "start:staging": "ENVFILE=.env.staging react-native start --reset-cache",
     "test": "jest"
   },
   "dependencies": {
-    "@gorhom/bottom-sheet": "^5.0.6",
     "@react-native-async-storage/async-storage": "^2.1.0",
     "@react-native-camera-roll/camera-roll": "^7.9.0",
     "@react-native-community/datetimepicker": "^8.2.0",
@@ -35,39 +37,20 @@
     "@types/lodash": "^4.17.13",
     "@types/react-native-vector-icons": "^6.4.18",
     "@types/react-redux": "^7.1.34",
-    "@typescript-eslint/eslint-plugin": "^8.18.1",
-    "@typescript-eslint/parser": "^8.18.1",
     "axios": "^1.7.9",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "dayjs": "^1.11.13",
     "detox": "^20.28.0",
-    "eslint-config-react-strong": "^2.4.0",
-    "eslint-import-resolver-typescript": "^3.7.0",
-    "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-jest": "^28.10.0",
-    "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-react-native": "^4.1.0",
-    "eslint-plugin-unused-imports": "^4.1.4",
-    "husky": "^9.1.7",
     "intl": "^1.2.5",
-    "lint-staged": "^15.2.11",
     "lodash": "^4.17.21",
-    "metro-react-native-babel-preset": "^0.77.0",
     "mime": "^4.0.6",
-    "moment": "^2.30.1",
     "patch-package": "^8.0.0",
     "react": "^18.3.1",
-    "react-dom": "^19.0.0",
     "react-native": "^0.76.5",
     "react-native-actions-sheet": "^0.9.7",
     "react-native-animated-pagination-dots": "^0.1.73",
-    "react-native-bundle-visualizer": "^3.1.3",
     "react-native-calendars": "^1.1307.0",
-    "react-native-camera": "^4.2.1",
     "react-native-config": "^1.5.3",
-    "react-native-config-node": "^0.0.3",
-    "react-native-dev-menu": "^4.1.1",
     "react-native-device-info": "^14.0.2",
     "react-native-dropdown-select-list": "^2.0.5",
     "react-native-gesture-handler": "^2.21.2",
@@ -77,6 +60,7 @@
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-localization": "^2.3.2",
     "react-native-mask-input": "^1.2.3",
+    "react-native-orientation-locker": "^1.7.0",
     "react-native-pager-view": "^6.6.1",
     "react-native-permissions": "^5.2.1",
     "react-native-reanimated": "^3.16.6",
@@ -85,24 +69,22 @@
     "react-native-screens": "^4.4.0",
     "react-native-sfsymbols": "^1.2.2",
     "react-native-share": "^12.0.3",
-    "react-native-size-matters": "^0.4.2",
     "react-native-snackbar": "^2.8.0",
     "react-native-svg": "^15.10.1",
     "react-native-tab-view": "^4.0.5",
     "react-native-vector-icons": "^10.2.0",
-    "react-native-version": "^4.0.0",
     "react-native-vision-camera": "^4.6.3",
     "react-native-webview": "^13.12.5",
     "react-redux": "^9.2.0",
     "redux": "^5.0.1",
     "redux-persist": "^6.0.0",
-    "redux-persist-transform-filter": "^0.0.22",
-    "rn-fetch-blob": "^0.12.0"
+    "redux-persist-transform-filter": "^0.0.22"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.26.0",
     "@babel/runtime": "^7.26.0",
+    "@jest/globals": "^29.7.0",
     "@react-native-community/cli": "15.0.1",
     "@react-native-community/cli-platform-android": "15.0.1",
     "@react-native-community/cli-platform-ios": "15.0.1",
@@ -114,6 +96,12 @@
     "@types/react-test-renderer": "^18.3.1",
     "babel-jest": "^29.7.0",
     "eslint": "^8.57.1",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jest": "^28.10.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-native": "^4.1.0",
+    "eslint-plugin-unused-imports": "^4.1.4",
     "jest": "^29.7.0",
     "prettier": "^2.8.8",
     "react-test-renderer": "^18.3.1",

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

@@ -8,11 +8,9 @@ import {
   TouchableOpacity,
   ViewStyle,
 } from 'react-native';
-import {ImageResources} from '../ImageResources.g';
 import {Image as CropperImage} from 'react-native-image-crop-picker';
+import {Colors} from '../../core/theme/colors';
 import {CommonSizes} from '../../core/theme/commonSizes';
-import {Colors, PlatformColorsIOS} from '../../core/theme/colors';
-import {platformMixedColor} from '../helpers/colorHelpers';
 
 interface IProps {
   onPress?: () => void;
@@ -26,7 +24,7 @@ interface IProps {
 
 export const PhotoTakingButton: FC<IProps> = memo(
   ({
-    icon = ImageResources.camera,
+    icon,
     onPress,
     backgroundImage,
     style,
@@ -36,7 +34,7 @@ export const PhotoTakingButton: FC<IProps> = memo(
   }) => {
     return (
       <TouchableOpacity
-        style={[styles.button, style] as ViewStyle}
+        style={[styles.button, style]}
         onPress={onPress}
         disabled={disabled}>
         <BackgroundComponent image={backgroundImage} style={imageStyle}>
@@ -78,7 +76,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     borderRadius: CommonSizes.borderRadius.small,
     borderWidth: 1,
-    borderColor: platformMixedColor(PlatformColorsIOS.systemFill, Colors.gray),
+    borderColor: Colors.gray,
   } as ViewStyle,
   image: {
     height: 120,
@@ -93,7 +91,7 @@ const styles = StyleSheet.create({
     width: 32,
     height: 32,
     resizeMode: 'contain',
-    tintColor: platformMixedColor(PlatformColorsIOS.label, Colors.black),
+    tintColor: Colors.black,
     opacity: 0.8,
   } as ImageStyle,
 });

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

@@ -21,15 +21,10 @@ import {
   View,
   ViewStyle,
 } from 'react-native';
-import {
-  Colors,
-  PlatformColorsAndroid,
-  PlatformColorsIOS,
-} 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';
-import {platformMixedColor, platformNativeColor} from '../helpers/colorHelpers';
 import {localization} from '../localization/localization';
 
 interface IProps extends TextInputProps {
@@ -65,10 +60,7 @@ export const PrimaryTextInput: FC<IProps> = memo(
     disableFullscreenUI = true,
     enablesReturnKeyAutomatically = true,
     underlineColorAndroid = Colors.transparent,
-    placeholderTextColor = platformNativeColor(
-      PlatformColorsIOS.placeholderText,
-      PlatformColorsAndroid.secondaryText,
-    ),
+    placeholderTextColor = Colors.gray,
     editable = true,
     clearButtonMode = 'while-editing',
     label,
@@ -200,10 +192,7 @@ function getInputContainerStyle(
   }
 }
 
-const selectionColor = platformNativeColor(
-  PlatformColorsIOS.systemBlue,
-  PlatformColorsAndroid.primary,
-);
+const selectionColor = Colors.primary100;
 
 const commonInputContainer: TextStyle = {
   flexDirection: 'row',
@@ -279,7 +268,7 @@ const styles = StyleSheet.create({
   } as TextStyle,
   error: {
     ...CommonStyles.normalText,
-    color: platformMixedColor(PlatformColorsIOS.systemRed, Colors.red),
+    color: Colors.red,
     fontSize: CommonSizes.font.small,
     lineHeight: CommonSizes.lineHeight.small,
     paddingTop: CommonSizes.spacing.extraSmall,

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

@@ -4,11 +4,7 @@ import {RadioIcon} from './RadioIcon';
 import {TouchablePlatform} from './TouchablePlatform';
 import {CommonSizes} from '../../core/theme/commonSizes';
 import {CommonStyles} from '../../core/theme/commonStyles';
-import {
-  PlatformColorsAndroid,
-  PlatformColorsIOS,
-} from '../../core/theme/colors';
-import {platformNativeColor} from '../helpers/colorHelpers';
+import {Colors} from '../../core/theme/colors';
 
 interface IIconComponentProps {
   isSelected: boolean;
@@ -65,9 +61,6 @@ const styles = StyleSheet.create({
   } as TextStyle,
   labelDisabled: {
     ...commonLabel,
-    color: platformNativeColor(
-      PlatformColorsIOS.systemFill,
-      PlatformColorsAndroid.secondaryText,
-    ),
+    color: Colors.gray,
   } as TextStyle,
 });

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

@@ -1,11 +1,6 @@
 import React, {FC, memo, useMemo} from 'react';
 import {StyleSheet, View, ViewStyle} from 'react-native';
-import {
-  Colors,
-  PlatformColorsAndroid,
-  PlatformColorsIOS,
-} from '../../core/theme/colors';
-import {platformMixedColor, platformNativeColor} from '../helpers/colorHelpers';
+import {Colors} from '../../core/theme/colors';
 
 interface IProps {
   isSelected: boolean;
@@ -47,17 +42,14 @@ const commonInnerCircle: ViewStyle = {
 const styles = StyleSheet.create({
   outerCircle: {
     ...commonOuterCircle,
-    borderColor: platformMixedColor(PlatformColorsIOS.systemFill, Colors.black),
+    borderColor: Colors.primary100,
   } as ViewStyle,
   outerCircleSelected: {
     ...commonOuterCircle,
-    borderColor: platformMixedColor(PlatformColorsIOS.systemBlue, Colors.black),
+    borderColor: Colors.primary100,
   } as ViewStyle,
   innerCircle: {
     ...commonInnerCircle,
-    backgroundColor: platformNativeColor(
-      PlatformColorsIOS.systemBlue,
-      PlatformColorsAndroid.primary,
-    ),
+    backgroundColor: Colors.primary100,
   } as ViewStyle,
 });

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

@@ -1,12 +1,8 @@
 import React, {FC, useMemo} from 'react';
 import {StyleSheet, View, ViewStyle} from 'react-native';
-import {
-  PlatformColorsAndroid,
-  PlatformColorsIOS,
-} from '../../core/theme/colors';
+import {Colors} from '../../core/theme/colors';
 import {hairlineWidth} from '../../core/theme/commonConsts';
 import {CommonSizes} from '../../core/theme/commonSizes';
-import {platformNativeColor} from '../helpers/colorHelpers';
 
 interface IProps {
   isFull?: boolean;
@@ -22,10 +18,7 @@ export const Separator: FC<IProps> = ({isFull = true}) => {
 
 const sharedStyle: ViewStyle = {
   height: hairlineWidth,
-  backgroundColor: platformNativeColor(
-    PlatformColorsIOS.separator,
-    PlatformColorsAndroid.divider,
-  ),
+  backgroundColor: Colors.gray,
 };
 
 const styles = StyleSheet.create({

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

@@ -7,9 +7,8 @@ import {
   PressableStateCallbackType,
   ViewStyle,
 } from 'react-native';
-import {Colors, PlatformColorsIOS} from '../../core/theme/colors';
+import {Colors} from '../../core/theme/colors';
 import {isAndroid} from '../../core/theme/commonConsts';
-import {platformMixedColor} from '../helpers/colorHelpers';
 
 interface IProps extends PressableProps {
   style?: ViewStyle | ViewStyle[];
@@ -17,15 +16,7 @@ interface IProps extends PressableProps {
 }
 
 export const TouchablePlatform: FC<IProps> = memo(
-  ({
-    children,
-    highlightColor = platformMixedColor(
-      PlatformColorsIOS.secondarySystemFill,
-      Colors.white,
-    ),
-    style,
-    ...props
-  }) => {
+  ({children, highlightColor = Colors.white, style, ...props}) => {
     const pressableStyle = useCallback(
       (state: PressableStateCallbackType) => {
         if (isAndroid) {

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

@@ -6,13 +6,9 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {
-  PlatformColorsAndroid,
-  PlatformColorsIOS,
-} from '../../core/theme/colors';
+import {Colors} from '../../core/theme/colors';
 import {CommonSizes} from '../../core/theme/commonSizes';
 import {CommonStyles} from '../../core/theme/commonStyles';
-import {platformNativeColor} from '../helpers/colorHelpers';
 import {localization} from '../localization/localization';
 
 interface IProps {
@@ -46,10 +42,7 @@ const styles = StyleSheet.create({
   } as TextStyle,
   description: {
     ...CommonStyles.normalText,
-    color: platformNativeColor(
-      PlatformColorsIOS.systemBlue,
-      PlatformColorsAndroid.primary,
-    ),
+    color: Colors.primary100,
     textAlign: 'center',
     textDecorationLine: 'underline',
   } as TextStyle,

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

@@ -1,7 +1,6 @@
-import moment from 'moment';
-import {handleFetchJsonResponse} from '../../api/responseHandlers';
-import {get, post, put} from '../../api/serverHeaders';
 import {createAsyncThunk} from '@reduxjs/toolkit';
+import {handleFetchJsonResponse} from '../../api/responseHandlers';
+import {post} from '../../api/serverHeaders';
 
 export const userLogin = createAsyncThunk(
   'user/login',

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

@@ -43,75 +43,46 @@ export enum Colors {
   yellow5 = '#FFFDF8',
 }
 
-export enum PlatformColorsIOS {
-  /* Label Colors */
-  label = 'label',
-  secondaryLabel = 'secondaryLabel',
-  tertiaryLabel = 'tertiaryLabel',
-  quaternaryLabel = 'quaternaryLabel',
-
-  /* Fill Colors */
-  systemFill = 'systemFill',
-  secondarySystemFill = 'secondarySystemFill',
-  tertiarySystemFill = 'tertiarySystemFill',
-  quaternarySystemFill = 'quaternarySystemFill',
-
-  /* Text Colors */
-  placeholderText = 'placeholderText',
-
-  /* Standard Content Background Colors */
-  systemBackground = 'systemBackground',
-  secondarySystemBackground = 'secondarySystemBackground',
-  tertiarySystemBackground = 'tertiarySystemBackground',
-
-  /* Grouped Content Background Colors */
-  systemGroupedBackground = 'systemGroupedBackground',
-  secondarySystemGroupedBackground = 'secondarySystemGroupedBackground',
-  tertiarySystemGroupedBackground = 'tertiarySystemGroupedBackground',
-
-  /* Separator Colors */
-  separator = 'separator',
-  opaqueSeparator = 'opaqueSeparator',
-
-  /* Link Color */
-  link = 'link',
-
-  /* Nonadaptable Colors */
-  darkText = 'darkText',
-  lightText = 'lightText',
-
-  /* Standard Colors */
-  /* Adaptable Colors */
-  systemBlue = 'systemBlue',
-  systemGreen = 'systemGreen',
-  systemIndigo = 'systemIndigo',
-  systemOrange = 'systemOrange',
-  systemPink = 'systemPink',
-  systemPurple = 'systemPurple',
-  systemRed = 'systemRed',
-  systemTeal = 'systemTeal',
-  systemYellow = 'systemYellow',
-
-  /* Adaptable Gray Colors */
-  systemGray = 'systemGray',
-  systemGray2 = 'systemGray2',
-  systemGray3 = 'systemGray3',
-  systemGray4 = 'systemGray4',
-  systemGray5 = 'systemGray5',
-  systemGray6 = 'systemGray6',
-}
-
-export enum PlatformColorsAndroid {
-  primary = '@color/primary',
-  primaryDark = '@color/primaryDark',
-  primaryLight = '@color/primaryLight',
-  background = '@color/background',
-  primaryText = '@color/primaryText',
-  primaryTextOpacity = '@color/primaryTextOpacity',
-  secondaryText = '@color/secondaryText',
-  onPrimaryText = '@color/onPrimaryText',
-  onPrimaryTextOpacity = '@color/onPrimaryTextOpacity',
-  divider = '@color/divider',
-  navigation = '@color/navigation',
-  statusbar = '@color/statusbar',
+export enum NewColors {
+  violetLight = '#F3F2FF',
+  violetLightHover = '#E6E6FF',
+  violetLightActive = '#C1C0FE',
+  violetNormal = '#8481FD',
+  violetNormalHover = '#5250D9',
+  violetNormalActive = '#3331B8',
+  violetDark = '#262626',
+  violetDarkHover = '#1A1994',
+  violetDarkActive = '#111066',
+  violetDarker = '#000033',
+  blueLight = '#F6FCFF',
+  blueLightHover = '#E9F8FF',
+  blueLightActive = '#C1E5FF',
+  blueNormal = '#52BDFF',
+  blueNormalHover = '#3399D9',
+  blueNormalActive = '#1A7DB3',
+  blueDarker = '#262626',
+  greyLight = '#F9FCFF',
+  greyLightHover = '#E0E0E0',
+  greyLightActive = '#BDBDBD',
+  greyNormal = '#929292',
+  greyNormalHover = '#666666',
+  greyNormalActive = '#4D4D4D',
+  greyDarker = '#262626',
+  orandeLight = '#FFFAF8',
+  orandeLightHover = '#FDECE1',
+  orandeLightActive = '#FBCEB4',
+  orandeNormal = '#F2565E',
+  orandeNormalHover = '#CE3C3E',
+  orandeNormalActive = '#AD3335',
+  orandeDarker = '#262626',
+  lightBlueLight = '#FEF7F7',
+  lightBlueLightHover = '#FCDDDF',
+  lightBlueLightActive = '#F9AAAF',
+  lightBlueNormal = '#CE3C3E',
+  lightBlueNormalHover = '#AD3335',
+  lightBlueNormalActive = '#8C292B',
+  lightBlueDarker = '#262626',
+  red = '#FFFCF1',
+  green = '#F4FDFB',
+  background = '#FAFAFA',
 }

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

@@ -1,12 +1,7 @@
 export const Fonts = {
-  system: 'System',
-  thin: 'KumbhSans-Thin',
-  light: 'KumbhSans-Light',
-  extraLight: 'KumbhSans-ExtraLight',
-  regular: 'KumbhSans-Regular',
-  medium: 'KumbhSans-Medium',
-  semiBold: 'KumbhSans-SemiBold',
-  bold: 'KumbhSans-Bold',
-  extraBold: 'KumbhSans-ExtraBold',
-  black: 'KumbhSans-Black',
+  light: 'Poppins-Light',
+  regular: 'Poppins-Regular',
+  medium: 'Poppins-Medium',
+  semiBold: 'Poppins-SemiBold',
+  bold: 'Poppins-Bold',
 };

package/template/src/navigation/MainNavigation.tsx

@@ -1,12 +1,14 @@
 // In App.js in a new project
 
-import {NavigationContainer} from '@react-navigation/native';
+import {DefaultTheme, NavigationContainer} from '@react-navigation/native';
 import * as React from 'react';
 import {useRef} from 'react';
 import {useAppSelector} from '../core/store/reduxHelpers';
 import {AuthStack} from './AuthStack';
 import {AppMainNavigator} from './MainStack';
 import {navigationRef} from './RootNavigation';
+import {NewColors} from '../core/theme/colors';
+import {Fonts} from '../core/theme/fonts';
 
 function AppNavigator() {
   const routeNameRef = useRef<string | undefined>(undefined);
@@ -19,7 +21,7 @@ function AppNavigator() {
         dark: false,
         colors: {
           primary: '#000',
-          background: 'transparent',
+          background: NewColors.background,
           card: '#fff',
           text: '#000',
           border: '#000',
@@ -27,19 +29,19 @@ function AppNavigator() {
         },
         fonts: {
           regular: {
-            fontFamily: 'System',
+            fontFamily: Fonts.regular,
             fontWeight: 'normal',
           },
           medium: {
-            fontFamily: 'System',
+            fontFamily: Fonts.medium,
             fontWeight: '500',
           },
           bold: {
-            fontFamily: 'System',
+            fontFamily: Fonts.bold,
             fontWeight: '700',
           },
           heavy: {
-            fontFamily: 'System',
+            fontFamily: Fonts.bold,
             fontWeight: '900',
           },
         },

package/.vscode/settings.json

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

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

@@ -1,34 +0,0 @@
-import {isIos} from '../../core/theme/commonConsts';
-import {
-  Colors,
-  PlatformColorsAndroid,
-  PlatformColorsIOS,
-} from '../../core/theme/colors';
-
-export function platformNativeColor(
-  iosColor?: PlatformColorsIOS,
-  androidColor?: PlatformColorsAndroid,
-) {
-  const selectedColor = isIos ? iosColor : androidColor;
-
-  return selectedColor != null ? 'black' : undefined;
-}
-
-export function platformLocalColor(iosColor?: Colors, androidColor?: Colors) {
-  return isIos ? iosColor : androidColor;
-}
-
-export function platformMixedColor(
-  iosColor?: Colors | PlatformColorsIOS,
-  androidColor?: Colors | PlatformColorsAndroid,
-) {
-  const selectedColor = iosColor;
-
-  if (selectedColor != null) {
-    return Object.values(Colors).includes(selectedColor as Colors)
-      ? (selectedColor as Colors)
-      : 'black';
-  } else {
-    return undefined;
-  }
-}