puckey / react-native-volume-control

Volume Control for iOS and Android

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

react-native-volume-control

Control device volume for iOS and Android.

First installation step (applied for both iOS & Android)

$ npm install react-native-volume-control --save

2. Automatic installation

$ react-native link react-native-volume-control

3. Manual installation

  1. In XCode, in the project navigator, right click LibrariesAdd Files to [your project's name]
  2. Go to node_modulesreact-native-volume-control => ios
    • add ReactNativeVolumeControl.xcodeproj to the Libraries folder in your XCode project
  3. In XCode, in the project navigator, select your project. Add libReactNativeVolumeControl.a to your project's Build PhasesLink Binary With Libraries
  4. Run your project (Cmd+R)

Android

Manual installation

  1. In Android Studio open Module Settings and add a Gradle Project.
  2. Look for react-native-volume-control android folder and link with a Gradle.
  3. Open MyApplication.java from main app and put the ReactNativeVolumeControllerPackage
 @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new RNVolumeControlPackage()
      );
    }

Usage

This component only exposes an api to update device volume and listens for VolumeChanged events via hardware buttons. There is no UI component included.

// Other imports
...

import VolumeControl, {
  VolumeControlEvents
} from "react-native-volume-control";
import Slider from '@react-native-community/slider';

class App extends React.Component {
  state = {
    volume: 0
  }

  async componentDidMount() {
    this.setState({
      volume: await VolumeControl.getVolume()
    });

    // Add and store event listener
    this.volEvent = VolumeControlEvents.addListener(
      "VolumeChanged",
      this.volumeEvent
    );
  }

  // Updates Slider UI when hardware buttons change volume
  volumeEvent = event => {
    this.setState({ volume: event.volume });
  };

  // Updates device volume
  sliderChange(value) {
    VolumeControl.change(value);
  }

  componentWillUnmount() {
    // remove event listener
    this.volEvent.remove();
  }

  render() {
    return (
      <Slider
        value={this.state.volume}
        onValueChange={this.sliderChange}
        // Other props
      />
    )
  }
}

About

Volume Control for iOS and Android

License:MIT License


Languages

Language:Java 57.7%Language:Objective-C 32.1%Language:Ruby 7.5%Language:JavaScript 2.6%