{"id":4673,"url":"https://github.com/mostafa/react-native-fullscreen-video","last_synced_at":"2025-09-30T09:30:50.320Z","repository":{"id":57337146,"uuid":"88407521","full_name":"mostafa/react-native-fullscreen-video","owner":"mostafa","description":"A full-screen video component on top of react-native-video","archived":true,"fork":false,"pushed_at":"2018-03-02T12:36:39.000Z","size":674,"stargazers_count":65,"open_issues_count":2,"forks_count":8,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-12-31T11:46:57.998Z","etag":null,"topics":["javascript","npm","react-native","react-native-video"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mostafa.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":"2017-04-16T10:58:50.000Z","updated_at":"2024-11-30T05:51:58.000Z","dependencies_parsed_at":"2022-09-12T13:20:30.825Z","dependency_job_id":null,"html_url":"https://github.com/mostafa/react-native-fullscreen-video","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mostafa%2Freact-native-fullscreen-video","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mostafa%2Freact-native-fullscreen-video/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mostafa%2Freact-native-fullscreen-video/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mostafa%2Freact-native-fullscreen-video/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mostafa","download_url":"https://codeload.github.com/mostafa/react-native-fullscreen-video/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234722055,"owners_count":18876896,"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":["javascript","npm","react-native","react-native-video"],"created_at":"2024-01-05T20:17:19.805Z","updated_at":"2025-09-30T09:30:44.994Z","avatar_url":"https://github.com/mostafa.png","language":"JavaScript","funding_links":[],"categories":["Components"],"sub_categories":["Media"],"readme":"# ![](https://raw.githubusercontent.com/mostafa/react-native-fullscreen-video/master/assets/RNFSV-logo.png) react-native-fullscreen-video\r\n\r\nA full-screen video component on top of [react-native-video](https://github.com/react-native-community/react-native-video/)\r\n\r\n[![npm version](https://badge.fury.io/js/react-native-fullscreen-video.svg)](https://badge.fury.io/js/react-native-fullscreen-video)\r[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fmostafa%2Freact-native-fullscreen-video.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fmostafa%2Freact-native-fullscreen-video?ref=badge_shield)\n\n[![npm](https://img.shields.io/npm/dt/react-native-fullscreen-video.svg)](https://www.npmjs.com/package/react-native-fullscreen-video)\r\n [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\r\n\r\nOne of the main issues of react-native-video is making video full-screen on Android. To solve this issue, I've made this package that acts as a full-screen video component.\r\n\r\n\n[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fmostafa%2Freact-native-fullscreen-video.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Fmostafa%2Freact-native-fullscreen-video?ref=badge_large)\n\n## Demo\r\n![](https://raw.githubusercontent.com/mostafa/react-native-fullscreen-video/master/assets/demo.gif)\r\n\r\n## Installation\r\nTo install react-native-fullscreen-video, you can use install from git or use a javascript package manager (e.g. npm or yarn).\r\n\r\n+ To install from git (master branch):\r\n  ~~~~\r\n  $ npm install git+https://github.com/mostafa/react-native-fullscreen-video.git\r\n  ~~~~\r\n+ To install using a javascript package manager, simply run this command (in this case we've used npm):\r\n  ~~~~\r\n  $ npm install --save react-native-fullscreen-video\r\n  ~~~~\r\n\r\n## Examples\r\nTwo example apps are created to demonstrate how to use this package.  \r\n\r\n[First one](https://github.com/mostafa/react-native-fullscreen-video/tree/master/examples/simple-example) is a simple app that uses no special setup for navigation/routing and state management.\r\n\r\nIn the [second example](https://github.com/mostafa/react-native-fullscreen-video/tree/master/examples/flux-example), [react-native-router-flux](https://github.com/aksonov/react-native-router-flux) is used to make two scenes and switch between them using the provided routing functions (Actions).\r\n\r\n## Usage with no-setup\r\nSimply define a view with flex set to 1 containing `FullScreenVideo` component:\r\n\r\n~~~\r\nimport React, { Component } from 'react';\r\nimport { View } from 'react-native';\r\nimport FullscreenVideo from 'react-native-fullscreen-video';\r\n\r\nexport default class App extends Component\u003c{}\u003e {\r\n  render() {\r\n    return (\r\n      \u003cView style={{flex: 1}}\u003e\r\n        \u003cFullscreenVideo src={{uri: \"\u003cvideo-url\u003e\"}} /\u003e\r\n      \u003c/View\u003e\r\n    );\r\n  }\r\n}\r\n~~~\r\n\r\n## Usage with [react-native-router-flux](https://github.com/aksonov/react-native-router-flux)\r\nAlthough not mandatory, you can use  [react-native-router-flux](https://github.com/aksonov/react-native-router-flux) to define a scene containing this component and then pass the necessary arguments, so that the component plays the video. The example app looks like this:\r\n\r\n~~~~\r\nimport React, { Component } from 'react';\r\nimport { AppRegistry } from 'react-native';\r\nimport { Scene, Router } from 'react-native-router-flux';\r\nimport FullScreenVideo from 'react-native-fullscreen-video';\r\nimport MainView from './app/mainview';\r\n\r\nexport default class example extends Component {\r\n  render() {\r\n    return (\r\n      \u003cRouter\u003e\r\n        \u003cScene key=\"root\"\u003e\r\n          \u003cScene key=\"main\" component={MainView} initial={true} hideNavBar={true} /\u003e\r\n          \u003cScene\r\n            key=\"fullscreenVideo\"\r\n            component={FullScreenVideo}\r\n            hideNavBar={true}\r\n            duration={1} /\u003e\r\n        \u003c/Scene\u003e\r\n      \u003c/Router\u003e\r\n    );\r\n  }\r\n}\r\n\r\nAppRegistry.registerComponent('example', () =\u003e example);\r\n~~~~\r\n\r\n~~~~\r\nimport { Actions } from 'react-native-router-flux';\r\n...\r\n\u003cTouchableOpacity onPress={() =\u003e { Actions.fullscreenVideo({src: \"\u003cvideo-url\u003e\"}) }} /\u003e\r\n...\r\n~~~~\r\n\r\nBy tapping on the `TouchableOpacity` component (or your own desired component), the full-screen video component would slide in and play the video in full-screen.\r\n\r\n## Limitation(s)\r\n1. `FIXED` \u003cs\u003eYour app should be locked in [portrait orientation](http://stackoverflow.com/a/34086828/6999563), for this component to work.\u003c/s\u003e Your app no longer needs to be locked in portrait orientation.\r\n2. `FIXED` \u003cs\u003eI haven't tested it with any other routing/navigation package, other than react-native-router-flux.\u003c/s\u003e No special routing/navigation is needed, the component works independently.\r\n3. Not all properties are supported right now for the internal video component.\r\n4. It doesn't contain any player controls.\r\n\r\n## Contribution\r\nContribution is always welcome!\r\n\r\n## License\r\n[MIT](https://github.com/mostafa/react-native-fullscreen-video/blob/master/LICENSE)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmostafa%2Freact-native-fullscreen-video","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmostafa%2Freact-native-fullscreen-video","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmostafa%2Freact-native-fullscreen-video/lists"}