The error :

soro@soro-hp-notebook:~/Documents/react-native-floating-bubble/testApp$ npm run start

[email protected] start
react-native start

┌──────────────────────────────────────────────────────────────────────────────┐
│ │
│ Running Metro Bundler on port 8081. │
│ │
│ Keep Metro running while developing on any JS projects. Feel free to │
│ close this tab and run your own Metro instance if you prefer. │
│ │
│ https://github.com/facebook/react-native │
│ │
└──────────────────────────────────────────────────────────────────────────────┘

Looking for JS files in
/home/soro/Documents/react-native-floating-bubble/testApp

Loading dependency graph, done.
Loading dependency graph...Failed to construct transformer: Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:133:10)
at stableHash (/home/soro/Documents/react-native-floating-bubble/testApp/node_modules/metro-cache/src/stableHash.js:19:8)
at JsTransformer.getCacheKey (/home/soro/Documents/react-native-floating-bubble/testApp/node_modules/metro/src/JSTransformer/worker.js:456:7)
at getTransformCacheKey (/home/soro/Documents/react-native-floating-bubble/testApp/node_modules/metro/src/DeltaBundler/Transformer/getTransformCacheKey.js:39:29)
at new Transformer (/home/soro/Documents/react-native-floating-bubble/testApp/node_modules/metro/src/DeltaBundler/Transformer.js:147:28)
at /home/soro/Documents/react-native-floating-bubble/testApp/node_modules/metro/src/Bundler.js:54:29
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Currently, the bubble will stay there even the app got closed/killed
How could I destroy the bubble after the app is closed?
Thanks for your help

I am using react-native v 0.64
The bubble is showing only in-app, it is not showing when the app in the background, but when I open the app again from recent apps, the bubble is still there.

More than 1 bubble shows up and it looks like randomly happens. I'm showing bubble on background notification. Tried to look at the java codes I couldnt do anything

  setBackgroundMessageHandler(props){
        console.log('setBackgroundMessageHandler listener');
        // 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
        if(Platform.OS === 'android'){
            requestPermission().then(() => console.log("Permission Granted")).catch(() => console.log("Permission is not granted"))

            // Initialize bubble manage
            initialize().then(() => console.log("Initialized the bubble mange"))
        }
        return firebase.messaging().setBackgroundMessageHandler(async remoteMessage => {
            if(Platform.OS === 'android'){
            // Show Floating Bubble: x=10, y=10 position of the bubble
            hideFloatingBubble().then(() => console.log("Floating Bubble Removed"));
            showFloatingBubble(10, 10).then(() => props.handleAddAlarm(remoteMessage.notification));
            DeviceEventEmitter.addListener("floating-bubble-press", (e) => {
                Linking.openURL('appName://').then((data) => {
                    //fetch new orders
                })
                .catch((e) => {
                    console.log('Error opening app',e);
                });
                hideFloatingBubble().then(() => console.log("Floating Bubble Removed"));
                props.handleStopAlarm();
            });
            DeviceEventEmitter.addListener("floating-bubble-remove", (e) => {
                console.log("Remove Bubble")
                props.handleStopAlarm();
            });
        }
        });
    }

I experienced failed build due package name. Here the error I get when using v1.0.12:

ERROR

> Task :app:mergeDexStagsecondStagingsec FAILED
~/project-name/node_modules/react-native-disable-battery-optimizations-android/android/build/.transforms/2f8d9ac22f329154eba2ca6aec913408/classes/classes.dex: D8: Type com.reactlibrary.BuildConfig is defined multiple times: ~/project-name/node_modules/react-native-disable-battery-optimizations-android/android/build/.transforms/2f8d9ac22f329154eba2ca6aec913408/classes/classes.dex, ~/project-name/node_modules/react-native-floating-bubble/android/build/.transforms/4f404a63be8db34e91eef9a57a90a10d/classes/classes.dex
com.android.builder.dexing.DexArchiveMergerException: Error while merging dex archives: 
Learn how to resolve the issue at https://developer.android.com/studio/build/dependencies#duplicate_classes.
Type com.reactlibrary.BuildConfig is defined multiple times: ~/project-name/node_modules/react-native-disable-battery-optimizations-android/android/build/.transforms/2f8d9ac22f329154eba2ca6aec913408/classes/classes.dex, ~/project-name/node_modules/react-native-floating-bubble/android/build/.transforms/4f404a63be8db34e91eef9a57a90a10d/classes/classes.dex

Related error: https://stackoverflow.com/questions/60507686/type-buildconfig-is-defined-multiple-times

CAUSE
Because the package using default name com.reactlibrary which conflict with other library.

SOLUTION
I manage to make it work by changing 3 files: huedaya@c6d98b6

• AndroidManifest.xml
• RNFloatingBubbleModule.java
• RNFloatingBubblePackage.java

TEMPORARY SOLUTION
For who need quick solution, you can use my fork by changing the package.json:

{
    "dependencies": {
        ...
        "react-native-floating-bubble": "git+https://github.com/huedaya/react-native-floating-bubble",
    }
 }

this package requires the really old versions of react-native ^0.41.2. Will this ever be updated ?

initialize().then(() => console.log('Initialized the bubble mange'));

app getting crash.

It's happening in Android Oreo.

Recently I've submitted a PR that allows the user open the application by tapping on the bubble button, can you update the release for this last commit on the master branch?

