create-du-app 0.1.3 → 0.1.4

package/templates/mobile/expo/src/types/models.d.ts

@@ -0,0 +1,24 @@
+// App-wide ambient types that used to live in the project's `model/` layer.
+// Kept minimal here; move real contracts into `@repo/shared` as you build out.
+
+/** Standard API envelope returned by ApiService. */
+declare interface IResponse<T = any> {
+  data: T;
+  message?: string;
+  success?: boolean;
+  statusCode?: number;
+}
+
+/** A file ready for multipart/form-data upload (image picker, etc.). */
+declare interface IMediaFormData {
+  uri: string;
+  name: string;
+  type: string;
+}
+
+/** Result of a place/address selection (geo features). */
+declare interface AddressSelectedResult {
+  address: string;
+  latitude: number;
+  longitude: number;
+}

package/templates/mobile/expo/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "jsx": "react",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "paths": {
+      "@src/*": ["./src/*"],
+      "@modules/*": ["./src/modules/*"],
+      "@repo/shared": ["../../packages/shared/dist/index.d.ts"]
+    }
+  },
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}

package/templates/mobile/rn/.env.example

@@ -0,0 +1,5 @@
+# Copy to .env and fill in. Read at build time by react-native-config.
+# NEVER commit the real .env — only this example.
+
+# Base URL of your API (include trailing slash).
+BASE_URL=https://api.example.com/

package/templates/mobile/rn/.eslintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  root: true,
+  extends: '@react-native',
+  rules: {
+    semi: 0,
+  },
+};

package/templates/mobile/rn/.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  arrowParens: 'avoid',
+  bracketSameLine: true,
+  bracketSpacing: true,
+  singleQuote: true,
+  trailingComma: 'all',
+};

package/templates/mobile/rn/.svgrrc.js

@@ -0,0 +1,9 @@
+module.exports = {
+    replaceAttrValues: {
+        '{currentColor}': '{props.color || "#0D1F2D"}',
+        '{292929}': '{props.color || "#292929"}',
+        '{D4D4FF}': '{props.color || "#D4D4FF"}',
+        '{7C7C7C}': '{props.color || "#7C7C7C"}',
+        '{D97706}': '{props.color || "#D97706"}',
+    },
+}

package/templates/mobile/rn/README.md

@@ -1,11 +1,44 @@
-# Placeholder: React Native (mobile/rn)
+# {{PROJECT_NAME}} — Mobile (React Native CLI)
 
-This is a **placeholder** for the **React Native** template.
+A bare **React Native CLI** starter (no Expo) built from the company's production
+core. Same `src/` architecture and reusable `src/core` kit as the Expo variant —
+only the build tooling differs.
 
-Drop the standard React Native source here. Conventions:
+## Architecture
 
-- Name the template's `package.json` as **`_package.json`** (the CLI renames it on generate).
-- Name `.gitignore` as **`_gitignore`**, `.npmrc` as **`_npmrc`** if present.
-- Wherever you need the project name, write `{{PROJECT_NAME}}` — the CLI replaces it with the real name.
+```
+src/
+├── app/        composition: providers, navigation, global stores (auth/loading/common), i18n
+├── core/       reusable infrastructure (API/services, theme, UI kit, forms, hooks, utils)
+├── modules/    your features (home/profile examples included)
+└── assets/     i18n, svgs (sync-generated barrel), images, lotties
+```
 
-`lang: js` → this app counts toward the condition for creating `packages/shared`.
+See the Expo template's README for the full `src/core` breakdown — it is identical.
+
+## Expo vs this (bare RN CLI)
+
+| | This (RN CLI) | Expo |
+|--|---------------|------|
+| Entry | `AppRegistry.registerComponent` + `app.json` name | `registerRootComponent` |
+| Babel | `module:@react-native/babel-preset` | `babel-preset-expo` |
+| Metro | `@react-native/metro-config` | `expo/metro-config` |
+| TS base | `@react-native/typescript-config` | `expo/tsconfig.base` |
+| Native build | `pod install` + Xcode / Gradle | `expo prebuild` then run |
+
+## Shared contracts
+The core imports `ApiEndpoints`, `ExternalUrls`, enums from **`@repo/shared`** —
+generate this app alongside another JS/TS stack; the CLI wires `workspace:*` automatically.
+
+## Getting started
+
+```bash
+pnpm bootstrap                                  # install + build @repo/shared
+pnpm --filter {{PROJECT_NAME}}-mobile typecheck # verify
+pnpm --filter {{PROJECT_NAME}}-mobile start     # metro
+```
+
+Add an icon: drop `name.svg` in `src/assets/svgs/` then `pnpm --filter {{PROJECT_NAME}}-mobile sync-svgs`.
+
+This template ships **without** `ios/`/`android/` — generate native projects (RN CLI
+`init` conventions) or copy yours in, then `cd ios && pod install`.

