# App Store Assets Preparation Guide

## Screenshots - Quick Start Guide

### Android Screenshots

**Required sizes (at least one set):**
- Phone: 1080 x 1920 px (16:9) or 1080 x 2340 px (9:16)
- 7-inch tablet: 1024 x 600 px or 600 x 1024 px
- 10-inch tablet: 1920 x 1200 px or 1200 x 1920 px

**How to take screenshots:**

#### Option 1: Android Emulator (Recommended)
```bash
# Install Android emulator via Android Studio
# Or use Expo's built-in emulator

# Start your app
cd /home/moe/Allam/allam-mobile
expo start

# In Expo Dev Tools, click "Run on Android device/emulator"
# Once app is running, take screenshots:
# - Use emulator's screenshot button, or
# - adb shell screencap -p /sdcard/screenshot.png
# - adb pull /sdcard/screenshot.png
```

#### Option 2: Physical Android Device
1. Run app on your device
2. Take screenshot (usually Power + Volume Down)
3. Transfer to computer
4. Resize if needed using image editor

#### Option 3: EAS Build + Internal Testing
```bash
# Build and submit to internal testing track
eas build --platform android --profile preview
eas submit --platform android --profile production

# Join internal testing, install app, take screenshots on device
```

**Tools for resizing/cropping:**
- Online: https://www.canva.com/, https://photopea.com/
- CLI: ImageMagick `convert input.png -resize 1080x1920 output.png`

---

### iOS Screenshots

**Required sizes (you need all that apply):**
- iPhone 6.7" (iPhone 14 Pro Max): 1290 x 2796 px
- iPhone 6.5" (iPhone 11 Pro Max): 1242 x 2688 px  
- iPhone 5.5" (iPhone 8 Plus): 1242 x 2208 px
- iPad Pro 12.9": 2048 x 2732 px (if supporting iPad)

**Challenge:** You're on Linux, can't run Xcode simulator directly.

#### Option 1: EAS Build + TestFlight (Recommended)
```bash
# 1. Build iOS app
eas build --platform ios --profile production

# 2. Submit to TestFlight
eas submit --platform ios --profile production

# 3. Install TestFlight on physical iPhone/iPad
# 4. Take screenshots on device
# 5. Transfer to computer
```

#### Option 2: Use Someone Else's Mac
- Ask a friend with a Mac
- Use a cloud Mac service (MacStadium, AWS Mac instances)
- Rent time at a co-working space with Macs

#### Option 3: Online Screenshot Services
- https://appstore-screenshots.com/ (paid)
- https://www.hotpot.ai/screenshot-generator (AI-generated)

**Recommended approach:**
Use TestFlight (Option 1). You'll need iOS screenshots anyway for App Store, so this kills two birds with one stone.

---

## Feature Graphic (Google Play)

**Size:** 1024 x 500 px PNG or JPEG

**Design tips:**
- Keep important content in center (edges may be cropped)
- Use your app icon as basis
- Add tagline: "Smart Learning Platform"
- Use your brand colors (#1a3c2a is your primary color)
- No transparency
- Text should be readable at small sizes

**Quick creation with Canva:**
1. Go to https://www.canva.com/
2. Search "Google Play Feature Graphic"
3. Customize template with your branding
4. Download as PNG

**Or use ImageMagick (command line):**
```bash
# Create simple feature graphic with text
convert -size 1024x500 \
  xc:'#1a3c2a' \
  -gravity center \
  -fill white \
  -pointsize 80 \
  -font Arial-Bold \
  -annotate +0+0 'Allam\nSmart Learning Platform' \
  feature-graphic.png
```

---

## App Icon Verification

Your current icon: `assets/icon.png`

**Check:**
- [ ] 512 x 512 px PNG
- [ ] No transparency
- [ ] Looks good on light background
- [ ] Looks good on dark background
- [ ] Recognizable at small sizes (like 48x48 px)
- [ ] Follows Google Play & Apple guidelines

**Test your icon:**
```bash
# Check dimensions
file assets/icon.png
identify assets/icon.png  # if ImageMagick installed

# View at different sizes (create test HTML)
echo '<img src="assets/icon.png" width="512">
<img src="assets/icon.png" width="192">
<img src="assets/icon.png" width="48">' > icon-test.html
# Open icon-test.html in browser
```

**iOS icon requirements (additional):**
- No transparency
- No rounded corners (Apple adds them)
- No alpha channel
- Multiple sizes needed (but Expo can generate these)

**Generate iOS icons with Expo:**
```bash
# Expo can generate all iOS icon sizes from your main icon
expo eject  # if not already ejected
# Then use Xcode or icon generation tools
```

Or use online tool: https://appicon.co/ - upload your icon.png, download icon set.

---

## Screenshot Content Ideas

**Must-have screenshots (show core features):**
1. **Home/Dashboard** - Show main app screen
2. **Courses List** - Show educational content
3. **Course Detail** - Show a specific course
4. **Profile/Settings** - Show user profile
5. **Notifications** - Show notification feature
6. **Document/File Sharing** - Show file upload feature
7. **Committee Management** - Show committee features (if applicable)
8. **Dark Mode** (if supported) - Show alternative theme

**Screenshot order matters!**
- First screenshot = most important feature
- Google Play shows first 2 screenshots in search results
- App Store shows first 3 screenshots prominently

**Tips for great screenshots:**
- Use real data (not lorem ipsum)
- Show the app being used (not just static screens)
- Add optional device frames (but not required)
- Keep text readable
- Use portrait mode for most screens
- Highlight unique features

**Tools for adding device frames:**
- https://mockuphone.com/ (free)
- https://www.deviceframes.com/ (paid)
- Figma community templates (free)

---

## Localization Note

Since your app uses Arabic (based on infoPlist descriptions), consider:

**If targeting Arabic-speaking users:**
- Create screenshots with Arabic content
- Or create separate listings for Arabic/English

**App Store Connect:**
- Can have separate screenshots per language
- Recommended: Create both Arabic and English screenshots

**Google Play Console:**
- Can upload screenshots per language
- Same recommendation

---

## Checklist Before Taking Screenshots

- [ ] App is in production mode (not development)
- [ ] All demo data is realistic
- [ ] No debug banners or developer menus visible
- [ ] Status bar shows full signal, full battery, current time
- [ ] Navigation is in logical state (not deep in a submenu)
- [ ] Text is in target language (Arabic or English)

**Clean up your app state before screenshots:**
```bash
# Reset app to clean state
# Clear AsyncStorage, reset to onboarding, etc.
# Then navigate to each screen you want to screenshot
```

---

## File Naming Convention

Organize your screenshots with clear names:

```
screenshots/
├── android/
│   ├── phone/
│   │   ├── 01-home.png
│   │   ├── 02-courses.png
│   │   ├── 03-course-detail.png
│   │   └── ...
│   └── tablet/
│       ├── 01-home.png
│       └── ...
├── ios/
│   ├── iphone-6.7/
│   │   ├── 01-home.png
│   │   └── ...
│   ├── iphone-6.5/
│   │   └── ...
│   └── ipad/
│       └── ...
└── feature-graphic.png
```

This makes it easy to upload to store consoles in correct order.