KidMedia - Image Editor App

A React Native image editing app built with Expo that allows users to upload photos, draw on them with different colors, and save edited images to their device.

Features

• Upload Images: Select from photo library or take new photos with camera
• Draw on Images: Touch-based drawing with smooth 60fps performance using Skia
• Color Palette: 10 predefined colors to choose from
• Undo/Clear: Remove last stroke or clear all drawings
• Save to Device: Export edited images to your photo library

Tech Stack

• Expo SDK 54 with React Native 0.81
• expo-router for file-based navigation
• @shopify/react-native-skia for hardware-accelerated drawing
• Zustand for state management
• TypeScript with strict mode

Getting Started

Prerequisites

• Node.js 23+
• npm
• Expo CLI (npm install -g expo-cli)
• For iOS: Xcode (macOS only)
• For Android: Android Studio

Installation

1. Install dependencies

   npm install

2. Start the development server

   npx expo start

3. Run on device/emulator

   • Press a for Android emulator
   • Press i for iOS simulator
   • Scan QR code with Expo Go app (limited - native modules require dev build)

Building for Production

Using EAS Build (Recommended)

# Install EAS CLI
npm install -g eas-cli

# Login to Expo
eas login

# Build for Android (APK)
eas build --platform android --profile preview

# Build for iOS
eas build --platform ios --profile preview

# Build for production
eas build --platform all --profile production

Local Android Build

# Generate native project
npx expo prebuild --platform android

# Build APK
cd android && ./gradlew assembleRelease

Project Structure

app/                    # File-based routing screens
  (tabs)/               # Tab navigator
    index.tsx           # Home screen
    editor.tsx          # Image editor
    explore.tsx         # Explore screen
components/
  editor/               # Editor components
    drawing-canvas.tsx  # Skia drawing canvas
    color-palette.tsx   # Color picker
    toolbar.tsx         # Undo/Clear/Save buttons
hooks/
  use-image-picker.ts   # Camera/library picker
  use-media-library.ts  # Save to photo library
store/
  editor-store.ts       # Zustand state management
types/
  editor.types.ts       # TypeScript definitions

Scripts

npm start              # Start Expo dev server
npm run android        # Run on Android
npm run ios            # Run on iOS
npm run web            # Run on web
npm run lint           # Run ESLint

Permissions

The app requires the following permissions (automatically requested at runtime):

• Camera: Take photos for editing
• Photo Library: Read images for editing
• Photo Library Add: Save edited images

License

MIT