Personal Call Log Saver

A fully offline React Native app for managing personal call logs with Material Design 3 UI, built with Expo and TypeScript.

📱 Features

• 📞 Call Log Management: Add, edit, delete, and search call log entries
• 🎨 Material Design 3: Modern UI with dynamic theming (light/dark mode)
• 🌍 Internationalization: Support for English and Marathi languages
• 💾 Offline Storage: All data stored locally using AsyncStorage
• 🔍 Search Functionality: Quick search through call logs
• 📱 Cross-Platform: Runs on Android (iOS support available)
• ⚡ Performance: Optimized with React Native best practices

🚀 Quick Start

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• Android Studio (for Android development)
• Expo CLI
• EAS CLI (for building APK)

Installation

1. Clone the repository

   git clone <repository-url>
   cd Personal_call_log_saver

2. Install dependencies

   npm install

3. Start the development server

   npm start
   # or
   npx expo start

Running the App

Option 1: Expo Go (Development)

1. Install Expo Go on your Android device/emulator
2. Scan the QR code or enter the URL manually: exp://192.168.1.3:8081

Option 2: Development Build

npm run android
# or
npx expo run:android

Option 3: Production APK

npm run build:android:local
# or
eas build --local --platform android

📁 Project Structure

Personal_call_log_saver/
├── src/
│   ├── components/          # Reusable UI components
│   │   ├── CallItem.tsx     # Individual call log item
│   │   └── CallModal.tsx    # Add/Edit call modal
│   ├── context/             # React Context providers
│   │   ├── ThemeContext.tsx # Theme management
│   │   └── I18nContext.tsx  # Internationalization
│   ├── i18n/                # Internationalization setup
│   │   └── index.ts         # i18next configuration
│   ├── locales/             # Translation files
│   │   ├── en.json          # English translations
│   │   └── mr.json          # Marathi translations
│   ├── navigation/          # Navigation setup
│   │   └── BottomTabNavigator.tsx
│   ├── screens/             # App screens
│   │   ├── CallLogsScreen.tsx
│   │   └── SettingsScreen.tsx
│   ├── storage/             # Data persistence
│   │   └── callLog.ts       # AsyncStorage service
│   └── types/               # TypeScript type definitions
│       └── index.ts
├── assets/                  # App assets (icons, splash)
├── android/                 # Android native code
├── App.tsx                  # Main app component
├── index.js                 # App entry point
├── app.json                 # Expo configuration
├── eas.json                 # EAS Build configuration
├── package.json             # Dependencies and scripts
└── README.md               # This file

🛠️ Technologies Used

• React Native 0.73.6: Cross-platform mobile framework
• Expo SDK 50: Development platform and tools
• TypeScript: Type-safe JavaScript
• React Navigation 6: Navigation library
• React Native Paper: Material Design components
• AsyncStorage: Local data persistence
• i18next: Internationalization framework
• React Native Reanimated: Advanced animations
• React Native Gesture Handler: Touch gestures
• React Native Vector Icons: Icon library

🎨 UI/UX

• Material Design 3: Modern, accessible design system
• Dynamic Theming: Automatic light/dark mode support
• Responsive Layout: Optimized for different screen sizes
• Intuitive Navigation: Bottom tab navigation with clear labels
• Accessible: Screen reader support and proper contrast ratios

🌍 Localization

The app supports multiple languages:

• English (default)
• Marathi (मराठी)

Adding New Languages

1. Create a new translation file in src/locales/
2. Add translations for all keys used in the app
3. Update the language picker in SettingsScreen.tsx
4. Update the i18n configuration in src/i18n/index.ts

📱 App Screens

Call Logs Screen

• View all saved call logs
• Search functionality
• Add new call log entries
• Edit existing entries
• Delete entries with confirmation

Settings Screen

• Language selection (English/Marathi)
• Theme toggle (Light/Dark/System)
• App information

🔧 Development

Available Scripts

# Development
npm start                    # Start Expo development server
npm run android             # Run on Android emulator/device
npm run ios                 # Run on iOS simulator/device
npm run web                 # Run on web browser

# Building
npm run build:android       # Build APK with EAS (cloud)
npm run build:android:local # Build APK locally with EAS

# Code Quality
npm run lint               # Run ESLint
npm run lint:fix           # Fix ESLint issues automatically
npm run type-check         # Run TypeScript type checking

Environment Setup

1. Android Development

   • Install Android Studio
   • Set up Android SDK and emulator
   • Configure environment variables (ANDROID_HOME)

2. iOS Development (macOS only)

   • Install Xcode
   • Set up iOS simulator

Building for Production

Local Build (Recommended)

eas build --local --platform android

Cloud Build

eas build --platform android

The built APK will be available in the project root directory.

📦 Dependencies

Core Dependencies

• react-native: Cross-platform framework
• expo: Development platform
• react-navigation: Navigation
• react-native-paper: UI components
• @react-native-async-storage/async-storage: Data storage
• i18next & react-i18next: Internationalization

Development Dependencies

