{"id":4666,"url":"https://github.com/IFours/react-native-volume-slider","last_synced_at":"2025-08-04T01:32:53.259Z","repository":{"id":46933673,"uuid":"50187798","full_name":"ifours/react-native-volume-slider","owner":"ifours","description":"React Native VolumeView component","archived":false,"fork":false,"pushed_at":"2022-09-10T02:15:10.000Z","size":574,"stargazers_count":73,"open_issues_count":18,"forks_count":21,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-08-01T06:02:56.409Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/ifours.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":"2016-01-22T14:59:35.000Z","updated_at":"2024-09-22T15:56:11.000Z","dependencies_parsed_at":"2022-09-26T18:50:47.691Z","dependency_job_id":null,"html_url":"https://github.com/ifours/react-native-volume-slider","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/ifours/react-native-volume-slider","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ifours%2Freact-native-volume-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ifours%2Freact-native-volume-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ifours%2Freact-native-volume-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ifours%2Freact-native-volume-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ifours","download_url":"https://codeload.github.com/ifours/react-native-volume-slider/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ifours%2Freact-native-volume-slider/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268636491,"owners_count":24282098,"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","status":"online","status_checked_at":"2025-08-03T02:00:12.545Z","response_time":2577,"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":[],"created_at":"2024-01-05T20:17:19.596Z","updated_at":"2025-08-04T01:32:52.924Z","avatar_url":"https://github.com/ifours.png","language":"Objective-C","funding_links":[],"categories":["Components"],"sub_categories":["Media"],"readme":"## React Native VolumeSlider component\n\nMPVolumeView bridge to React Native (NOTE: MPVolumeView works only on physical devices)\n\n###  Default styles\n\u003cimg src='http://i66.tinypic.com/123lkl2.jpg' width=\"400\" /\u003e\n\n### Custom styles\n\u003cimg src='http://i67.tinypic.com/29ffmn5.jpg' width=\"400\" /\u003e\n\n\n### Installation\n1. Install package via npm:\n\n  ```\n  npm install react-native-volume-slider\n  ```\n\n2. Link your library: either by using [`rnpm link`](https://github.com/rnpm/rnpm) or like it's [described here](http://facebook.github.io/react-native/docs/linking-libraries-ios.html).\n3. Inside your code include JS part by adding\n\n  ```javascript\n  import VolumeSlider from 'react-native-volume-slider';\n  ```\n\n5. Connect your device and run application! (NOTE: MPVolumeView works only on physical devices)\n\n#### Volume Slider\n\n```javascript\nimport React, { Component } from 'react';\nimport { View, StyleSheet } from 'react-native';\nimport VolumeSlider from 'react-native-volume-slider';\n\nclass PlayerVolume extends React.Component {\n\n  volumeChange(value) {\n    // body\n  }\n\n  render() {\n    return (\n      \u003cView\u003e\n        \u003cVolumeSlider\n          style={styles.slider}\n          thumbSize={{\n            width: 8,\n            height: 8\n          }}\n          thumbTintColor=\"rgb(146,146,157)\"\n          minimumTrackTintColor=\"rgb(146,146,157)\"\n          maximumTrackTintColor=\"rgba(255,255,255, 0.1)\"\n          showsRouteButton={true}\n          onValueChange={this.volumeChange.bind(this)} /\u003e\n      \u003c/View\u003e\n    );\n  }\n};\n\nconst styles = StyleSheet.create({\n  slider: {\n    height: 30,\n    marginLeft: 7,\n  }\n});\n```\n\n#### Props\n##### `style`\n[View styles...](https://facebook.github.io/react-native/docs/view.html#style)\n\n##### `minimumTrackTintColor`\nThe color used for the track to the left of the button. Overrides the default blue gradient image.\n\n##### `maximumTrackTintColor`\nThe color used for the track to the right of the button. Overrides the default blue gradient image.\n\n##### `onValueChange`\nCallback continuously called while the user is dragging the slider or user hits volume buttons.\n\n##### `thumbSize`\nThe size of the thumb area that allows moving the thumb.\n\n##### `thumbTintColor`\nThe color used for the thumb.\n\n##### `thumbImage`\nSpecify an image here to use as thumb. This will be drawn to the round\n\n##### `showsRouteButton`\nIndicates whether or not to show the `routeButton` where the user can select the output target (airplay, headphones)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FIFours%2Freact-native-volume-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FIFours%2Freact-native-volume-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FIFours%2Freact-native-volume-slider/lists"}