screenSizeContext.tsx

import React, { useState, createContext, useContext, useEffect } from "react";
import { Dimensions } from "react-native";

type ScreenSizeContextType = {
  windowWidth: number;
  windowHeight: number;
};

export const ScreenSizeContext = createContext<ScreenSizeContextType>({
  windowWidth: Dimensions.get("window").width,
  windowHeight: Dimensions.get("window").height
});

export const ScreenSizeProvider = ({ children }) => {
  const [windowWidth, setWindowWidth] = useState<number>(
    Dimensions.get("window").width
  );
  const [windowHeight, setWindowHeight] = useState<number>(
    Dimensions.get("window").height
  );
  const handleChangeWindowSize = (e) => {
    const { width, height } = e.window
    setWindowWidth(width);
    setWindowHeight(height);
  };
  useEffect(() => {
    Dimensions.addEventListener("change", handleChangeWindowSize);
    return Dimensions.removeEventListener("change", handleChangeWindowSize);
  }, []);
  return (
    <ScreenSizeContext.Provider value={{ windowWidth, windowHeight }} >
      {children}
    </ScreenSizeContext.Provider>
  );
};

export const useScreenSize = () => useContext(ScreenSizeContext);

export default ScreenSizeProvider;