{"id":39461920,"url":"https://github.com/prathmesh28/react-native-video-basic-controls","last_synced_at":"2026-01-18T04:44:38.394Z","repository":{"id":56416270,"uuid":"465674080","full_name":"prathmesh28/react-native-video-basic-controls","owner":"prathmesh28","description":"Controls for the react-native-video component with full screen support.","archived":false,"fork":false,"pushed_at":"2022-11-03T05:50:59.000Z","size":4235,"stargazers_count":10,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-26T14:56:39.250Z","etag":null,"topics":["react-native","react-native-video","react-native-video-controls","react-native-video-fullscreen"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-video-basic-controls","language":"TypeScript","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/prathmesh28.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-03-03T10:35:39.000Z","updated_at":"2024-01-26T18:50:51.000Z","dependencies_parsed_at":"2022-08-15T18:20:23.497Z","dependency_job_id":null,"html_url":"https://github.com/prathmesh28/react-native-video-basic-controls","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/prathmesh28/react-native-video-basic-controls","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prathmesh28%2Freact-native-video-basic-controls","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prathmesh28%2Freact-native-video-basic-controls/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prathmesh28%2Freact-native-video-basic-controls/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prathmesh28%2Freact-native-video-basic-controls/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/prathmesh28","download_url":"https://codeload.github.com/prathmesh28/react-native-video-basic-controls/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prathmesh28%2Freact-native-video-basic-controls/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28530107,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-18T00:39:45.795Z","status":"online","status_checked_at":"2026-01-18T02:00:07.578Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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","react-native-video","react-native-video-controls","react-native-video-fullscreen"],"created_at":"2026-01-18T04:44:37.758Z","updated_at":"2026-01-18T04:44:38.374Z","avatar_url":"https://github.com/prathmesh28.png","language":"TypeScript","readme":"# react-native-video-basic-controls\n\nReact native video controls.\nControls for the [react-native-video](https://github.com/react-native-video/react-native-video) component for Android and IOS.\n\n## Features\n\n- Full screen support.\n- Change volume and brightness with Swipe/ Slider controls.\n- Seek forword and back button.\n- Slider customisation.\n- Swipe controls left-side brightness \u0026 right-side volume.\n\n## Installation\n\n```sh\nnpm install react-native-video-basic-controls\n```\n\n#### For Brightness or Volume controls install [react-native-system-setting](https://github.com/c19354837/react-native-system-setting)\n\n```sh\nnpm install react-native-system-setting\n```\n\nlink react-native-system-setting\n\n```sh\nreact-native link\n```\n\nAdd permission in android/app/src/main/AndroidManifest.xml\n\n```js\n\u003cmanifest xmlns:android=\"http://schemas.android.com/apk/res/android\"\n    package=\"YourPackageName\"\n    android:versionCode=\"1\"\n    android:versionName=\"1.0\"\u003e\n\n    \u003c!-- setBrightness() \u0026 setScreenMode() \u0026 saveBrightness() --\u003e\n    \u003cuses-permission android:name=\"android.permission.WRITE_SETTINGS\" /\u003e\n\n    ...\n\n\u003c/manifest\u003e\n```\n\n## Usage\n\n```js\n// Require the module\nimport MediaControls, {\n  PLAYER_STATES,\n} from 'react-native-video-basic-controls';\n\nconst App = () =\u003e {\n  const [currentTime, setCurrentTime] = useState(0);\n  const [duration, setDuration] = useState(0);\n  const [isFullScreen, setIsFullScreen] = useState(false);\n  const [isLoading, setIsLoading] = useState(true);\n  const [paused, setPaused] = useState(false);\n  const [playerState, setPlayerState] = useState(PLAYER_STATES.PLAYING);\n\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cVideo {...videoProps} /\u003e\n      \u003cMediaControls\n        duration={duration}\n        isLoading={isLoading}\n        mainColor=\"orange\"\n        onFullScreen={noop}\n        onPaused={onPaused}\n        onReplay={onReplay}\n        onSeek={onSeek}\n        onSeeking={onSeeking}\n        playerState={playerState}\n        progress={currentTime}\n      \u003e\n        \u003cMediaControls.Toolbar\u003e// ...\u003c/MediaControls.Toolbar\u003e\n      \u003c/MediaControls\u003e\n    \u003c/View\u003e\n  );\n};\n```\n\nRefer to [example](https://github.com/prathmesh28/react-native-video-basic-controls/tree/master/example) for implementation of this project\n\n## Props\n\n### Main Props\n\n| Prop        | Type     | Optional | Default | Description                                                                                           |\n| ----------- | -------- | -------- | ------- | ----------------------------------------------------------------------------------------------------- |\n| progress    | number   | No       |         | Current time of the media player                                                                      |\n| duration    | number   | No       |         | Total duration of the media                                                                           |\n| playerState | number   | No       |         | Could be PLAYING, PAUSED or ENDED (take a look at constants section)                                  |\n| onPaused    | function | No       |         | Triggered when the play/pause button is pressed. It returns the new toggled value (PLAYING or PAUSED) |\n| onSeek      | function | No       |         | Triggered when the user released the slider                                                           |\n| onReplay    | function | Yes      |         | Triggered when the replay button is pressed                                                           |\n| onSeeking   | function | Yes      |         | Triggered when the user is interacting with the slider                                                |\n\n### Other Props\n\n| Prop            | Type      | Optional | Default  | Description                                                                  |\n| --------------- | --------- | -------- | -------- | ---------------------------------------------------------------------------- |\n| isLoading       | boolean   | Yes      | false    | When is loading (displays loading icon).                                     |\n| fadeOutDelay    | number    | Yes      | 5000     | Allows to customize the delay between fade in and fade out transition.       |\n| onFullScreen    | function  | Yes      |          | Custom fullscreen function, triggered when the fullscreen button is pressed. |\n| showOnStart     | boolean   | Yes      | true     | controls the visibility of the controls during the initial render.           |\n| fullScreenIconL | component | Yes      |          | Fullscreen icon (landscape mode).                                            |\n| fullScreenIconP | component | Yes      |          | Fullscreen icon (Portrait mode).                                             |\n| bufferValue     | number    | Yes      |          | Add buffer value to Slider.                                                  |\n| onSkipFor       | String    | Yes      |          | To seek forward.                                                             |\n| onSkipBack      | String    | Yes      |          | To seek back.                                                                |\n| showVolume      | boolean   | Yes      | false    | Show Volume controls.                                                        |\n| showBrightness  | boolean   | Yes      | false    | Show Brightness controls.                                                    |\n| sliderScale     | number    | Yes      | 10       | Scale brightness/ volume slider on press.                                    |\n| sliderType      | String    | Yes      | 'Slider' | Select brightness/ volume slider type(Slider/swipe).                         |\n\n### Style Props\n\n| Prop               | Type       | Optional | Default                | Description                                     |\n| ------------------ | ---------- | -------- | ---------------------- | ----------------------------------------------- |\n| mainColor          | string     | Yes      | rgba(12, 83, 175, 0.9) | Change custom color to the media controls       |\n| containerStyle     | StyleSheet | Yes      |                        | Apply styles to the container                   |\n| toolbarStyle       | StyleSheet | Yes      |                        | Apply styles to \u003cMediaControls.Toolbar\u003e         |\n| iconStyle          | StyleSheet | Yes      |                        | Apply styles to fullscreen icon                 |\n| sliderStyle        | StyleSheet | Yes      |                        | Apply styles to Slider                          |\n| bufferColor        | String     | Yes      | #fff                   | Change color of buffer view                     |\n| VSliderOuterStyles | StyleSheet | Yes      |                        | Apply styles to volume/brightness outer slider. |\n| VSliderInnerStyles | StyleSheet | Yes      |                        | Apply styles to volume/brightness track slider. |\n\n```js\nsliderStyle={{\n  thumbStyle:{\n     // ...\n   },\n   trackStyle:{\n     // ...\n   },\n   containerStyle:{\n     // ...\n   }\n}}\n```\n\n## Contributing\n\nSee the [contributing guide](https://github.com/prathmesh28/react-native-video-basic-controls/blob/master/CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprathmesh28%2Freact-native-video-basic-controls","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprathmesh28%2Freact-native-video-basic-controls","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprathmesh28%2Freact-native-video-basic-controls/lists"}