Awesome

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 or like it's described here.
3. Inside your code include JS part by adding

import VolumeSlider from 'react-native-volume-slider';

5. Connect your device and run application! (NOTE: MPVolumeView works only on physical devices)

Volume Slider

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 (
      <View>
        <VolumeSlider
          style={styles.slider}
          thumbSize={{
            width: 8,
            height: 8
          }}
          thumbTintColor="rgb(146,146,157)"
          minimumTrackTintColor="rgb(146,146,157)"
          maximumTrackTintColor="rgba(255,255,255, 0.1)"
          showsRouteButton={true}
          onValueChange={this.volumeChange.bind(this)} />
      </View>
    );
  }
};

const styles = StyleSheet.create({
  slider: {
    height: 30,
    marginLeft: 7,
  }
});

Props

style

View styles...

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)