react-native-video-toolkit
My **first ever real OSS project** π. Be kind, Iβm still figuring this out.
A flexible and customizable video player UI toolkit for React Native.
π Full Documentation: [https://react-native-video-toolkit-docs.vercel.app/](https://react-native-video-toolkit-docs.vercel.app/)
---
## π Table of Contents
- [π± Demo](#-demo)
- [β¨ Features](#-features)
- [β
Platform Compatibility](#-platform-compatibility)
- [πΊοΈ Roadmap](#-roadmap)
- [π¦ Installation](#-installation)
- [π Usage](#-usage)
- [π Issues](#-issues)
- [π€ Contributing](#-contributing)
- [π License](#-license)
---
## π± Demo
> [!TIP]
> The demo app is available in the `example` folder.
> Clone the repo and run `yarn example start` inside the `example` directory to see the latest changes.
> You can also download the demo app from the [release builds](https://github.com/2004durgesh/react-native-video-toolkit/releases/latest).
| Mode | Preview |
| ----------------------------- | ----------------------------------------------------- |
| **Portrait** | 
|
| **Landscape** | 
|
| **Landscape (with settings)** | 
|
---
## β¨ Features
- **Fully Customizable UI** β Build your own video player experience with modular components.
- **Theming Support** β Light, dark, or your own custom theme.
- **Pre-built Layouts** β Includes `DefaultLayout` to get started quickly.
- **Gesture Handling** β Tap, double-tap, and other common playback gestures.
- **Rich Component Library** β Controls like `PlayButton`, `ProgressBar`, `TimeDisplay`, `FullscreenButton`, `MuteButton`, and more.
- **Hooks-based API** β Access player state and control playback, settings, and gestures.
---
## β
Platform Compatibility
| Platform | Tested |
| ---------- | :----: |
| Android | β
|
| iOS | β |
| Android TV | β
|
| Apple TV | β |
| Web | β
|
---
## πΊοΈ Roadmap
- [x] Core Player component
- [x] Customizable controls
- [x] Theming support
- [x] Gesture handling
- [x] Settings menu
- [x] Layout presets (`DefaultLayout`)
- [x] Fullscreen support
- [x] Landscape mode support
- [ ] TV support (D-pad navigation)
- [ ] Picture-in-Picture (PiP) mode
- [ ] More advanced layouts (YouTube/Netflix-style)
---
## π¦ Installation
```bash
npm install react-native-video-toolkit
# or
yarn add react-native-video-toolkit
```
---
## π Usage
```tsx
import { VideoPlayer, DefaultLayout } from 'react-native-video-toolkit';
const App = () => {
return (
);
};
```
For more docs:
π [Documentation website](https://react-native-video-toolkit-docs.vercel.app/).
---
## π Issues
Yes, there are bugs. Probably lots.
π [Open an issue](https://github.com/2004durgesh/react-native-video-toolkit/issues).
It makes the project look active, so actually⦠thanks in advance.
---
## π€ Contributing
Wanna help? Please? π
Check the [contributing guide](CONTRIBUTING.md). Iβll try to review your PR before I spiral into existential dread.
---
## π License
MIT β because lawyers are scary.
---
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
Thanks to [wuxnz](https://github.com/wuxnz) for motivation (and maybe trauma)
Thanks to [zach](https://github.com/founded-labs/react-native-reusables/tree/main/apps/docs) for the docs template
Made with β€οΈ, caffeine, and way too many Chrome tabs by [Durgesh](https://github.com/2004durgesh)