package/templates/mobile/rn/_gitignore

@@ -0,0 +1,24 @@
+# Native build artifacts
+/ios/Pods/
+/ios/build/
+/android/build/
+/android/app/build/
+/android/.gradle/
+/android/local.properties
+
+# Dependencies
+node_modules/
+
+# Metro
+.metro-health-check*
+
+# Env (keep .env.example)
+.env
+.env.*
+!.env.example
+
+# Logs / OS
+*.log
+.DS_Store
+*.keystore
+!debug.keystore

package/templates/mobile/rn/_package.json

@@ -2,5 +2,71 @@
   "name": "{{PROJECT_NAME}}-mobile",
   "version": "0.1.0",
   "private": true,
-  "description": "Placeholder React Native app for {{PROJECT_NAME}}"
+  "scripts": {
+    "start": "react-native start",
+    "android": "react-native run-android",
+    "ios": "react-native run-ios",
+    "lint": "eslint . --ext .ts,.tsx",
+    "typecheck": "tsc --noEmit",
+    "sync-svgs": "node src/scripts/sync-svgs.js",
+    "sync-images": "node src/scripts/sync-images.js"
+  },
+  "dependencies": {
+    "@hookform/error-message": "2.0.0",
+    "@react-native-async-storage/async-storage": "^2.1.2",
+    "@react-native-community/netinfo": "^12.0.1",
+    "@react-navigation/bottom-tabs": "^7.12.0",
+    "@react-navigation/native": "^7.0.13",
+    "@react-navigation/native-stack": "^7.1.14",
+    "@tanstack/react-query": "^5.101.0",
+    "@tanstack/react-query-persist-client": "^5.101.0",
+    "axios": "^1.7.9",
+    "i18next": "^21.5.4",
+    "lodash": "^4.17.21",
+    "lottie-react-native": "^7.3.4",
+    "qs": "^6.10.1",
+    "react": "19.2.3",
+    "react-hook-form": "^7.53.2",
+    "react-i18next": "^11.14.3",
+    "react-native": "0.85.3",
+    "react-native-config": "^1.6.1",
+    "react-native-date-picker": "5.0.12",
+    "react-native-device-info": "^15.0.2",
+    "react-native-fast-image": "^8.6.3",
+    "react-native-gesture-handler": "~2.31.1",
+    "react-native-image-picker": "^8.2.1",
+    "react-native-keyboard-controller": "^1.21.6",
+    "react-native-linear-gradient": "^2.8.3",
+    "react-native-localize": "^3.7.0",
+    "react-native-mmkv": "^4.3.1",
+    "react-native-nitro-modules": "^0.35.9",
+    "react-native-reanimated": "4.3.1",
+    "react-native-safe-area-context": "^5.7.0",
+    "react-native-screens": "4.25.2",
+    "react-native-svg": "^15.15.4",
+    "react-native-toast-message": "^2.2.1",
+    "react-native-worklets": "0.8.3",
+    "yup": "^0.32.11",
+    "zustand": "^5.0.7"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.3",
+    "@babel/runtime": "^7.25.0",
+    "@react-native-community/cli": "20.1.3",
+    "@react-native-community/cli-platform-android": "20.1.3",
+    "@react-native-community/cli-platform-ios": "20.1.3",
+    "@react-native/babel-preset": "0.85.3",
+    "@react-native/eslint-config": "0.85.3",
+    "@react-native/metro-config": "0.85.3",
+    "@react-native/typescript-config": "0.85.3",
+    "@types/lodash": "^4.14.176",
+    "@types/qs": "^6.9.7",
+    "@types/react": "^19.1.1",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "eslint": "^8.19.0",
+    "prettier": "2.8.8",
+    "react-native-svg-transformer": "^1.5.0",
+    "typescript": "~5.8.3"
+  }
 }

package/templates/mobile/rn/app.json

@@ -0,0 +1,4 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "displayName": "{{PROJECT_NAME}}"
+}

package/templates/mobile/rn/babel.config.js

