react-native-boiler-plate-vijay 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Vijay P
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,84 @@
+# @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.
+
+## Usage
+
+```bash
+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`:
+
+```ts
+import { PrimaryButton } from '@components';
+import { colors } from '@theme';
+import { axiosInstance } from '@api';
+```
+
+## Scripts
+
+```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
+```
+
+## Requirements
+
+- Node >= 22.11.0
+- React Native 0.84.1
+- Xcode 15+ (iOS)
+- Android Studio + JDK 17 (Android)
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "react-native-boiler-plate-vijay",
+  "version": "1.0.0",
+  "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",
+    "template",
+    "boilerplate",
+    "typescript",
+    "redux",
+    "navigation",
+    "starter"
+  ],
+  "homepage": "https://github.com/vijayp-07/react-native-boiler-plate#readme",
+  "bugs": {
+    "url": "https://github.com/vijayp-07/react-native-boiler-plate/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vijayp-07/react-native-boiler-plate.git"
+  },
+  "license": "MIT",
+  "author": "Vijay P",
+  "main": "template.config.js",
+  "files": [
+    "template/",
+    "template.config.js"
+  ],
+  "engines": {
+    "node": ">= 22.11.0"
+  }
+}

package/template/.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

package/template/Gemfile

@@ -0,0 +1,16 @@
+source 'https://rubygems.org'
+
+# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
+ruby ">= 2.6.10"
+
+# Exclude problematic versions of cocoapods and activesupport that causes build failures.
+gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
+gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
+gem 'xcodeproj', '< 1.26.0'
+gem 'concurrent-ruby', '< 1.3.4'
+
+# Ruby 3.4.0 has removed some libraries from the standard library.
+gem 'bigdecimal'
+gem 'logger'
+gem 'benchmark'
+gem 'mutex_m'

package/template/README.md

