Slop-Social

KO | EN

gitlite — search

#python #react #go #machine-learning #deep-learning #linux #docker #macos #java #windows #vue #awesome-list #security #mcp

(★ 46)

No description available.

Slop-Social 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Slop Social 🎬

A TikTok-style vertical video feed built with React Native and Expo, featuring buttery-smooth scrolling powered by Shopify's FlashList.

![Demo](https://raw.githubusercontent.com/muxinc/Slop-Social/main/assets/gifs/Simulator.gif)

## Tech Stack

- **React Native** (0.81) with **Expo** (SDK 54)
- **@shopify/flash-list** - High-performance list component
- **expo-video** - Native video playback
- **Mux** - Video streaming infrastructure
- **react-native-gesture-handler** - Tap gestures for play/pause and double-tap to like
- **react-native-reanimated** - Smooth animations

## Why FlashList?

Traditional `FlatList` struggles with video feeds because it creates and destroys video components aggressively during scroll, leading to:
- Janky scrolling
- Delayed video loading
- Memory spikes from multiple video instances

### FlashList Performance Gains

FlashList uses **cell recycling** (similar to Android's RecyclerView and iOS's UICollectionView) which dramatically improves performance:

| Metric | FlatList | FlashList |
|--------|----------|-----------|
| JS Thread FPS | ~45-50 | ~60 (stable) |
| Blank cells during fast scroll | Frequent | Rare |
| Memory usage | Higher (no recycling) | Lower (cell reuse) |

### Key Optimizations Used

```tsx
<FlashList
  data={videos}
  renderItem={renderItem}
  // Pre-calculate item sizes for instant layout
  overrideItemLayout={(layout, _item, index) => {
    layout.size = SCREEN_HEIGHT;
    layout.offset = SCREEN_HEIGHT * index;
  }}
  // Render items within 3 screens for smooth scroll
  drawDistance={SCREEN_HEIGHT * 3}
  // Single item type = optimal recycling pool
  getItemType={() => "video"}
  // Full-screen snapping
  pagingEnabled
  snapToInterval={SCREEN_HEIGHT}
  decelerationRate="fast"
/>
```

### Smart Video Preloading

The feed implements directional preloading to minimize buffering:

```tsx
const MAX_PRELOAD_DISTANCE = 5;

// Preload 5 videos ahead in scroll direction
const shouldPreloadAhead = isAhead && Math.abs(distanceFromActive) <= MAX_PRELOAD_DISTANCE;
// Keep 1 video behind ready for quick back-scroll
const shouldPreloadBehind = !isAhead && Math.abs(distanceFromActive) === 1;
```

Videos not in the preload window have their source set to `null`, freeing up memory while maintaining the recycled view structure.

## Getting Started

```bash
# Install dependencies
bun install

# Start the dev server
npx expo start

# Run on iOS
npx expo run:ios

# Run on Android
npx expo run:android
```

## Project Structure

```
├── app/                    # Expo Router pages
│   ├── (tabs)/            # Tab navigation
│   │   ├── index.tsx      # Home feed
│   │   ├── discover.tsx   # Discover page
│   │   ├── create.tsx     # Create video
│   │   ├── inbox.tsx      # Notifications
│   │   └── profile.tsx    # User profile
├── components/
│   └── video-feed/
│       ├── video-feed.tsx # FlashList implementation
│       ├── video-item.tsx # Individual video player
│       └── video-overlay.tsx # UI overlay (likes, comments)
├── hooks/
│   ├── use-videos.ts      # Video data fetching
│   ├── use-likes.ts       # Like state management
│   └── use-video-playback.ts # Play/pause logic
└── types/
    └── video.ts           # TypeScript definitions
```

Slop-Social

Slop-Social 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Slop-Social

Slop-Social 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README