{"id":27559158,"url":"https://github.com/davichoso/react-native-video360","last_synced_at":"2025-06-14T17:34:44.410Z","repository":{"id":53171386,"uuid":"231669256","full_name":"davichoso/react-native-video360","owner":"davichoso","description":"A react native module to play 360 videos, using the SGPlayer for iOS, and Google VR for Android","archived":false,"fork":false,"pushed_at":"2021-04-02T17:44:58.000Z","size":67764,"stargazers_count":14,"open_issues_count":1,"forks_count":11,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-31T19:39:04.743Z","etag":null,"topics":["360","native","player","react","react-native","react-native-video-360","video","video-360"],"latest_commit_sha":null,"homepage":"","language":"Objective-C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/davichoso.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-01-03T21:35:29.000Z","updated_at":"2024-08-31T13:35:46.000Z","dependencies_parsed_at":"2022-09-06T07:31:24.061Z","dependency_job_id":null,"html_url":"https://github.com/davichoso/react-native-video360","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/davichoso/react-native-video360","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davichoso%2Freact-native-video360","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davichoso%2Freact-native-video360/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davichoso%2Freact-native-video360/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davichoso%2Freact-native-video360/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/davichoso","download_url":"https://codeload.github.com/davichoso/react-native-video360/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davichoso%2Freact-native-video360/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259855868,"owners_count":22922397,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["360","native","player","react","react-native","react-native-video-360","video","video-360"],"created_at":"2025-04-19T23:34:14.431Z","updated_at":"2025-06-14T17:34:44.122Z","avatar_url":"https://github.com/davichoso.png","language":"Objective-C","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-video360\n\nReact Native module to play 360 videos, using the SGPlayer for iOS, and Google VR for Android, this plugin was tested using react native 0.61\n\n[![360](https://raw.githubusercontent.com/davichoso/react-native-video360/master/360.png \"360\")](https://raw.githubusercontent.com/davichoso/react-native-video360/master/360.png \"360\")\n\n## Getting started\n`npm i react-native-video360plugin --save`\n\n### Notes\n- This component was tested in React Native 0.61 with automatic linking, but I think that it should work in older versions linking manually.\n- don't forget to run 'pod install' in iOS folder\n\tcd ios \u0026\u0026 pod install\n- in Android test in a real device or android Q simulator I don't know but VR SDK fails in a lot of simulators but not in real devices.\n- in iOS if you want to run in a real device go to Pods-\u003e Development Pods -\u003e react-native-video-360 -\u003e react-native-video360.podspec open it and uncoment production and comment simulator lines, then run 'pod install' again. I wanted to build the framework for all architectures but it didn't worked, ill try to fix this in the future\n\n```\n# dev simulator\n # s.ios.vendored_frameworks = 'Frameworks/SGPlayer.framework','Frameworks/SGPlatform.framework'\n # production\n s.ios.vendored_frameworks = 'Frameworks/arm/SGPlayer.framework','Frameworks/arm/SGPlatform.framework'\n```\n### IOS USAGE\n```javascript\n\u003cVideo360 urlVideo={videoUrl} modeVideo={modeVideo} style={{ flex: 1}} /\u003e\n```\nVideo Modes\n```\n if(modeVideo == 1)\n      _playerView.demoType = DemoType_AVPlayer_VR;\n    if(modeVideo == 2)\n      _playerView.demoType = DemoType_AVPlayer_VR_Box;\n    if(modeVideo == 3)\n      _playerView.demoType = DemoType_AVPlayer_Normal;\n```\nbut I use like this, wraping it in a modal that is  triggered by a button that sets the url and the video mode.\n\n```javascript\n\u003cModal\u003e\n\t\u003cView style={{ flex: 1, backgroundColor: 'black' }}\u003e\n\t\t\u003cView style={{ position: 'absolute', top: 20, left: 15, zIndex: 10 }}\u003e\n\t\t\u003cTouchableWithoutFeedback onPress={() =\u003e { setModalVisible(false)}}\u003e\n\t\t\u003cText style={{ color: 'white' }}\u003eclose\u003c/Text\u003e\n\t\t\u003c/TouchableWithoutFeedback\u003e\n\t\t\u003c/View\u003e\n\t\u003cVideo360 urlVideo={videoUrl} modeVideo={modeVideo} style={{ flex: 1}} /\u003e\n\t\u003c/View\u003e\n\u003c/Modal\u003e\n\n```\n#### video modes\n```javascript\nif(modeVideo == 1)\n      _playerView.demoType = DemoType_AVPlayer_VR; // 360\n    if(modeVideo == 2)\n      _playerView.demoType = DemoType_AVPlayer_VR_Box; // 360 with glases\n    if(modeVideo == 3)\n      _playerView.demoType = DemoType_AVPlayer_Normal; // normal\n```\n## Android Usage\nsame as ios\n```javascript\n\u003cVideo360 urlVideo={videoUrl} modeVideo={modeVideo} style={{ flex: 1}} /\u003e\n```\nit also can have this props\n```\nvolume={1}\ndisplayMode='embedded'\nenableInfoButton={true}\nenableFullscreenButton={true}\nenableCardboardButton={true}\nenableTouchTracking={true}\nhidesTransitionView={false}\n```\nI have taken the android part of code from here\nhttps://github.com/altafan/react-native-gvr-video-android/tree/master/android/src/main/java/com/gvrvideo\n\niOS the player from here\nhttps://github.com/libobjc/SGPlayer\n\n\n## TODO\n\n- implement SeekBar in android, it is almost done in the code.. but a soon as i have time ill finish it.\n- complete documentation and javascript interfaces\n\n\nQuestions? davichoso@gmail.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavichoso%2Freact-native-video360","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavichoso%2Freact-native-video360","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavichoso%2Freact-native-video360/lists"}