Katalog

Table of Contents

• Katalog
  • Table of Contents
  • Project Description
    • Overview
  • Features
  • Getting Started
    • Prerequisites
    • Installation
    • Setting Up Development Environment
  • Configuration
    • Key Files and Settings
    • Modifying Core App Settings
  • Components Overview
    • Component Descriptions
    • Customizing Components
  • Project Structure
    • Key Directories
    • File Organization
  • Testing
    • Overview
    • Running Tests
  • Deployment
    • Android Deployment
      • Generate Release Keystore
      • Configure App Details
      • Build Release APK
  • Troubleshooting
    • Common Development Issues
    • Known Issues
  • Contributing
    • Areas for Improvement
    • Resources
      • Core Documentation
      • Build & Deploy

Project Description

Katalog is a starter template for building mobile catalog applications with React Native. It provides a foundation for managing and browsing products in a local database, which you can customize for your specific needs.

Overview

• Purpose: To provide a starting point for building catalog management apps
• Core Functionalities: Image view, product display, and item management
• Target Users: Developers building catalog-based applications
• Customization Options: UI themes, component properties, and image handling

Features

• Product Display: Grid view of products with images.
• Image Viewer: Full-screen image viewing capability.
• Item Management: Add and manage products in the catalog.

Getting Started

Prerequisites

• Node.js
• React Native CLI
• Android Studio/Xcode

Installation

1. Clone the repository
2. Install dependencies:

   npm install

Setting Up Development Environment

1. Start the Metro bundler:

   npm start

2. Run the app on Android:

   npm run android

3. Run the app on iOS:

   cd ios && pod install && cd ..
   npm run ios

Configuration

Key Files and Settings

• android/app/build.gradle: Android build configuration
• ios/katalog.xcodeproj: iOS project configuration
• constants/index.tsx: Core app constants

Modifying Core App Settings

• Default Settings: Modify in constants/index.tsx

Components Overview

Component Descriptions

• ProductCard: Product display component (components/ProductCard.tsx)
• ImageViewerScreen: Image viewing component (components/ImageViewerScreen.tsx)
• HomeScreen: Main catalog screen (screens/HomeScreen.tsx)
• AddProductScreen: Product addition screen (screens/AddProductScreen.tsx)

Customizing Components

• Properties: Modify component props in their respective files
• Best Practices: Ensure consistency when updating components

Project Structure

Key Directories

📦katalog
 ┣ 📂components
 ┃ ┣ 📜ImageViewerScreen.tsx
 ┃ ┗ 📜ProductCard.tsx
 ┣ 📂constants
 ┃ ┗ 📜index.tsx
 ┣ 📂screens
 ┃ ┣ 📜AddProductScreen.tsx
 ┃ ┗ 📜HomeScreen.tsx

File Organization

• Components are modular and reusable
• Screens handle main views
• Constants maintain app-wide settings

Testing

Overview

• Setup: Jest for unit testing
• Tests Location: __tests__ directory

Running Tests

npm test

Deployment

Android Deployment

Generate Release Keystore

1. Generate a keystore file:

   keytool -genkey -v -keystore your_keystore_file.keystore -alias your_key_alias -keyalg RSA -keysize 2048 -validity 10000

2. Place keystore file in android/app directory
3. Add keystore details in android/gradle.properties:

   MYAPP_RELEASE_STORE_FILE=your_keystore_file.keystore
   MYAPP_RELEASE_KEY_ALIAS=your_key_alias
   MYAPP_RELEASE_STORE_PASSWORD=your_store_password
   MYAPP_RELEASE_KEY_PASSWORD=your_key_password

Configure App Details

1. Change app name:

   • Edit android/app/src/main/res/values/strings.xml
   • Update android:label in AndroidManifest.xml

2. Change package name:

   • Modify applicationId in android/app/build.gradle
   • Update package in AndroidManifest.xml
   • Update folder structure in android/app/src/main/java

Build Release APK

1. Generate release APK:

   cd android
   ./gradlew assembleRelease

2. Find APK in android/app/build/outputs/apk/release

Troubleshooting

Common Development Issues

• Build failures: Check dependencies and Android/iOS configurations
• Runtime errors: Use React Native Debugger
• Metro bundler issues: Clear cache with npx react-native start --reset-cache
• Pod install failures: Run cd ios && pod deintegrate && pod install
• Red screen errors: Check component rendering and prop types
• App crashing on launch: Verify native configurations and permissions
• Hot reload not working: Restart Metro bundler and development server
• Missing assets: Ensure correct file paths and asset linking
• TypeScript missing: Sometimes npm install skips TypeScript, install manually:

  npm install typescript --save-dev

Known Issues

• App Size Growth: The app size may increase significantly over time due to cached images and data
  • Workaround: Implement periodic cache clearing
  • Future Fix: Planned optimization in upcoming releases
• Memory Usage: Heavy image processing can cause slowdowns on older devices
• Database Performance: Large catalogs may experience loading delays
• Image Loading: Occasional delays in thumbnail generation
• Background Refresh: May not update properly in background state

Contributing

I welcome contributions to help solve our known issues! Here's where you can help:

Areas for Improvement

• Implement efficient cache management to address app size growth
• Optimize image processing for better performance on older devices
• Enhance database queries for faster catalog loading
• Improve thumbnail generation system
• Fix background refresh functionality

If you'd like to contribute:

1. Fork the repository
2. Create a feature branch
3. Submit a pull request with your improvements

Resources

Core Documentation

• React Native Documentation - Main framework docs
• React Native Navigation - App navigation setup
• React Native Image Picker - Image selection
• SQLite Storage - Local database
• React Native Vector Icons - UI icons

Build & Deploy

• Android Gradle Plugin - Android builds
• CocoaPods Guide - iOS dependencies
• App Store Guidelines - iOS deployment
• Android App Bundle Guide - Android deployment