@fadyshawky/react-native-magic 1.0.3 → 1.0.5

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

@@ -19,9 +19,6 @@ export const userLogin = createAsyncThunk(
         data,
       });
 
-      if (response.data?.user?.roleName !== 'Parent') {
-        return rejectWithValue('Not Authorized');
-      }
       return handleFetchJsonResponse(response);
     } catch (e: any) {
       return rejectWithValue(e?.response);

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 @@
-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',
-};
+export const Fonts = {};

package/template/src/navigation/HeaderComponents.tsx

@@ -1,10 +1,8 @@
+import {NativeStackNavigationProp} from '@react-navigation/native-stack';
 import React from 'react';
-import {View, Text, TouchableOpacity, Image, StyleSheet} from 'react-native';
-import {CommonStyles, screenWidth} from '../core/theme/commonStyles';
-import {BottomTabHeaderProps} from '@react-navigation/bottom-tabs';
-import {ImageResources} from '../common/ImageResources.g';
+import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
 import {CommonSizes} from '../core/theme/commonSizes';
-import {NativeStackNavigationProp} from '@react-navigation/native-stack';
+import {CommonStyles, screenWidth} from '../core/theme/commonStyles';
 import {RootStackParamList} from './types';
 
 export function Header({title}: {title: string}) {

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/template/src/navigation/MainStack.tsx

@@ -5,7 +5,6 @@ import {
   NativeStackNavigationProp,
 } from '@react-navigation/native-stack';
 import React from 'react';
-import {ImageResources} from '../common/ImageResources.g';
 import {localization} from '../common/localization/localization';
 import {Main} from '../screens/main/Main';
 import {Profile} from '../screens/profile/Profile';

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

@@ -1,4 +1,3 @@
-import {useNavigation} from '@react-navigation/native';
 import {toLower} from 'lodash';
 import React, {useRef, useState} from 'react';
 import {
@@ -78,11 +77,6 @@ export function Login(): JSX.Element {
         label={localization.login.Password}
         placeholder={localization.login.EnterPassword}
       />
-      <PrimaryButton
-        label={localization.login.forgetPassword}
-        type={ButtonType.borderless}
-        style={{alignSelf: 'flex-end'}}
-      />
       <PrimaryButton
         isLoading={loading}
         onPress={loginUser}

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

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

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