A sleek, modern, and production-ready mobile solution engineered for field site inspections, real-time GPS tracking, camera geotagging, contact linkage, and zero-loss draft survey management.
📊 Executive Dashboard Time-aware greeting, live metric counters & quick inspection tool grid. |
👤 Inspector Profile Agent credentials, clearance level, metrics & node diagnostics. |
📍 GPS Location Utility Live satellite lock, coordinate accuracy, satellite map view & direct attachment. |
- Overview
- Architecture & Design Philosophy
- Module Highlights & Deep Dive
- Module 1: Executive Dashboard
- Module 2: Dynamic Survey Form
- Module 3: Camera Capture & Timestamp Watermark
- Module 4: GPS Geolocation & Satellite Utility
- Module 5: Native Device Contacts Integration
- Module 6: Clipboard Data Manager
- Module 7: Interactive Survey Preview
- Module 8: Survey History & Filter Matrix
- Design System & Theme Tokens
- Folder & File Architecture
- Tech Stack & Package Matrix
- Getting Started & Installation
- Hardware Permissions & Fallback UI
- Author & Credits
The Smart Field Survey & Inspection App bridges the gap between field operation audits and enterprise digital reporting. Designed to operate reliably under challenging field conditions, the app provides real-time access to native smartphone hardware—including high-precision GPS tracking, camera watermarking, contact syncing, and system clipboard integration.
With a clean, responsive layout built on React Native and Expo SDK 54, field engineers and site auditors can capture data effortlessly without worrying about lost drafts during screen switching or app navigation.
┌─────────────────────────────────────────────────────────┐
│ Root Drawer Navigator │
│ (Dashboard, Camera, Location, Contacts, Settings) │
└──────────────────────────┬──────────────────────────────┘
│
┌──────────────────────────▼──────────────────────────────┐
│ Bottom Tab Navigation │
│ [ Dashboard ] [ History ] [ (+) New ] [ Profile ] │
└──────────────────────────┬──────────────────────────────┘
│
┌──────────────────────────▼──────────────────────────────┐
│ Global SurveyContext Store │
│ - Live Survey Draft State (Form, Photo, GPS, Contact) │
│ - Persistent Submitted Survey Records Array │
└─────────────────────────────────────────────────────────┘
- Hybrid Navigation Architecture: Combines a persistent side Drawer Navigator with a bottom Tab Bar. The drawer wraps the entire application, giving instant access to utility screens (
Camera,Location,Contacts,Clipboard,Settings) from any context. - Zero-Loss Draft Persistence (
SurveyContext): State is synchronized across all screens. Navigating from the New Survey form to the GPS Location module or Camera Viewfinder attaches data seamlessly without discarding form inputs. - Type-Safe Domain Modeling: Engineered with strict TypeScript interfaces (
Survey,SurveyDraft,SurveyLocation,SurveyContact). - Interactive Fallback UI: Gracefully handles denied permission states for Camera, Location, and Contacts with built-in retry mechanisms and user prompts.
- Smart Greeting: Displays contextual time-based greetings (Good Morning / Good Afternoon / Good Evening).
- Field Agent Badge: Shows active agent credentials, batch details, and active status (
ACTIVE). - Real-Time Metrics: Live counter tracking Today's Surveys and Total Completed Surveys.
- Quick Action Grid: Instant navigation shortcuts to New Survey, Camera Capture, Pin Location, and Associate Contact.
- Recent Activity Feed: Tap-to-view stream of recently submitted field surveys.
- Agent Identity Card: Displays high-resolution inspector avatar, email handle, and active clearance badge (
T-2 CLEARANCE). - Inspection Clearance: Summary of completed reports, open drafts, and security level.
- Credentials Matrix: Formal ID (
INSP-2026-9942), Course Name, and Batch Year (Batch 2026). - Device Diagnostics: Real-time status monitor showing storage mode and database state.
- Satellite Lock Status: Displays live GPS lock confirmation badge (
GPS Satellite Lock Acquired). - Coordinate Precision: Real-time extraction of Latitude, Longitude, and Accuracy margins (
±16 meters). - Interactive Map View: Embedded satellite map rendering current inspector position with Default / Satellite toggle modes.
- One-Tap Utility Actions:
- 🔄 Refresh Coordinates: Re-queries device GPS sensors.
- 📋 Copy Coordinates: Copies formatted coordinates to system clipboard.
- 📎 Attach to Survey Template: Direct deep-link attachment to current survey draft.
- Structured Inputs: Site Name, Client Name, and Comprehensive Description with real-time validation.
- Priority Selector: Color-coded segmented controls (Low 🟢 | Medium 🟡 | High 🔴).
- Native Date & Time Picker: Integrated
@react-native-community/datetimepicker. - Live Attachment Badges: Dynamic indicators showing attached Photo, GPS Location, and Contact details.
- Live Viewfinder: Interactive
CameraViewwith front/rear camera toggle. - Timestamp Overlay: Captures exact inspection date and time directly onto photo previews.
- Interactive Review: Preview screen allowing inspectors to Use Photo, Retake, or Delete.
- Native Contact Sync: Queries phone contacts via
expo-contactsinto a high-performanceFlatList. - Live Search Filter: Instant contact search by name with active results counter.
- Pull-to-Refresh: Integrated
RefreshControlfor live address book syncing. - Color-Coded Initials: Auto-generated initial avatars for contacts.
- Buffer View: Inspect active system clipboard text.
- Quick Copies: Copy Survey ID, linked Contact Number, or GPS Coordinates.
- Auto-Paste into Notes: Single-tap insertion of clipboard content into survey observation notes.
- Full Inspection Summary: Detailed breakdown of Site Details, Priority, Date, Photo with Timestamp, GPS Coordinates, Contact Person, and Notes.
- Dual Mode Navigation:
- Draft Mode: Offers Edit Survey (re-fills form) and Submit Survey (saves to history).
- Read-Only Mode: Displayed when reviewing submitted records from history.
- Virtualized List: Powered by
FlatListfor smooth scrolling over large datasets. - Search & Filter Matrix: Search by site/client name, filter by priority chips (All, Low, Medium, High).
- Attachment Badges: Chips indicating attached media (Camera, Location, Contact, Notes).
- Record Management: Delete archived records with interactive confirmation prompts.
All styling tokens are centralized in constants/theme.ts to ensure UI harmony and seamless Dark / Light mode switching:
| Token Category | Swatch / Hex | Design Token Name | Purpose |
|---|---|---|---|
| Primary | 🟦 #4F46E5 |
Colors.light.primary |
Main Brand Color & Nav Highlights |
| Secondary | 🟦 #0EA5E9 |
Colors.light.secondary |
Action Buttons & Active Statuses |
| Accent | 🟪 #D946EF |
Colors.light.accent |
Highlights & Special Chips |
| Success | 🟩 #10B981 |
Colors.light.success |
GPS Satellite Lock & Low Priority |
| Warning | 🟧 #F59E0B |
Colors.light.warning |
Medium Priority Flags & Alerts |
| Error | 🟥 #EF4444 |
Colors.light.error |
High Priority Flags & Delete Actions |
| Background (Light) | ⬜ #F8FAFC |
Colors.light.background |
Canvas Light Mode Background |
| Background (Dark) | ⬛ #0F172A |
Colors.dark.background |
Canvas Dark Mode Background |
my-app/
├── app/ # Expo Router File-Based Routes
│ ├── (tabs)/ # Bottom Tab Navigator Screens
│ │ ├── _layout.tsx # Tab Bar configuration & styles
│ │ ├── index.tsx # Module 1: Executive Dashboard
│ │ ├── new-survey.tsx # Module 2: Create / Edit Survey Form
│ │ ├── history.tsx # Module 8: Survey History & Filter Matrix
│ │ └── profile.tsx # Inspector Profile Screen
│ ├── _layout.tsx # Root Layout & Drawer Navigation Wrapper
│ ├── camera.tsx # Module 3: Camera Capture & Viewfinder
│ ├── location.tsx # Module 4: GPS Satellite Geolocation
│ ├── contacts.tsx # Module 5: Device Contacts Manager
│ ├── clipboard.tsx # Module 6: System Clipboard Sync
│ ├── preview.tsx # Module 7: Survey Summary & Submission
│ ├── settings.tsx # Application Settings
│ └── modal.tsx # Utility Modal Dialogs
├── assets/ # Application Media & Icons
│ ├── images/ # App logos, favicon, splash screen
│ └── screenshots/ # UI Showcase Screenshots
│ ├── dashboard.png # Executive Dashboard Screenshot
│ ├── profile.png # Inspector Profile Screenshot
│ └── location.png # GPS Location Utility Screenshot
├── components/ # Shared UI Components
│ ├── CustomHeader.tsx # Screen Header with Drawer Trigger
│ ├── CustomDrawerContent.tsx # Custom Drawer Side Menu
│ └── ThemedText.tsx # Theme-aware text wrapper
├── constants/ # Configuration & Global Tokens
│ ├── config.ts # Student & Inspector profile configuration
│ └── theme.ts # Design tokens (Colors, Spacing, Radii, Shadows)
├── context/ # State Management
│ └── SurveyContext.tsx # Global Survey State & Draft Store
└── hooks/ # Custom React Hooks
| Core Technology / Package | Package Version | Feature Responsibility |
|---|---|---|
| React Native | 0.81.5 |
Cross-platform UI core framework |
| Expo SDK | ~54.0.35 |
Native mobile application suite |
| Expo Router | ~6.0.24 |
File-based dynamic routing |
| TypeScript | ~5.9.2 |
Static type safety & domain modeling |
| expo-camera | ~17.0.10 |
Custom live camera viewfinder & capture |
| expo-location | ~19.0.8 |
GPS satellite location query engine |
| react-native-maps | 1.20.1 |
Native Google / Apple maps rendering |
| expo-contacts | ~15.0.11 |
Address book integration |
| expo-clipboard | ~8.0.8 |
System clipboard buffer access |
| @react-navigation/drawer | ^7.13.2 |
Slide-out Drawer Navigation |
| @react-navigation/bottom-tabs | ^7.4.0 |
Modern Bottom Navigation Tab Bar |
| @react-native-community/datetimepicker | 8.4.4 |
Native Date & Time selector |
Before running the application, make sure your environment includes:
- Node.js: Version
18.0.0or higher - npm (v9+) / yarn / pnpm
- Expo Go app installed on your physical iOS or Android device, OR a configured Android Studio Emulator / Xcode iOS Simulator.
-
Clone the Repository:
git clone https://github.com/kamleshchandela/reactive-native-1.git cd reactive-native-1/my-app -
Install Dependencies:
npm install
-
Start the Expo Development Server:
npm run start
-
Launch on Target Platform:
- 📱 Physical Phone: Scan the terminal QR code using Expo Go.
- 🤖 Android Emulator: Press
ain the terminal. - 🍎 iOS Simulator: Press
iin the terminal. - 🌐 Web Browser: Press
win the terminal.
The app handles device hardware security with user permission prompts:
- 📷 Camera (
CAMERA): Used solely for site photo documentation and timestamp overlays. - 📍 Location (
ACCESS_FINE_LOCATION): Used for fetching exact site GPS coordinates. - 👤 Contacts (
READ_CONTACTS): Used to associate client phone numbers with survey logs.
If any permission is denied by the user, the app displays a fallback screen with clear explanation and an interactive Grant Permission retry button.
Built with ❤️ using React Native, Expo SDK 54 & TypeScript.