@@ -0,0 +1,18 @@
+module.exports = {
+  presets: ['module:@react-native/babel-preset'],
+  plugins: [
+    [
+      'module-resolver',
+      {
+        root: ['.'],
+        extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json', '.svg'],
+        alias: {
+          '@src': './src',
+          '@modules': './src/modules',
+        },
+      },
+    ],
+    // Must be last.
+    'react-native-reanimated/plugin',
+  ],
+};

package/templates/mobile/rn/index.js

@@ -0,0 +1,8 @@
+/**
+ * @format
+ */
+import { AppRegistry } from 'react-native';
+import AppProvider from './src/app/app-provider';
+import { name as appName } from './app.json';
+
+AppRegistry.registerComponent(appName, () => AppProvider);

package/templates/mobile/rn/metro.config.js

@@ -0,0 +1,33 @@
+const path = require('path');
+const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
+const { wrapWithReanimatedMetroConfig } = require('react-native-reanimated/metro-config');
+
+// --- Monorepo paths ---
+const projectRoot = __dirname;
+const monorepoRoot = path.resolve(projectRoot, '../..');
+
+const defaultConfig = getDefaultConfig(projectRoot);
+const { assetExts, sourceExts } = defaultConfig.resolver;
+
+/**
+ * Metro configuration (monorepo-aware, with SVG support)
+ * https://reactnative.dev/docs/metro
+ *
+ * @type {import('@react-native/metro-config').MetroConfig}
+ */
+const config = {
+  watchFolders: [monorepoRoot],
+  transformer: {
+    babelTransformerPath: require.resolve('react-native-svg-transformer/react-native'),
+  },
+  resolver: {
+    nodeModulesPaths: [
+      path.resolve(projectRoot, 'node_modules'),
+      path.resolve(monorepoRoot, 'node_modules'),
+    ],
+    assetExts: assetExts.filter(ext => ext !== 'svg'),
+    sourceExts: [...sourceExts, 'svg'],
+  },
+};
+
+module.exports = wrapWithReanimatedMetroConfig(mergeConfig(defaultConfig, config));

package/templates/mobile/rn/src/app/App.tsx

@@ -0,0 +1,24 @@
+import React, { useEffect } from 'react';
+import { StatusBar } from 'react-native';
+import { useTheme } from '@src/core/theme';
+import { RootNavigator } from './navigation';
+import { useAuthStore } from './stores';
+import { bootstrapLanguage } from './config/translation';
+
+// Root UI component. Restores the persisted session + language, then mounts navigation.
+export function App() {
+  const { resolved } = useTheme();
+  const hydrate = useAuthStore(s => s.hydrate);
+
+  useEffect(() => {
+    void bootstrapLanguage();
+    void hydrate();
+  }, [hydrate]);
+
+  return (
+    <>
+      <StatusBar barStyle={resolved === 'dark' ? 'light-content' : 'dark-content'} />
+      <RootNavigator />
+    </>
+  );
+}

package/templates/mobile/rn/src/app/app-provider.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { I18nextProvider } from 'react-i18next';
+import { onlineManager } from '@tanstack/react-query';
+import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
+import NetInfo from '@react-native-community/netinfo';
+import { queryClient, mmkvQueryPersister } from '@src/core/utils';
+import { ThemeProvider } from '@src/core/theme';
+import { i18n } from './config/translation';
+import { App } from './App';
+
+// Pause/resume React Query based on connectivity (offline-first).
+onlineManager.setEventListener(setOnline =>
+  NetInfo.addEventListener(state => setOnline(Boolean(state.isConnected))),
+);
+
+// The provider tree. Order: gesture root → persisted query cache → i18n →
+// safe-area → theme → app UI.
+export default function AppProvider() {
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <PersistQueryClientProvider
+        client={queryClient}
+        persistOptions={{ persister: mmkvQueryPersister }}>
+        <I18nextProvider i18n={i18n}>
+          <SafeAreaProvider>
+            <ThemeProvider>
+              <App />
+            </ThemeProvider>
+          </SafeAreaProvider>
+        </I18nextProvider>
+      </PersistQueryClientProvider>
+    </GestureHandlerRootView>
+  );
+}

package/templates/mobile/rn/src/app/config/translation.ts