• typescript: Type checking
• @types/*: Type definitions
• eslint: Code linting
• prettier: Code formatting

🚀 Deployment

Android APK

1. Build the APK using EAS Build
2. Test on physical devices
3. Distribute via Google Play Store or direct APK sharing

Expo Updates

For OTA updates, configure Expo Updates in app.json and use:

eas update --branch production

🐛 Troubleshooting

Common Issues

1. Metro bundler cache issues

   npx expo start --clear

2. Android build issues

   cd android && ./gradlew clean && cd ..
   npx expo run:android

3. Dependency conflicts

   rm -rf node_modules package-lock.json
   npm install

4. Storage permission issues

   • Ensure proper permissions are set in android/app/src/main/AndroidManifest.xml

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Created with ❤️ by [Your Name]

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📝 Changelog

v1.0.0 (2025-07-06)

• Initial release
• Call log management functionality
• Material Design 3 UI
• English and Marathi localization
• Dark/Light theme support
• AsyncStorage integration
• Expo EAS Build support

🔮 Future Enhancements

• Export call logs to CSV/JSON
• Call statistics and analytics
• Contact integration
• Voice memo attachments
• Cloud backup and sync
• Widget support
• iOS version
• Additional language support

📞 Support

If you encounter any issues or have questions:

1. Check the Troubleshooting section
2. Search existing Issues
3. Create a new issue with detailed information

---

Made with React Native & Expo 🚀

• ✅ Easy Copy: One-tap copy phone numbers to clipboard
• ✅ Bottom Tab Navigation: Intuitive navigation between Call Logs and Settings
• ✅ Search & Filter: Real-time search by name or phone number
• ✅ Data Persistence: All data stored locally on device

Screenshots

Screenshots would go here

Technology Stack

• React Native 0.72.6 - Cross-platform mobile development
• React Navigation 6 - Navigation with bottom tabs
• React Native Paper 5 - Material Design 3 components
• AsyncStorage - Local data persistence
• i18next - Internationalization (English & Marathi)
• React Native Vector Icons - Material Design icons
• TypeScript - Type safety and better development experience

Installation & Setup

Prerequisites

• Node.js 16 or higher
• React Native CLI
• Android Studio (for Android development)
• Java 11 or higher

Setup Instructions

1. Clone and Install Dependencies

   cd /Users/tanmay/Documents/Personal_call_log_saver
   npm install

2. Install iOS Dependencies (if building for iOS)

   cd ios && pod install && cd ..

3. Start Metro Bundler

   npm start

4. Run on Android

   npm run android

5. Run on iOS (if needed)

   npm run ios

Vector Icons Setup

After installation, link vector icons:

npx react-native-vector-icons link

For Android, you may need to manually add vector icons to your build configuration.

Project Structure

src/
├── components/           # Reusable UI components
│   ├── CallItem.tsx     # Individual call log item
│   └── CallModal.tsx    # Add/edit call modal
├── context/             # React context providers
│   ├── I18nContext.tsx  # Internationalization context
│   └── ThemeContext.tsx # Theme management context
├── i18n/               # Internationalization setup
│   └── index.ts        # i18n configuration
├── locales/            # Translation files
│   ├── en.json         # English translations
│   └── mr.json         # Marathi translations
├── navigation/         # App navigation
│   └── BottomTabNavigator.tsx
├── screens/           # App screens
│   ├── CallLogsScreen.tsx
│   └── SettingsScreen.tsx
├── storage/           # Data persistence layer
│   └── callLog.ts     # AsyncStorage operations
└── types/             # TypeScript type definitions
    └── index.ts

Usage

Adding Call Logs

1. Tap the + (FAB) button on the Call Logs screen
2. Enter name (optional) and phone number (required)
3. Tap Save

Editing Call Logs

1. Tap on any call log entry
2. Modify the details in the modal
3. Tap Save

Deleting Call Logs

1. Long press on any call log entry
2. Confirm deletion in the alert dialog

Copying Phone Numbers

1. Tap the copy icon next to any phone number
2. Number is copied to clipboard with confirmation

Searching

1. Use the search bar at the top of Call Logs screen
2. Search by name or phone number
3. Results filter in real-time

Changing Language

1. Go to Settings screen
2. Select desired language (English/Marathi)
3. App immediately updates to selected language

Data Storage

All data is stored locally using @react-native-async-storage/async-storage:

• Call Logs: Stored in call_logs key
• Language Preference: Stored in app_language key

Data persists across app sessions and device restarts.

Customization

Adding New Languages

1. Create new translation file in src/locales/
2. Add language to src/i18n/index.ts
3. Update language picker in Settings screen

Styling

• Themes are defined in src/context/ThemeContext.tsx
• Material Design 3 colors used throughout
• Automatic dark/light theme detection

Adding Features

• New screens can be added to src/screens/
• Additional storage methods in src/storage/
• New components in src/components/

Build for Production

Android APK

cd android
./gradlew assembleRelease

Android Bundle (for Play Store)

cd android
./gradlew bundleRelease

Contributing

1. Follow the existing code structure
2. Use TypeScript for type safety
3. Follow Material Design 3 guidelines
4. Add translations for new text content
5. Test on both light and dark themes

License

This project is open source and available under the MIT License.

Support

For issues or questions, please create an issue in the project repository.