{"id":30210873,"url":"https://github.com/meleshkodmitriy/expo-offline-app","last_synced_at":"2026-04-11T11:03:13.959Z","repository":{"id":309250260,"uuid":"1035616233","full_name":"MeleshkoDmitriy/expo-offline-app","owner":"MeleshkoDmitriy","description":"💾 TypeScript, React Native, Expo, Realm, SQLite, React Navigation","archived":false,"fork":false,"pushed_at":"2025-08-10T19:20:35.000Z","size":571,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-10T21:15:03.478Z","etag":null,"topics":["expo","react-native","realm","sqlite","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MeleshkoDmitriy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-10T19:17:57.000Z","updated_at":"2025-08-10T19:23:44.000Z","dependencies_parsed_at":"2025-08-10T21:25:38.090Z","dependency_job_id":null,"html_url":"https://github.com/MeleshkoDmitriy/expo-offline-app","commit_stats":null,"previous_names":["meleshkodmitriy/expo-offline-app"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/MeleshkoDmitriy/expo-offline-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MeleshkoDmitriy%2Fexpo-offline-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MeleshkoDmitriy%2Fexpo-offline-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MeleshkoDmitriy%2Fexpo-offline-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MeleshkoDmitriy%2Fexpo-offline-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MeleshkoDmitriy","download_url":"https://codeload.github.com/MeleshkoDmitriy/expo-offline-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MeleshkoDmitriy%2Fexpo-offline-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31677819,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-11T08:18:19.405Z","status":"ssl_error","status_checked_at":"2026-04-11T08:17:08.892Z","response_time":54,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["expo","react-native","realm","sqlite","typescript"],"created_at":"2025-08-13T20:22:59.746Z","updated_at":"2026-04-11T11:03:13.946Z","avatar_url":"https://github.com/MeleshkoDmitriy.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Expo Offline Todo App\n\nA comprehensive offline-first todo application built with React Native and Expo, demonstrating multiple local database solutions and network status monitoring.\n\n## 🎯 Project Overview\n\nThis application showcases an offline-first approach to mobile development, implementing two different local database solutions (Realm and SQLite) alongside real-time network connectivity monitoring. The app provides a complete CRUD (Create, Read, Update, Delete) interface for managing todo items with full offline functionality.\n\n## 🏗️ Architecture\n\n### Core Technologies\n- **React Native** with **Expo SDK 53**\n- **TypeScript** for type safety\n- **React Navigation** for tab-based navigation\n- **@react-native-community/netinfo** for network status monitoring\n\n### Database Solutions\nThe app implements two separate local database solutions:\n\n#### 1. **Realm Database**\n- **Library**: `realm` and `@realm/react`\n- **Features**: \n  - Object-oriented database with automatic schema management\n  - Real-time data synchronization\n  - UUID-based primary keys\n  - Automatic indexing for performance\n  - Built-in data validation\n\n#### 2. **SQLite Database**\n- **Library**: `expo-sqlite`\n- **Features**:\n  - Traditional SQL database with full CRUD operations\n  - Custom SQLiteService class for database management\n  - Manual schema creation and management\n  - Integer-based auto-incrementing primary keys\n\n### Network Monitoring\n- **Library**: `@react-native-community/netinfo`\n- **Features**:\n  - Real-time network connectivity status\n  - Network type detection (WiFi, Cellular, etc.)\n  - Visual indicators in app headers\n  - Context-based network status sharing\n\n## 📱 Features\n\n### Todo Management\n- ✅ **Create** new todo items with title and description\n- ✅ **Read** todo lists with real-time updates\n- ✅ **Update** existing todos (edit title/description, toggle completion)\n- ✅ **Delete** todos with confirmation\n- ✅ **Toggle** completion status with visual indicators\n- ✅ **Pull-to-refresh** functionality for data reloading\n\n### Offline-First Design\n- 🔄 **Full offline functionality** - all operations work without internet\n- 📊 **Dual database support** - compare Realm vs SQLite performance\n- 🔄 **Real-time synchronization** - automatic updates across components\n- 📱 **Native performance** - optimized for mobile devices\n\n### User Interface\n- 🎨 **Modern UI** with custom components and styling\n- 📱 **Responsive design** for different screen sizes\n- 🔄 **Loading states** with activity indicators\n- 📝 **Form validation** with error handling\n- 🎯 **Intuitive navigation** with tab-based interface\n\n### Network Status\n- 🌐 **Real-time network monitoring**\n- 🟢 **Visual status indicators** (green/red dots)\n- 📡 **Network type display** (WiFi, Cellular, etc.)\n- 📊 **Header-based status** in both database sections\n\n## 🗂️ Project Structure\n\n```\nexpo-offline-app/\n├── App.tsx                          # Main app with providers\n├── components/\n│   ├── realm/                       # Realm-specific components\n│   │   ├── TodoForm.tsx            # Create/edit todo form\n│   │   ├── TodoItem.tsx            # Individual todo item\n│   │   └── TodoList.tsx            # Todo list with pull-to-refresh\n│   ├── sqlite/                      # SQLite-specific components\n│   │   ├── TodoForm.tsx            # Create/edit todo form\n│   │   ├── TodoItem.tsx            # Individual todo item\n│   │   └── TodoList.tsx            # Todo list with pull-to-refresh\n│   ├── NetInfoIndicator.tsx        # Network status indicator\n│   ├── CustomButton.tsx            # Reusable button component\n│   └── ScreenWrapper.tsx           # Screen layout wrapper\n├── screens/\n│   ├── RealmScreen.tsx             # Main Realm todo screen\n│   ├── SQLScreen.tsx               # Main SQLite todo screen\n│   ├── EditRealmScreen.tsx         # Edit Realm todo screen\n│   └── EditSQLScreen.tsx           # Edit SQLite todo screen\n├── services/\n│   ├── task.ts                     # Realm Task model\n│   └── sqlite.ts                   # SQLite service class\n├── context/\n│   └── net-info-context.tsx        # Network info context\n├── hooks/\n│   └── useNetworkStatus.ts         # Network status hook\n├── navigation/\n│   ├── AppNavigator.tsx            # Main navigation setup\n│   └── routes.ts                   # Route constants\n└── types/\n    ├── types.ts                     # Shared type definitions\n    └── navigation.ts                # Navigation type definitions\n```\n\n## 🚀 Key Features Implemented\n\n### Realm Database Features\n- **Object-Oriented Data Model**: Task class with UUID primary keys\n- **Real-time Queries**: Automatic UI updates when data changes\n- **Schema Management**: Automatic schema validation and migration\n- **Performance Optimization**: Indexed fields for faster queries\n- **Type Safety**: Full TypeScript integration\n\n### SQLite Database Features\n- **Custom Service Layer**: SQLiteService class for database operations\n- **Manual Schema Management**: Explicit table creation and management\n- **CRUD Operations**: Complete Create, Read, Update, Delete functionality\n- **Error Handling**: Comprehensive error handling and user feedback\n- **Data Transformation**: Automatic date formatting and type conversion\n\n### Network Monitoring Features\n- **Real-time Status**: Live network connectivity monitoring\n- **Visual Indicators**: Color-coded status dots (green/red)\n- **Network Type Detection**: WiFi, Cellular, and other connection types\n- **Context Integration**: Global network status sharing\n- **Header Integration**: Status display in app navigation headers\n\n### UI/UX Features\n- **Dual Interface**: Separate tabs for Realm and SQLite databases\n- **Modal Editing**: Full-screen edit forms for todo modification\n- **Pull-to-Refresh**: Swipe down to reload data\n- **Loading States**: Activity indicators during data operations\n- **Error Handling**: User-friendly error messages and alerts\n- **Responsive Design**: Works on different screen sizes\n\n## 🛠️ Technical Implementation\n\n### Database Integration\n- **Realm**: Uses `@realm/react` for reactive data binding\n- **SQLite**: Custom service layer with `expo-sqlite`\n- **Data Synchronization**: Real-time updates across components\n- **Error Recovery**: Graceful handling of database errors\n\n### Network Status Integration\n- **Context Provider**: Global network status sharing\n- **Custom Hook**: `useNetworkStatus` for easy access\n- **Visual Feedback**: Real-time status indicators\n- **Type Safety**: Full TypeScript integration\n\n### Navigation Structure\n- **Tab Navigation**: Bottom tabs for database selection\n- **Stack Navigation**: Nested stacks for each database\n- **Modal Presentation**: Edit screens as modals\n- **Type Safety**: Fully typed navigation parameters\n\n## 📊 Performance Features\n\n- **Offline-First**: All operations work without internet\n- **Real-time Updates**: Automatic UI synchronization\n- **Optimized Queries**: Indexed fields for better performance\n- **Memory Management**: Efficient data loading and caching\n- **Error Recovery**: Graceful handling of network/database issues\n\n## 🔧 Development Setup\n\n1. **Install Dependencies**:\n   ```bash\n   npm install\n   ```\n\n2. **Start Development Server**:\n   ```bash\n   npx expo start\n   ```\n\n3. **Run on Device/Simulator**:\n   ```bash\n   npx expo run:ios\n   # or\n   npx expo run:android\n   ```\n\n## 📱 Platform Support\n\n- ✅ **iOS**: Full support with native SQLite and Realm\n- ✅ **Android**: Full support with native SQLite and Realm\n- 🔄 **Web**: Limited support (SQLite not available on web)\n\n## 🎯 Use Cases\n\nThis application demonstrates:\n- **Offline-First Development**: Building apps that work without internet\n- **Multiple Database Solutions**: Comparing different local storage approaches\n- **Real-time Network Monitoring**: Implementing network status awareness\n- **Modern React Native Patterns**: Context, hooks, and TypeScript\n- **Mobile-First Design**: Optimized UI/UX for mobile devices\n\n## 🔮 Future Enhancements\n\n- **Data Synchronization**: Sync local data with remote servers\n- **Conflict Resolution**: Handle data conflicts when online\n- **Advanced Queries**: Complex filtering and sorting\n- **Data Export**: Export todos to various formats\n- **Cloud Backup**: Automatic backup to cloud storage\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeleshkodmitriy%2Fexpo-offline-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmeleshkodmitriy%2Fexpo-offline-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeleshkodmitriy%2Fexpo-offline-app/lists"}