@fadyshawky/react-native-magic 2.2.0 → 2.3.0

package/template/src/screens/splash/Splash.tsx

@@ -1,19 +1,52 @@
 import {useNavigation} from '@react-navigation/native';
 import React, {useEffect} from 'react';
-import {LoadingComponent} from '../../common/components/LoadingComponent';
-import {useAppSelector} from '../../core/store/reduxHelpers';
+import {ActivityIndicator, StyleSheet, View} from 'react-native';
+import {Logo} from '../../common/components/Logo';
+import {RTLAwareText} from '../../common/components/RTLAwareText';
+import {CommonSizes} from '../../core/theme/commonSizes';
+import {useTheme} from '../../core/theme/ThemeProvider';
 
+/**
+ * Branded splash. Only ever shown to logged-out users (the token gate in
+ * MainNavigation renders the app stack directly when a token exists), so it
+ * simply brands the launch and hands off to Login.
+ */
 export function Splash(): JSX.Element {
-  const isUserLoggedIn = useAppSelector(state => state.user.accessToken);
-  const navigation = useNavigation();
+  const navigation = useNavigation<any>();
+  const {theme} = useTheme();
 
   useEffect(() => {
-    if (isUserLoggedIn) {
-      navigation.navigate('Main' as never);
-    } else {
-      navigation.navigate('Login' as never);
-    }
-  }, [isUserLoggedIn]);
+    const id = setTimeout(() => navigation.replace('Login'), 1100);
+    return () => clearTimeout(id);
+  }, [navigation]);
 
-  return <LoadingComponent />;
+  return (
+    <View
+      style={[styles.container, {backgroundColor: theme.colors.background_2}]}>
+      <Logo size={112} variant="gradient" />
+      <RTLAwareText
+        style={[
+          theme.text.bodySmallExtraBold,
+          styles.tagline,
+          {color: theme.colors.grayScale_200},
+        ]}>
+        REACT NATIVE MAGIC
+      </RTLAwareText>
+      <ActivityIndicator
+        color={theme.colors.PlatinateBlue_400}
+        style={styles.spinner}
+      />
+    </View>
+  );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: CommonSizes.spacing.large,
+  },
+  tagline: {letterSpacing: 2},
+  spinner: {marginTop: CommonSizes.spacing.large},
+});

package/template/src/sheetManager/sheets.tsx

@@ -1,6 +1,6 @@
 // We extend some of the types here to give us great intellisense
 
-import {registerSheet, SheetDefinition} from 'react-native-actions-sheet';
+import {SheetDefinition} from 'react-native-actions-sheet';
 
 type Sheet = SheetDefinition;
 

package/template/tsconfig.json

@@ -1,8 +1,20 @@
 {
   "extends": "@react-native/typescript-config",
   "compilerOptions": {
-    "types": ["jest"]
+    "types": ["jest"],
+    "baseUrl": ".",
+    "paths": {
+      "@core/*": ["src/core/*"],
+      "@common/*": ["src/common/*"],
+      "@navigation/*": ["src/navigation/*"],
+      "@screens/*": ["src/screens/*"],
+      "@sheetManager/*": ["src/sheetManager/*"],
+      "@design-system": ["src/design-system"],
+      "@design-system/*": ["src/design-system/*"],
+      "@types/*": ["src/types/*"],
+      "@utils/*": ["src/utils/*"]
+    }
   },
   "include": ["**/*.ts", "**/*.tsx"],
-  "exclude": ["**/node_modules", "**/Pods"]
+  "exclude": ["**/node_modules", "**/Pods", "e2e"]
 }

package/template/types/globals.d.ts

@@ -0,0 +1,43 @@
+// Global type shims for the template.
+//
+// React 19 removed the global `JSX` namespace (it now lives at `React.JSX`).
+// The codebase annotates components with `JSX.Element`, so we re-expose the
+// global namespace by mapping it onto `React.JSX`.
+import type * as React from 'react';
+
+declare global {
+  namespace JSX {
+    type ElementType = React.JSX.ElementType;
+    interface Element extends React.JSX.Element {}
+    interface ElementClass extends React.JSX.ElementClass {}
+    interface ElementAttributesProperty
+      extends React.JSX.ElementAttributesProperty {}
+    interface ElementChildrenAttribute
+      extends React.JSX.ElementChildrenAttribute {}
+    type LibraryManagedAttributes<C, P> = React.JSX.LibraryManagedAttributes<
+      C,
+      P
+    >;
+    interface IntrinsicAttributes extends React.JSX.IntrinsicAttributes {}
+    interface IntrinsicClassAttributes<T>
+      extends React.JSX.IntrinsicClassAttributes<T> {}
+    interface IntrinsicElements extends React.JSX.IntrinsicElements {}
+  }
+}
+
+// NOTE: bare `declare module 'x';` ambient shims for untyped packages live in
+// `modules.d.ts` (a script file with no imports) — they don't work here because
+// this file is a module (it has a top-level import).
+
+// react-native-snackbar ships a default export at runtime but its bundled
+// types omit it — add the default so `import Snackbar from ...` type-checks.
+declare module 'react-native-snackbar' {
+  const Snackbar: {
+    LENGTH_SHORT: number;
+    LENGTH_LONG: number;
+    LENGTH_INDEFINITE: number;
+    show(options: {text: string; duration?: number; [key: string]: any}): void;
+    dismiss(): void;
+  };
+  export default Snackbar;
+}

