@fadyshawky/react-native-magic 2.0.4 → 2.0.5

package/package.json

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

package/template/src/common/ImageResources.g.ts

@@ -9,4 +9,36 @@ import {ImageURISource} from 'react-native';
  * https://github.com/svbutko/react-native-image-resource-generator
  */
 
-export class ImageResources {}
+export class ImageResources {
+  static readonly account: ImageURISource = require('../../resources/images/Account.png');
+  static readonly arrows: ImageURISource = require('../../resources/images/Arrows.png');
+  static readonly background_2: ImageURISource = require('../../resources/images/Background_2.png');
+  static readonly balance: ImageURISource = require('../../resources/images/Balance.png');
+  static readonly commission: ImageURISource = require('../../resources/images/Commission.png');
+  static readonly display: ImageURISource = require('../../resources/images/Display.png');
+  static readonly en: ImageURISource = require('../../resources/images/EN.png');
+  static readonly favourite_active: ImageURISource = require('../../resources/images/Favourite_Active.png');
+  static readonly favourite_inactive: ImageURISource = require('../../resources/images/Favourite_Inactive.png');
+  static readonly favourites: ImageURISource = require('../../resources/images/Favourites.png');
+  static readonly financials: ImageURISource = require('../../resources/images/Financials.png');
+  static readonly language: ImageURISource = require('../../resources/images/Language.png');
+  static readonly neo_pay_plus_logo: ImageURISource = require('../../resources/images/Neo_Pay_Plus_Logo.png');
+  static readonly services: ImageURISource = require('../../resources/images/Services.png');
+  static readonly splash_screen: ImageURISource = require('../../resources/images/Splash_Screen.png');
+  static readonly ar: ImageURISource = require('../../resources/images/ar.png');
+  static readonly arrow_left: ImageURISource = require('../../resources/images/arrow_left.png');
+  static readonly arrow_right: ImageURISource = require('../../resources/images/arrow_right.png');
+  static readonly dark: ImageURISource = require('../../resources/images/dark.png');
+  static readonly dark_background_1: ImageURISource = require('../../resources/images/dark_background_1.png');
+  static readonly dark_splash_logo: ImageURISource = require('../../resources/images/dark_splash_logo.png');
+  static readonly full_ammount: ImageURISource = require('../../resources/images/full_ammount.png');
+  static readonly header_logo: ImageURISource = require('../../resources/images/header_logo.png');
+  static readonly light: ImageURISource = require('../../resources/images/light.png');
+  static readonly light_background_1: ImageURISource = require('../../resources/images/light_background_1.png');
+  static readonly light_header_logo: ImageURISource = require('../../resources/images/light_header_logo.png');
+  static readonly light_splash_logo: ImageURISource = require('../../resources/images/light_splash_logo.png');
+  static readonly partial_ammount: ImageURISource = require('../../resources/images/partial_ammount.png');
+  static readonly receipt_logo: ImageURISource = require('../../resources/images/receipt_logo.png');
+  static readonly receipt_logo_transparent: ImageURISource = require('../../resources/images/receipt_logo_transparent.png');
+  static readonly repeat: ImageURISource = require('../../resources/images/repeat.png');
+}

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

