Expo Battery in Functional Component

How to / Third Party Tooling
1 
   Battery.addBatteryLevelListener(({ batteryLevel }) => {
      batteryLevel = Math.round(batteryLevel * 100);
      setLevel(batteryLevel);
      if (batteryLevel == alarmat) {
        playAlert();
      }
    });

I am using this inside a function. Now how to remove this event listener ?

2

I think you’re looking for the useEffect hook. See here for an example:

See the following for more info:

3

Actually I am using useEffect to remove the event listener but its not working. May be I am in wrong syntax or something else as I mentioned bellow:

let EventSubscription = {};

const fun1 = async () => {
  EventSubscription = Battery.addBatteryLevelListener(({ batteryLevel }) => {
    console.log('Change');
    batteryLevel = Math.round(batteryLevel * 100);
    setLevel(batteryLevel);
    if (batteryLevel == alarmat) {
      playAlert();
    }
  });
}

useEffect(() => {
  return () => {
    EventSubscription.remove();
    EventSubscription = null;
  };
}

But still when battery onChange for first time then execute console.log('Change') one time,
when onChnage for second time then execute console.log('Change') two times and so on and so forth.

4

Does this work for you?

5

No sir. It still have same issue. Here is my code.

6

Hi

You have the following in useEffect:

    return unsubscribe();

You should not call unsubscribe() in useEffect. You should just return it, like this:

    return unsubscribe;

You’re also calling getLevel in multiple places, but getLevel sets up the subscription to the battery level notifications. You should only call it once (and rather with a name like subscribe) in useEffect. Then whenever you want to reference the current battery level you should use the level variable. The level variable will be updated by the setLevel(batteryLevel) call on line 36.

I think it would also be better not to mix up the code for the “alarm” (which I’d rather call an “alert” or a “threshold”) with the code that subscribes to the battery level.

I think it would be easier to figure out what’s going on if you first get it working without the “alarm” stuff. Once you’ve got that working, try adding in the other stuff piece by piece. Then if something stops working as you expect it will be easier to figure out what went wrong.

If you really want to re-subscribe to the battery level changes when the “alarm” level changes you should put alarmat into useEffect’s dependency array.

EDIT:
Another issue (also with my code) is that we should use useRef for the subscription.

1 Like