React Native প্রজেক্ট তৈরি হলে automatically অনেক ফাইল ও ফোল্ডার তৈরি হয়। এগুলোর কাজ বুঝলে development আরও সহজ হয়। এখানে আমরা Expo Project এবং React Native CLI Project — দুই ধরনের folder structure আলাদা করে ব্যাখ্যা করবো।

---

✨ 1) Expo Project Folder Structure

Expo খুব simple. Beginners জন্য perfect কারণ এখানে Android/iOS native code নেই।

MyExpoApp/
│── assets/
│── node_modules/
│── App.js
│── app.json
│── package.json
│── babel.config.js
    

📂 1. assets/

এখানে সব static files থাকে:

• Images
• Fonts
• Icons

📂 2. node_modules/

সব installed packages এই ফোল্ডারে থাকে। (Manually edit করা উচিত না)

📄 3. App.js

এটাই মূল entry file (React Native অ্যাপ এখান থেকেই রান শুরু করে)।

📄 4. app.json

Expo app configuration থাকে যেমন:

• App name
• Version
• Splash screen
• Icon

📄 5. package.json

App-এর dependencies, scripts, app name ইত্যাদি রাখে—Node.js প্রজেক্টের মেইন metadata।

📄 6. babel.config.js

Babel-এর config – modern JavaScript code compiled করার জন্য ব্যবহৃত।

---

⚙️ 2) React Native CLI Project Folder Structure

React Native CLI প্রজেক্টে Android এবং iOS-এর native code থাকে। Professional production apps-এর জন্য এটা সবচেয়ে বেশি ব্যবহৃত।

MyRNApp/
│── android/
│── ios/
│── app/
│── node_modules/
│── index.js
│── App.js
│── package.json
│── metro.config.js
│── babel.config.js
    

📂 1. android/

এখানে থাকে পুরো Android app-এর native code।

• Java/Kotlin code
• Gradle files
• AndroidManifest.xml
• App build system

👉 Android Studio প্রয়োজন হয় এই অংশ রান বা edit করতে।

📂 2. ios/

iOS অ্যাপের native Swift/Objective-C code থাকে।

• Xcode project files
• Launch screen
• .plist configuration

👉 শুধুমাত্র Mac ব্যবহারকারীরা iOS build করতে পারেন।

📂 3. app/ (Optional কিন্তু Recommended)

আপনি নিজের React code এখানে organize করতে পারেন। সাধারণত app/ ফোল্ডারের ভিতরে থাকে:

app/
│── components/
│── screens/
│── navigation/
│── services/
│── hooks/
│── context/
    

• components/ — Small reusable UI
• screens/ — Full screen pages
• navigation/ — React Navigation setup
• services/ — API calls
• hooks/ — Custom hooks
• context/ — React Context state management

📄 4. App.js

App-এর main UI এখান থেকে start হয়।

📄 5. index.js

Entry point — React Native এখানে register করে।

import {AppRegistry} from 'react-native';
import App from './App';

AppRegistry.registerComponent('MyRNApp', () => App);
    

📄 6. package.json

All app dependencies ও scripts থাকে।

📄 7. metro.config.js

Metro bundler-এর config — images, fonts linking ইত্যাদি handle করতে ব্যবহৃত হয়।

📄 8. babel.config.js

JavaScript compile/config rules থাকে।

---

📊 Expo vs CLI Folder Structure – Quick Comparison

Expo	React Native CLI
No android/ios folder	android/ ও ios/ দুটোই থাকে
Simple folder structure	Complex but powerful structure
Beginners friendly	Production-level apps

---