@vijayp-07/react-native-boiler-plate 1.0.0 → 1.1.1

package/README.md

@@ -1,6 +1,6 @@
 # @vijayp-07/react-native-boiler-plate
 
-A professional, production-ready React Native template with TypeScript, Redux Toolkit, React Navigation, Axios, i18n, SVG support, and a scalable enterprise-grade folder architecture.
+A production-ready React Native boilerplate with navigation, Redux, i18n, axios, and more — pre-configured so you can focus on building features.
 
 ## Usage
 
@@ -8,77 +8,368 @@ A professional, production-ready React Native template with TypeScript, Redux To
 npx @react-native-community/cli@latest init MyApp --template @vijayp-07/react-native-boiler-plate
 ```
 
-## What's Included
-
-| Category             | Library                                         |
-| -------------------- | ----------------------------------------------- |
-| Language             | TypeScript                                      |
-| Navigation           | React Navigation v7 (Stack + Bottom Tabs)       |
-| State Management     | Redux Toolkit + React Redux                     |
-| HTTP Client          | Axios (with interceptors)                       |
-| Storage              | AsyncStorage                                    |
-| Internationalisation | i18next + react-i18next                         |
-| SVG Support          | react-native-svg + react-native-svg-transformer |
-| Network Detection    | @react-native-community/netinfo                 |
-| Device Info          | react-native-device-info                        |
-| Notifications        | react-native-flash-message                      |
-| Linting              | ESLint + @react-native/eslint-config            |
-| Formatting           | Prettier                                        |
-| Git Hooks            | Husky + lint-staged                             |
-| Testing              | Jest + react-test-renderer                      |
-
-## Folder Structure
-
-```
-src/
-├── api/          # Axios instance and API modules
-├── appRedux/     # Redux store, slices
-├── assets/       # Fonts, images, SVGs
-├── common/       # Constants, helpers, async utilities
-├── components/   # Reusable UI components
-├── hooks/        # Custom React hooks
-├── i18n/         # Translation files and i18n setup
-├── navigation/   # Stack, Tab, Root navigators
-├── screens/      # Feature screens
-├── services/     # Business logic services
-├── static/       # Static data
-├── theme/        # Colors, dimensions, global styles
-└── types/        # TypeScript type declarations
-```
-
-## Path Aliases
-
-All aliases are configured in both `babel.config.js` and `tsconfig.json`:
+## Features
+
+- **Navigation:** React Navigation with separate `AuthStack`, `AppStack`, `TabNavigator`, and a typed `RootNavigationRef` for navigating outside components
+- **Redux:** Redux Toolkit setup with `LoaderSlice` and `ProfileSlice`, typed `useAppSelector` / `useAppDispatch` hooks
+- **Axios:** Pre-configured `axiosInstance` with request/response interceptors for auth token injection and error handling (401, 500, network errors)
+- **API Layer:** Generic `apiGet`, `apiPost`, `apiPut`, `apiPatch`, `apiDelete` helpers wrapping `axiosInstance` with unified `ApiResponseType` response shape. Centralised `endPoints` object for all API paths
+- **Auth Service:** `loginService` in `src/services/authService.ts` — ready-to-use login API call with device info attached
+- **Internationalization (i18n):** i18next + react-i18next with English, Spanish, and **Hindi** locale support
+- **TypeScript:** Full type coverage including navigation param lists, screen props, `ApiResponseType`, `LoginPayload`, `LoginResponse`, and `Languages` union type
+- **Babel Aliases:** Clean imports via path aliases (e.g. `@screens`, `@components`, `@appRedux`)
+- **Custom Components:** `PrimaryLoader`, `PrimaryText`, `PrimaryButton`, `PrimaryFlashMessage`, `PrimaryScrollView`, `NoInternetModalPopUp`, `Container`, `PrimaryTextInput`
+- **Asset Management:** Fonts (Poppins) and SVG images with centralized exports, including `IC_HidePassword` and `IC_ShowPassword`
+- **Async Storage:** Utility wrappers for AsyncStorage via `@common`
+- **Network Detection:** `NoInternetModalPopUp` using `@react-native-community/netinfo`
+
+## Requirements
+
+- Node >= 22.11.0
+- React Native 0.84.1
+- React 19.2.3
+
+## Project Structure
+
+```
+📁src
+│
+├── 📁api
+│   ├── axiosInstance.ts       # Axios instance with request/response interceptors
+│   ├── apiMethods.ts          # Generic apiGet/apiPost/apiPut/apiPatch/apiDelete helpers
+│   ├── endpoints.ts           # Centralised API endpoint paths grouped by feature
+│   └── index.ts
+│
+├── 📁appRedux
+│   ├── 📁modules
+│   │   ├── LoaderSlice.ts     # Global loader state
+│   │   └── ProfileSlice.ts    # User auth/profile state
+│   └── index.ts               # Store setup, typed hooks, slice exports
+│
+├── 📁assets
+│   ├── 📁fonts
+│   │   ├── Poppins-*.ttf
+│   │   └── index.ts
+│   ├── 📁images
+│   │   ├── IC_Home_Active.svg
+│   │   ├── IC_Home_UnActive.svg
+│   │   ├── IC_Setting_Active.svg
+│   │   ├── IC_Setting_UnActive.svg
+│   │   ├── IC_HidePassword.svg
+│   │   ├── IC_ShowPassword.svg
+│   │   └── index.ts
+│   └── index.ts
+│
+├── 📁common
+│   ├── asyncServices.ts       # AsyncStorage get/set/clear helpers
+│   ├── constant.ts            # App-wide constants (BASE_URL, ASYNC_KEY, etc.)
+│   ├── helperFunctions.ts     # Utility functions (showDangerMessage, prettyPrint, etc.)
+│   └── index.ts
+│
+├── 📁components
+│   ├── Container.tsx            # Safe-area-aware full-screen wrapper with padding control
+│   ├── NoInternetModalPopUp.tsx
+│   ├── PrimaryButton.tsx
+│   ├── PrimaryFlashMessage.tsx  # Animated toast with fade in/out, per-type styling
+│   ├── PrimaryLoader.tsx
+│   ├── PrimaryScrollView.tsx    # Keyboard-aware ScrollView, auto-scrolls to focused input
+│   ├── PrimaryText.tsx
+│   ├── PrimaryTextInput.tsx     # TextInput with password show/hide toggle
+│   └── index.ts
+│
+├── 📁hooks
+│   └── index.ts
+│
+├── 📁i18n
+│   ├── en.json                # English translations
+│   ├── es.json                # Spanish translations
+│   ├── hi.json                # Hindi translations
+│   ├── i18n.ts                # i18next configuration
+│   └── index.ts
+│
+├── 📁navigation
+│   ├── AuthStack.tsx          # Unauthenticated screens (LogIn)
+│   ├── AppStack.tsx           # Authenticated screens (TabNavigation, ModalScreen)
+│   ├── MainNavigation.tsx     # Root NavigationContainer, switches Auth/App stack
+│   ├── RootNavigationRef.ts   # Typed navigationRef + navigate/goBack/resetRoot helpers
+│   ├── TabNavigator.tsx       # Bottom tab navigator (Home, Profile)
+│   └── index.ts
+│
+├── 📁screens
+│   ├── 📁Home
+│   │   └── index.tsx
+│   ├── 📁Login
+│   │   └── index.tsx
+│   ├── 📁ModalScreen
+│   │   └── index.tsx
+│   ├── 📁Profile
+│   │   └── index.tsx
+│   └── index.ts
+│
+├── 📁services
+│   ├── authService.ts         # Login API call (loginService)
+│   └── index.ts
+│
+├── 📁static
+│   └── index.ts
+│
+├── 📁theme
+│   ├── colors.ts
+│   ├── dimensions.ts          # perfectSize helper
+│   ├── styles.ts
+│   └── index.ts
+│
+├── 📁types
+│   ├── declarations.d.ts      # SVG and module declarations
+│   └── index.ts               # Navigation param lists, screen props, ApiResponseType, LoginPayload, LoginResponse, Languages
+│
+└── index.tsx                  # App entry point
+```
+
+## Custom Components
+
+### Container
+
+A safe-area-aware full-screen wrapper. Automatically applies top/bottom safe area insets and supports granular padding control per side.
+
+```tsx
+import {Container} from '@components';
+
+<Container backgroundColor="#fff" padding={16}>
+  {/* screen content */}
+</Container>
+
+// Hide bottom safe area (e.g. screens with a fixed bottom bar)
+<Container hideBottomSafeArea>
+  {/* screen content */}
+</Container>
+```
+
+### PrimaryTextInput
+
+A styled `TextInput` with a built-in password show/hide toggle. Supports all standard `TextInputProps` plus `isPassword` and `containerStyle`.
+
+```tsx
+import {PrimaryTextInput} from '@components';
+
+<PrimaryTextInput
+  placeholder="Email"
+  value={email}
+  onChangeText={setEmail}
+/>
+
+<PrimaryTextInput
+  placeholder="Password"
+  isPassword
+  value={password}
+  onChangeText={setPassword}
+/>
+```
+
+### PrimaryFlashMessage
+
+Animated toast notification with per-type styling (success, danger, warning, info). Fade in/out animation is driven by `animationDuration`. Rendered via a custom `FlashMessageComponent` for full layout control.
 
 ```ts
