npm - @fadyshawky/react-native-magic - Versions diffs - 2.2.0 → 2.3.0 - Mend

@fadyshawky/react-native-magic 2.2.0 → 2.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (138) hide show

package/LICENSE +21 -0
package/README.md +90 -55
package/index.js +4 -0
package/package.json +9 -3
package/scripts/askPackageName.js +10 -5
package/template/.env.development +8 -6
package/template/.env.example +15 -5
package/template/.env.production +8 -6
package/template/.env.staging +8 -6
package/template/.eslintrc.js +14 -0
package/template/.husky/pre-commit +1 -0
package/template/App.tsx +47 -16
package/template/__tests__/App.test.tsx +28 -10
package/template/babel.config.js +20 -1
package/template/docs/ARCHITECTURE.md +40 -10
package/template/docs/BEST_PRACTICES.md +10 -1
package/template/docs/CUSTOMIZATION.md +118 -5
package/template/docs/design-system.html +1164 -0
package/template/docs/wireframes.html +411 -0
package/template/index.js +10 -0
package/template/jest.config.js +16 -1
package/template/jest.setup.js +61 -0
package/template/package-lock.json +12178 -8293
package/template/package.json +53 -19
package/template/react-native.config.js +3 -0
package/template/resources/fonts/.gitkeep +0 -0
package/template/scripts/ci-sync-env.cjs +71 -0
package/template/src/assets/brand/logo-mark.svg +8 -0
package/template/src/assets/brand/logo-mono.svg +9 -0
package/template/src/assets/brand/logo-primary.svg +15 -0
package/template/src/assets/brand/wordmark-dark.svg +18 -0
package/template/src/common/components/AppBottomSheet.tsx +87 -0
package/template/src/common/components/AppSwitch.tsx +75 -0
package/template/src/common/components/AppTextInput.tsx +161 -0
package/template/src/common/components/Avatar.tsx +75 -0
package/template/src/common/components/Badge.tsx +66 -0
package/template/src/common/components/CardScroller.tsx +58 -0
package/template/src/common/components/Cards.tsx +13 -7
package/template/src/common/components/Carousel.tsx +196 -0
package/template/src/common/components/Checkbox.tsx +85 -0
package/template/src/common/components/Chip.tsx +55 -0
package/template/src/common/components/Dropdown.tsx +202 -0
package/template/src/common/components/ErrorBoundary.tsx +82 -0
package/template/src/common/components/FlatListWrapper.tsx +8 -8
package/template/src/common/components/ListItem.tsx +90 -0
package/template/src/common/components/LoadingComponent.tsx +8 -2
package/template/src/common/components/Logo.tsx +77 -0
package/template/src/common/components/ModalDialog.tsx +141 -0
package/template/src/common/components/NetworkBanner.tsx +47 -0
package/template/src/common/components/OTPInput.tsx +0 -1
package/template/src/common/components/PrimaryButton.tsx +0 -14
package/template/src/common/components/PrimaryTextInput.tsx +66 -130
package/template/src/common/components/RadioGroup.tsx +95 -0
package/template/src/common/components/SafeText.tsx +4 -3
package/template/src/common/components/SearchBar.tsx +7 -5
package/template/src/common/components/SegmentedControl.tsx +77 -0
package/template/src/common/components/Skeleton.tsx +47 -0
package/template/src/common/components/TryAgain.tsx +4 -2
package/template/src/common/helpers/arrayHelpers.ts +2 -2
package/template/src/common/helpers/defaultKeyIdExtractor.ts +1 -1
package/template/src/common/helpers/regexHelpers.ts +1 -2
package/template/src/common/helpers/stringsHelpers.ts +0 -1
package/template/src/common/hooks/useBackHandler.ts +5 -2
package/template/src/common/hooks/useEventRegister.ts +1 -1
package/template/src/common/hooks/useFlatListActions.ts +1 -1
package/template/src/common/hooks/useWhyDidYouUpdate.ts +1 -1
package/template/src/common/localization/LocalizationProvider.tsx +1 -1
package/template/src/common/localization/RTLInitializer.tsx +1 -1
package/template/src/common/localization/dateFormatter.ts +0 -1
package/template/src/common/localization/intlFormatter.ts +0 -1
package/template/src/common/localization/localization.ts +2 -2
package/template/src/common/localization/translations/homeLocalization.ts +14 -0
package/template/src/common/localization/translations/loginLocalization.ts +8 -0
package/template/src/common/localization/translations/mainNavigationLocalization.ts +2 -0
package/template/src/common/localization/translations/profileLocalization.ts +16 -0
package/template/src/common/utils/index.tsx +0 -6
package/template/src/common/validations/commonValidations.ts +2 -2
package/template/src/core/api/errorHandler.ts +1 -1
package/template/src/core/api/responseHandlers.ts +1 -3
package/template/src/core/api/serverHeaders.ts +61 -12
package/template/src/core/notifications/notificationAuth.ts +6 -0
package/template/src/core/notifications/notificationService.ts +125 -0
package/template/src/core/notifications/routeFromNotificationData.ts +32 -0
package/template/src/core/store/categories/categoriesActions.ts +25 -0
package/template/src/core/store/categories/categoriesSlice.ts +51 -0
package/template/src/core/store/categories/categoriesState.ts +19 -0
package/template/src/core/store/rootReducer.ts +2 -0
package/template/src/core/store/store.tsx +6 -1
package/template/src/core/store/user/userActions.ts +75 -14
package/template/src/core/store/user/userSlice.ts +49 -26
package/template/src/core/store/user/userState.ts +6 -4
package/template/src/core/theme/ThemeProvider.tsx +5 -3
package/template/src/core/theme/brand.ts +50 -0
package/template/src/core/theme/colors.ts +113 -99
package/template/src/core/theme/commonConsts.ts +2 -2
package/template/src/core/theme/commonStyles.ts +1 -1
package/template/src/core/theme/themes.ts +2 -0
package/template/src/core/theme/types.ts +4 -2
package/template/src/core/utils/stringUtils.ts +1 -1
package/template/src/design-system/index.ts +2 -0
package/template/src/design-system/tokens/brand.ts +6 -0
package/template/src/design-system/tokens/index.ts +3 -0
package/template/src/design-system/tokens/palette.ts +4 -0
package/template/src/design-system/tokens/typography-spacing.ts +2 -0
package/template/src/navigation/AuthStack.tsx +1 -4
package/template/src/navigation/HeaderComponents.tsx +6 -3
package/template/src/navigation/MainStack.tsx +18 -6
package/template/src/navigation/RootNavigation.tsx +4 -7
package/template/src/navigation/TabBar.tsx +7 -6
package/template/src/navigation/types.ts +10 -31
package/template/src/screens/Login/Login.tsx +47 -47
package/template/src/screens/OTP/OTPScreen.tsx +6 -9
package/template/src/screens/components/ComponentsScreen.tsx +301 -0
package/template/src/screens/home/HomeScreen.tsx +143 -1
package/template/src/screens/home/hooks/useHomeData.ts +19 -5
package/template/src/screens/index.tsx +1 -0
package/template/src/screens/profile/Profile.tsx +139 -2
package/template/src/screens/splash/Splash.tsx +44 -11
package/template/src/sheetManager/sheets.tsx +1 -1
package/template/tsconfig.json +14 -2
package/template/types/globals.d.ts +43 -0
package/template/types/index.ts +2 -6
package/template/types/modules.d.ts +9 -0
package/template/types/react-native-config.d.ts +0 -2
package/.vscode/settings.json +0 -8
package/CHANGELOG.md +0 -119
package/CODE_OF_CONDUCT.md +0 -83
package/CONTRIBUTING.md +0 -60
package/local.properties +0 -1
package/template/src/common/components/ImageCropPickerButton.tsx +0 -107
package/template/src/common/components/PhotoTakingButton.tsx +0 -94
package/template/src/common/helpers/imageHelpers.ts +0 -5
package/template/src/common/helpers/inAppReviewHelper.ts +0 -30
package/template/src/common/helpers/orientationHelpers.ts +0 -25
package/template/src/common/helpers/shareHelpers.ts +0 -47
package/template/src/common/utils/FeesCaalculation.tsx +0 -37
package/template/src/common/utils/printData.tsx +0 -161
package/template/src/common/validations/examples/TextInputWithValidation.tsx +0 -229

