📸 SlimImage

A powerful, user-friendly mobile application for image manipulation and optimization

---

🌟 Overview

SlimImage is a comprehensive React Native mobile application designed to make image manipulation simple and efficient. Whether you need to compress large images, resize them for different platforms, convert between formats, or crop and rotate, SlimImage has you covered with an intuitive and beautiful interface.

Built with modern technologies including React Native, Expo, TypeScript, and MobX State Tree, SlimImage delivers a seamless experience for all your image editing needs directly on your mobile device.

---

✨ Features

🗜️ Image Compression

• Auto Compression: Smart compression with three preset levels (Small, Medium, Large)
• File Size Targeting: Compress images to a specific file size
• Percentage-based: Reduce image size by a specified percentage
• Quality Control: Fine-tune image quality manually

📏 Image Resizing

• Percentage Scaling: Resize images by percentage (e.g., 80% of original)
• Pixel Dimensions: Set exact width and height in pixels
• Aspect Ratio Preservation: Maintain original image proportions

🔄 Image Format Conversion

• Convert between popular formats: JPEG, PNG, WEBP
• Batch conversion support
• Preserve or strip EXIF data (configurable)

✂️ Crop & Rotate

• Free-style cropping with gesture support
• Image rotation capabilities
• Intuitive cropping interface
• Real-time preview

💾 Batch Processing

• Process multiple images simultaneously
• Organized output in dedicated folders
• Smart file naming with timestamps

⚙️ Customizable Settings

• Keep or remove EXIF metadata
• Preserve original image format
• Configurable output preferences

---

🚀 Getting Started

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v18 or higher)
• Yarn (recommended) or npm
• Expo CLI: npm install -g expo-cli
• For iOS development: Xcode (macOS only)
• For Android development: Android Studio

Installation

1. Clone the repository

   git clone https://github.com/harshitsaini17/slimimage.git
   cd slimimage

2. Install dependencies

   yarn install
   # or
   npm install

3. Install patches (if any)

   yarn postinstall

Running the Application

Start the development server

yarn start
# or
npm start

Run on Android

yarn android
# or
npm run android

Run on iOS (macOS only)

yarn ios
# or
npm run ios

Run on Web

yarn web
# or
npm run web

---

🏗️ Project Structure

slimimage/
├── app/                      # Main application code
│   ├── components/          # Reusable UI components
│   ├── screens/             # Screen components
│   │   ├── HomeScreen.tsx
│   │   ├── CompressImageScreen.tsx
│   │   ├── ResizeImageScreen.tsx
│   │   ├── ConvertImageScreen.tsx
│   │   └── CropImageScreen.tsx
│   ├── navigators/          # Navigation configuration
│   ├── models/              # MobX State Tree models
│   ├── services/            # API and external services
│   ├── theme/               # Theming (colors, spacing, typography)
│   ├── utils/               # Utility functions and hooks
│   ├── i18n/                # Internationalization
│   └── app.tsx              # App entry point
├── assets/                   # Static assets
│   ├── icons/               # App icons
│   └── images/              # Images and graphics
├── android/                  # Android native code
├── ios/                      # iOS native code (when built)
├── test/                     # Test files
├── .maestro/                 # End-to-end tests
└── ignite/                   # Ignite CLI templates

---

🛠️ Technology Stack

Core Technologies

• React Native (0.74.3) - Mobile app framework
• Expo (~51.0.8) - Development platform
• TypeScript (~5.5.3) - Type safety

State Management

• MobX State Tree (6.0.1) - State management
• MobX React Lite (4.0.7) - React bindings

Navigation

• React Navigation (^6.0.2) - Navigation library
• React Navigation Native Stack - Stack navigator

Image Processing

• @bam.tech/react-native-image-resizer - Image resizing
• react-native-image-crop-picker - Cropping
• expo-image-manipulator - Image manipulation
• expo-image-picker - Image selection

UI & Styling

• Tailwind CSS (twrnc) (^4.4.0) - Utility-first styling
• React Native Paper (^5.10.0) - Material Design components
• Lottie React Native - Animations

Storage & File System

• @react-native-async-storage/async-storage - Local storage
• expo-file-system - File system access
• react-native-fs - File operations

Additional Libraries

• Reactotron - Debugging
• i18n-js - Internationalization
• date-fns - Date utilities

---

📜 Available Scripts

Script	Description
yarn start	Start the Expo development server
yarn android	Run the app on Android
yarn ios	Run the app on iOS
yarn web	Run the app on web browser
yarn test	Run Jest tests
yarn test:watch	Run tests in watch mode
yarn test:maestro	Run Maestro end-to-end tests
yarn lint	Lint and format code
yarn compile	Type-check with TypeScript
yarn format	Format code with Prettier
yarn build:android:prod	Build production Android app
yarn build:ios:prod	Build production iOS app

---

⚙️ Configuration

Environment Setup

The app uses Expo configuration defined in app.json and app.config.ts. Key configurations include:

• App Name: Slim Image
• Bundle Identifier (iOS): com.priyanshusaini.slimimage
• Package Name (Android): com.priyanshusaini.slimimage
• Permissions: Camera Roll, Media Library, File System

Build Configuration

EAS Build configurations are available in eas.json for:

• Development builds
• Production builds
• Simulator/emulator builds

TypeScript Configuration

TypeScript is configured via tsconfig.json with:

• Strict type checking enabled
• Path aliases support (app/*, assets/*)
• React Native and Expo type definitions

---

🧪 Testing

Unit Tests

yarn test

Watch Mode

yarn test:watch

E2E Tests with Maestro

yarn test:maestro

For Maestro setup, follow the Ignite Cookbook guide.

---

🎨 UI Components

SlimImage uses a consistent design system with reusable components:

• Screen: Base screen wrapper with safe area handling
• Text: Themed text component with presets
• Icon: Flexible icon component
• Card: Container components with elevation
• CompressionCard: Specialized card for compression options
• TextField: Styled input fields

All components support the app's theming system and Tailwind CSS styling.

---

🤝 Contributing

Contributions are welcome! Here's how you can help:

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

Development Guidelines

• Follow the existing code style and conventions
• Write meaningful commit messages
• Add tests for new features
• Update documentation as needed
• Ensure all tests pass before submitting PR

---

📄 License

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

---

👨‍💻 Author

Harshit Saini (@harshitsaini17)

• GitHub: github.com/harshitsaini17

---

🙏 Acknowledgments

• Built with Ignite by Infinite Red
• Uses React Native and Expo
• UI powered by React Native Paper
• Styling with Tailwind CSS (twrnc)

---

📞 Support

If you encounter any issues or have questions:

1. Check the Issues page
2. Create a new issue with detailed information
3. Contact the maintainer through GitHub

---

Made with ❤️ using React Native and Expo

⭐ Star this repo if you find it helpful!