-import {PrimaryButton} from '@components';
-import {colors} from '@theme';
-import {axiosInstance} from '@api';
+import {showSuccessMessage, showDangerMessage} from '@common';
+
+// Success
+showSuccessMessage('Saved!');
+
+// Error
+showDangerMessage('Something went wrong');
+
+// With description
+showDangerMessage('Check your input', {description: 'Email is invalid'});
+
+// With a local FlashMessage ref
+showSuccessMessage('Profile updated!', {}, flashRef);
+showDangerMessage('Upload failed', {description: 'Try again'}, flashRef);
+```
+
+### PrimaryScrollView
+
+A keyboard-aware `ScrollView` that automatically scrolls the focused `TextInput` into view when the keyboard opens. The scroll offset is calculated dynamically based on the actual height of the focused input.
+
+```tsx
+import {PrimaryScrollView} from '@components';
+
+<PrimaryScrollView>
+  <TextInput placeholder="Email" />
+  <TextInput placeholder="Password" />
+</PrimaryScrollView>;
+```
+
+To adjust the gap above the focused input, change the padding value inside `PrimaryScrollView.tsx`:
+
+```ts
+// Adjust the padding value (height - perfectSize(12)) to control the gap above the focused input.
+y: Math.max(0, y - height - perfectSize(12));
+```
+
+## API Layer
+
+### API Methods
+
+Generic typed helpers wrapping `axiosInstance`. All return a unified `ApiResponseType<T>` — no need for try/catch in your services.
+
+```ts
+import {apiGet, apiPost, apiPut, apiPatch, apiDelete} from '@api';
+
+const res = await apiGet<User[]>('/users');
+const res = await apiPost<LoginResponse>(endPoints.auth.login, payload);
 ```
 
-## Scripts
+### Endpoints
+
+All API paths are centralised in `src/api/endpoints.ts`, grouped by feature:
+
+```ts
+import {endPoints} from '@api';
+
+endPoints.auth.login          // '/auth/login'
+endPoints.auth.register       // '/auth/register'
+endPoints.auth.forgotPassword // '/auth/forgot-password'
+```
+
+Add new feature groups directly in `endpoints.ts`.
+
+### Auth Service
+
+```ts
+import {loginService} from '@services';
+
+const res = await loginService({email: 'user@example.com', password: 'secret'});
+if (res.success) {
+  // res.data is typed as LoginResponse
+}
+```
+
+## Internationalisation (i18n)
+
+Three locales are supported out of the box: **English** (`en`), **Spanish** (`es`), and **Hindi** (`hi`).
+
+The `Languages` type (`'en' | 'es' | 'hi'`) is used across `ProfileSlice`, `onChangeLanguage`, and `setLanguage` for full type safety.
+
+```ts
+import {setLanguage} from '@appRedux';
+
+dispatch(setLanguage('hi')); // switch to Hindi
+```
+
+To add a new language:
+1. Add a new JSON file in `src/i18n/` (e.g. `fr.json`)
+2. Import and register it in `i18n.ts`
+3. Add `'fr'` to the `Languages` type in `src/types/index.ts`
+
+## Navigation Structure
+
+```
+MainNavigation (NavigationContainer)
+│
+├── AuthStack        → LogIn
+│
+└── AppStack
+    ├── TabNavigator
+    │   ├── Home
+    │   └── Profile
+    └── ModalScreen  (transparentModal)
+```
+
+### Screen Prop Types
+
+| Type                          | Use for                                              |
+| ----------------------------- | ---------------------------------------------------- |
+| `AuthStackScreenProps<T>`     | Screens inside `AuthStack` (e.g. `LogIn`)            |
+| `AppStackScreenProps<T>`      | Screens inside `AppStack` (e.g. `ModalScreen`)       |
+| `TabNavigationScreenProps<T>` | Tab screens that only use tab navigation             |
+| `CompositeTabScreenProps<T>`  | Tab screens that also navigate to `AppStack` screens |
+
+### Navigating Outside Components
+
+Use the helpers from `@navigation` anywhere (services, redux, axios interceptors):
+
+```ts
+import {navigate, goBack, resetRoot} from '@navigation';
+
+navigate('LogIn');
+navigate('ModalScreen');
+resetRoot({index: 0, routes: [{name: 'LogIn'}]});
+```
+
+## Babel Aliases
+
+| Alias         | Path                  |
+| ------------- | --------------------- |
+| `@api`        | `./src/api`           |
+| `@appRedux`   | `./src/appRedux`      |
+| `@assets`     | `./src/assets`        |
+| `@common`     | `./src/common`        |
+| `@components` | `./src/components`    |
+| `@fonts`      | `./src/assets/fonts`  |
+| `@hooks`      | `./src/hooks`         |
+| `@i18n`       | `./src/i18n`          |
+| `@images`     | `./src/assets/images` |
+| `@navigation` | `./src/navigation`    |
+| `@screens`    | `./src/screens`       |
+| `@services`   | `./src/services`      |
+| `@static`     | `./src/static`        |
+| `@theme`      | `./src/theme`         |
+| `@types`      | `./src/types`         |
+
+## Adding a New Alias
+
+1. Create a folder inside `src/` with an `index.ts` that exports everything from it.
+
+2. Add the alias to `babel.config.js`:
+
+```js
+alias: {
+  '@newAlias': './src/newFolder',
+}
+```
+
+3. Add the path to `tsconfig.json`:
+
+```json
+"paths": {
+  "@newAlias": ["./src/newFolder"]
+}
+```
+
+## Getting Started
+
+Install dependencies:
 
 ```bash
