https://github.com/IFours/react-native-volume-slider

React Native VolumeView component
https://github.com/IFours/react-native-volume-slider

Last synced: 6 days 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 9 years ago)
• Default Branch: master
• Last Pushed: 2022-09-10T02:15:10.000Z (over 2 years ago)
• Last Synced: 2024-12-06T21:35:32.780Z (7 days 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)