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
- 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 thegetPackages()method
- 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') - Insert the following lines inside the dependencies block in
android/app/build.gradle:compile project(':react-native-floating-bubble')
iOS
- This library is not supported for iOS. This functionality is not there.
Usage
Methods
import { showFloatingBubble, hideFloatingBubble, requestPermission, initialize } from "react-native-floating-bubble"
// To display the bubble over other apps you need to get 'Draw Over Other Apps' permission from androind.
// If you initialize without having the permission App could crash
requestPermission()
.then(() => console.log("Permission Granted"))
.catch(() => console.log("Permission is not granted"))
// Initialize bubble manage
initialize()
.then(() => console.log("Initialized the bubble mange"))
// Show Floating Bubble: x=10, y=10 position of the bubble
showFloatingBubble(10, 10)
.then(() => console.log("Floating Bubble Added"));
// Hide Floatin Bubble
hideFloatingBubble()
.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
DeviceEventEmitter.addListener("floating-bubble-press", (e) => {
// What to do when user press the bubble
console.log("Press Bubble")
});
DeviceEventEmitter.addListener("floating-bubble-remove", (e) => {
// What to do when user removes the bubble
console.log("Remove Bubble")
});
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
2.9k Jan 9, 2023
153 Oct 23, 2022
272 Dec 9, 2022
222 Dec 26, 2022
24 Feb 14, 2022
23.1k Dec 31, 2022
4.8k Jan 5, 2023
258 Dec 16, 2022
106 Nov 10, 2022
63 Feb 14, 2022
20.4k Jan 3, 2023
15.2k Jan 5, 2023
374 Dec 30, 2022
120 Dec 21, 2022
158 Dec 16, 2022
740 Jan 3, 2023
98 Dec 18, 2022
16.7k Jan 7, 2023