@@ -56,7 +56,9 @@ export const Background: FC<BackgroundProps> = memo(
     return (
       <View
         style={[styles.container, {backgroundColor: theme.colors.background}]}>
-        <ImageBackground source={0} style={styles.container}>
+        <ImageBackground
+          source={ImageResources[`${theme.mode}_background_1`]}
+          style={styles.container}>
           {content}
         </ImageBackground>
       </View>

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

@@ -41,7 +41,7 @@ export const Container = forwardRef<KeyboardAwareScrollView, ContainerProps>(
       withoutScroll = false,
       backgroundColor,
       withoutBackgroundImage = false,
-      backgroundImage = 0,
+      backgroundImage = ImageResources[`light_background_1`],
       extendedBackground = false,
       ...scrollViewProps
     },

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

@@ -1,15 +1,16 @@
 import React, {useRef, useState} from 'react';
 import {
-  NativeSyntheticEvent,
   StyleSheet,
+  View,
   TextInput,
+  NativeSyntheticEvent,
   TextInputKeyPressEventData,
   ViewStyle,
 } from 'react-native';
 import {useTheme} from '../../core/theme/ThemeProvider';
 import {CommonSizes} from '../../core/theme/commonSizes';
-import {scaleWidth} from '../../core/theme/scaling';
 import {PrimaryTextInput} from './PrimaryTextInput';
+import {scaleWidth} from '../../core/theme/scaling';
 import {RTLAwareView} from './RTLAwareView';
 
 interface OTPInputProps {

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

@@ -17,12 +17,12 @@ import {
   TouchablePlatformProps,
 } from '../../../types';
 import {useTheme} from '../../core/theme/ThemeProvider';
+import {BorderRadius, Spacing} from '../../core/theme/commonSizes';
 import {createThemedStyles} from '../../core/theme/commonStyles';
 import {Theme} from '../../core/theme/types';
 import {IconPlatform} from './IconPlatform';
 import {TouchablePlatform} from './TouchablePlatform';
 import {scaleHeight, scaleSpacing} from '../../core/theme/scaling';
-import {CommonSizes} from '../../core/theme/commonSizes';
 
 interface IProps extends TouchablePlatformProps {
   label: string;
@@ -58,7 +58,7 @@ export const PrimaryButton: FC<IProps> = memo(
         return (
           <ActivityIndicator
             animating={true}
-            color={theme.colors.grayScale_50}
+            color={theme.colors.backgroundOpacity}
             size={'small'}
           />
         );
@@ -91,7 +91,7 @@ export const PrimaryButton: FC<IProps> = memo(
     return (
       <TouchablePlatform
         style={[styles.button, style] as ViewStyle[]}
-        highlightColor={theme.colors.grayScale_50}
+        highlightColor={theme.colors.mutedLavender30}
         {...props}>
         {content}
       </TouchablePlatform>
@@ -158,19 +158,19 @@ function mergeStylesWithDisabled(
     ...styles,
     button: {
       ...styles.button,
-      backgroundColor: theme.colors.grayScale_50,
+      backgroundColor: theme.colors.mutedLavender30,
       borderColor: outline
-        ? theme.colors.grayScale_50
+        ? theme.colors.mutedLavender
         : styles.button.borderColor,
       elevation: 0,
     } as ViewStyle,
     icon: {
       ...styles.icon,
-      tintColor: theme.colors.grayScale_50,
+      tintColor: theme.colors.mutedLavender,
     } as ImageStyle,
     label: {
       ...styles.label,
-      color: theme.colors.grayScale_50,
+      color: theme.colors.backgroundOpacity,
     } as TextStyle,
   };
 }
@@ -194,7 +194,7 @@ function createButtonStyles(theme: Theme) {
 
   const commonLabelStyle: TextStyle = {
     ...createThemedStyles(theme).h4_bold,
-    color: theme.colors.grayScale_0,
+    color: theme.colors.white,
     textAlign: 'center',
     textAlignVertical: 'center',
     ...Platform.select({
@@ -209,26 +209,26 @@ function createButtonStyles(theme: Theme) {
     height: 22,
     marginHorizontal: scaleSpacing(12),
     resizeMode: 'contain',
-    tintColor: theme.colors.PlatinateBlue_700,
+    tintColor: theme.colors.indigoBlue,
   };
 
   return {
     solid: StyleSheet.create({
       button: {
         ...commonButtonStyle,
-        backgroundColor: theme.colors.PlatinateBlue_700,
+        backgroundColor: theme.colors.indigoBlue,
       } as ViewStyle,
       label: theme.text.button,
       icon: {
         ...commonIcon,
-        tintColor: theme.colors.grayScale_0,
+        tintColor: theme.colors.white,
       },
     }),
 
     outline: StyleSheet.create({
       button: {
         ...commonButtonStyle,
-        borderColor: theme.colors.PlatinateBlue_700,
+        borderColor: theme.colors.indigoBlue,
         borderWidth: 2,
       } as ViewStyle,
       label: {
@@ -240,7 +240,7 @@ function createButtonStyles(theme: Theme) {
     outlineNegative: StyleSheet.create({
       button: {
         ...commonButtonStyle,
-        borderColor: theme.colors.PlatinateBlue_700,
+        borderColor: theme.colors.mutedLavender,
         borderWidth: 2,
       } as ViewStyle,
       label: {
@@ -248,7 +248,7 @@ function createButtonStyles(theme: Theme) {
       } as TextStyle,
       icon: {
         ...commonIcon,
-        tintColor: theme.colors.PlatinateBlue_700,
+        tintColor: theme.colors.mutedLavender,
       },
     }),
 
@@ -271,12 +271,12 @@ function createSmallSolidStyles(theme: Theme): IStyles {
   const commonStyles = createThemedStyles(theme);
   return StyleSheet.create({
     button: {
-      padding: CommonSizes.spacing.md,
+      padding: Spacing.medium,
       alignItems: 'center',
       justifyContent: 'center',
-      borderRadius: CommonSizes.borderRadius.xl,
+      borderRadius: BorderRadius.extraLarge,
       flexDirection: 'row',
-      backgroundColor: theme.colors.PlatinateBlue_700,
+      backgroundColor: theme.colors.indigoBlue,
       // width: 175,
     } as ViewStyle,
     label: {
@@ -286,7 +286,7 @@ function createSmallSolidStyles(theme: Theme): IStyles {
       width: 22,
       height: 22,
       resizeMode: 'contain',
-      tintColor: theme.colors.grayScale_0,
+      tintColor: theme.colors.white,
     } as ImageStyle,
   });
 }
@@ -295,25 +295,25 @@ function createSmallOutlineStyles(theme: Theme): IStyles {
   const commonStyles = createThemedStyles(theme);
   return StyleSheet.create({
     button: {
-      padding: CommonSizes.spacing.md,
+      padding: Spacing.medium,
       alignItems: 'center',
       justifyContent: 'center',
-      borderRadius: CommonSizes.borderRadius.xl,
+      borderRadius: BorderRadius.extraLarge,
       flexDirection: 'row',
       backgroundColor: 'transparent',
       width: 175,
-      borderColor: theme.colors.PlatinateBlue_700,
+      borderColor: theme.colors.indigoBlue,
       borderWidth: 1,
     } as ViewStyle,
     label: {
       ...commonStyles.normalText,
-      color: theme.colors.PlatinateBlue_700,
+      color: theme.colors.indigoBlue,
     } as TextStyle,
     icon: {
       width: 22,
       height: 22,
       resizeMode: 'contain',
-      tintColor: theme.colors.PlatinateBlue_700,
+      tintColor: theme.colors.indigoBlue,
     } as ImageStyle,
   });
 }