Agent skill · software engineering · aradotso
jkvideo-bilibili-react-native
Expert skill for building and extending JKVideo, a React Native Bilibili-like client with DASH playback, danmaku, WBI signing, and live streaming
Why this skill is useful
Provides specific implementation details for integrating Bilibili API with React Native, including WBI signing and DASH playback that are not widely documented.
What it needs
Requires android-studio, expo-cli, node, npm, xcode installed locally. About 10k tokens when loaded. Last updated 2026-07-09. 70 stars on the source repository.
What this skill does
JKVideo Bilibili React Native Client Skill by ara.so — Daily 2026 Skills collection. JKVideo is a full-featured third-party Bilibili client built with React Native 0.83 + Expo SDK 55. It supports DASH adaptive streaming, real-time danmaku (bullet comments), WBI API signing, QR code login, live streaming with WebSocket danmaku, and a download manager with LAN QR sharing. --- Installation & Setup Prerequisites Node.js 18+ npm or yarn For Android: Android Studio + SDK For iOS: macOS + Xcode 15+ Quick Start (Expo Go — no compilation) Scan the QR with Expo Go app. Note: DASH 1080P+ requires Dev Build. Dev Build (Full Features — Recommended) Web with Image Proxy Install APK Directly (Android) Download from Releases — enable "Install from unknown sources" in Android settings. --- Project Structure --- Key Technology Stack Layer Technology --- --- Framework React Native 0.83 + Expo SDK 55 Routing expo-router v4 (file-system, Stack nav) State Zustand HTTP Axios Storage @react-native-async-storage/async-storage Video react-native-video (DASH MPD / HLS / MP4) Fallback react-native-webview (HTML5 video injection) Paging react-native-pager-view Icons @expo/vector-icons (Ionicons) --- WBI Signature Implementation Bilibili requires WBI signing for most API calls. JKVideo implements pure TypeScript MD5 with 12h nav cache. --- Bilibili API Service --- DASH MPD Builder ExoPlayer needs a local MPD file. JKVideo generates it from Bilibili's DASH response: --- Video Player Component --- Danmaku System Video Danmaku (XML timeline sync) Live Danmaku (WebSocket) --- Zustand State Stores --- QR Code Login --- Download Manager + LAN Sharing --- expo-router Navigation Patterns --- Image Proxy (Web) Bilibili images block direct loading in browsers via Referer header. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aradotso/jkvideo-bilibili-react-native