StickerSmash 🎨📱

A fun and interactive React Native mobile application that allows users to add emoji stickers to their photos and save them to their device. Built with Expo and featuring smooth animations and cross-platform compatibility.

📋 Table of Contents

Features
Screenshots
Technologies Used
Prerequisites
Installation
Development Setup
Usage
Project Structure
Components Overview
API Reference
Platform Compatibility
Development
Building for Production
Contributing
Troubleshooting
License
Author

✨ Features

📸 Photo Selection: Choose photos from your device's gallery
🎭 Emoji Stickers: Add interactive emoji stickers to your photos
🎯 Drag & Drop: Move stickers around with smooth gesture handling
🔍 Double-tap to Scale: Enlarge stickers by double-tapping
💾 Save Images: Save your creations to device gallery or download on web
🔄 Reset Functionality: Easily start over with a clean slate
📱 Cross-platform: Works on iOS, Android, and Web
🎨 Beautiful UI: Clean, modern interface with dark theme
⚡ Smooth Animations: Powered by React Native Reanimated

🖼️ Screenshots

Add your app screenshots here to showcase the user interface and functionality

🛠️ Technologies Used

Core Framework

React Native (0.72.5) - Cross-platform mobile development
Expo (~49.0.13) - Development platform and tools
React (18.2.0) - UI library

Key Dependencies

@expo/vector-icons (^13.0.0) - Icon library
expo-image-picker (~14.3.2) - Image selection from gallery
expo-media-library (~15.4.1) - Media library access and saving
react-native-gesture-handler (~2.12.0) - Advanced gesture handling
react-native-reanimated (~3.3.0) - Smooth animations
react-native-view-shot (3.7.0) - Screenshot capabilities
dom-to-image (^2.6.0) - Web image export functionality

Development Tools

@babel/core (^7.20.0) - JavaScript compiler
@babel/plugin-proposal-export-namespace-from (^7.18.9) - Babel plugin

📋 Prerequisites

Before running this project, make sure you have the following installed:

Node.js (version 16 or higher)
npm or yarn package manager
Expo CLI (npm install -g @expo/cli)
Expo Go app on your mobile device (for testing)

For iOS Development

Xcode (macOS only)
iOS Simulator (iPhone 16 Pro Max recommended for testing)

For Android Development

Android Studio
Android SDK
Android Emulator or physical Android device

🚀 Installation

Clone the repository

git clone https://github.com/thecodemonster1/StickerSmash.git
cd StickerSmash

Install dependencies
```
npm install
# or
yarn install
```

🔧 Development Setup

Starting the Development Server

Start Expo development server
```
npx expo start
```
The Metro bundler will start and display a QR code in your terminal

Running on Different Platforms

Once the development server is running, you have several options:

Mobile Devices (Recommended)

iOS: Scan the QR code with your Camera app
Android: Scan the QR code with the Expo Go app
The app will automatically reload when you make changes

Simulators/Emulators

# Open iOS Simulator
Press 'i' in the terminal

# Open Android Emulator  
Press 'a' in the terminal

# Open in web browser
Press 'w' in the terminal

Development Commands

While the server is running, you can use these keyboard shortcuts:

r - Reload the app
m - Toggle development menu
j - Open debugger
o - Open project in your code editor
s - Switch to development build
? - Show all available commands
Ctrl+C - Stop the development server

Network Configuration

