Trouble with bubble when bringing app back from foreground

[PhillJaySaw]

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.

[janakact]

Perhaps adding,

      subscriptionPress.remove();
      subscriptionRemove.remove();
      hideBubble();

to the componentWillUnmount will fix the problem. Not so sure though. :smile:

Please check the example. We use hooks there, but hope you get the idea. https://github.com/hybriteq/react-native-floating-bubble/blob/master/testApp/App.js

[sho19]

i tried doing the samething and it is somewhat working

`import React from 'react'; import { showFloatingBubble, hideFloatingBubble, requestPermission, checkPermission, initialize } from "react-native-floating-bubble"; import { SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar, DeviceEventEmitter, AppState } from 'react-native';

import { Header, LearnMoreLinks, Colors, DebugInstructions, ReloadInstructions, } from 'react-native/Libraries/NewAppScreen';

const App: () => React$Node = () => { // 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

React.useEffect(() => { 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") });

AppState.addEventListener('change', (e) => {
  if (e === 'active')  hideFloatingBubble().then(() => console.log("Floating Bubble Removed"));
  if (e === 'background') showFloatingBubble(10, 10).then(() => console.log("Floating Bubble Added"));
});

return () => {
  DeviceEventEmitter.removeAllListeners()
}

}, []) return ( <>

  <SafeAreaView>
    {/* <View onPress={()=>{
      requestPermission()
    }}> */}
    <View>
      <Text>{"request permissions"}</Text>

      <Text onPress={() => {
        initialize()
      }}>{"start buble"}</Text>

      <Text onPress={() => {
        showFloatingBubble(10, 10)
          .then(() => console.log("Floating Bubble Added"));
      }}>{"start buble"}</Text>

      <Text onPress={() => {
        // Hide Floatin Bubble
        hideFloatingBubble()
          .then(() => console.log("Floating Bubble Removed"));
      }}>{"stop buble"}</Text>
    </View>
  </SafeAreaView>
</>

); };

const styles = StyleSheet.create({ scrollView: { backgroundColor: Colors.lighter, }, engine: { position: 'absolute', right: 0, }, body: { backgroundColor: Colors.white, }, sectionContainer: { marginTop: 32, paddingHorizontal: 24, }, sectionTitle: { fontSize: 24, fontWeight: '600', color: Colors.black, }, sectionDescription: { marginTop: 8, fontSize: 18, fontWeight: '400', color: Colors.dark, }, highlight: { fontWeight: '700', }, footer: { color: Colors.dark, fontSize: 12, fontWeight: '600', padding: 4, paddingRight: 12, textAlign: 'right', }, });

export default App; `

[no-1ne]

Try creating it as a service

[Hoai-Phong]

I have consulted you, but have you ever done click show 1 interface like facebook messenger, can you suggest me.

[Sargnec]

Aynone tries to get app to foreground use this https://stackoverflow.com/a/61790617/11685348