Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

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

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

Last synced: 28 days ago
JSON representation

React Native VolumeView component

Lists

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)