react-native-control-volume
v0.1.0
Published
Control device volume for iOS and Android
Downloads
28
Maintainers
Readme
react-native-control-volume
Control device volume for iOS and Android.
First installation step (applied for both iOS & Android)
$ npm install react-native-control-volume --save
2. Automatic installation
$ react-native link react-native-control-volume
3. Manual installation
- In XCode, in the project navigator, right click
Libraries
➜Add Files to [your project's name]
- Go to
node_modules
➜react-native-control-volume
=>ios
- add
ReactNativeControlVolume.xcodeproj
to the Libraries folder in your XCode project
- add
- In XCode, in the project navigator, select your project. Add
libReactNativeControlVolume.a
to your project'sBuild Phases
➜Link Binary With Libraries
- Run your project (
Cmd+R
)
Android
Manual installation
- In Android Studio open
Module Settings
and add a Gradle Project. - Look for
react-native-control-volume
android folder and link with a Gradle. - Open MyApplication.java from main app and put the ReactNativeControlVolumePackage
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RNControlVolumePackage()
);
}
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 ControlVolume, {
ControlVolumeEvents
} from "react-native-control-volume";
import Slider from '@react-native-community/slider';
class App extends React.Component {
state = {
volume: 0
}
async componentDidMount() {
this.setState({
volume: await ControlVolume.getVolume()
});
// Add and store event listener
this.volEvent = ControlVolumeEvents.addListener(
"VolumeChanged",
this.volumeEvent
);
}
// Updates Slider UI when hardware buttons change volume
volumeEvent = event => {
this.setState({ volume: event.volume });
};
// Updates device volume
sliderChange(value) {
ControlVolume.change(value);
}
componentWillUnmount() {
// remove event listener
this.volEvent.remove();
}
render() {
return (
<Slider
value={this.state.volume}
onValueChange={this.sliderChange}
// Other props
/>
)
}
}