Jkvideo Bilibili React Native
Extend or clone JKVideo when building a React Native Bilibili-style client with DASH, danmaku, and signed API calls.
Overview
jkvideo-bilibili-react-native is an agent skill for the Build phase that guides React Native Bilibili client work using JKVideo patterns for DASH, danmaku, WBI signing, and live streams.
Install
npx skills add https://github.com/aradotso/trending-skills --skill jkvideo-bilibili-react-nativeWhat is this skill?
- JKVideo stack: React Native 0.83 + Expo SDK 55 with TypeScript
- DASH adaptive playback, multi-quality levels, and real-time danmaku bullet comments
- WBI API signing and QR login flows for Bilibili endpoints
- Live streaming with WebSocket danmaku; download manager with LAN QR sharing
- Run modes: Expo Go quick start vs Dev Build for full 1080P+ DASH features
- React Native 0.83 with Expo SDK 55
- Expo Go vs Dev Build split for 1080P+ DASH support
Adoption & trust: 785 installs on skills.sh; 31 GitHub stars; 1/3 security scanners passed (skills.sh audits).
What problem does it solve?
You want a Bilibili-style mobile client but lack a map for DASH playback, danmaku, WBI-signed APIs, and Expo native build requirements.
Who is it for?
Developers cloning or extending JKVideo for a custom Bilibili RN client on Android and iOS.
Skip if: Builders who only need a simple embedded WebView player without DASH, signing, or native streaming modules.
When should I use this skill?
Triggers include building a Bilibili RN app, DASH on Expo, danmaku, WBI signing, live WebSocket streaming, or JKVideo download/LAN sharing.
What do I get? / Deliverables
You can bootstrap JKVideo, implement or extend DASH, danmaku, login, and live features with the documented RN and Expo workflow.
- Configured JKVideo dev or Expo Go run path for the target platform
- Feature implementation notes for DASH, danmaku, WBI auth, or live modules
Recommended Skills
Journey fit
A third-party video client is assembled during Build by wiring APIs, playback, and native modules. Bilibili WBI signing, DASH streams, and live WebSocket danmaku are deep external API and media integrations on top of the RN UI.
How it compares
Domain-specific mobile integration skill—not a generic Expo tutorial or official Bilibili SDK.
Common Questions / FAQ
Who is jkvideo-bilibili-react-native for?
Indie React Native developers building or forking a Bilibili-like app with adaptive video, danmaku, and API signing.
When should I use jkvideo-bilibili-react-native?
During Build when integrating Bilibili DASH playback, WBI signatures, QR login, live WebSocket danmaku, or JKVideo’s download and LAN sharing features.
Is jkvideo-bilibili-react-native safe to install?
Review Security Audits on this Prism page and audit network credentials, third-party API usage, and store policies before shipping a client.
SKILL.md
READMESKILL.md - Jkvideo Bilibili React Native
# JKVideo Bilibili React Native Client > Skill by [ara.so](https://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) ```bash git clone https://github.com/tiajinsha/JKVideo.git cd JKVideo npm install npx expo start ``` Scan the QR with Expo Go app. Note: DASH 1080P+ requires Dev Build. ### Dev Build (Full Features — Recommended) ```bash npm install npx expo run:android # Android npx expo run:ios # iOS (macOS + Xcode required) ``` ### Web with Image Proxy ```bash npm install npx expo start --web # In a separate terminal: node scripts/proxy.js # Starts proxy on port 3001 to bypass Bilibili referer restrictions ``` ### Install APK Directly (Android) Download from [Releases](https://github.com/tiajinsha/JKVideo/releases/latest) — enable "Install from unknown sources" in Android settings. --- ## Project Structure ``` app/ index.tsx # Home (PagerView hot/live tabs) video/[bvid].tsx # Video detail (playback + comments + danmaku) live/[roomId].tsx # Live detail (HLS + real-time danmaku) search.tsx # Search page downloads.tsx # Download manager settings.tsx # Settings (quality, logout) components/ # UI: player, danmaku overlay, cards hooks/ # Data hooks: video list, streams, danmaku services/ # Bilibili API (axios + cookie interceptor) store/ # Zustand stores: auth, download, video, settings utils/ # Helpers: format, image proxy, MPD builder ``` --- ## 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. ```typescript // utils/wbi.ts — pure TS MD5, no external crypto deps const MIXIN_KEY_ENC_TAB = [ 46, 47, 18, 2, 53, 8, 23, 32, 15, 50, 10, 31, 58, 3, 45, 35, 27, 43, 5, 49, 33, 9, 42, 19, 29, 28, 14, 39, 12, 38, 41, 13 ]; function getMixinKey(rawKey: string): string { return MIXIN_KEY_ENC_TAB .map(i => rawKey[i]) .join('') .slice(0, 32); } export async function signWbi( params: Record<string, string | number>, imgKey: string, subKey: string ): Promise<Record<string, string | number>> { const mixinKey = getMixinKey(imgKey + subKey); const wts = Math.floor(Date.now() / 1000); const signParams = { ...params, wts }; // Sort params alphabetically, filter special chars const query = Object.keys(signParams) .sort() .map(k => { const val = String(signParams[k]).replace(/[!'()*]/g, ''); return `${encodeURIComponent(k