Prerequisites
Before you begin, ensure you have the following installed:
Node.js
Version 18.0 or higher
npm or yarn
Package manager for dependencies
Expo CLI
For running and building the app
Git
Version control system
iOS Development
Android Development
- macOS required for iOS development
- Xcode 14.0 or higher
- iOS Simulator (included with Xcode)
- CocoaPods installed:
sudo gem install cocoapods
- Android Studio with SDK tools
- Android SDK (API 33 or higher)
- Java Development Kit (JDK 11 or higher)
- Configure
ANDROID_HOME environment variable
Installation Steps
Clone the Repository
Clone the mobile app source code from your repository:git clone <repository-url>
cd incidents-app/mobile
Install Dependencies
Install all required npm packages:Or using yarn:The installation includes React Native, Expo SDK, Supabase client, and all UI libraries.
Configure Environment Variables
Create a .env file in the project root with your Supabase credentials:EXPO_PUBLIC_SUPABASE_URL=your-supabase-project-url
EXPO_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
Never commit the .env file to version control. It’s already included in .gitignore.
iOS Setup (macOS only)
Install iOS dependencies:This step is only required if you’re developing for iOS.
Start Development Server
Launch the Expo development server:Or for specific platforms:# iOS
npm run ios
# Android
npm run android
# Web
npm run web
Project Structure
After installation, your project structure should look like this:
incidents-app/
├── app/ # Expo Router routes
│ ├── (admin)/ # Admin-only routes
│ ├── (auth)/ # Authentication routes
│ ├── (empleado)/ # Employee routes
│ ├── (guest)/ # Guest user routes
│ ├── (guestScan)/ # QR scanning flow
│ └── _layout.tsx # Root layout
├── assets/ # Images, fonts, icons
│ ├── fonts/
│ └── images/
├── components/ # React components
│ ├── settings/ # Settings components
│ ├── ui/ # UI components
│ └── *.tsx # Feature components
├── constants/ # App constants
├── hooks/ # Custom React hooks
├── src/
│ ├── context/ # React context providers
│ └── services/ # External services (Supabase)
├── app.json # Expo configuration
├── package.json # Dependencies
└── tsconfig.json # TypeScript config
Development Setup
Expo Go App
For quick development, use the Expo Go app:
Scan QR Code
Start the dev server (npm start) and scan the QR code with:
- iOS: Camera app
- Android: Expo Go app
Some features like barcode scanning require a development build and won’t work in Expo Go.
Development Build
For full feature access, create a development build:
# Create development build
eas build --profile development --platform ios
eas build --profile development --platform android
# Or build locally
npx expo run:ios
npx expo run:android
Troubleshooting
Metro bundler cache issues
Clear the Metro bundler cache:Or reset the project:
Try these steps:cd ios
pod deintegrate
pod cache clean --all
pod install
cd ..
Clean and rebuild:cd android
./gradlew clean
cd ..
npx expo run:android
Supabase connection issues
Verify your environment variables:# Check if variables are loaded
console.log(process.env.EXPO_PUBLIC_SUPABASE_URL)
EXPO_PUBLIC_ prefix.
Fonts are loaded in _layout.tsx. If fonts fail to load:const [loaded] = useFonts({
DtmF: require("../assets/fonts/DebiUsarEsteFontRegular.ttf"),
PoppinsRegular: Poppins_400Regular,
PoppinsMedium: Poppins_500Medium,
PoppinsSemiBold: Poppins_600SemiBold,
PoppinsBold: Poppins_700Bold,
});
assets/fonts/ directory. Verify Installation
Test that everything is working:
Next Steps
Configuration
Configure app settings and features
Overview
Learn about app architecture
