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/

---

📑 Table of Contents

• 📱 Demo
• ✨ Features
• ✅ Platform Compatibility
• 🗺️ Roadmap
• 📦 Installation
• 🚀 Usage
• 🐛 Issues
• 🤝 Contributing
• 📜 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.

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

• Core Player component
• Customizable controls
• Theming support
• Gesture handling
• Settings menu
• Layout presets (DefaultLayout)
• Fullscreen support
• Landscape mode support
• TV support (D-pad navigation)
• Picture-in-Picture (PiP) mode
• More advanced layouts (YouTube/Netflix-style)

---

📦 Installation

npm install react-native-video-toolkit
# or
yarn add react-native-video-toolkit

---

🚀 Usage

import { VideoPlayer, DefaultLayout } from 'react-native-video-toolkit';

const App = () => {
  return (
    <VideoPlayer source={{ uri: 'https://example.com/video.mp4' }}>
      <DefaultLayout />
    </VideoPlayer>
  );
};

For more docs: 👉 Documentation website.

---

🐛 Issues

Yes, there are bugs. Probably lots. 👉 Open an issue. It makes the project look active, so actually… thanks in advance.

---

🤝 Contributing

Wanna help? Please? 🙏 Check the contributing guide. 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 Thanks to wuxnz for motivation (and maybe trauma) Thanks to zach for the docs template

Made with ❤️, caffeine, and way too many Chrome tabs by Durgesh