-yarn android          # Run on Android
-yarn ios              # Run on iOS
-yarn start            # Start Metro bundler
-yarn lint             # Run ESLint
-yarn lint:fix         # Auto-fix lint issues
-yarn format           # Format with Prettier
-yarn test             # Run Jest tests
-yarn test:coverage    # Run tests with coverage
-yarn clean            # Clean React Native cache
-yarn clean:android    # Clean Android build
-yarn clean:ios        # Clean iOS build
+npm install
 ```
 
-## Requirements
+iOS — install pods (first time or after native dependency changes):
 
-- Node >= 22.11.0
-- React Native 0.84.1
-- Xcode 15+ (iOS)
-- Android Studio + JDK 17 (Android)
+```bash
+bundle install
+bundle exec pod install
+```
+
+Run on Android:
+
+```bash
+npm run android
+```
+
+Run on iOS:
+
+```bash
+npm run ios
+```
+
+Start Metro:
+
+```bash
+npm start
+```
 
-## License
+---
 
-MIT
+Powered by [React Native](https://reactnative.dev)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vijayp-07/react-native-boiler-plate",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "A professional, production-ready React Native boilerplate template with TypeScript, Redux Toolkit, React Navigation, Axios, i18n, SVG support, and scalable architecture.",
   "keywords": [
     "react-native",

package/template/README.md

@@ -13,11 +13,13 @@ npx @react-native-community/cli@latest init MyApp --template @vijayp-07/react-na
 - **Navigation:** React Navigation with separate `AuthStack`, `AppStack`, `TabNavigator`, and a typed `RootNavigationRef` for navigating outside components
 - **Redux:** Redux Toolkit setup with `LoaderSlice` and `ProfileSlice`, typed `useAppSelector` / `useAppDispatch` hooks
 - **Axios:** Pre-configured `axiosInstance` with request/response interceptors for auth token injection and error handling (401, 500, network errors)
-- **Internationalization (i18n):** i18next + react-i18next with English and Spanish locale support
-- **TypeScript:** Full type coverage including navigation param lists and screen props
+- **API Layer:** Generic `apiGet`, `apiPost`, `apiPut`, `apiPatch`, `apiDelete` helpers wrapping `axiosInstance` with unified `ApiResponseType` response shape. Centralised `endPoints` object for all API paths
+- **Auth Service:** `loginService` in `src/services/authService.ts` — ready-to-use login API call with device info attached
+- **Internationalization (i18n):** i18next + react-i18next with English, Spanish, and **Hindi** locale support
+- **TypeScript:** Full type coverage including navigation param lists, screen props, `ApiResponseType`, `LoginPayload`, `LoginResponse`, and `Languages` union type
 - **Babel Aliases:** Clean imports via path aliases (e.g. `@screens`, `@components`, `@appRedux`)
-- **Custom Components:** `PrimaryLoader`, `PrimaryText`, `PrimaryButton`, `PrimaryFlashMessage`, `PrimaryScrollView`, `NoInternetModalPopUp`
-- **Asset Management:** Fonts (Poppins) and SVG images with centralized exports
+- **Custom Components:** `PrimaryLoader`, `PrimaryText`, `PrimaryButton`, `PrimaryFlashMessage`, `PrimaryScrollView`, `NoInternetModalPopUp`, `Container`, `PrimaryTextInput`
+- **Asset Management:** Fonts (Poppins) and SVG images with centralized exports, including `IC_HidePassword` and `IC_ShowPassword`
 - **Async Storage:** Utility wrappers for AsyncStorage via `@common`
 - **Network Detection:** `NoInternetModalPopUp` using `@react-native-community/netinfo`
 
@@ -34,6 +36,8 @@ npx @react-native-community/cli@latest init MyApp --template @vijayp-07/react-na
 │
 ├── 📁api
 │   ├── axiosInstance.ts       # Axios instance with request/response interceptors
+│   ├── apiMethods.ts          # Generic apiGet/apiPost/apiPut/apiPatch/apiDelete helpers
+│   ├── endpoints.ts           # Centralised API endpoint paths grouped by feature
 │   └── index.ts
 │
 ├── 📁appRedux
@@ -51,6 +55,8 @@ npx @react-native-community/cli@latest init MyApp --template @vijayp-07/react-na
 │   │   ├── IC_Home_UnActive.svg
 │   │   ├── IC_Setting_Active.svg
 │   │   ├── IC_Setting_UnActive.svg
+│   │   ├── IC_HidePassword.svg
+│   │   ├── IC_ShowPassword.svg
 │   │   └── index.ts
 │   └── index.ts
 │
@@ -61,12 +67,14 @@ npx @react-native-community/cli@latest init MyApp --template @vijayp-07/react-na
 │   └── index.ts
 │
 ├── 📁components
+│   ├── Container.tsx            # Safe-area-aware full-screen wrapper with padding control
 │   ├── NoInternetModalPopUp.tsx
 │   ├── PrimaryButton.tsx
 │   ├── PrimaryFlashMessage.tsx  # Animated toast with fade in/out, per-type styling
 │   ├── PrimaryLoader.tsx
 │   ├── PrimaryScrollView.tsx    # Keyboard-aware ScrollView, auto-scrolls to focused input
 │   ├── PrimaryText.tsx
+│   ├── PrimaryTextInput.tsx     # TextInput with password show/hide toggle
 │   └── index.ts
 │
 ├── 📁hooks
@@ -75,6 +83,7 @@ npx @react-native-community/cli@latest init MyApp --template @vijayp-07/react-na
 ├── 📁i18n
 │   ├── en.json                # English translations
 │   ├── es.json                # Spanish translations
+│   ├── hi.json                # Hindi translations
 │   ├── i18n.ts                # i18next configuration
 │   └── index.ts
 │
@@ -98,6 +107,7 @@ npx @react-native-community/cli@latest init MyApp --template @vijayp-07/react-na
 │   └── index.ts
 │
 ├── 📁services
+│   ├── authService.ts         # Login API call (loginService)
 │   └── index.ts
 │
 ├── 📁static
@@ -111,13 +121,51 @@ npx @react-native-community/cli@latest init MyApp --template @vijayp-07/react-na
 │
 ├── 📁types
 │   ├── declarations.d.ts      # SVG and module declarations
-│   └── index.ts               # Navigation param lists and screen prop types
+│   └── index.ts               # Navigation param lists, screen props, ApiResponseType, LoginPayload, LoginResponse, Languages
 │
 └── index.tsx                  # App entry point
 ```
 
 ## Custom Components
 