The development server runs on your local network (example: exp://172.20.10.2:8081). Make sure your mobile device is connected to the same WiFi network as your development machine.

Development Tips

Hot Reloading: Changes are automatically reflected in the app
Live Reloading: The app reloads when you save files
Error Handling: Check the terminal for detailed error messages
Debugging: Use the React Native Debugger for advanced debugging

🎮 Usage

Basic Workflow

Launch the app - You'll see a placeholder image on the main screen
Choose a photo - Tap "Choose a photo" to select an image from your gallery
Use current photo - Alternatively, tap "Use this photo" to work with the placeholder
Add stickers - Tap the "+" button to open the emoji picker
Select emoji - Choose from 6 available emoji stickers
Interact with stickers:
- Drag to move stickers around
- Double-tap to scale them up
Save or reset:
- Tap Save to save your creation
- Tap Reset to start over

Gesture Controls

Pan Gesture: Drag stickers to reposition them
Tap Gesture: Double-tap stickers to scale them
Touch: Single tap to select emojis and interact with buttons

📁 Project Structure

StickerSmash/
├── App.js                     # Main application component
├── package.json              # Dependencies and scripts
├── components/               # Reusable UI components
│   ├── Button.js            # Custom button component
│   ├── CircleButton.js      # Circular add button
│   ├── EmojiList.js         # Horizontal emoji list
│   ├── EmojiPicker.js       # Modal emoji picker
│   ├── EmojiSticker.js      # Interactive sticker component
│   ├── IconButton.js        # Icon-based button
│   └── ImageViewer.js       # Image display component
├── assets/                  # Static assets
│   └── images/             # Image assets
│       ├── background-image.png
│       ├── emoji1.png
│       ├── emoji2.png
│       ├── emoji3.png
│       ├── emoji4.png
│       ├── emoji5.png
│       └── emoji6.png
└── README.md               # Project documentation

🧩 Components Overview

Core Components

`App.js`

The main application component that manages:

Application state (selected image, picked emoji, modal visibility)
Image selection and saving functionality
Component rendering and layout

`ImageViewer.js`

Displays the selected image or placeholder
Handles image source switching
Applies consistent styling

`EmojiSticker.js`

Renders interactive emoji stickers
Implements drag and scale gestures
Uses React Native Reanimated for smooth animations

`EmojiPicker.js`

Modal component for emoji selection
Provides clean interface for sticker choosing
Handles modal open/close states

`EmojiList.js`

Horizontal scrollable list of available emojis
Handles emoji selection and modal closing
Optimized for different platforms

UI Components

`Button.js`

Customizable button with theme support
Primary theme includes icon integration
Consistent styling across the app

`CircleButton.js`

Circular "add" button for opening emoji picker
Material Design icons integration
Custom styling with border effects

`IconButton.js`

Icon-based buttons for actions (Reset, Save)
Material Icons integration
Consistent labeling and styling

📱 Platform Compatibility

iOS

✅ Full feature support
✅ Native image picker
✅ Media library integration
✅ Gesture handling
✅ Smooth animations
✅ Tested on iPhone 16 Pro Max

Android

✅ Full feature support
✅ Native image picker
✅ Media library integration
✅ Gesture handling
✅ Smooth animations

Web

✅ Core functionality
✅ Image selection (web file picker)
✅ Basic gestures
✅ Download functionality (instead of save to gallery)
⚠️ Limited gesture support compared to mobile

🔧 Development

Available Scripts

# Start development server with QR code
npx expo start

# Start with specific platforms
npx expo start --ios
npx expo start --android
npx expo start --web

# Clear cache and restart
npx expo start --clear

# Legacy commands (still supported)
npm start
npm run ios
npm run android
npm run web

Environment Variables

The development server automatically detects your network configuration:

Local URL: exp://172.20.10.2:8081 (example)
LAN URL: Available for testing on physical devices
Tunnel URL: Available for testing across different networks

Common Development Warnings

You may see deprecation warnings like:

(node:9867) [DEP0044] DeprecationWarning: The `util.isArray` API is deprecated. Please use `Array.isArray()` instead.

These are from dependencies and don't affect app functionality.

🏗️ Building for Production

Expo Build Service (EAS)

Install EAS CLI
```
npm install -g eas-cli
```
Login to Expo
```
eas login
```
Configure build
```
eas build:configure
```

Build for platforms

# iOS
eas build --platform ios

# Android
eas build --platform android

# Both platforms
eas build --platform all

Web Deployment

# Build for web
npx expo export:web

# Deploy to Netlify, Vercel, or your preferred hosting service

🤝 Contributing

Contributions are welcome! Please follow these steps:

Fork the repository
Create a feature branch
```
git checkout -b feature/amazing-feature
```

Commit your changes

git commit -m 'Add some amazing feature'

Push to the branch
```
git push origin feature/amazing-feature
```
Open a Pull Request

Development Guidelines

Follow React Native best practices
Maintain consistent code formatting
Test on multiple platforms and devices
Update documentation as needed
Test on iPhone 16 Pro Max for iOS compatibility

🐛 Troubleshooting

Common Issues

Metro bundler issues

# Clear cache and restart
npx expo start --clear

Network connectivity issues

Ensure your device and computer are on the same WiFi network
Try using tunnel mode: npx expo start --tunnel
Check firewall settings

iOS Simulator issues

# Reset iOS Simulator
xcrun simctl erase all

Permission issues

Ensure camera and media library permissions are granted
Check app settings on device if saving fails

Performance Issues

Large images: Consider image compression for better performance
Multiple stickers: Optimize for devices with limited resources
Animation lag: Test on older devices and adjust animation complexity

Development Server Issues

If the QR code doesn't appear or the server won't start:

Check if port 8081 is available
Try restarting with --clear flag
Ensure Expo CLI is up to date: npm install -g @expo/cli@latest

📄 License

👨‍💻 Author

Mohamed Azwar (thecodemonster1)

GitHub: @thecodemonster1
Project Link: https://github.com/thecodemonster1/StickerSmash

🙏 Acknowledgments

Expo Team for the amazing development platform and Metro bundler
React Native Community for comprehensive documentation
Reanimated Team for smooth animation capabilities
Material Design for icon resources

📊 Project Stats

Last updated: June 24, 2025 | Made with ❤️ by thecodemonster1

Name		Name	Last commit message	Last commit date
Latest commit History 44 Commits
assets		assets
components		components
.gitignore		.gitignore
App.js		App.js
README.md		README.md
app.json		app.json
babel.config.js		babel.config.js
eas.json		eas.json
package-lock.json		package-lock.json
package.json		package.json

thecodemonster1/StickerSmash

Folders and files

Latest commit

History

Repository files navigation