Dimensions.removeEventListener is deprecated and causes responsive-navite to fail

[tghpereira]

Hello Diego, how are you?
I am a student on the Rocketseat platform. I encountered some responsiveness issues across different screen densities in my apps, which led to layout breakage. While researching, I came across your code contribution that was incredibly helpful to me.

Studying your implementation, I noticed that the removeEventListener function was removed from Dimensions. To remove the event from the listener, you simply need to receive the removal function as a return from the Dimensions.addEventListener declaration on line 89 of the ScreenProvider.tsx file within the context.

useEffect(() => {
    currentBreakpoint.current = breakpoint;
  }, [breakpoint]);

useEffect(() => {
  const subscriber = Dimensions.addEventListener("change", handleScreenResize);

  return () => {
    subscriber.remove();
  };
}, [handleScreenResize]);

and this code snippet might be able to solve the StatusBar height problem in the utility function in getStatusBarOffset.ts through a native call to IOS, as the new models are being changed, I had no way to test the code below for not owning an iphone

import { useEffect, useState } from "react";
import {
  StatusBar,
  NativeEventEmitter,
  NativeModules,
  Platform,
} from "react-native";

const { StatusBarManager } = NativeModules;

export default function useStatusBarHeight() {
  const [value, setValue] = useState(StatusBar.currentHeight || 0);

  useEffect(() => {
    if (Platform.OS !== "ios") return;

    const emitter = new NativeEventEmitter(StatusBarManager);

    StatusBarManager.getHeight(({ height }: { height: number }) => {
      setValue(height);
    });
    const subscriber = emitter.addListener("statusBarFrameWillChange", (data) =>
      setValue(data.frame.height)
    );

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

  return value;
}
``