+### Container
+
+A safe-area-aware full-screen wrapper. Automatically applies top/bottom safe area insets and supports granular padding control per side.
+
+```tsx
+import {Container} from '@components';
+
+<Container backgroundColor="#fff" padding={16}>
+  {/* screen content */}
+</Container>
+
+// Hide bottom safe area (e.g. screens with a fixed bottom bar)
+<Container hideBottomSafeArea>
+  {/* screen content */}
+</Container>
+```
+
+### PrimaryTextInput
+
+A styled `TextInput` with a built-in password show/hide toggle. Supports all standard `TextInputProps` plus `isPassword` and `containerStyle`.
+
+```tsx
+import {PrimaryTextInput} from '@components';
+
+<PrimaryTextInput
+  placeholder="Email"
+  value={email}
+  onChangeText={setEmail}
+/>
+
+<PrimaryTextInput
+  placeholder="Password"
+  isPassword
+  value={password}
+  onChangeText={setPassword}
+/>
+```
+
 ### PrimaryFlashMessage
 
 Animated toast notification with per-type styling (success, danger, warning, info). Fade in/out animation is driven by `animationDuration`. Rendered via a custom `FlashMessageComponent` for full layout control.
@@ -159,6 +207,61 @@ To adjust the gap above the focused input, change the padding value inside `Prim
 y: Math.max(0, y - height - perfectSize(12));
 ```
 