@@ -0,0 +1,272 @@
+# React Native Boilerplate
+
+A production-ready React Native boilerplate with navigation, Redux, i18n, axios, and more — pre-configured so you can focus on building features.
+
+## Usage
+
+```bash
+npx @react-native-community/cli@latest init MyApp --template react-native-boiler-plate
+```
+
+## 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)
+- **Internationalization (i18n):** i18next + react-i18next with English and Spanish locale support
+- **TypeScript:** Full type coverage including navigation param lists and screen props
+- **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
+- **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
+│   └── 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
+│   │   └── 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
+│   ├── 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
+│   └── index.ts
+│
+├── 📁hooks
+│   └── index.ts
+│
+├── 📁i18n
+│   ├── en.json                # English translations
+│   ├── es.json                # Spanish 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
+│   └── 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 and screen prop types
+│
+└── index.tsx                  # App entry point
+```
+
+## Custom Components
+
+### 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 {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));
+```
+
+## 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
+npm install
+```
+
+iOS — install pods (first time or after native dependency changes):
+
+```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
+```
+
+---
+
+Powered by [React Native](https://reactnative.dev)

package/template/__tests__/App.test.tsx

@@ -0,0 +1,13 @@
+/**
+ * @format
+ */
+
+import React from 'react';
+import ReactTestRenderer from 'react-test-renderer';
+import App from '../App';
+
+test('renders correctly', async () => {
+  await ReactTestRenderer.act(() => {
+    ReactTestRenderer.create(<App />);
+  });
+});

package/template/_eslintrc.js

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

package/template/_gitignore

@@ -0,0 +1,71 @@
+# OSX
+.DS_Store
+
+# Xcode
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+**/.xcode.env.local
+
+# Android/IntelliJ
+build/
+.idea
+.gradle
+local.properties
+*.iml
+*.hprof
+.cxx/
+*.keystore
+!debug.keystore
+.kotlin/
+
+# node.js
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# Fastlane
+**/fastlane/report.xml
+**/fastlane/Preview.html
+**/fastlane/screenshots
+**/fastlane/test_output
+
+# Bundle artifact
+*.jsbundle
+
+# Ruby / CocoaPods
+**/Pods/
+/vendor/bundle/
+
+# Metro
+.metro-health-check*
+
+# Testing
+/coverage
+
+# Env files
+.env
+.env.local
+.env.*.local
+!.env.example
+
+# Yarn
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

package/template/_prettierrc.js

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

package/template/_watchmanconfig

@@ -0,0 +1 @@
+{}

package/template/android/app/build.gradle

@@ -0,0 +1,119 @@
+apply plugin: "com.android.application"
+apply plugin: "org.jetbrains.kotlin.android"
+apply plugin: "com.facebook.react"
+
+/**
+ * This is the configuration block to customize your React Native Android app.
+ * By default you don't need to apply any configuration, just uncomment the lines you need.
+ */
+react {
+    /* Folders */
+    //   The root of your project, i.e. where "package.json" lives. Default is '../..'
+    // root = file("../../")
+    //   The folder where the react-native NPM package is. Default is ../../node_modules/react-native
+    // reactNativeDir = file("../../node_modules/react-native")
+    //   The folder where the react-native Codegen package is. Default is ../../node_modules/@react-native/codegen
+    // codegenDir = file("../../node_modules/@react-native/codegen")
+    //   The cli.js file which is the React Native CLI entrypoint. Default is ../../node_modules/react-native/cli.js
+    // cliFile = file("../../node_modules/react-native/cli.js")
+
+    /* Variants */
+    //   The list of variants to that are debuggable. For those we're going to
+    //   skip the bundling of the JS bundle and the assets. Default is "debug", "debugOptimized".
+    //   If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
+    // debuggableVariants = ["liteDebug", "liteDebugOptimized", "prodDebug", "prodDebugOptimized"]
+
+    /* Bundling */
+    //   A list containing the node command and its flags. Default is just 'node'.
+    // nodeExecutableAndArgs = ["node"]
+    //
+    //   The command to run when bundling. By default is 'bundle'
+    // bundleCommand = "ram-bundle"
+    //
+    //   The path to the CLI configuration file. Default is empty.
+    // bundleConfig = file(../rn-cli.config.js)
+    //
+    //   The name of the generated asset file containing your JS bundle
+    // bundleAssetName = "MyApplication.android.bundle"
+    //
+    //   The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
+    // entryFile = file("../js/MyApplication.android.js")
+    //
+    //   A list of extra flags to pass to the 'bundle' commands.
+    //   See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
+    // extraPackagerArgs = []
+
+    /* Hermes Commands */
+    //   The hermes compiler command to run. By default it is 'hermesc'
+    // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
+    //
+    //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
+    // hermesFlags = ["-O", "-output-source-map"]
+
+    /* Autolinking */
+    autolinkLibrariesWithApp()
+}
+
+/**
+ * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
+ */
+def enableProguardInReleaseBuilds = false
+
+/**
+ * The preferred build flavor of JavaScriptCore (JSC)
+ *
+ * For example, to use the international variant, you can use:
+ * `def jscFlavor = io.github.react-native-community:jsc-android-intl:2026004.+`
+ *
+ * The international variant includes ICU i18n library and necessary data
+ * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
+ * give correct results when using with locales other than en-US. Note that
+ * this variant is about 6MiB larger per architecture than default.
+ */
+def jscFlavor = 'io.github.react-native-community:jsc-android:2026004.+'
+
+android {
+    ndkVersion rootProject.ext.ndkVersion
+    buildToolsVersion rootProject.ext.buildToolsVersion
+    compileSdk rootProject.ext.compileSdkVersion
+
+    namespace "com.helloworld"
+    defaultConfig {
+        applicationId "com.helloworld"
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
+        versionCode 1
+        versionName "1.0"
+    }
+    signingConfigs {
+        debug {
+            storeFile file('debug.keystore')
+            storePassword 'android'
+            keyAlias 'androiddebugkey'
+            keyPassword 'android'
+        }
+    }
+    buildTypes {
+        debug {
+            signingConfig signingConfigs.debug
+        }
+        release {
+            // Caution! In production, you need to generate your own keystore file.
+            // see https://reactnative.dev/docs/signed-apk-android.
+            signingConfig signingConfigs.debug
+            minifyEnabled enableProguardInReleaseBuilds
+            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+        }
+    }
+}
+
+dependencies {
+    // The version of react-native is set by the React Native Gradle Plugin
+    implementation("com.facebook.react:react-android")
+
+    if (hermesEnabled.toBoolean()) {
+        implementation("com.facebook.react:hermes-android")
+    } else {
+        implementation jscFlavor
+    }
+}

package/template/android/app/proguard-rules.pro

@@ -0,0 +1,10 @@
+# Add project specific ProGuard rules here.
+# By default, the flags in this file are appended to flags specified
+# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
+# You can edit the include path and order by changing the proguardFiles
+# directive in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# Add any project specific keep options here: