├── .eslintrc.js ├── .github ├── ISSUE_TEMPLATE │ └── bug_report.md └── workflows │ └── lint.yml ├── .gitignore ├── .npmignore ├── .prettierrc.js ├── CONTRIBUTING.md ├── LICENSE ├── babel.config.js ├── docs ├── about.mdx ├── basic_usage.mdx ├── install.mdx ├── module_methods.mdx ├── navigation-crash.mdx ├── play-store-compatibility.mdx ├── props.mdx ├── ref_methods.mdx ├── remove-context-share.mdx ├── self_host.mdx └── show-elapsed-time.mdx ├── iframe.html ├── index.d.ts ├── package.json ├── readme.md ├── src ├── PlayerScripts.js ├── WebView.native.js ├── WebView.web.js ├── YoutubeIframe.js ├── constants.js ├── index.js ├── oEmbed.js └── utils.js ├── website ├── .gitignore ├── README.md ├── babel.config.js ├── docusaurus.config.js ├── generateIframe.js ├── package.json ├── sidebars.js ├── src │ └── css │ │ └── custom.css ├── static │ ├── .nojekyll │ ├── iframe.html │ ├── iframe_v2.html │ └── img │ │ ├── demo.gif │ │ ├── favicon.ico │ │ └── logo.svg └── yarn.lock └── yarn.lock /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: '@react-native-community', 4 | }; 5 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 16 | **Expected behavior** 17 | A clear and concise description of what you expected to happen. 18 | 19 | **Screenshots** 20 | If applicable, add screenshots to help explain your problem. 21 | 22 | **Smartphone (please complete the following information):** 23 | - Device: [e.g. iPhone6] 24 | - OS + version: [e.g. iOS 13.5 | Android 10] 25 | - `react-native-youtube-iframe` version 26 | - `react-native-webview` version 27 | - `Expo` verison [if using expo] 28 | 29 | **Additional context** 30 | Add any other context about the problem here. 31 | -------------------------------------------------------------------------------- /.github/workflows/lint.yml: -------------------------------------------------------------------------------- 1 | name: run eslint on code 2 | 3 | on: [push, pull_request] 4 | 5 | jobs: 6 | lint: 7 | runs-on: ubuntu-latest 8 | 9 | steps: 10 | - uses: actions/checkout@v2 11 | - name: install modules 12 | run: yarn 13 | - name: run lint 14 | run: yarn lint 15 | env: 16 | CI: true 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .vscode 3 | .idea 4 | dist 5 | .env 6 | .npmrc -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | docs/* 2 | website/* 3 | .eslintrc.js 4 | .prettierrc.js 5 | .github/* 6 | .vscode/* 7 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | bracketSpacing: false, 3 | jsxBracketSameLine: true, 4 | singleQuote: true, 5 | trailingComma: 'all', 6 | arrowParens: 'avoid', 7 | }; 8 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing guide 2 | 3 | 1. create an issue to discuss the change 4 | 2. create a PR if change makes sense after the discussion 5 | 3. PR review + merge! 6 | 7 | ## package manager 8 | 9 | Use `yarn`, do not create package-lock.json from npm 10 | 11 | ## code lint 12 | 13 | The repo uses **eslint** and **prettier** to enforce some style and lint rules. Make sure that `yarn lint` runs successfully on your branch. 14 | 15 | ## Local project setup 16 | 17 | ### library setup 18 | 19 | 1. clone the repo (of your fork) in a separate folder 20 | 2. run `yarn` in the root directory 21 | 3. run `yarn build` in the root directory 22 | 23 | (this should create a `dist` folder) 24 | 25 | ### test app setup 26 | 27 | 1. open or create a new react native project (expo and RN CLI both work) 28 | 2. add a dependency in package.json like 29 | 30 | ```json 31 | { 32 | "dependencies": { 33 | "react-native-youtube-iframe": "path/to/cloned/folder" 34 | } 35 | } 36 | ``` 37 | 38 | 3. run the app and use the iframe as stated in the docs 39 | 40 | ### making changes 41 | 42 | 1. make a change in the cloned folder 43 | 2. run `yarn build` 44 | 3. reload / refresh test app 45 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Ananthu Kanive 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function (api) { 2 | if (api) { 3 | api.cache(false); 4 | } 5 | 6 | return { 7 | presets: ['module:metro-react-native-babel-preset'], 8 | }; 9 | }; 10 | -------------------------------------------------------------------------------- /docs/about.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: about 3 | title: React Native Youtube-iframe 4 | slug: / 5 | --- 6 | 7 | import useBaseUrl from '@docusaurus/useBaseUrl'; 8 | 9 | ![npm](https://img.shields.io/npm/v/react-native-youtube-iframe?style=for-the-badge) ![npm](https://img.shields.io/npm/dm/react-native-youtube-iframe?style=for-the-badge) 10 | 11 | A wrapper of the **Youtube-iframe API** built for react native. 12 | 13 | - ✅ Works seamlessly on both ios and android platforms 14 | - ✅ Does not rely on the native youtube service on android (prevents unexpected crashes, works on phones without the youtube app) 15 | - ✅ Uses the webview player which is known to be more stable compared to the native youtube app 16 | - ✅ Access to a vast API provided through the iframe youtube API 17 | - ✅ Supports multiple youtube player instances in a single page 18 | - ✅ Fetch basic video metadata without API keys (uses oEmbed) 19 | - ✅ Works on modals and overlay components 20 | - ✅ Expo support 21 | 22 | Docusaurus with Keytar 23 | -------------------------------------------------------------------------------- /docs/basic_usage.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: basic-usage 3 | title: Basic Usage 4 | --- 5 | 6 | This snippet renders a Youtube video with a button that can play or pause the video. When the player has finished playing it, an alert is triggered. 7 | 8 | ```jsx 9 | import React, { useState, useCallback, useRef } from "react"; 10 | import { Button, View, Alert } from "react-native"; 11 | import YoutubePlayer from "react-native-youtube-iframe"; 12 | 13 | export default function App() { 14 | const [playing, setPlaying] = useState(false); 15 | 16 | const onStateChange = useCallback((state) => { 17 | if (state === "ended") { 18 | setPlaying(false); 19 | Alert.alert("video has finished playing!"); 20 | } 21 | }, []); 22 | 23 | const togglePlaying = useCallback(() => { 24 | setPlaying((prev) => !prev); 25 | }, []); 26 | 27 | return ( 28 | 29 | 35 |