@@ -0,0 +1,26 @@
+import { findBestLanguageTag } from 'react-native-localize';
+import { Translator } from '@src/core/utils';
+import en from '@src/assets/i18n/en.json';
+import fr from '@src/assets/i18n/fr.json';
+
+const resources = {
+  en: { translation: en },
+  fr: { translation: fr },
+};
+
+const fallbackLng = 'en';
+const best = findBestLanguageTag(Object.keys(resources));
+
+// Initialize i18next once and expose the instance. The provider mounts it in
+// app-provider.tsx; the active language can be changed via Translator.changeLanguages.
+export const i18n = Translator.setup({
+  resources,
+  lng: best?.languageTag?.split('-')[0] ?? fallbackLng,
+  fallbackLng,
+  interpolation: { escapeValue: false },
+});
+
+// Hook persisted-language restore here if you store a user preference.
+export async function bootstrapLanguage(): Promise<void> {
+  // no-op for the starter; wire AppStorageUtil + Translator.changeLanguages here.
+}

package/templates/mobile/rn/src/app/index.ts

@@ -0,0 +1 @@
+export * from './stores';

package/templates/mobile/rn/src/app/navigation/app-route-type.ts

@@ -0,0 +1,27 @@
+// Central screen registry + typed param list. Add a screen here and every
+// navigation call to it (via NavigationUtil / useNavigation) is type-checked.
+export enum Screen {
+  Home = 'Home',
+  Profile = 'Profile',
+  // Auth / feature screens the core references (e.g. session-expired reset).
+  // Wire real screens for these as you build the app.
+  SignIn = 'SignIn',
+  OtpVerification = 'OtpVerification',
+  PlayerFull = 'PlayerFull',
+  LibraryMain = 'LibraryMain',
+}
+
+export type NavigatorParamList = {
+  [Screen.Home]: undefined;
+  [Screen.Profile]: undefined;
+  [Screen.SignIn]: undefined;
+  [Screen.OtpVerification]: undefined;
+  [Screen.PlayerFull]: undefined;
+  [Screen.LibraryMain]: undefined;
+};
+
+declare global {
+  namespace ReactNavigation {
+    interface RootParamList extends NavigatorParamList {}
+  }
+}

package/templates/mobile/rn/src/app/navigation/bottom-tabs.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { useTranslation } from 'react-i18next';
+import { useTheme } from '@src/core/theme';
+import { Screen } from './app-route-type';
+import { HomeScreen } from '@src/modules/home/home.screen';
+import { ProfileScreen } from '@src/modules/profile/profile.screen';
+
+const Tab = createBottomTabNavigator();
+
+export function BottomTabs() {
+  const { t } = useTranslation();
+  const { colors } = useTheme();
+  return (
+    <Tab.Navigator
+      screenOptions={{
+        headerStyle: { backgroundColor: colors.bg_elevation_level_1_normal },
+        headerTintColor: colors.fg_neutral_normal,
+        tabBarStyle: {
+          backgroundColor: colors.bg_elevation_level_1_normal,
+          borderTopColor: colors.bd_neutral_faded,
+        },
+        tabBarActiveTintColor: colors.fg_primary_normal,
+        tabBarInactiveTintColor: colors.fg_neutral_faded,
+      }}>
+      <Tab.Screen name={Screen.Home} component={HomeScreen} options={{ title: t('home.title') }} />
+      <Tab.Screen
+        name={Screen.Profile}
+        component={ProfileScreen}
+        options={{ title: t('profile.title') }}
+      />
+    </Tab.Navigator>
+  );
+}

package/templates/mobile/rn/src/app/navigation/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { navigationRef } from '@src/core/utils';
+import { BottomTabs } from './bottom-tabs';
+
+// Mounts the navigation tree and wires the global navigationRef so the API
+// layer (and any non-component code) can navigate / reset on session expiry.
+export function RootNavigator() {
+  return (
+    <NavigationContainer ref={navigationRef}>
+      <BottomTabs />
+    </NavigationContainer>
+  );
+}

package/templates/mobile/rn/src/app/stores/auth.store.ts

