@fadyshawky/react-native-magic 2.0.9 → 2.1.1

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 {PrimaryColors} 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: PrimaryColors.PlatinateBlue_400,
   } as ViewStyle,
   outerCircleSelected: {
     ...commonOuterCircle,
-    borderColor: NewColors.blueNormalActive,
+    borderColor: PrimaryColors.PlatinateBlue_400,
   } as ViewStyle,
   innerCircle: {
     ...commonInnerCircle,
-    backgroundColor: NewColors.blueNormalActive,
+    backgroundColor: PrimaryColors.PlatinateBlue_400,
   } as ViewStyle,
 });

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

@@ -0,0 +1,11 @@
+import React from 'react';
+
+/**
+ * Wrapper for snackbar/toast. The template uses react-native-snackbar directly.
+ * Replace with a custom implementation (e.g. context + showSnackbar) if needed.
+ */
+export const SnackbarProvider = ({
+  children = null,
+}: {
+  children?: React.ReactNode;
+}): React.JSX.Element => <>{children}</>;

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

@@ -6,7 +6,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {Colors, NewColors} 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: NewColors.blueNormalActive,
+    color: PrimaryColors.PlatinateBlue_400,
     textAlign: 'center',
     textDecorationLine: 'underline',
   } as TextStyle,

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

