react-native-floating-bubble

A simple Facebook Chat Head like bubble for react native. Special thanks to bubble-for-android because this is just react native wrapper for that library.

Installation

$ npm install react-native-floating-bubble --save

Mostly automatic installation

$ react-native link react-native-floating-bubble

Manual installation

Android

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

• Add import com.reactlibrary.RNFloatingBubblePackage; to the imports at the top of the file
• Add new RNFloatingBubblePackage() to the list returned by the getPackages() method

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

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

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

     compile project(':react-native-floating-bubble')
   

iOS

1. This library is not supported for iOS. This functionality is not there.

Usage

Methods

1import { showFloatingBubble, hideFloatingBubble, requestPermission, initialize } from "react-native-floating-bubble"
2
3// To display the bubble over other apps you need to get 'Draw Over Other Apps' permission from androind.
4// If you initialize without having the permission App could crash
5requestPermission()
6	.then(() => console.log("Permission Granted"))
7	.catch(() => console.log("Permission is not granted"))
8	
9// Initialize bubble manage
10initialize()
11	.then(() => console.log("Initialized the bubble mange"))
12
13
14// Show Floating Bubble: x=10, y=10 position of the bubble
15showFloatingBubble(10, 10)
16	.then(() => console.log("Floating Bubble Added"));
17
18// Hide Floatin Bubble
19hideFloatingBubble()
20	.then(() => console.log("Floating Bubble Removed"));

Events

You can listen to bubble press and bubble remove events using DeviceEventEmitter.

Events: floating-bubble-press, floating-bubble-remove

1    DeviceEventEmitter.addListener("floating-bubble-press", (e) => {
2		// What to do when user press the bubble
3		console.log("Press Bubble")
4    });
5    DeviceEventEmitter.addListener("floating-bubble-remove", (e) => {
6		// What to do when user removes the bubble
7		console.log("Remove Bubble")
8    });

Change Bubble Icon

Place the icon file as android/app/src/main/res/drawable/bubble_icon.png

Contribute

If you want to contribute the source code is here. https://github.com/hybriteq/react-native-floating-bubble