react-native-audio-floating-widget

This repo is like a "Chat Head" but for audio :), i hope it helps somebody.

Thanks to Cleveroad for https://android-arsenal.com/details/1/3494#

Getting started

$ npm install react-native-audio-floating-widget --save

Mostly automatic installation

$ react-native link react-native-audio-floating-widget

Manual installation

Android

1. Open up android/app/src/main/java/[...]/MainActivity.java

• Add import ce.go.dai.RNAudioFloatingWidgetPackage; to the imports at the top of the file
• Add new RNAudioFloatingWidgetPackage() to the list returned by the getPackages() method

2. Append the following lines to android/settings.gradle:

   include ':react-native-audio-floating-widget' project(':react-native-audio-floating-widget').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-audio-floating-widget/android') 

3. Insert the following lines inside the dependencies block in android/app/build.gradle:

     compile project(':react-native-audio-floating-widget') 

4. Add the following lines in your MainActivity.java, are mandatory in order to request permission for overlay apps in Android 6+:

   private static final int CODE_DRAW_OVER_OTHER_APP_PERMISSION = 2084;      @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);          //Check if the application has draw over other apps permission or not?         //This permission is by default available for API<23. But for API > 23         //you have to ask for the permission in runtime.         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M && !Settings.canDrawOverlays(this)) {              //If the draw over permission is not available open the settings screen             //to grant the permission.             Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,                     Uri.parse("package:" + getPackageName()));             startActivityForResult(intent, CODE_DRAW_OVER_OTHER_APP_PERMISSION);         }     }      @Override     protected void onActivityResult(int requestCode, int resultCode, Intent data) {         super.onActivityResult(requestCode, resultCode, data);         if (requestCode == CODE_DRAW_OVER_OTHER_APP_PERMISSION) {             if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M && Settings.canDrawOverlays(this)) {                 // now you can show audio widget             }         }     } 

Usage

import AudioFloatingWidget from 'react-native-audio-floating-widget';  componentDidMount(){         //use just .show(), for default colors         AudioFloatingWidget.show({             withOptions : true,             bubblesMinSize : 50,             bubblesMaxSize: 80,             buttonPadding : 20,             darkColor : "#000000",             lightColor : "#ffffff",             crossColor : "#eeeeee",             crossStrokeWidth : 4,             crossOverlappedColor : "#000000",             progressColor : "#ffffff",             shadowColor : "#cccccc",             shadowRadius : 5,             shadowDx : 5,             shadowDy : 8,             expandWidgetColor : "#f1f1f1"         }); }  componentWillMount() {      // this package has eventListeners that you can manage via DeviceEventEmitter;          DeviceEventEmitter.addListener(          'onPlayPauseClicked',          (params) => {                 alert(params.isPlaying)          }      );            //please view available methods in docs }

Available Methods

Available Listeners

Available Options

Methods not implemented (PR)

.playDrawable(...) .pauseDrawable(...) .playlistDrawable(...) .prevTrackDrawale(...) .nextTrackDrawable(...) .defaultAlbumDrawable(...) .edgeOffsetXCollapsed(...) .edgeOffsetYCollapsed(...) .edgeOffsetXExpanded(...) .edgeOffsetYExpanded(...) 

Of course, PR are welcome :)