📸 PlayShot

Create stunning app store screenshots — right from your phone.

No design skills needed.

✨ Features

🖼️ Design Android & iPhone device frames Solid, gradient, or image backgrounds 18+ pre-made templates Rotate & resize with drag handles	✏️ Content Rich text editor — fonts, sizes, colors, outlines Logo upload with free positioning Free scrolling between frames Dashed border shows exact export area
💾 Reliability Auto-save — work persists across sessions AsyncStorage-backed state	📤 Export High-resolution export to gallery One-tap share

🎨 How It Works

 1. Pick a template  →  2. Choose platform  →  3. Add screenshot
          ↓                                            ↓
 6. Export  ←  5. Adjust (drag/resize/rotate)  ←  4. Customize

Step	Action
1️⃣	Pick a template or start from scratch
2️⃣	Choose platform — Android or iPhone
3️⃣	Add screenshot — tap the frame to pick from gallery
4️⃣	Customize — background, text, logo
5️⃣	Adjust — drag, resize, rotate the frame
6️⃣	Export — save to gallery or share

🛠️ Tech Stack

Technology	Purpose
🧩 React Native 0.76.9	Mobile app framework
🔷 TypeScript	Type safety
🧭 React Navigation	Screen navigation
🎬 Reanimated 3.6.2	Smooth animations & gestures
👆 Gesture Handler	Pan, pinch, rotate gestures
🎨 Skia	Graphics rendering
🌈 Linear Gradient	Gradient backgrounds
🎡 react-native-wheel-color-picker	Color wheels
📷 ViewShot	Screenshot capture
💾 AsyncStorage	State persistence
🔤 Vector Icons	UI icons

📱 Installation

# Clone the repo
git clone https://github.com/yourusername/PlayShot.git

# Install dependencies
cd PlayShot
yarn install

# Run on Android
yarn android

# Run on iOS
yarn ios

📦 Building for Release

Android APK

cd android
./gradlew assembleRelease

📍 Output: android/app/build/outputs/apk/release/app-release.apk

Android App Bundle (Play Store)

cd android
./gradlew bundleRelease

📍 Output: android/app/build/outputs/bundle/release/app-release.aab

🗂️ Project Structure

src/
├── app/
│   └── navigation/          # Navigation setup
├── features/
│   ├── editor/
│   │   ├── components/      # UI components
│   │   │   ├── EditorWorkspace.tsx
│   │   │   ├── EditorFrameList.tsx
│   │   │   ├── EditorBottomBar.tsx
│   │   │   ├── FrameEditor.tsx
│   │   │   ├── BackgroundPicker.tsx
│   │   │   ├── TextEditor.tsx
│   │   │   └── TemplatePicker.tsx
│   │   ├── hooks/           # Custom hooks
│   │   │   ├── useEditor.ts
│   │   │   ├── useFrameEditor.ts
│   │   │   ├── useTextLayer.ts
│   │   │   ├── useLogoLayer.ts
│   │   │   └── useEditorPersistence.ts
│   │   ├── screens/
│   │   │   └── EditorScreen.tsx
│   │   ├── types/           # TypeScript types
│   │   └── utils/
│   │       └── templates.ts # Template definitions
│   └── project-list/
│       └── screens/
│           └── HomeScreen.tsx
├── shared/
│   ├── components/
│   │   └── toast/           # Toast notifications
│   │       ├── Toast.tsx
│   │       ├── ToastSuccess.tsx
│   │       ├── ToastError.tsx
│   │       └── useToast.ts
│   └── hooks/
└── assets/
    ├── device-frames/       # Phone frame PNGs
    └── fonts/

📄 License

Private project. All rights reserved.

🙏 Credits

Built with ❤️ using React Native

Made by Ibrar's Studio