https://github.com/IFours/react-native-volume-slider
React Native VolumeView component
https://github.com/IFours/react-native-volume-slider
Last synced: 3 months ago
JSON representation
React Native VolumeView component
- Host: GitHub
- URL: https://github.com/IFours/react-native-volume-slider
- Owner: ifours
- Created: 2016-01-22T14:59:35.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2022-09-10T02:15:10.000Z (about 3 years ago)
- Last Synced: 2025-08-01T06:02:56.409Z (3 months ago)
- Language: Objective-C
- Size: 561 KB
- Stars: 73
- Watchers: 5
- Forks: 21
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-react-native - react-native-volume-slider ★69 - React Native VolumeView component (Components / Media)
- awesome-react-native - react-native-volume-slider ★69 - React Native VolumeView component (Components / Media)
- awesome-react-native - react-native-volume-slider ★69 - React Native VolumeView component (Components / Media)
- awesome-react-native-ui - react-native-volume-slider ★29 - React Native VolumeView component (Components / Media)
- awesome-react-native - react-native-volume-slider ★69 - React Native VolumeView component (Components / Media)
README
## React Native VolumeSlider component
MPVolumeView bridge to React Native (NOTE: MPVolumeView works only on physical devices)
### Default styles
### Custom styles
### Installation
1. Install package via npm:
```
npm install react-native-volume-slider
```
2. 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).
3. Inside your code include JS part by adding
```javascript
import VolumeSlider from 'react-native-volume-slider';
```
5. Connect your device and run application! (NOTE: MPVolumeView works only on physical devices)
#### Volume Slider
```javascript
import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import VolumeSlider from 'react-native-volume-slider';
class PlayerVolume extends React.Component {
volumeChange(value) {
// body
}
render() {
return (
);
}
};
const styles = StyleSheet.create({
slider: {
height: 30,
marginLeft: 7,
}
});
```
#### Props
##### `style`
[View styles...](https://facebook.github.io/react-native/docs/view.html#style)
##### `minimumTrackTintColor`
The color used for the track to the left of the button. Overrides the default blue gradient image.
##### `maximumTrackTintColor`
The color used for the track to the right of the button. Overrides the default blue gradient image.
##### `onValueChange`
Callback continuously called while the user is dragging the slider or user hits volume buttons.
##### `thumbSize`
The size of the thumb area that allows moving the thumb.
##### `thumbTintColor`
The color used for the thumb.
##### `thumbImage`
Specify an image here to use as thumb. This will be drawn to the round
##### `showsRouteButton`
Indicates whether or not to show the `routeButton` where the user can select the output target (airplay, headphones)