package/template/types/index.ts

@@ -1,6 +1,5 @@
 import {ColorValue, PressableProps, TextStyle, ViewStyle} from 'react-native';
 import {RehydrateAction} from 'redux-persist';
-import {IconProps} from 'react-native-vector-icons/Icon';
 import {SFSymbolProps} from 'react-native-sfsymbols';
 import {RootState} from '../src/core/store/rootReducer';
 import {SFSymbols} from '../resources/symbols/SFSymbols';
@@ -14,12 +13,11 @@ export interface ICalendarSpec {
   sameElse: string;
 }
 
-export interface IIconPlatformProps
-  extends Omit<IconProps, 'name' | 'color'>,
-    Omit<SFSymbolProps, 'name'> {
+export interface IIconPlatformProps extends Omit<SFSymbolProps, 'name'> {
   iosName?: SFSymbols;
   androidName?: string;
   color?: ColorValue;
+  size?: number;
   style?: TextStyle | ViewStyle;
 }
 
@@ -64,14 +62,12 @@ export enum ButtonType {
   outlineNegative = 'outlineNegative',
 }
 
-// eslint-disable-next-line import/no-unused-modules
 export interface IListState<T> {
   data: T[];
   loadState: LoadState;
   error: string | null;
 }
 
-// eslint-disable-next-line import/no-unused-modules
 export interface ISection<T> {
   data: T[];
   id: string;

package/template/types/modules.d.ts

@@ -0,0 +1,9 @@
+// Ambient shims for JS packages without bundled or @types declarations.
+// This file MUST stay a script (no top-level import/export) so these act as
+// ambient module declarations, giving the imports an implicit `any` type.
+declare module 'lodash';
+declare module 'lodash/omit';
+declare module 'intl';
+declare module 'react-native-vector-icons/MaterialIcons';
+declare module 'react-native-vector-icons/Ionicons';
+declare module 'react-native-vector-icons/Icon';

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

@@ -10,10 +10,8 @@ declare module 'react-native-config' {
   }
 
   // @ts-ignore
-  // eslint-disable-next-line import/no-unused-modules
   export const Config: EnvironmentVariables;
 
   // @ts-ignore
-  // eslint-disable-next-line import/no-default-export,import/no-unused-modules
   export default Config;
 }

package/.vscode/settings.json

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

package/CHANGELOG.md

@@ -1,119 +0,0 @@
-# Changelog
-
-All notable changes to this project will be documented in this file.
-
-## [1.0.8] - 2024-01-24
-
-### Changed
-- Improved FeaturedCarousel component:
-  - Centered carousel items on screen
-  - Adjusted item width to 85% of screen width
-  - Added proper item layout calculations
-  - Enhanced snapping behavior
-
-## [1.0.7] - 2024-12-27
-
-### Changed
-- Enhanced UI components for better user experience:
-  - Improved form input styling
-  - Updated button states for better feedback
-  - Refined error message displays
-  - Added loading spinners for async actions
-  - Standardized form layouts across authentication flows
-
-### Added
-- Responsive design improvements for mobile devices
-- Visual feedback for form validation states
-- Transition animations for state changes
-- Consistent error message styling
-
-## [1.0.6] - 2024-12-25
-
-### Added
-- Added missing password reset handlers (`resetPasswordErrorHandler` and `resetPasswordLoadingHandler`) to user slice
-- Added password reset flow with the following states:
-  - Loading state during password reset request
-  - Error handling for failed password reset attempts
-  - Success handling for completed password reset
-- Added complete user registration flow:
-  - User input validation
-  - Registration request handling
-  - Success state with automatic login
-  - Error handling for failed registration attempts
-  - Loading states during registration process
-
-### Fixed
-- Fixed password reset error handling in user slice
-- Resolved undefined handler errors in password reset flow
-- Improved registration flow error handling
-
-## [1.0.5] - 2024-12-23
-
-### Fixed
-- Resolved Android build configuration issues
-- Fixed package dependencies setup and initialization
-- Optimized Gradle build settings for Android
-- Fixed iOS permissions configuration
-
-## [1.0.4] - 2024-12-22
-
-### Fixed
-- Updated React Native Screens configuration for React Navigation v7 compatibility
-- Fixed navigation theme implementation for Poppins font family
-
-### Changed
-- Simplified navigation container theme configuration
-- Removed deprecated font configurations
-
-## [1.0.3] - 2024-12-21
-
-### Added
-- Enhanced template structure with additional hooks and utilities
-- Added new dependencies:
-  - @react-native-camera-roll/camera-roll ^7.9.0
-  - @react-native-community/datetimepicker ^8.2.0
-  - @react-native-community/image-editor ^4.2.1
-  - @react-native-community/netinfo ^11.4.1
-  - @react-native-community/slider ^4.5.5
-  - @shopify/flash-list ^1.7.2
-
-### Updated
-- Updated React Navigation to v7
-- Updated dependencies to latest versions:
-  - @react-navigation/bottom-tabs ^7.2.0
-  - @react-navigation/drawer ^7.1.1
-  - @react-navigation/material-top-tabs ^7.1.0
-  - @react-navigation/native ^7.0.14
-  - @react-navigation/native-stack ^7.2.0
-  - @reduxjs/toolkit ^2.5.0
-
-### Changed
-- Improved project structure and organization
-- Enhanced iOS configuration
-- Updated Android Gradle configuration
-
-## [1.0.2] - 2024-12-20
-
-### Added
-- Initial template setup with TypeScript support
-- Basic navigation structure
-- Redux integration with persist storage
-- Common hooks and utilities
-
-### Changed
-- Updated project dependencies
-- Improved documentation
-
-## [1.0.1] - 2024-12-19
-
-### Added
-- Basic React Native template structure
-- Essential project configuration
-- Initial README documentation
-
-## [1.0.0] - 2024-12-18
-
-### Added
-- Initial release
-- Basic project setup
-- Core dependencies 

package/CODE_OF_CONDUCT.md

@@ -1,83 +0,0 @@
-# Contributor Covenant Code of Conduct
-
-## Our Pledge
-
-We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, caste, color, religion, or sexual identity and orientation.
-
-We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community.
-
-## Our Standards
-
-Examples of behavior that contributes to a positive environment for our community include:
-
-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the overall community
-
-Examples of unacceptable behavior include:
-
-* The use of sexualized language or imagery, and sexual attention or advances of any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or email address, without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a professional setting
-
-## Enforcement Responsibilities
-
-Community leaders are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior that they deem inappropriate, threatening, offensive, or harmful.
-
-Community leaders have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, and will communicate reasons for moderation decisions when appropriate.
-
-## Scope
-
-This Code of Conduct applies within all community spaces, and also applies when an individual is officially representing the community in public spaces. Examples of representing our community include using an official e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event.
-
-## Enforcement
-
-Instances of abusive, harassing, or otherwise unacceptable behavior may be reported to the community leaders responsible for enforcement by [opening an issue](https://github.com/fadyshawky/ReactNativeMagic/issues) (for sensitive reports, use a private channel as described in the issue template or contact the repository owner directly). All complaints will be reviewed and investigated promptly and fairly.
-
-All community leaders are obligated to respect the privacy and security of the reporter of any incident.
-
-## Enforcement Guidelines
-
-Community leaders will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this Code of Conduct:
-
-### 1. Correction
-
-**Community Impact**: Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community.
-
-**Consequence**: A private, written warning from community leaders, providing clarity around the nature of the violation and an explanation of why the behavior was inappropriate. A public apology may be requested.
-
-### 2. Warning
-
-**Community Impact**: A violation through a single incident or series of actions.
-
-**Consequence**: A warning with consequences for continued behavior. No interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, for a specified period of time. This includes avoiding interactions in community spaces as well as external channels like social media. Violating these terms may lead to a temporary or permanent ban.
-
-### 3. Temporary Ban
-
-**Community Impact**: A serious violation of community standards, including sustained inappropriate behavior.
-
-**Consequence**: A temporary ban from any sort of interaction or public communication with the community for a specified period of time. No public or private interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, is allowed during this period. Violating these terms may lead to a permanent ban.
-
-### 4. Permanent Ban
-
-**Community Impact**: Demonstrating a pattern of violation of community standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals.
-
-**Consequence**: A permanent ban from any sort of public interaction within the community.
-
-## Attribution
-
-This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 2.1, available at [https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1].
-
-Community Impact Guidelines were inspired by [Mozilla's code of conduct enforcement ladder][Mozilla CoC].
-
-For answers to common questions about this code of conduct, see the FAQ at [https://www.contributor-covenant.org/faq][FAQ]. Translations are available at [https://www.contributor-covenant.org/translations][translations].
-
-[homepage]: https://www.contributor-covenant.org
-[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html
-[Mozilla CoC]: https://github.com/mozilla/diversity
-[FAQ]: https://www.contributor-covenant.org/faq
-[translations]: https://www.contributor-covenant.org/translations

package/CONTRIBUTING.md

@@ -1,60 +0,0 @@
-# Contributing to ReactNativeMagic
-
-Thank you for considering contributing. Contributions help keep this template useful for everyone.
-
-This project adheres to a [Code of Conduct](CODE_OF_CONDUCT.md). By participating, you are expected to uphold it.
-
-## How to contribute
-
-- **Bug reports & feature ideas** – Open an [issue](https://github.com/fadyshawky/ReactNativeMagic/issues).
-- **Code or docs** – Open a pull request (see below).
-
-## Development setup
-
-1. **Clone the repo**
-   ```bash
-   git clone https://github.com/fadyshawky/ReactNativeMagic.git
-   cd ReactNativeMagic
-   ```
-
-2. **Work inside the template**
-   The app that users get lives in the `template/` folder. To test changes:
-   ```bash
-   cd template
-   npm install
-   npm start          # Metro
-   npm run ios        # or use an android:* script
-   ```
-
-3. **Test with a fresh init (recommended)**
-   Create a new app using the local template to ensure init still works:
-   ```bash
-   npx @react-native-community/cli init TestApp --template file:/absolute/path/to/ReactNativeMagic
-   cd TestApp && npm install && npm start
-   ```
-
-## Before submitting
-
-- **Lint** – Run `npm run lint` from the `template/` directory and fix any errors.
-- **Scope** – Prefer small, focused PRs (one fix or one feature).
-- **Docs** – If you change behavior or add options, update the README or `template/docs/` as needed.
-
-## Pull request process
-
-1. Fork the repo and create a branch from `main`.
-2. Make your changes in `template/` (and root files like README, CONTRIBUTING, or `template.config.js` if relevant).
-3. Ensure the template still runs and that a new project can be created with `--template file:...` as above.
-4. Open a PR with a clear title and description. Link any related issues.
-5. After review, a maintainer will merge when ready.
-
-## What to contribute
-
-- **Bug fixes** – Crashes, wrong behavior, or broken init/build.
-- **Template improvements** – Dependencies, structure, theme, or docs that benefit most users.
-- **Documentation** – Fixes or clarifications in README, CONTRIBUTING, or `template/docs/`.
-
-If you’re unsure whether a change fits, open an issue first and we can discuss it.
-
-## License
-
-By contributing, you agree that your contributions will be licensed under the same [MIT License](LICENSE.md) as the project.

package/local.properties

@@ -1 +0,0 @@
- 

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

@@ -1,107 +0,0 @@
-import React, {FC, memo, useCallback} from 'react';
-import {ImageStyle, ImageURISource, ViewStyle} from 'react-native';
-import ImagePicker, {
-  Image as CropperImage,
-  Options,
-} from 'react-native-image-crop-picker';
-import {showActionSheet} from '../helpers/dialogsHelpers';
-import {localization} from '../localization/localization';
-import {PhotoTakingButton} from './PhotoTakingButton';
-
-interface IProps {
-  onImagePicked: (image: CropperImage) => void;
-  onRemoveImage: () => void;
-  onPickerError?: (error: Error) => void;
-  image?: ImageURISource | null;
-  icon?: ImageURISource;
-  style?: ViewStyle;
-  iconStyle?: ImageStyle;
-  imageStyle?: ImageStyle;
-  disabled?: boolean;
-}
-
-export const ImageCropPickerButton: FC<IProps> = memo(
-  ({
-    onPickerError,
-    onImagePicked,
-    onRemoveImage,
-    image,
-    icon,
-    style,
-    iconStyle,
-    imageStyle,
-    disabled,
-  }) => {
-    const openGallery = useCallback(() => {
-      ImagePicker.openPicker(pickerOptions)
-        .then(imageResult => {
-          onImagePicked(imageResult);
-        })
-        .catch(error => {
-          onPickerError && onPickerError(error);
-        });
-    }, [onImagePicked, onPickerError]);
-
-    const openCamera = useCallback(() => {
-      ImagePicker.openCamera(pickerOptions)
-        .then(imageResult => {
-          onImagePicked(imageResult);
-        })
-        .catch(error => {
-          onPickerError && onPickerError(error);
-        });
-    }, [onImagePicked, onPickerError]);
-
-    const onPress = useCallback(() => {
-      const options = [
-        localization.common.cancel,
-        localization.common.chooseFromLibrary,
-        localization.common.takePhoto,
-      ];
-
-      if (image != null) {
-        options.push(localization.common.delete);
-      }
-
-      showActionSheet(
-        {
-          title: localization.common.selectPhoto,
-          options: options,
-          cancelButtonIndex: 0,
-          destructiveButtonIndex: 3,
-        },
-        optionIndex => {
-          if (optionIndex == 1) {
-            openGallery();
-          } else if (optionIndex == 2) {
-            openCamera();
-          } else if (optionIndex == 3) {
-            onRemoveImage();
-          }
-        },
-      );
-    }, [openGallery, openCamera, image, onRemoveImage]);
-
-    return (
-      <PhotoTakingButton
-        style={style}
-        iconStyle={iconStyle}
-        imageStyle={imageStyle}
-        onPressIn={onPress}
-        backgroundImage={image}
-        icon={icon}
-        disabled={disabled}
-      />
-    );
-  },
-);
-
-const pickerOptions: Options = {
-  height: 1000,
-  width: 1000,
-  cropping: true,
-  compressImageQuality: 0.5,
-  multiple: false,
-  mediaType: 'photo',
-  includeBase64: true,
-};

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

@@ -1,94 +0,0 @@
-import React, {FC, Fragment, memo, ReactNode} from 'react';
-import {
-  Image,
-  ImageBackground,
-  ImageStyle,
-  ImageURISource,
-  StyleSheet,
-  TouchableOpacity,
-  ViewStyle,
-} from 'react-native';
-import {Image as CropperImage} from 'react-native-image-crop-picker';
-import {CommonSizes} from '../../core/theme/commonSizes';
-
-interface IProps {
-  onPress?: () => void;
-  icon?: ImageURISource;
-  backgroundImage?: ImageURISource | CropperImage | null;
-  style?: ViewStyle;
-  iconStyle?: ImageStyle;
-  imageStyle?: ImageStyle;
-  disabled?: boolean;
-}
-
-export const PhotoTakingButton: FC<IProps> = memo(
-  ({
-    icon,
-    onPress,
-    backgroundImage,
-    style,
-    iconStyle,
-    imageStyle,
-    disabled,
-  }) => {
-    return (
-      <TouchableOpacity
-        style={[styles.button, style]}
-        onPressIn={onPress}
-        disabled={disabled}>
-        <BackgroundComponent image={backgroundImage} style={imageStyle}>
-          <Image style={[styles.icon, iconStyle]} source={icon!} />
-        </BackgroundComponent>
-      </TouchableOpacity>
-    );
-  },
-);
-
-interface IBackgroundComponentProps {
-  image?: ImageURISource | null;
-  style?: ImageStyle;
-  children?: ReactNode;
-}
-
-const BackgroundComponent: FC<IBackgroundComponentProps> = memo(
-  ({image, children, style}) => {
-    if (image != null) {
-      return (
-        <ImageBackground
-          source={image}
-          style={[styles.image, style]}
-          imageStyle={[styles.image, style]}>
-          {children}
-        </ImageBackground>
-      );
-    } else {
-      return <Fragment>{children}</Fragment>;
-    }
-  },
-);
-
-const styles = StyleSheet.create({
-  button: {
-    height: 120,
-    width: 120,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: CommonSizes.borderRadius.small,
-    borderWidth: 1,
-  } as ViewStyle,
-  image: {
-    height: 120,
-    width: 120,
-    resizeMode: 'contain',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: CommonSizes.borderRadius.small,
-    overflow: 'hidden',
-  } as ImageStyle,
-  icon: {
-    width: 32,
-    height: 32,
-    resizeMode: 'contain',
-    opacity: 0.8,
-  } as ImageStyle,
-});

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

@@ -1,5 +0,0 @@
-import {Image as CropperImage} from 'react-native-image-crop-picker';
-
-export function convertCropperImageToBase64(image: CropperImage): string {
-  return `data:${image.mime};base64,${image.data}`;
-}