@@ -0,0 +1,33 @@
+import { create } from 'zustand';
+import { AppStorageUtil, StorageKeys } from '@src/core/utils';
+
+interface AuthState {
+  token: string | null;
+  isAuthenticated: boolean;
+  setToken: (token: string | null) => void;
+  clearTokens: () => void;
+  hydrate: () => Promise<void>;
+}
+
+// Global auth store (Zustand). The API layer reads `token` for the auth header
+// and calls `clearTokens()` on a 401 (see core/services/api.service.ts).
+export const useAuthStore = create<AuthState>()(set => ({
+  token: null,
+  isAuthenticated: false,
+  setToken: token => {
+    if (token) {
+      AppStorageUtil.setItem(StorageKeys.APP_ACCESS_TOKEN, token);
+    } else {
+      AppStorageUtil.removeItem(StorageKeys.APP_ACCESS_TOKEN);
+    }
+    set({ token, isAuthenticated: Boolean(token) });
+  },
+  clearTokens: () => {
+    AppStorageUtil.removeItem(StorageKeys.APP_ACCESS_TOKEN);
+    set({ token: null, isAuthenticated: false });
+  },
+  hydrate: async () => {
+    const token = (await AppStorageUtil.getItem(StorageKeys.APP_ACCESS_TOKEN)) as string | null;
+    set({ token: token ?? null, isAuthenticated: Boolean(token) });
+  },
+}));

package/templates/mobile/rn/src/app/stores/common.store.ts

@@ -0,0 +1,19 @@
+import { create } from 'zustand';
+
+export interface EnumValue {
+  key: string;
+  value: string;
+  label?: string;
+}
+
+interface CommonState {
+  /** Server-provided enum/lookup values (seeded after login/bootstrap). */
+  enumValues: EnumValue[];
+  setEnumValues: (values: EnumValue[]) => void;
+}
+
+// App-wide misc state (enum lookups, etc.). Used by core/utils/func.util.
+export const useCommonStore = create<CommonState>()(set => ({
+  enumValues: [],
+  setEnumValues: enumValues => set({ enumValues }),
+}));

package/templates/mobile/rn/src/app/stores/index.ts

@@ -0,0 +1,3 @@
+export * from './auth.store';
+export * from './loading.store';
+export * from './common.store';

package/templates/mobile/rn/src/app/stores/loading.store.ts

@@ -0,0 +1,22 @@
+import { create } from 'zustand';
+
+interface LoadingState {
+  /** True while at least one non-silent request is in flight. */
+  isLoading: boolean;
+  count: number;
+  showLoading: () => void;
+  hideLoading: () => void;
+}
+
+// Ref-counted global loading flag. The API layer toggles it around non-silent
+// requests; <LoadingApp> renders the overlay when `isLoading` is true.
+export const useLoadingStore = create<LoadingState>()(set => ({
+  isLoading: false,
+  count: 0,
+  showLoading: () => set(s => ({ count: s.count + 1, isLoading: true })),
+  hideLoading: () =>
+    set(s => {
+      const count = Math.max(0, s.count - 1);
+      return { count, isLoading: count > 0 };
+    }),
+}));

package/templates/mobile/rn/src/assets/Images/index.ts

@@ -0,0 +1,5 @@
+// AUTO-GENERATED by `pnpm sync-images` (kebab-case.png -> ImgKebabCase).
+import ImgEmptyList from './empty-list.png';
+import ImgScreenBgGradian from './screen-bg-gradian.png';
+
+export { ImgEmptyList, ImgScreenBgGradian };

package/templates/mobile/rn/src/assets/i18n/en.json

@@ -0,0 +1,12 @@
+{
+  "home": {
+    "title": "Home",
+    "greeting": "Hello, {{name}}",
+    "loadError": "Failed to load.",
+    "count": "{{n}} item(s)"
+  },
+  "profile": {
+    "title": "Profile",
+    "signOut": "Sign out"
+  }
+}

package/templates/mobile/rn/src/assets/i18n/fr.json

@@ -0,0 +1,12 @@
+{
+  "home": {
+    "title": "Accueil",
+    "greeting": "Bonjour, {{name}}",
+    "loadError": "Échec du chargement.",
+    "count": "{{n}} élément(s)"
+  },
+  "profile": {
+    "title": "Profil",
+    "signOut": "Se déconnecter"
+  }
+}

package/templates/mobile/rn/src/assets/lotties/index.ts

@@ -0,0 +1,3 @@
+import LottieLoading from './loading.json';
+
+export { LottieLoading };

package/templates/mobile/rn/src/assets/lotties/loading.json

