{"id":19345217,"url":"https://github.com/charmy/react-native-youtube-sdk","last_synced_at":"2026-04-02T19:20:17.401Z","repository":{"id":42029177,"uuid":"188436631","full_name":"charmy/react-native-youtube-sdk","owner":"charmy","description":"YouTube SDK for React Native","archived":false,"fork":false,"pushed_at":"2022-01-23T11:09:21.000Z","size":731,"stargazers_count":57,"open_issues_count":4,"forks_count":19,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-11-01T22:16:48.260Z","etag":null,"topics":["react-native","youtube"],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/charmy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-24T14:32:10.000Z","updated_at":"2024-10-09T03:46:41.000Z","dependencies_parsed_at":"2022-08-12T02:50:34.466Z","dependency_job_id":null,"html_url":"https://github.com/charmy/react-native-youtube-sdk","commit_stats":null,"previous_names":["srfaytkn/react-native-youtube-sdk"],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/charmy/react-native-youtube-sdk","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charmy%2Freact-native-youtube-sdk","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charmy%2Freact-native-youtube-sdk/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charmy%2Freact-native-youtube-sdk/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charmy%2Freact-native-youtube-sdk/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/charmy","download_url":"https://codeload.github.com/charmy/react-native-youtube-sdk/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charmy%2Freact-native-youtube-sdk/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31314375,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-02T12:59:32.332Z","status":"ssl_error","status_checked_at":"2026-04-02T12:54:48.875Z","response_time":89,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react-native","youtube"],"created_at":"2024-11-10T04:05:35.871Z","updated_at":"2026-04-02T19:20:17.373Z","avatar_url":"https://github.com/charmy.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# react-native-youtube-sdk\n\n[![npm version](https://badge.fury.io/js/react-native-youtube-sdk.svg)](https://badge.fury.io/js/react-native-youtube-sdk)\n\n![Example Gif](https://sharelist2me.s3-eu-west-1.amazonaws.com/repo/example.gif)\n\n## Note\n- Your android app needs to be using the androidx libraries instead of the old support libraries.\n\n## Video is unavailable problem\n- Origin is already set up in the library but you will notice that some videos are not playing. This is because the video is shared as not embeddable by provider. \n- You can use YouTube Data API to solve this problem\n- Do not open an issue related to this\n## Getting started\n\n`$ npm install react-native-youtube-sdk --save`\n\n### Mostly automatic installation\n\n`$ react-native link react-native-youtube-sdk`\n\n#### iOS With CocoaPods\n\n1. Create a blank Swift file with bridge in your project (you can name it whatever you want) (to build swift code easily)\n2. `$ cd /ios`\n3. `$ pod install`\n4. Have fun\n\n\n### Manual installation\n\n\n#### iOS\n\n1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`\n2. Go to `node_modules` ➜ `react-native-youtube-sdk` and add `YouTubeSdk.xcodeproj`\n3. In XCode, in the project navigator, select your project. Add `libYouTubeSdk.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`\n4. Run your project (`Cmd+R`)\n\n#### Android\n\n1. Open up `android/app/src/main/java/[...]/MainApplication.java`\n  - Add `import com.srfaytkn.reactnative.YouTubeSdkPackage;` to the imports at the top of the file\n  - Add `new YouTubeSdkPackage()` to the list returned by the `getPackages()` method\n2. Append the following lines to `android/settings.gradle`:\n  \t```\n  \tinclude ':react-native-youtube-sdk'\n  \tproject(':react-native-youtube-sdk').projectDir = new File(rootProject.projectDir, \t'../node_modules/react-native-youtube-sdk/android')\n  \t```\n3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:\n  \t```\n    implementation project(':react-native-youtube-sdk')\n  \t```\n## Usage\n\n#### Example Component\n````javascript\n\u003cYouTubePlayer\n  ref={ref =\u003e (this.youTubePlayer = ref)}\n  videoId=\"t_aIEOqB8VM\"\n  autoPlay={true}\n  fullscreen={true}\n  showFullScreenButton={true}\n  showSeekBar={true}\n  showPlayPauseButton={true}\n  startTime={5}\n  style={{ width: \"100%\", height: 200 }}\n  onError={e =\u003e console.log(e)}\n  onChangeState={e =\u003e console.log(e)}\n  onChangeFullscreen={e =\u003e console.log(e)}\n/\u003e\n````\n#### Example Usage\n\n```javascript\nimport React from \"react\";\nimport { ScrollView, StyleSheet, View, TouchableOpacity, Text, ToastAndroid } from \"react-native\";\nimport YouTubePlayer from \"react-native-youtube-sdk\";\n\nexport default class App extends React.Component {\n  render() {\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cScrollView\u003e\n          \u003cYouTubePlayer\n            ref={ref =\u003e (this.youTubePlayer = ref)}\n            videoId=\"t_aIEOqB8VM\"\n            autoPlay={true}\n            fullscreen={false}\n            showFullScreenButton={true}\n            showSeekBar={true}\n            showPlayPauseButton={true}\n            startTime={5}\n            style={{ width: \"100%\", height: 200 }}\n            onReady={e =\u003e console.log(\"onReady\", e.type)}\n            onError={e =\u003e console.log(\"onError\", e.error)}\n            onChangeState={e =\u003e console.log(\"onChangeState\", e.state)}\n            onChangeFullscreen={e =\u003e console.log(\"onChangeFullscreen\", e.isFullscreen)}\n          /\u003e\n          \u003cView\u003e\n            \u003cTouchableOpacity style={styles.button} onPress={() =\u003e this.youTubePlayer.loadVideo(\"QdgRNIAdLi4\", 0)}\u003e\n              \u003cText style={{ color: \"#ffffff\" }}\u003eloadVideo\u003c/Text\u003e\n            \u003c/TouchableOpacity\u003e\n            \u003cTouchableOpacity style={styles.button} onPress={() =\u003e this.youTubePlayer.seekTo(10)}\u003e\n              \u003cText style={{ color: \"#ffffff\" }}\u003eSeekTo(10)\u003c/Text\u003e\n            \u003c/TouchableOpacity\u003e\n            \u003cTouchableOpacity style={styles.button} onPress={() =\u003e this.youTubePlayer.play()}\u003e\n              \u003cText style={{ color: \"#ffffff\" }}\u003ePlay\u003c/Text\u003e\n            \u003c/TouchableOpacity\u003e\n            \u003cTouchableOpacity style={styles.button} onPress={() =\u003e this.youTubePlayer.pause()}\u003e\n              \u003cText style={{ color: \"#ffffff\" }}\u003ePause\u003c/Text\u003e\n            \u003c/TouchableOpacity\u003e\n            \u003cTouchableOpacity\n              style={styles.button}\n              onPress={async () =\u003e {\n                const currentTime = await this.youTubePlayer.getCurrentTime();\n                ToastAndroid.show(String(currentTime), ToastAndroid.SHORT);\n              }}\n            \u003e\n              \u003cText style={{ color: \"#ffffff\" }}\u003egetCurrentTime\u003c/Text\u003e\n            \u003c/TouchableOpacity\u003e\n            \u003cTouchableOpacity\n              style={styles.button}\n              onPress={async () =\u003e {\n                const duration = await this.youTubePlayer.getVideoDuration();\n                ToastAndroid.show(String(duration), ToastAndroid.SHORT);\n              }}\n            \u003e\n              \u003cText style={{ color: \"#ffffff\" }}\u003egetVideoDuration\u003c/Text\u003e\n            \u003c/TouchableOpacity\u003e\n          \u003c/View\u003e\n        \u003c/ScrollView\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n  },\n  button: {\n    backgroundColor: \"red\",\n    margin: 12,\n    padding: 12,\n    borderRadius: 4,\n  },\n});\n```\n## API\n\n#### Props\n\n| Prop                 | Required | Type     | Default value | Description                                                                                    |\n|----------------------|----------|----------|---------------|------------------------------------------------------------------------------------------------|\n| videoId              | false    | string   |               | YouTube video id                                                                               |\n| autoPlay             | false    | bool     | false         | Plays when video loaded                                                                        |\n| fullscreen           | false    | bool     | false         | The video is play in fullscreen                                                                | \n| showFullScreenButton | false    | bool     | false         | Show or hide fullscreen button                                                                 |\n| showSeekBar          | false    | bool     | true          | Show or hide seekbar                                                                           |\n| showPlayPauseButton  | false    | bool     | true          | Show or hide play/pause button                                                                 |\n| enableBackgroundPlayback  | false    | bool     | false          | Show or hide play/pause button                                                              |\n| startTime            | false    | number   | 0             | start time of video for first play                                                             |\n| onReady              | false    | func     |               | triggered when the player ready                                                                |\n| onError              | false    | func     |               | triggered when error occurs                                                                    |\n| onChangeState        | false    | func     |               | triggered when the state changes (UNKNOWN/UNSTARTED/ENDED/PLAYING/PAUSED/BUFFERING/VIDEO_CUED) |\n| onChangeFullscreen   | false    | func     |               | triggered when the player enters or exits the fullscreen mode                                  |\n\n#### Methods\n\n| Name             | Params             | Return  | Descriptipon                                                           |\n|------------------|--------------------|---------|------------------------------------------------------------------------|\n| seekTo           | seconds            | void    | Seeks to a specified time in the video                                 |\n| play             |                    | void    | play the video                                                         |\n| pause            |                    | void    | pause the video                                                        |\n| loadVideo        | videoId, startTime | void    | load a video to the player                                             |\n| getCurrentTime   |                    | promise | Returns promise that results with the current time of the played video |\n| getVideoDuration |                    | promise | Returns promise that results with the duration of the played video     |  \n\nThanks\n- [x] \u003e= 1.0.6 iOS (https://github.com/mukeshydv/YoutubePlayerView) \n- [x] \u003c= 1.0.4- iOS (https://github.com/malkouz/youtube-ios-player-helper-swift) \n- [x] Android (https://github.com/PierfrancescoSoffritti/android-youtube-player)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcharmy%2Freact-native-youtube-sdk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcharmy%2Freact-native-youtube-sdk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcharmy%2Freact-native-youtube-sdk/lists"}