package/template/docs/wireframes.html ADDED Viewed

@@ -0,0 +1,411 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>React Native Magic — Wireframes</title>
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700&display=swap" rel="stylesheet" />
+<style>
+  :root{
+    --indigo:#2F6BFF; --indigo-200:#6193FF; --cyan:#6193FF; --cyan-soft:#A6C4FF; --violet:#6353F2;
+    --bg:#06080F; --surface:#0D1124; --raised:#1A2142;
+    --white:#FFFFFF; --near-white:#F4F6FE; --n-200:#D7DCEC; --n-300:#D7DCEC; --muted:#828BB0; --n-500:#59618A; --n-600:#343C63;
+    --error:#DC2A52;
+    --grad:linear-gradient(135deg,#1B45B8,#3E7BFF);
+    --glow-indigo:0 8px 18px rgba(47,107,255,.5);
+    --glow-cyan:0 8px 18px rgba(97,147,255,.42);
+    --hairline:rgba(130,139,176,.10);
+    --hairline-strong:rgba(130,139,176,.20);
+    --font:"Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  }
+  *{box-sizing:border-box;}
+  body{
+    margin:0; font-family:var(--font); color:var(--n-200);
+    background:
+      radial-gradient(1100px 700px at 84% -6%, rgba(97,147,255,.10), transparent 60%),
+      radial-gradient(1200px 800px at 4% 0%, rgba(47,107,255,.18), transparent 55%),
+      radial-gradient(900px 900px at 50% 118%, rgba(99,83,242,.10), transparent 60%),
+      var(--bg);
+    background-attachment:fixed;
+    -webkit-font-smoothing:antialiased;
+  }
+  ::selection{background:rgba(47,107,255,.32); color:#fff;}
+  .wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
+  /* header */
+  header{padding:70px 0 30px;}
+  .eyebrow{font-size:12px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--cyan-soft);
+    margin:0 0 14px; display:inline-flex; align-items:center; gap:9px;}
+  .eyebrow::before{content:""; width:22px; height:1px; background:linear-gradient(90deg,var(--cyan),transparent);}
+  header h1{font-size:44px; line-height:1.08; font-weight:700; color:var(--white); margin:14px 0 0; letter-spacing:-.02em;}
+  header h1 .grad{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
+  header p{font-size:16px; color:var(--muted); max-width:600px; margin:16px 0 0;}
+  .legend{display:flex; flex-wrap:wrap; gap:16px; margin-top:24px;}
+  .lg{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--n-300);}
+  .lg .anno-dot{width:13px; height:13px; border-radius:50%; border:1.5px dashed var(--cyan); background:rgba(97,147,255,.12);}
+  .lg .grad-dot{width:13px; height:13px; border-radius:4px; background:var(--grad);}
+  /* phones grid */
+  .screens{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:34px 28px; padding:34px 0 90px; align-items:start;}
+  .screen-col{display:flex; flex-direction:column; align-items:center;}
+  .screen-label{margin-bottom:18px; text-align:center;}
+  .screen-label .nm{font-size:16px; font-weight:500; color:var(--white);}
+  .screen-label .sub{font-size:12px; color:var(--muted); margin-top:4px; line-height:1.4; max-width:230px;}
+  /* phone frame */
+  .phone{
+    position:relative; width:320px; height:680px; border-radius:42px; padding:13px;
+    background:linear-gradient(160deg,#1A2142,#06080F);
+    box-shadow:0 26px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 1px rgba(47,107,255,.18);
+    flex-shrink:0;
+  }
+  .notch{position:absolute; top:13px; left:50%; transform:translateX(-50%); width:128px; height:26px;
+    background:#03050C; border-radius:0 0 16px 16px; z-index:5;}
+  .screen{
+    position:relative; width:100%; height:100%; border-radius:30px; overflow:hidden;
+    background:radial-gradient(120% 60% at 50% -8%, rgba(47,107,255,.18), transparent 60%), var(--bg);
+    display:flex; flex-direction:column;
+  }
+  .statusbar{display:flex; justify-content:space-between; align-items:center; padding:14px 22px 6px; font-size:11px; color:var(--n-300); font-weight:500;}
+  .statusbar .ico-row{display:flex; gap:6px; align-items:center;}
+  .statusbar .bar-ico{width:16px; height:9px; border:1px solid var(--n-300); border-radius:2px; position:relative;}
+  .statusbar .bar-ico::after{content:""; position:absolute; inset:1.5px; right:5px; background:var(--n-300); border-radius:1px;}
+  .scr-body{flex:1; display:flex; flex-direction:column; padding:8px 20px 0; position:relative;}
+  /* annotation callouts */
+  .anno{position:absolute; z-index:30; display:flex; align-items:center; gap:0; pointer-events:none;}
+  .anno .bub{font-size:10.5px; line-height:1.3; color:#0A1230; background:rgba(166,196,255,.96); padding:5px 9px; border-radius:9px;
+    box-shadow:0 4px 12px rgba(0,0,0,.4); font-weight:500; max-width:128px; white-space:normal;}
+  .anno .lead{height:1.5px; width:26px; background:linear-gradient(90deg,rgba(166,196,255,.9),rgba(166,196,255,.2));}
+  .anno .lead.l{background:linear-gradient(270deg,rgba(166,196,255,.9),rgba(166,196,255,.2));}
+  .anno.right{flex-direction:row;} .anno.left{flex-direction:row-reverse;}
+  .anno .tip{width:7px; height:7px; border-radius:50%; background:var(--cyan-soft); box-shadow:0 0 8px var(--cyan-soft); flex-shrink:0;}
+  /* shared UI bits */
+  .logo-sm{display:inline-flex;}
+  .h-greet{font-size:13px; color:var(--muted);}
+  .h-name{font-size:19px; color:var(--white); font-weight:700; margin-top:2px; letter-spacing:-.01em;}
+  .top-bar{display:flex; align-items:center; justify-content:space-between; padding:6px 0 18px;}
+  .avatar-sm{width:40px; height:40px; border-radius:13px; background:rgba(26,33,66,.85); border:1px solid var(--hairline-strong);
+    display:flex; align-items:center; justify-content:center; color:var(--cyan-soft); font-weight:700; font-size:14px;}
+  .bell{width:40px; height:40px; border-radius:13px; background:rgba(26,33,66,.85); border:1px solid var(--hairline-strong);
+    display:flex; align-items:center; justify-content:center;}
+  .bell svg{width:19px; height:19px;}
+  .hero-card{border-radius:20px; padding:20px; background:linear-gradient(135deg,#1B45B8,#3E7BFF); color:#FFFFFF; box-shadow:var(--glow-indigo); position:relative; overflow:hidden;}
+  .hero-card::after{content:""; position:absolute; right:-30px; top:-30px; width:120px; height:120px; border-radius:50%; background:rgba(255,255,255,.18);}
+  .hero-card .lab{font-size:12px; opacity:.78; font-weight:500;}
+  .hero-card .amt{font-size:30px; font-weight:700; margin-top:6px; letter-spacing:-.01em;}
+  .hero-card .row{display:flex; justify-content:space-between; align-items:flex-end; margin-top:18px; position:relative; z-index:1; gap:12px;}
+  .hero-card .chip{font-size:11px; background:rgba(255,255,255,.18); padding:6px 12px; border-radius:1000px; font-weight:500; white-space:nowrap; flex-shrink:0;}
+  .hero-card .hsub{font-size:12px; opacity:.82; line-height:1.4; font-weight:400;}
+  .sec-title{font-size:13px; color:var(--white); font-weight:500; letter-spacing:.02em; margin:22px 0 12px; display:flex; justify-content:space-between; align-items:center;}
+  .sec-title .more{font-size:11px; color:var(--cyan-soft); font-weight:400;}
+  .cat-card{display:flex; align-items:center; gap:13px; padding:13px; border-radius:15px; background:rgba(13,17,36,.6);
+    border:1px solid var(--hairline); margin-bottom:11px;}
+  .cat-ico{width:42px; height:42px; border-radius:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
+  .cat-ico svg{width:21px; height:21px;}
+  .cat-ico.grad-ico{background:var(--grad); color:#fff; font-weight:700; font-size:16px; box-shadow:var(--glow-indigo);}
+  .cat-body{flex:1; min-width:0;}
+  .cat-body .t{font-size:14px; color:var(--white); font-weight:500;}
+  .cat-body .d{font-size:11.5px; color:var(--muted); margin-top:2px;}
+  .chev{color:var(--n-500); font-size:17px;}
+  /* shimmer */
+  .sh-card{display:flex; align-items:center; gap:13px; padding:13px; border-radius:15px; background:rgba(13,17,36,.4); border:1px solid var(--hairline);}
+  .sh{background:linear-gradient(90deg,rgba(47,107,255,.10) 0%,rgba(47,107,255,.24) 50%,rgba(47,107,255,.10) 100%); background-size:200% 100%; animation:shim 1.5s ease-in-out infinite; border-radius:7px;}
+  .sh.chip{width:42px; height:42px; border-radius:13px; flex-shrink:0;}
+  .sh.l1{height:11px; width:62%;} .sh.l2{height:9px; width:38%; margin-top:8px;}
+  @keyframes shim{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
+  /* inputs */
+  .w-field{margin-bottom:14px;}
+  .w-field label{font-size:11.5px; color:var(--n-300); font-weight:500; display:block; margin-bottom:6px;}
+  .w-input{height:50px; border-radius:14px; background:rgba(6,8,15,.6); border:1.5px solid var(--hairline-strong);
+    display:flex; align-items:center; gap:10px; padding:0 15px; font-size:14px; color:var(--white);}
+  .w-input.focus{border-color:var(--cyan); box-shadow:0 0 0 4px rgba(97,147,255,.14);}
+  .w-input .ico{color:var(--muted); font-size:15px;}
+  .w-input .ph{color:var(--n-500);}
+  .w-input .dots{letter-spacing:3px; color:var(--white);}
+  .w-btn{height:52px; border-radius:15px; background:var(--grad); color:#FFFFFF; font-weight:500; font-size:15px;
+    display:flex; align-items:center; justify-content:center; gap:9px; box-shadow:var(--glow-indigo); border:0; width:100%; font-family:var(--font); margin-top:6px;}
+  .w-btn.danger{background:linear-gradient(135deg,#E23A5F,#DC2A52); box-shadow:0 8px 18px rgba(220,42,82,.4); color:#fff;}
+  /* splash */
+  .splash{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; position:relative;}
+  .splash .glow-ring{position:absolute; width:220px; height:220px; border-radius:50%;
+    background:radial-gradient(circle, rgba(97,147,255,.16), transparent 70%); top:42%; transform:translateY(-50%);}
+  .splash .name{font-size:22px; font-weight:700; color:var(--white); letter-spacing:.02em; z-index:1;}
+  .splash .tag{font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--cyan-soft); margin-top:-16px; z-index:1;}
+  .loader{width:120px; height:3px; border-radius:1000px; background:rgba(47,107,255,.18); overflow:hidden; position:relative; z-index:1;}
+  .loader::after{content:""; position:absolute; left:0; top:0; height:100%; width:42%; border-radius:1000px; background:var(--grad);
+    animation:slide 1.4s ease-in-out infinite; box-shadow:var(--glow-cyan);}
+  @keyframes slide{0%{left:-42%;}100%{left:100%;}}
+  /* login */
+  .login-top{display:flex; flex-direction:column; align-items:center; padding:30px 0 6px;}
+  .login-h{font-size:26px; font-weight:700; color:var(--white); text-align:center; margin:22px 0 4px; letter-spacing:-.01em;}
+  .login-sub{font-size:13px; color:var(--muted); text-align:center; margin-bottom:26px;}
+  .forgot{text-align:right; font-size:12px; color:var(--cyan-soft); margin:2px 2px 18px;}
+  .lang-toggle{display:flex; align-items:center; justify-content:center; gap:0; margin-top:auto; padding:18px 0 22px;}
+  .lang-pill{display:inline-flex; border:1px solid var(--hairline-strong); border-radius:1000px; overflow:hidden; background:rgba(6,8,15,.5);}
+  .lang-pill span{padding:7px 16px; font-size:12px; font-weight:500; color:var(--muted);}
+  .lang-pill span.on{background:var(--grad); color:#FFFFFF;}
+  /* profile */
+  .prof-head{display:flex; flex-direction:column; align-items:center; padding:14px 0 8px;}
+  .prof-av{width:84px; height:84px; border-radius:28px; background:linear-gradient(150deg,rgba(47,107,255,.4),rgba(97,147,255,.25)),var(--raised);
+    border:1px solid rgba(47,107,255,.5); display:flex; align-items:center; justify-content:center; color:var(--white); font-size:28px; font-weight:700;
+    box-shadow:var(--glow-indigo);}
+  .info-card{border-radius:16px; padding:16px 16px; background:rgba(13,17,36,.6); border:1px solid var(--hairline); margin:18px 0 8px; text-align:center;}
+  .info-card .pn{font-size:17px; color:var(--white); font-weight:700;}
+  .info-card .pm{font-size:13px; color:var(--cyan-soft); margin-top:4px;}
+  .prow{display:flex; align-items:center; gap:13px; padding:15px 14px; border-radius:14px; background:rgba(13,17,36,.5); border:1px solid var(--hairline); margin-bottom:11px;}
+  .prow .pico{width:38px; height:38px; border-radius:12px; background:rgba(47,107,255,.14); border:1px solid rgba(47,107,255,.32);
+    display:flex; align-items:center; justify-content:center; color:var(--indigo-200); flex-shrink:0;}
+  .prow .pico svg{width:19px; height:19px;}
+  .prow .pbody{flex:1;}
+  .prow .pt{font-size:13.5px; color:var(--white); font-weight:500;}
+  .prow .pv{font-size:11.5px; color:var(--muted); margin-top:2px;}
+  .seg{display:inline-flex; border:1px solid var(--hairline-strong); border-radius:1000px; overflow:hidden;}
+  .seg b{font-size:10px; padding:4px 9px; font-weight:500; color:var(--n-500);}
+  .seg b.on{background:rgba(47,107,255,.25); color:var(--white);}
+  .home-scroll{overflow:hidden;}
+  @media (max-width:1180px){ .screens{grid-template-columns:repeat(2,minmax(0,1fr)); justify-items:center; gap:48px 24px;} }
+  @media (max-width:720px){ .screens{grid-template-columns:1fr;} header h1{font-size:34px;} }
+  @media (max-width:380px){ .phone{transform:scale(.92); transform-origin:top center;} }
+</style>
+</head>
+<body>
+<svg width="0" height="0" style="position:absolute"><defs>
+  <linearGradient id="ig" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#3E7BFF"/><stop offset="1" stop-color="#A6C4FF"/></linearGradient>
+</defs></svg>
+<header>
+  <div class="wrap">
+    <div class="eyebrow">Flows &amp; Screens</div>
+    <h1>React Native <span class="grad">Magic</span> — Wireframes</h1>
+    <p>Four core screens for any app scaffolded from the template — Splash, Sign in, Home, and Profile — annotated with key elements and on-brand styling.</p>
+    <div class="legend">
+      <div class="lg"><span class="anno-dot"></span> Annotation callout</div>
+      <div class="lg"><span class="grad-dot"></span> Signature gradient surface</div>
+      <div class="lg">320 &times; 680 frame</div>
+    </div>
+  </div>
+</header>
+<div class="wrap">
+  <div class="screens">
+    <!-- ============ SPLASH ============ -->
+    <div class="screen-col">
+      <div class="screen-label"><div class="nm">Splash</div><div class="sub">First paint while the app boots and restores session.</div></div>
+      <div class="phone">
+        <div class="notch"></div>
+        <div class="screen">
+          <div class="statusbar"><span>9:41</span><div class="ico-row"><span>&#9209;</span><span class="bar-ico"></span></div></div>
+          <div class="scr-body">
+            <div class="anno right" style="top:200px; left:236px;"><span class="tip"></span><span class="lead"></span><span class="bub">Centered brand logo with blue halo</span></div>
+            <div class="anno left" style="top:486px; left:-16px;"><span class="tip"></span><span class="lead l"></span><span class="bub">Thin indeterminate loader</span></div>
+            <div class="splash">
+              <div class="glow-ring"></div>
+              <svg width="92" height="92" viewBox="0 0 120 120" fill="none" role="img" aria-label="App logo">
+                <defs><linearGradient id="chipSplash" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0A1230"/><stop offset="1" stop-color="#1B45B8"/></linearGradient></defs>
+                <rect width="120" height="120" rx="30" fill="url(#chipSplash)"/>
+                <rect x="25" y="24" width="13" height="72" rx="3" fill="#6BA0FF"/>
+                <rect x="25" y="24" width="33" height="13" rx="3" fill="#6BA0FF"/>
+                <rect x="25" y="52" width="26" height="12" rx="3" fill="#6BA0FF"/>
+                <path d="M101 42 C101 32 91 28 83 28 C73 28 67 35 67 44 C67 52 75 56 84 59 C93 62 101 66 101 76 C101 86 91 91 83 91 C73 91 67 85 66 77" fill="none" stroke="#6BA0FF" stroke-width="13" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+              <div style="text-align:center; z-index:1;">
+                <div class="name">React Native Magic</div>
+              </div>
+              <div class="tag" style="margin-top:-12px;">app name placeholder</div>
+              <div class="loader"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- ============ LOGIN ============ -->
+    <div class="screen-col">
+      <div class="screen-label"><div class="nm">Sign in</div><div class="sub">Token-gated auth with a language toggle.</div></div>
+      <div class="phone">
+        <div class="notch"></div>
+        <div class="screen">
+          <div class="statusbar"><span>9:41</span><div class="ico-row"><span>&#9209;</span><span class="bar-ico"></span></div></div>
+          <div class="scr-body">
+            <div class="anno right" style="top:96px; left:232px;"><span class="tip"></span><span class="lead"></span><span class="bub">Logo anchored top</span></div>
+            <div class="anno left" style="top:330px; left:-18px;"><span class="tip"></span><span class="lead l"></span><span class="bub">PrimaryTextInput fields</span></div>
+            <div class="anno right" style="top:470px; left:232px;"><span class="tip"></span><span class="lead"></span><span class="bub">Gradient primary CTA</span></div>
+            <div class="login-top">
+              <svg width="58" height="58" viewBox="0 0 120 120" fill="none" role="img" aria-label="App logo">
+                <defs><linearGradient id="chipLogin" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0A1230"/><stop offset="1" stop-color="#1B45B8"/></linearGradient></defs>
+                <rect width="120" height="120" rx="30" fill="url(#chipLogin)"/>
+                <rect x="25" y="24" width="13" height="72" rx="3" fill="#6BA0FF"/>
+                <rect x="25" y="24" width="33" height="13" rx="3" fill="#6BA0FF"/>
+                <rect x="25" y="52" width="26" height="12" rx="3" fill="#6BA0FF"/>
+                <path d="M101 42 C101 32 91 28 83 28 C73 28 67 35 67 44 C67 52 75 56 84 59 C93 62 101 66 101 76 C101 86 91 91 83 91 C73 91 67 85 66 77" fill="none" stroke="#6BA0FF" stroke-width="13" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </div>
+            <div class="login-h">Welcome back</div>
+            <div class="login-sub">Sign in to continue</div>
+            <div class="w-field">
+              <label>Phone or email</label>
+              <div class="w-input"><span class="ico">&#9993;</span><span class="ph">you@example.com</span></div>
+            </div>
+            <div class="w-field">
+              <label>Password</label>
+              <div class="w-input focus"><span class="ico">&#128274;</span><span class="dots">&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;</span></div>
+            </div>
+            <div class="forgot" style="text-align:center;">Need help?</div>
+            <button class="w-btn">Sign in &rarr;</button>
+            <div class="lang-toggle">
+              <div class="lang-pill"><span class="on">EN</span><span>AR</span></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- ============ HOME ============ -->
+    <div class="screen-col">
+      <div class="screen-label"><div class="nm">Home</div><div class="sub">Greeting, gradient hero card, and an items list.</div></div>
+      <div class="phone">
+        <div class="notch"></div>
+        <div class="screen">
+          <div class="statusbar"><span>9:41</span><div class="ico-row"><span>&#9209;</span><span class="bar-ico"></span></div></div>
+          <div class="scr-body home-scroll">
+            <div class="anno left" style="top:64px; left:-20px;"><span class="tip"></span><span class="lead l"></span><span class="bub">Small logo + greeting</span></div>
+            <div class="anno right" style="top:178px; left:230px;"><span class="tip"></span><span class="lead"></span><span class="bub">Gradient hero card</span></div>
+            <div class="anno left" style="top:470px; left:-22px;"><span class="tip"></span><span class="lead l"></span><span class="bub">FlashList rows + loading state</span></div>
+            <div class="top-bar">
+              <div style="display:flex; align-items:center; gap:11px;">
+                <span class="logo-sm">
+                  <svg width="34" height="34" viewBox="0 0 120 120" fill="none" role="img" aria-label="App logo">
+                    <defs><linearGradient id="chipHome" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0A1230"/><stop offset="1" stop-color="#1B45B8"/></linearGradient></defs>
+                    <rect width="120" height="120" rx="30" fill="url(#chipHome)"/>
+                    <rect x="25" y="24" width="13" height="72" rx="3" fill="#6BA0FF"/>
+                    <rect x="25" y="24" width="33" height="13" rx="3" fill="#6BA0FF"/>
+                    <rect x="25" y="52" width="26" height="12" rx="3" fill="#6BA0FF"/>
+                    <path d="M101 42 C101 32 91 28 83 28 C73 28 67 35 67 44 C67 52 75 56 84 59 C93 62 101 66 101 76 C101 86 91 91 83 91 C73 91 67 85 66 77" fill="none" stroke="#6BA0FF" stroke-width="13" stroke-linecap="round" stroke-linejoin="round"/>
+                  </svg>
+                </span>
+                <div><div class="h-greet">Welcome,</div><div class="h-name">Hi, Alex</div></div>
+              </div>
+              <div style="display:flex; align-items:center; gap:10px;">
+                <span class="bell" aria-label="Notifications"><svg viewBox="0 0 24 24" fill="none" stroke="#A6C4FF" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M10 5a2 2 0 0 1 4 0 7 7 0 0 1 4 6v3a4 4 0 0 0 2 3H4a4 4 0 0 0 2-3v-3a7 7 0 0 1 4-6"/><path d="M9 17v1a3 3 0 0 0 6 0v-1"/></svg></span>
+                <div class="avatar-sm">AD</div>
+              </div>
+            </div>
+            <div class="hero-card">
+              <div class="lab">GET STARTED</div>
+              <div class="amt" style="font-size:23px;">Build something great</div>
+              <div class="row">
+                <span class="hsub">Your starter is ready to ship.</span>
+                <span class="chip">Explore &rarr;</span>
+              </div>
+            </div>
+            <div class="sec-title">Items <span class="more">See all</span></div>
+            <div class="cat-card">
+              <div class="cat-ico grad-ico">A</div>
+              <div class="cat-body"><div class="t">Item one</div><div class="d">A short description line</div></div>
+              <span class="chev">&rsaquo;</span>
+            </div>
+            <div class="cat-card">
+              <div class="cat-ico grad-ico">B</div>
+              <div class="cat-body"><div class="t">Item two</div><div class="d">A short description line</div></div>
+              <span class="chev">&rsaquo;</span>
+            </div>
+            <div class="cat-card">
+              <div class="cat-ico grad-ico">C</div>
+              <div class="cat-body"><div class="t">Item three</div><div class="d">A short description line</div></div>
+              <span class="chev">&rsaquo;</span>
+            </div>
+            <div class="sh-card">
+              <div class="sh chip"></div>
+              <div style="flex:1;"><div class="sh l1"></div><div class="sh l2"></div></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- ============ PROFILE ============ -->
+    <div class="screen-col">
+      <div class="screen-label"><div class="nm">Profile</div><div class="sub">Identity, settings rows, and sign-out.</div></div>
+      <!-- profile-frame -->
+      <div class="phone">
+        <div class="notch"></div>
+        <div class="screen">
+          <div class="statusbar"><span>9:41</span><div class="ico-row"><span>&#9209;</span><span class="bar-ico"></span></div></div>
+          <div class="scr-body">
+            <div class="anno right" style="top:104px; left:232px;"><span class="tip"></span><span class="lead"></span><span class="bub">Initials avatar</span></div>
+            <div class="anno left" style="top:300px; left:-18px;"><span class="tip"></span><span class="lead l"></span><span class="bub">Language &amp; theme toggles</span></div>
+            <div class="anno right" style="top:560px; left:232px;"><span class="tip"></span><span class="lead"></span><span class="bub">Destructive log-out</span></div>
+            <div class="prof-head">
+              <div class="prof-av">AD</div>
+            </div>
+            <div class="info-card">
+              <div class="pn">Alex Doe</div>
+              <div class="pm">@alexdoe</div>
+            </div>
+            <div style="margin-top:14px;">
+              <div class="prow">
+                <div class="pico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg></div>
+                <div class="pbody"><div class="pt">Edit profile</div><div class="pv">Name, avatar &amp; details</div></div>
+                <span class="chev">&rsaquo;</span>
+              </div>
+              <div class="prow">
+                <div class="pico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 18 0 9 9 0 1 0 -18 0"/><path d="M3.6 9h16.8M3.6 15h16.8M11.5 3a17 17 0 0 0 0 18M12.5 3a17 17 0 0 1 0 18"/></svg></div>
+                <div class="pbody"><div class="pt">Language</div><div class="pv">English</div></div>
+                <div class="seg"><b class="on">EN</b><b>AR</b></div>
+              </div>
+              <div class="prow">
+                <div class="pico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4l1.4-1.4M17 7l1.4-1.4"/></svg></div>
+                <div class="pbody"><div class="pt">Appearance</div><div class="pv">System</div></div>
+                <div class="seg"><b class="on">Sys</b><b>Light</b><b>Dark</b></div>
+              </div>
+              <div class="prow">
+                <div class="pico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M10 5a2 2 0 0 1 4 0 7 7 0 0 1 4 6v3a4 4 0 0 0 2 3H4a4 4 0 0 0 2-3v-3a7 7 0 0 1 4-6"/><path d="M9 17v1a3 3 0 0 0 6 0v-1"/></svg></div>
+                <div class="pbody"><div class="pt">Notifications</div><div class="pv">Push enabled</div></div>
+                <span class="chev">&rsaquo;</span>
+              </div>
+            </div>
+            <button class="w-btn danger" style="margin-top:14px;">Log out</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+</body>
+</html>

package/template/index.js CHANGED Viewed

@@ -2,9 +2,19 @@
  * @format
  */
 import 'react-native-gesture-handler';
+import messaging from '@react-native-firebase/messaging';
 import {AppRegistry} from 'react-native';
 import App from './App';
 import {name as appName} from './app.json';
+import {queueNotificationRouteFromBackgroundData} from './src/core/notifications/notificationService';
 import './src/sheetManager/sheets';
+// Background / headless FCM handler. Must be registered BEFORE AppRegistry.
+// Queues the route so it can be applied once the UI is ready and the user is logged in.
+messaging().setBackgroundMessageHandler(async remoteMessage => {
+  if (remoteMessage?.data) {
+    queueNotificationRouteFromBackgroundData(remoteMessage.data);
+  }
+});
 AppRegistry.registerComponent(appName, () => App);

package/template/jest.config.js CHANGED Viewed

@@ -1,3 +1,18 @@
 module.exports = {
-  preset: 'react-native',
+  preset: '@react-native/jest-preset',
+  setupFiles: ['./jest.setup.js'],
+  moduleNameMapper: {
+    '^@core/(.*)$': '<rootDir>/src/core/$1',
+    '^@common/(.*)$': '<rootDir>/src/common/$1',
+    '^@navigation/(.*)$': '<rootDir>/src/navigation/$1',
+    '^@screens/(.*)$': '<rootDir>/src/screens/$1',
+    '^@sheetManager/(.*)$': '<rootDir>/src/sheetManager/$1',
+    '^@design-system$': '<rootDir>/src/design-system',
+    '^@design-system/(.*)$': '<rootDir>/src/design-system/$1',
+    '^@types/(.*)$': '<rootDir>/src/types/$1',
+    '^@utils/(.*)$': '<rootDir>/src/utils/$1',
+  },
+  transformIgnorePatterns: [
+    'node_modules/(?!(jest-)?@?react-native|@react-native-community|@react-navigation|@react-native-firebase|@gorhom|@shopify/flash-list|react-native-reanimated|react-native-worklets)',
+  ],
 };

package/template/jest.setup.js ADDED Viewed

@@ -0,0 +1,61 @@
+/* eslint-env jest */
+require('react-native-gesture-handler/jestSetup');
+jest.mock('@react-native-async-storage/async-storage', () =>
+  require('@react-native-async-storage/async-storage/jest/async-storage-mock'),
+);
+jest.mock('react-native-safe-area-context', () => {
+  const mock = require('react-native-safe-area-context/jest/mock');
+  return mock.default || mock;
+});
+jest.mock('react-native-config', () => ({
+  API_BASE_URL: 'http://localhost:3000',
+  ENVIRONMENT: 'test',
+  APP_ID: 'com.test.app',
+  ANDROID_APP_ID: 'com.test.app',
+  BUNDLE_ID: 'com.test.app',
+  STORYBOOK: 'false',
+}));
+jest.mock('@react-native-firebase/messaging', () => {
+  const messaging = () => ({
+    requestPermission: jest.fn().mockResolvedValue(1),
+    getToken: jest.fn().mockResolvedValue('test-fcm-token'),
+    onMessage: jest.fn().mockReturnValue(() => {}),
+    onNotificationOpenedApp: jest.fn().mockReturnValue(() => {}),
+    getInitialNotification: jest.fn().mockResolvedValue(null),
+    onTokenRefresh: jest.fn().mockReturnValue(() => {}),
+    setBackgroundMessageHandler: jest.fn(),
+  });
+  messaging.setBackgroundMessageHandler = jest.fn();
+  return {__esModule: true, default: messaging};
+});
+jest.mock('@react-native-community/netinfo', () => ({
+  __esModule: true,
+  default: {
+    addEventListener: jest.fn().mockReturnValue(() => {}),
+    fetch: jest.fn().mockResolvedValue({
+      isConnected: true,
+      isInternetReachable: true,
+    }),
+  },
+}));
+jest.mock('react-native-snackbar', () => ({
+  __esModule: true,
+  default: {
+    show: jest.fn(),
+    dismiss: jest.fn(),
+    LENGTH_SHORT: 1,
+    LENGTH_LONG: 2,
+    LENGTH_INDEFINITE: 3,
+  },
+}));
+jest.mock('react-native-reanimated', () =>
+  require('react-native-reanimated/mock'),
+);