2

StatusBarIOS has a method addListener which allows us to listen for changes to the status bar height, like so:

StatusBarIOS.addListener('statusBarFrameWillChange', (statusBarData) => {
  this.setState({statusBarHeight: statusBarData.frame.height});
});

StatusBarIOS is deprecated, with a message that the code has been merged into StatusBar

enter image description here

How can we listen for the statusBarFrameWillChange event?

1 Answer 1

5

You can use the NativeEventEmitter module, here's an example of a react hook using the module to get the status bar height.

import React, { useState, useEffect } from 'react';
import { NativeEventEmitter, NativeModules } from 'react-native';

const { StatusBarManager } = NativeModules;

export default function useStatusBarHeight() {
  const [value, setValue] = useState();

  useEffect(() => {
    const emitter = new NativeEventEmitter(StatusBarManager);
    StatusBarManager.getHeight((statusBarFrameData) => setValue(statusBarFrameData.height));
    const listener = emitter.addListener('statusBarFrameWillChange', (data) => setValue(data.frame.height));

    return () => listener.remove();
  }, []);

  return value;
}

This snippet also uses the StatusBarManager to grab the initial height.

1
  • 1
    This answer should be in the official docs. They give no advice on migrating this event listener, not even a mention. Oct 21, 2020 at 11:38

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.