@@ -3,7 +3,7 @@ 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';
+
 export function handlePromiseResult(
   promiseAction: Promise<any>,
   successMessage?: string,

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

@@ -1,28 +1,57 @@
-import axios, {AxiosDefaults} from 'axios';
-import DeviceInfo from 'react-native-device-info';
+import axios, {AxiosDefaults, AxiosError, AxiosResponse} from 'axios';
+import {store} from '../store/store';
+import {setLogout} from '../store/user/userSlice';
+import {API_BASE_URL} from '../config';
 
-export const defaultHeaders: HeadersInit_ = {
-  'app-version': DeviceInfo.getVersion(),
-  'serial-number': DeviceInfo.getSerialNumberSync(),
+export const defaultHeaders: HeadersInit = {
   Connection: 'keep-alive',
   'Content-Type': 'application/json',
 };
+
 declare type MethodData = {
   url: AxiosDefaults['httpsAgent'];
   data?: AxiosDefaults['data'];
   config?: any;
 };
 
-const baseURL = '';
-
 const instance = axios.create({
-  baseURL: baseURL,
+  baseURL: API_BASE_URL,
   headers: {
     ...defaultHeaders,
   },
 });
 
-// Export HTTP methods using the configured instance
+instance.interceptors.request.use(
+  config => {
+    const state = store.getState();
+    const accessToken = state.user.accessToken;
+    const locale = state.app?.language ?? 'en';
+    if (accessToken) {
+      config.headers.Authorization = `Bearer ${accessToken}`;
+    }
+    config.headers.locale = locale;
+    return config;
+  },
+  error => Promise.reject(error),
+);
+
+instance.interceptors.response.use(
+  (response: AxiosResponse) => response,
+  async (error: AxiosError) => {
+    const originalRequest = error.config;
+    if (
+      originalRequest?.url?.includes('/login') ||
+      originalRequest?.url?.includes('/refresh-token')
+    ) {
+      return Promise.reject(error);
+    }
+    if (error.response?.status === 401 || error.response?.status === 402) {
+      store.dispatch(setLogout());
+    }
+    return Promise.reject(error);
+  },
+);
+
 export const post = ({url, data, config}: MethodData) =>
   instance.post(url, data, config);
 export const get = ({url, config}: MethodData) => instance.get(url, config);

package/template/src/core/config/index.ts

@@ -0,0 +1,13 @@
+/**
+ * App config – single place for API base URL, env, and feature toggles.
+ * Change your app's API and feature toggles here and in .env.
+ */
+import Config from 'react-native-config';
+
+const config = Config as Record<string, string | undefined>;
+export const API_BASE_URL =
+  config.API_BASE_URL || config.API_URL || 'https://api.example.com';
+export const ENV = config.ENV || config.ENVIRONMENT || 'development';
+
+/** Optional: enable RTL layout (e.g. for Arabic). */
+export const enableRTL = true;

package/template/src/core/store/store.tsx

@@ -1,49 +1,11 @@
 import React from 'react';
 import {Action, configureStore, ThunkAction} from '@reduxjs/toolkit';
-import {
-  createTransform,
-  PersistConfig,
-  persistReducer,
-  persistStore,
-} from 'redux-persist';
+import {PersistConfig, persistReducer, persistStore} from 'redux-persist';
 import {rootReducer, RootState} from './rootReducer';
 import {Provider} from 'react-redux';
 import {PersistGate} from 'redux-persist/integration/react';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import {createWhitelistFilter} from 'redux-persist-transform-filter';
-import {getUniqueId} from 'react-native-device-info';
-import CryptoJS from 'crypto-js';
-
-let deviceId: string;
-getUniqueId()
-  .then(res => {
-    deviceId = res;
-  })
-  .catch(error => {});
-
-const encrypt = createTransform(
-  (inboundState, key) => {
-    if (!inboundState) {
-      return inboundState;
-    }
-
-    const cryptedText = CryptoJS.AES.encrypt(
-      JSON.stringify(inboundState),
-      deviceId,
-    );
-
-    return cryptedText?.toString();
-  },
-  (outboundState, key) => {
-    if (!outboundState) {
-      return outboundState;
-    }
-    const bytes = CryptoJS.AES.decrypt(outboundState, deviceId);
-    const decrypted = bytes.toString(CryptoJS.enc.Utf8);
-
-    return JSON.parse(decrypted);
-  },
-);
 
 const persistConfig: PersistConfig<RootState> = {
   key: 'root',
@@ -51,11 +13,8 @@ const persistConfig: PersistConfig<RootState> = {
   version: 1,
   timeout: 1000,
   transforms: [
-    createWhitelistFilter('app'),
-    createWhitelistFilter('user'),
-    createWhitelistFilter('services'),
-    createWhitelistFilter('providers'),
-    createWhitelistFilter('categories'),
+    createWhitelistFilter('user', ['accessToken', 'user']),
+    createWhitelistFilter('app', ['language', 'isRTL']),
   ],
 };
 
@@ -66,16 +25,7 @@ export const store = configureStore({
   middleware: getDefaultMiddleware =>
     getDefaultMiddleware({
       serializableCheck: false,
-      immutableCheck: {
-        warnAfter: 300,
-        ignoredPaths: [
-          'services.inquiredBill',
-          'providers.providers',
-          'categories.categories',
-        ],
-      },
     }),
-  devTools: process.env.NODE_ENV !== 'production',
 });
 
 export const persistor = persistStore(store);

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

@@ -1,3 +1,6 @@
+/**
+ * Customize for your brand – this is the only place to change app colors.
+ */
 export enum PrimaryColors {
   PlatinateBlue_0 = '#E9EDFF',
   PlatinateBlue_25 = '#D3DAFF',

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

@@ -1,5 +1,8 @@
 import {ISize} from './types';
 
+/**
+ * Customize for your brand – this is the only place to change app sizes/spacing.
+ */
 export const CommonSizes = {
   font: {
     // Body Text Sizes

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

@@ -1,3 +1,6 @@
+/**
+ * Customize for your brand – this is the only place to change app fonts.
+ */
 export const Fonts = {
   // Almarai Font Family
   light: 'Almarai-Light',

package/template/src/core/utils/stringUtils.ts

@@ -1,9 +1,7 @@
 /**
- * Safely converts any value to a string
- * This is especially useful for error messages that might be objects
+ * Safely converts any value to a string.
+ * Useful for error messages that might be objects.
  */
-import CryptoJS from 'crypto-js';
-
 export const ensureString = (value: any): string => {
   if (value === null || value === undefined) {
     return '';
@@ -31,47 +29,6 @@ export const ensureString = (value: any): string => {
   return String(value);
 };
 
-export function decryptTripleDES(
-  encryptedBase64: string,
-  secretKeyBase64: string,
-) {
-  try {
-    // Decode the key from base64
-    const decodedKey = CryptoJS.enc.Base64.parse(secretKeyBase64);
-
-    // Decode the encrypted value from base64
-    const encryptedWordArray = CryptoJS.enc.Base64.parse(encryptedBase64);
-
-    // Decrypt using Triple DES
-    const decrypted = CryptoJS.TripleDES.decrypt(
-      {ciphertext: encryptedWordArray},
-      decodedKey,
-      {
-        mode: CryptoJS.mode.ECB,
-        padding: CryptoJS.pad.Pkcs7,
-      },
-    );
-
-    let decryptedText = decrypted.toString(CryptoJS.enc.Utf8);
-
-    if (!decryptedText) {
-      throw new Error('Decryption resulted in empty string');
-    }
-
-    decryptedText = decryptedText.replace(/(.{4})/g, '$1-');
-    if (decryptedText.endsWith('-')) {
-      decryptedText = decryptedText.slice(0, -1);
-    }
-
-    return decryptedText;
-  } catch (error) {
-    throw new Error(`Decryption failed`);
-  }
-}
-
-// Example usage:
-// const decrypted = decryptBase64('encrypted_base64_string', 'your_secret_key');
-
 /**
  * Converts a camelCase string to PascalCase with specific formatting
  * Example: billerId -> BillerId

package/template/src/navigation/TabBar.tsx

@@ -16,7 +16,7 @@ import {
   useRTL,
   useTranslation,
 } from '../common/localization/LocalizationProvider';
-import {BlackColors, NewColors} from '../core/theme/colors';
+import {PrimaryColors} from '../core/theme/colors';
 import {CommonSizes} from '../core/theme/commonSizes';
 import {CommonStyles} from '../core/theme/commonStyles';
 import {scaleHeight, scaleWidth} from '../core/theme/scaling';
@@ -125,11 +125,11 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     height: scaleHeight(130),
-    borderTopLeftRadius: CommonSizes.borderRadius.huge,
-    borderTopRightRadius: CommonSizes.borderRadius.huge,
+    borderTopLeftRadius: CommonSizes.borderRadius.xxLarge,
+    borderTopRightRadius: CommonSizes.borderRadius.xxLarge,
     justifyContent: 'space-evenly',
     ...CommonStyles.dropShadow,
-    backgroundColor: BlackColors.indigoBlue,
+    backgroundColor: PrimaryColors.PlatinateBlue_600,
     position: 'absolute',
     bottom: 0,
     left: 0,
@@ -141,6 +141,6 @@ const styles = StyleSheet.create({
   },
   label: {},
   labelFocused: {
-    color: NewColors.blueNormalActive,
+    color: PrimaryColors.PlatinateBlue_400,
   },
 });

package/template/src/screens/index.tsx

@@ -1,24 +1,9 @@
 // Authentication Screens
 export {Login} from './Login/Login';
 export {OTPScreen as OTP} from './OTP/OTPScreen';
-export {ForceChangePasswordScreen as ForceChangePassword} from './ForceChangePassword/ForceChangePasswordScreen';
 
 // Main Navigation Screens
 export {HomeScreen as Home} from './home/HomeScreen';
 export {Profile} from './profile/Profile';
 export {Splash} from './splash/Splash';
 
-// Service Related Screens
-export {Categories} from './Categories/Categories';
-export {Services} from './Services/Services';
-export {SingleService} from './SingleService/SingleService';
-export {Providers} from './Providers/Providers';
-export {InquiredBill} from './InquiredBill/InquiredBill';
-export {PaymentConfirmation} from './PaymentConfirmation/PaymentConfirmation';
-
-// History and Receipt Screens
-export {History} from './History/History';
-export {Favorites} from './Favorites/Favorites';
-
-// Device and Card Related Screens
-export {ReceiptScreen} from './ReceiptScreen/ReceiptScreen';

package/template/tsconfig.json

@@ -1,3 +1,8 @@
 {
-  "extends": "@react-native/typescript-config/tsconfig.json"
+  "extends": "@react-native/typescript-config",
+  "compilerOptions": {
+    "types": ["jest"]
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["**/node_modules", "**/Pods"]
 }

package/template.config.js

@@ -1,4 +1,6 @@
 module.exports = {
-  placeholderName: "reactnativemagic",
-  templateDir: "./template",
+  placeholderName: 'reactnativemagic',
+  titlePlaceholder: 'React Native Magic App',
+  templateDir: './template',
+  postInitScript: 'scripts/askPackageName.js',
 };