The function I trigger by DeviceEventEmitter.addListener ('floating-bubble-press', () => {} is a native PendingIntent, console.log is also delayed

you say that
Add new RNFloatingBubblePackage() to the list returned by the getPackages() method
but I can find where the getPackages() method. This is my MainActivity.java

`
package com.voicecontrolapp;

import com.facebook.react.ReactActivity;
import com.reactlibrary.RNFloatingBubblePackage;
public class MainActivity extends ReactActivity {

/**

• Returns the name of the main component registered from JavaScript. This is used to schedule
• rendering of the component.
  */
  @OverRide
  protected String getMainComponentName() {
  return "VoiceControlApp";
  }
  }
  `
  I'm using react-native 0.64.0

Hi,
I am getting this error after show bubble and close - re open app several times i get

I want that when user click on floating bubble, then icon of bubble should change so that i can show some info on button like play icon , pause icon ,stop icon . Please help

Can anyone who has handled it leave me a reference?
thanks everyone.

i want to open some app from my app with some data and in that whole screen transparent overlay with some information and after some time ring back to app.
can it be done with this or somone help i will pay for this.
Thanks

I'm trying to run pod install after installing the lib and I get the following error:

java.lang.RuntimeException: Unable to create application com.kikliko.MainApplication: java.lang.RuntimeException: Requested enabled DevSupportManager, but DevSupportManagerImpl class was not found or could not be created React-native

I want to render two bubbles joint, is there a way or workaround to do that

Hi, I'm testing this library on a Honeywell EDA51-1 (Android 8.1), and have some trouble with the bubble. I'm trying to add the ability to open and app after pressing the bubble. For that, I'm using a library, react-native-invoke-app.

Expected behavior: when the app goes to background, the bubble should appear. If the user wants to bring the app back to the foreground, he can press the bubble and it should disappear after the app comes back.

Actual behavior: when the app is in the background, and I press the bubble, the behavior can be very unpredictable. Sometime the app will come to the foreground after just a second and the bubble will be removed, sometimes I have to wait about 3-5 seconds for the app to appear, and sometime it won't work at all. In addition, after the app comes to the foreground, sometimes the bubble won't disappear. If the bubble won't hide, then after minimizing the app, two bubbles will be present on the screen. I console log most of the events, like in the example, and some crazy stuff happens here, like the bubble being removed over a hundred times in one moment.

How to reproduce: here is my App.js file

import {Provider} from 'react-redux';
import {store, persistor} from './src/store';
import {PersistGate} from 'redux-persist/integration/react';
import React, {Component} from 'react';
import {DeviceEventEmitter, AppState} from 'react-native';
import Root from './src/index.js';
import invokeApp from 'react-native-invoke-app';
import {
  initialize,
  showFloatingBubble,
  hideFloatingBubble,
  requestPermission,
} from 'react-native-floating-bubble';

class App extends Component {
  initializeBubble = async () => {
    initialize().then(() => console.log('Initialized the bubble mange'));
  };

  getPermissions = async () => {
    requestPermission()
      .then(() => console.log('Permission Granted'))
      .catch(() => console.log('Permission is not granted'));
  };

  showBubble = async () => {
    showFloatingBubble(10, 10).then(() => console.log('Floating Bubble Added'));
  };

  hideBubble = async () => {
    hideFloatingBubble().then(() => console.log('Floating Bubble Removed'));
  };

  componentDidMount() {
    this.getPermissions().then(() => this.initializeBubble());

    DeviceEventEmitter.addListener('floating-bubble-press', (e) => {
      // What to do when user press the bubble
      invokeApp();
      console.log('Press Bubble');
    });

    DeviceEventEmitter.addListener('floating-bubble-remove', (e) => {
      // What to do when user removes the bubble
      console.log('Remove Bubble');
    });

    AppState.addEventListener('change', (e) => {
      console.log(e);
      if (e === 'active') this.hideBubble();
      if (e === 'background') this.showBubble();
    });
  }

  render() {
    return (
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <Root />
        </PersistGate>
      </Provider>
    );
  }
}
export default App;

I hope I explained the issue clearly enough. I might also add that I suspect that this might be an issue with invokeApp, and not really related to the bubble library. Or maybe somebody can offer a better approach to this functionality.

I change the bubble of the library. now I want when I add a new bubble I need to pass some random text to that bubble.
the second issue is that after changing the view of the bubble now the bubble is not closing with drag. on the hiding button, it is still working. instead of the name tag, I just want to show the number that I have received.
https://user-images.githubusercontent.com/72066902/103134890-2c977080-46d6-11eb-9819-251beacd0693.png

Would it be possible to extend this library to support multiple bubbles or are there any limitations?

Adding a new bubble would return an id, and pressing/removing bubble includes this id in the event, so we can know which is the bubble related with the action.

It crashes upon initialization.

When I call the method hideFloatingBubble() is it possible to hide all the bubbles from the screen? I would like to have one bubble at a time. Is it possible to display just one bubble?
Thanks for your help :) How can I detect that a bubble is already displayed in the screen?

I added my new icon in the exact path mentioned in README.md file. But the icon was not updated.
Later I came to know that the specified path was actually inside the node_modules folder inside the react-native-floating-bubble project. How to change the icon without making changes in the node_modules folder.

Legally no one can fork and modify this repo.

Please update compile 'com.facebook.react:react-native:+' to implementation 'com.facebook.react:react-native:+' in "node_modules/react-native-floating-bubble/android/build.gradle" to make it work on newer android devices.