🚀 React Native Project Template

⚙️ Framework Versions

Packages	Version
React	19.2.8
React Native	0.86.2

A modern, scalable, and CLI-enhanced React Native starter — optimized for speed, maintainability, and developer productivity.

---

🛠️ Project Initialization

⚡ Instant Setup (No cloning required):

Run the generator directly using npx or bunx to create a fresh project with React Native pinned to the newest version this template's animation stack (react-native-reanimated / react-native-worklets) actually supports, with this template layered on top.

# Using bunx (Fastest)
bunx github:SolankiYogesh/react-native-template MyNewProject
# Using npx
npx github:SolankiYogesh/react-native-template MyNewProject

---

🛠️ Manual Usage (Cloned Repo):

If you've already cloned the repository, you can use the built-in create command:

# 1. Install CLI dependencies
bun install # or npm install# 2. Create a new project
bun run create MyNewProject

---

📦 Traditional Method (via GitHub):

2️⃣ Install Dependencies

✅ Recommended (Yarn):

yarn

Or use NPM:

npm install

---

3️⃣ iOS Setup (CocoaPods)

yarn pod

Or use NPM:

cd ios && pod install 

---

⚡ Generate Components & Screens in Seconds

This template includes Plop.js for fast, consistent scaffolding of components and screens.

🧩 Generate Using CLI:

yarn generate

You'll be prompted with the following generator options:

• Common Component (auto-exported, created at src/components/ComponentName)
• Screen (auto-exported, created at src/screens/ScreenName)
• Screen-Specific Component (created inside respective screen directory)

---

🧰 Key Featured Libraries & Benefits

Library	Purpose & Benefit
dayjs	Lightweight, performant date/time manipulation
zustand	Minimalistic, flexible state management
react-native-mmkv	Ultra-fast, encrypted key-value storage
react-native-keyboard-controller	Robust keyboard event management & animations
react-hook-form	Simple, performant form management
zod	Schema validation and type-safe form validation

These carefully picked libraries ensure smooth performance, better developer experience, and maintainability out-of-the-box.

---

🖼️ Screenshots Preview

🔐 Login	🏠 Dashboard

---

🎨 Features Included

• 🧱 Atomic folder structure
• ⚛️ React Native + TypeScript
• 🧩 Plop.js generators for components & screens
• 🌈 Centralized theming system
• 🚀 Optimized for fast development and performance

---

🧭 Folder Structure

├── Assets
│ ├── Fonts
│ │ ├── Inter-Bold.ttf
│ │ ├── Inter-ExtraBold.ttf
│ │ ├── Inter-Medium.ttf
│ │ ├── Inter-Regular.ttf
│ │ └── Inter-SemiBold.ttf
│ └── Images
│ └── user.png
├── Components
│ ├── AppButton.tsx
│ ├── AppContainer.tsx
│ ├── AppDropDown
│ ├── AppHeader.tsx
│ ├── AppInput.tsx
│ ├── AppLoader
│ │ ├── AppLoader.tsx
│ │ └── Loader.ts
│ └── index.ts
├── Config
│ └── Config.ts
├── Helpers
│ ├── AppStorage.ts
│ ├── Constant.ts
│ ├── index.ts
│ ├── Responsive.ts
│ ├── Screens.ts
│ ├── SVGByteCode.ts
│ └── Utility.ts
├── Hooks
│ ├── index.ts
│ ├── useNavigation.ts
│ └── useParams.ts
├── Network
│ ├── APICall.ts
│ ├── EndPoints.ts
│ └── index.ts
├── Router
│ ├── AppNavigation.tsx
│ ├── AuthNavigation.tsx
│ ├── HomeNavigation.tsx
│ ├── index.ts
│ └── RootNavigation.ts
├── Screens
│ ├── Auth
│ │ └── LoginScreen
│ │ └── LoginScreen.tsx
│ ├── index.ts
│ ├── Main
│ │ └── DashBoardScreen
│ │ └── DashBoardScreen.tsx
│ └── Yogesh
├── Store
│ ├── index.ts
│ ├── useMulti.ts
│ └── useUserStore.ts
├── Theme
│ ├── Colors.ts
│ ├── CommonStyle.ts
│ ├── Fonts.ts
│ └── index.ts
└── Types
├── allTypes.d.ts
├── index.ts
├── screen.types.ts
└── types.ts

---

💡 Pro Tip

Run yarn generate often to boost productivity and keep your code consistent!