@@ -0,0 +1 @@
+{"nm":"Main Scene","ddd":0,"h":500,"w":500,"meta":{"g":"@lottiefiles/creator 1.74.0"},"layers":[{"ty":4,"nm":"Rectangle_1","sr":1,"st":0,"op":90.0000036657751,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[-125,-107,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[250,156.235],"ix":2},"r":{"a":0,"k":135,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Rectangle 1","ix":1,"cix":2,"np":3,"it":[{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[57,-57],[57,57],[-57,57],[-57,-57]]}],"t":0},{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[-31.437,0],[0,-31.437],[31.437,0],[0,31.437]],"o":[[31.437,0],[0,31.437],[-31.437,0],[0,-31.437]],"v":[[0.718,-187.388],[57.64,-130.466],[0.718,-73.544],[-56.204,-130.466]]}],"t":15},{"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[188.6,-188.5],[188.6,-74.5],[74.6,-74.5],[74.6,-188.5]]}],"t":30.0000012219251}],"ix":2}},{"ty":"st","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"c":{"a":0,"k":[1,1,1],"ix":3}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.4078,0.3059,1],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-125,-107],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":1},{"ty":4,"nm":"Rectangle_2","sr":1,"st":0,"op":90.0000036657751,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[-125,-107,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[343,250],"ix":2},"r":{"a":0,"k":585,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Rectangle 1","ix":1,"cix":2,"np":3,"it":[{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[57,-57],[57,57],[-57,57],[-57,-57]]}],"t":0},{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[-31.437,0],[0,-31.437],[31.437,0],[0,31.437]],"o":[[31.437,0],[0,31.437],[-31.437,0],[0,-31.437]],"v":[[0.718,-187.388],[57.64,-130.466],[0.718,-73.544],[-56.204,-130.466]]}],"t":15},{"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[188.6,-188.5],[188.6,-74.5],[74.6,-74.5],[74.6,-188.5]]}],"t":30.0000012219251}],"ix":2}},{"ty":"st","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"c":{"a":0,"k":[1,1,1],"ix":3}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.2118,0.0863,0.6118],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-125,-107],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":2},{"ty":4,"nm":"Rectangle_3","sr":1,"st":0,"op":90.0000036657751,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[-125,-107,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[250,342.86],"ix":2},"r":{"a":0,"k":315,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Rectangle 1","ix":1,"cix":2,"np":3,"it":[{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[57,-57],[57,57],[-57,57],[-57,-57]]}],"t":0},{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[-31.437,0],[0,-31.437],[31.437,0],[0,31.437]],"o":[[31.437,0],[0,31.437],[-31.437,0],[0,-31.437]],"v":[[0.718,-187.388],[57.64,-130.466],[0.718,-73.544],[-56.204,-130.466]]}],"t":15},{"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[188.6,-188.5],[188.6,-74.5],[74.6,-74.5],[74.6,-188.5]]}],"t":30.0000012219251}],"ix":2}},{"ty":"st","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"c":{"a":0,"k":[1,1,1],"ix":3}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.4078,0.3059,1],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-125,-107],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":3},{"ty":4,"nm":"Rectangle_4","sr":1,"st":0,"op":90.0000036657751,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[-125,-107,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[157.156,250],"ix":2},"r":{"a":0,"k":45,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Rectangle 1","ix":1,"cix":2,"np":3,"it":[{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[57,-57],[57,57],[-57,57],[-57,-57]]}],"t":0},{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[-31.437,0],[0,-31.437],[31.437,0],[0,31.437]],"o":[[31.437,0],[0,31.437],[-31.437,0],[0,-31.437]],"v":[[0.718,-187.388],[57.64,-130.466],[0.718,-73.544],[-56.204,-130.466]]}],"t":15},{"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[188.6,-188.5],[188.6,-74.5],[74.6,-74.5],[74.6,-188.5]]}],"t":30.0000012219251}],"ix":2}},{"ty":"st","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"c":{"a":0,"k":[1,1,1],"ix":3}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.2118,0.0863,0.6118],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-125,-107],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":4}],"v":"5.7.0","fr":29.9700012207031,"op":31.0000012626559,"ip":0,"assets":[]}

package/templates/mobile/rn/src/assets/svgs/arrow-left.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.0001 4L6.47152 7.5286C6.24929 7.75082 6.13818 7.86193 6.13818 8C6.13818 8.13807 6.24929 8.24918 6.47152 8.4714L10.0001 12" stroke="#F5F5F5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/templates/mobile/rn/src/assets/svgs/arrow-right.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 18L14.2929 12.7071C14.6262 12.3738 14.7929 12.2071 14.7929 12C14.7929 11.7929 14.6262 11.6262 14.2929 11.2929L9 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>