Project Setup — React Native (Expo) + React Native Paper This document defines the **source setup and conventions** for React Native projects using **Expo (Managed Workflow)** and **react-native-paper** as the UI library. This version **removes Expo Dev Client**, avoids bare/native-only libraries, and ensures all dependencies are **Expo-compatible** so the project runs easily on **Windows + Android devices** for all team members. --- ## 1. Goals of This Setup - Use **Expo Managed Workflow only** (no `expo-dev-client`, no `expo run:android/ios`) - Replace **Atomic UI → React Native Paper** - Remove any libraries that **require native linking** - Prefer **Expo-supported libraries** - Ensure **Windows developers can run the app with Android devices** - Maintain **TypeScript + Feature-based architecture** --- ## 2. Prerequisites ### Required Tools | Tool | Version | |------|--------| | Node.js | 20+ | | npm / yarn | Latest | | Expo CLI | Latest | | Android Studio | Installed (for emulator + SDK) | | Git | Latest | | TypeScript | Strict mode | ### Install Expo CLI ```bash npm install -g expo ``` --- ## 3. Create Project ```bash npx create-expo-app my-app --template cd my-app ``` Choose **TypeScript template**. --- ## 4. Install React Native Paper ```bash expo install react-native-paper react-native-safe-area-context react-native-vector-icons ``` Paper also needs gesture + reanimated: ```bash expo install react-native-gesture-handler react-native-reanimated ``` --- ## 5. Remove Unsupported / Bare Libraries ### Remove - expo-dev-client - react-native-worklets - native SQLite libs not supported by Expo - custom native modules - any pod/gradle linked packages ### Replace With Expo Alternatives | Native Lib | Expo Alternative | |-----------|------------------| | react-native-sqlite-storage | expo-sqlite | | react-native-image-picker | expo-image-picker | | react-native-camera | expo-camera | | react-native-fs | expo-file-system | | react-native-permissions | expo-permissions | | react-native-maps (bare config) | expo-maps (or remove) | If no Expo alternative exists → **Remove the library.** --- ## 6. App Entry Setup (`App.tsx`) ```tsx import React from "react"; import { Provider as PaperProvider } from "react-native-paper"; import { GestureHandlerRootView } from "react-native-gesture-handler"; import { SafeAreaProvider } from "react-native-safe-area-context"; import RootNavigator from "./src/route/RootNavigator"; export const App = () => { return ( <GestureHandlerRootView style={{ flex: 1 }}> <SafeAreaProvider> <PaperProvider> <RootNavigator /> </PaperProvider> </SafeAreaProvider> </GestureHandlerRootView> ); }; ``` **Rules** - Named export only. - No default export. - No native modules. --- ## 7. Theme Setup (React Native Paper) Create `src/settings/theme.ts` ```ts import { MD3LightTheme, MD3DarkTheme } from "react-native-paper"; export const lightTheme = { ...MD3LightTheme, colors: { ...MD3LightTheme.colors, primary: "#4CAF50", }, }; export const darkTheme = { ...MD3DarkTheme, }; ``` --- ## 8. Source Structure ``` src/ ├── assets/ │ ├── images/ │ └── localize/ ├── components/ ├── constants/ ├── context/ ├── db/ ├── features/ ├── hooks/ ├── i18n/ ├── route/ ├── services/ ├── settings/ ├── types/ └── utils/ ``` --- ## 9. Path Aliases (tsconfig.json) ```json { "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"], "@components/*": ["src/components/*"], "@features/*": ["src/features/*"], "@utils/*": ["src/utils/*"], "@services/*": ["src/services/*"] } } } ``` --- ## 10. Data Layer Rules (Expo SQLite) Use **expo-sqlite** only. Flow: ``` Screen → Service → DAO → DBManager → SQLite ``` ### Rules - No SQL in Screens - DAOs are domain-based - DBManager only handles connection/migration - Services contain business logic --- ## 11. UI Rules (React Native Paper) - Functional components only - Named exports only - No `any` - Styles in hooks - No hardcoded colors - Use Paper components --- ## 12. Feature Module Layout ``` features/ └── Home/ ├── screens/ ├── widgets/ └── components/ ``` --- ## 13. Scripts ```json { "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "lint": "eslint . --ext .tsx,.ts", "typecheck": "tsc --noEmit" } } ``` --- ## 14. Windows Developer Setup (Android Device) ### Steps 1. Install **Expo Go** from Play Store. 2. Connect Android phone via USB. 3. Enable **USB Debugging**. 4. Run: ```bash expo start ``` 5. Press **a** or scan QR code in Expo Go. No Mac needed. Works fully on **Windows + Android**. --- ## 15. Summary - UI → React Native Paper - Workflow → Expo Managed Only - DB → expo-sqlite - Remove native libs - Windows friendly - Android device testing supported - TypeScript strict
Show More 
