{"id":48884650,"url":"https://github.com/charliesbot/react-native-media-controls","last_synced_at":"2026-04-16T04:10:12.593Z","repository":{"id":9820153,"uuid":"62246063","full_name":"charliesbot/react-native-media-controls","owner":"charliesbot","description":"A sweet UI component to manipulate your media. Strongly typed.","archived":false,"fork":false,"pushed_at":"2023-06-21T10:27:41.000Z","size":29242,"stargazers_count":187,"open_issues_count":39,"forks_count":107,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-08-11T19:45:58.098Z","etag":null,"topics":["controls","react-native","typescript","video","video-controls"],"latest_commit_sha":null,"homepage":"","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/charliesbot.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-06-29T17:49:21.000Z","updated_at":"2025-07-23T19:26:47.000Z","dependencies_parsed_at":"2024-11-18T15:52:55.828Z","dependency_job_id":null,"html_url":"https://github.com/charliesbot/react-native-media-controls","commit_stats":null,"previous_names":["charliesbox/react-native-media-controls"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/charliesbot/react-native-media-controls","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charliesbot%2Freact-native-media-controls","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charliesbot%2Freact-native-media-controls/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charliesbot%2Freact-native-media-controls/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charliesbot%2Freact-native-media-controls/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/charliesbot","download_url":"https://codeload.github.com/charliesbot/react-native-media-controls/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/charliesbot%2Freact-native-media-controls/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31870558,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-15T15:24:51.572Z","status":"online","status_checked_at":"2026-04-16T02:00:06.042Z","response_time":69,"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":["controls","react-native","typescript","video","video-controls"],"created_at":"2026-04-16T04:10:11.711Z","updated_at":"2026-04-16T04:10:12.548Z","avatar_url":"https://github.com/charliesbot.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-media-controls\nA sweet UI component to manipulate your media. Strongly typed using Typescript.\n\n![mediac](https://user-images.githubusercontent.com/10927770/80893585-89967000-8c88-11ea-83af-2a028115ee12.gif)\n\n## Installation\n```bash\n   // install package\n   yarn add react-native-media-controls\n   // install react-native-slider, as this is a dependency of this library\n   yarn add react-native-slider\n```\n\n## Usage\n```js\n// Require the module\nimport MediaControls, { PLAYER_STATES } from 'react-native-media-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  // ... ... ...\n  // ... ... ...\n\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cVideo\n        {...videoProps}\n      /\u003e\n      \u003cMediaControls\n        isFullScreen={isFullScreen}\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\n          \u003cView style={styles.toolbar}\u003e\n            \u003cText\u003eI'm a custom toolbar \u003c/Text\u003e\n          \u003c/View\u003e\n        \u003c/MediaControls.Toolbar\u003e\n      \u003c/MediaControls\u003e\n    \u003c/View\u003e\n  );\n};\n\n```\n## Props\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| isLoading    | boolean  | Yes      | false                  | When is loading                                                      |\n| isFullScreen | boolean  | Yes      | false                  | To change icon state of fullscreen                                   |\n| fadeOutDelay | number   | Yes      | 5000                   | Allows to customize the delay between fade in and fade out transition|\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| onFullScreen | function | Yes      |                        | Triggered when the fullscreen button is pressed. If not provided, the fullscreen icon is not displayed                    |\n| onPaused     | function | No       |                        | Triggered when the play/pause button is pressed. It returns the new toggled value (PLAYING or PAUSED)                     |\n| onReplay     | function | Yes      |                        | Triggered when the replay button is pressed                          |\n| onSeek       | function | No       |                        | Triggered when the user released the slider                          |\n| onSeeking    | function | Yes      |                        | Triggered when the user is interacting with the slider               |\n| showOnStart  | boolean  | Yes      | true                   | controls the visibility of the controls during the initial render    |\n\n## Constants \n```js\n  PLAYING,\n  PAUSED,\n  ENDED,\n```  \n## Example\nRefer to the example folder to find an implementation of this project\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcharliesbot%2Freact-native-media-controls","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcharliesbot%2Freact-native-media-controls","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcharliesbot%2Freact-native-media-controls/lists"}