+## API Layer
+
+### API Methods
+
+Generic typed helpers wrapping `axiosInstance`. All return a unified `ApiResponseType<T>` — no need for try/catch in your services.
+
+```ts
+import {apiGet, apiPost, apiPut, apiPatch, apiDelete} from '@api';
+
+const res = await apiGet<User[]>('/users');
+const res = await apiPost<LoginResponse>(endPoints.auth.login, payload);
+```
+
+### Endpoints
+
+All API paths are centralised in `src/api/endpoints.ts`, grouped by feature:
+
+```ts
+import {endPoints} from '@api';
+
+endPoints.auth.login          // '/auth/login'
+endPoints.auth.register       // '/auth/register'
+endPoints.auth.forgotPassword // '/auth/forgot-password'
+```
+
+Add new feature groups directly in `endpoints.ts`.
+
+### Auth Service
+
+```ts
+import {loginService} from '@services';
+
+const res = await loginService({email: 'user@example.com', password: 'secret'});
+if (res.success) {
+  // res.data is typed as LoginResponse
+}
+```
+
+## Internationalisation (i18n)
+
+Three locales are supported out of the box: **English** (`en`), **Spanish** (`es`), and **Hindi** (`hi`).
+
+The `Languages` type (`'en' | 'es' | 'hi'`) is used across `ProfileSlice`, `onChangeLanguage`, and `setLanguage` for full type safety.
+
+```ts
+import {setLanguage} from '@appRedux';
+
+dispatch(setLanguage('hi')); // switch to Hindi
+```
+
+To add a new language:
+1. Add a new JSON file in `src/i18n/` (e.g. `fr.json`)
+2. Import and register it in `i18n.ts`
+3. Add `'fr'` to the `Languages` type in `src/types/index.ts`
+
 ## Navigation Structure
 
 ```