A React Native Expo application for field annotation data collection, designed to work offline and sync when connectivity is available.
- Navigation: Bottom tab navigation with stack navigation for detailed screens
- Offline Storage: AsyncStorage-based local data persistence
- TypeScript: Full TypeScript implementation with proper type definitions
- Cross-Platform: Designed to work on both iOS and Android
- Login Screen: Authentication interface (placeholder for Dendra Auth API)
- Organization Selection: Choose organization for annotations
- Home Screen: Dashboard with quick actions and status overview
- Annotations Screen: List and search existing annotations
- Drafts Screen: Manage draft annotations with local storage
- More Screen: Settings, sync, and user management
- Create Annotation: Full annotation creation form with date/time pickers
- Edit Annotation: Edit existing annotations
- Bottom Tab Navigation: Home, Annotations, Drafts, More
- Date/Time Pickers: For annotation timeframes
- Action Type Selection: Flag, Exclude, Evaluate, Attribute
- Search Functionality: Filter annotations
- Status Indicators: Sync status, completion status
- Offline Support: Local storage for drafts and pending sync
- Local Storage: AsyncStorage for offline data persistence
- Type Safety: Comprehensive TypeScript interfaces
- Mock Data: Placeholder data for development and testing
- Sync Management: Framework for online/offline synchronization
- Node.js 18+
- Bun (package manager)
- Expo CLI
- iOS Simulator or Android Emulator
bun install# Start development server
bun start
# Run on iOS
bun run ios
# Run on Android
bun run android
# Run on web
bun run webnpx tsc --noEmitsrc/
├── components/ # Reusable UI components
├── navigation/ # Navigation configuration
│ └── AppNavigator.tsx # Main navigation setup
├── screens/ # Screen components
│ ├── LoginScreen.tsx
│ ├── HomeScreen.tsx
│ ├── AnnotationsScreen.tsx
│ ├── DraftsScreen.tsx
│ ├── MoreScreen.tsx
│ ├── CreateAnnotationScreen.tsx
│ └── EditAnnotationScreen.tsx
├── services/ # API and storage services
│ ├── ApiService.ts # Dendra API integration (placeholder)
│ └── StorageService.ts # Local storage management
├── types/ # TypeScript type definitions
│ └── index.ts
├── hooks/ # Custom React hooks
└── utils/ # Utility functions
- Implement actual Dendra Auth API integration
- Add ConnectRPC client with proper buf-generated types
- Configure API endpoints and authentication
- Implement camera integration for photos
- Add GPS location capture
- Handle media storage and sync
- Implement robust offline/online detection
- Add background sync capabilities
- Handle conflict resolution
- Add loading states and error handling
- Implement proper form validation
- Add accessibility features
- Polish visual design
- Add unit tests
- Add integration tests
- Add E2E tests
- React Native 0.79.5
- React 19.0.0
- Expo SDK ~53.0.17
- @react-navigation/native
- @react-navigation/bottom-tabs
- @react-navigation/stack
- @react-native-async-storage/async-storage
- @connectrpc/connect
- @connectrpc/connect-web
- @expo/vector-icons
- react-native-date-picker
- expo-location
- expo-camera
- expo-image-picker
The app is designed with offline-first principles:
- Local Storage: All data is stored locally using AsyncStorage
- Sync Queue: Pending changes are queued for sync when online
- Conflict Resolution: Framework in place for handling sync conflicts
- Progressive Enhancement: Core functionality works offline, enhanced features require connectivity
The navigation follows iOS/Android conventions with a bottom tab bar for primary navigation and stack navigation for detailed views.