jrshikoku/stateBox/useDeviceOrientationChange.js
2024-03-09 13:48:53 +00:00

39 lines
1.1 KiB
JavaScript

import React, { createContext, useContext, useState, useEffect } from "react";
import { useWindowDimensions } from "react-native";
import * as ScreenOrientation from "expo-screen-orientation";
const initialState = { isLandscape: false, setIsLandscape: () => {} };
const DeviceOrientationChange = createContext(initialState);
export const useDeviceOrientationChange = () => {
return useContext(DeviceOrientationChange);
};
export const DeviceOrientationChangeProvider = ({ children }) => {
const [isLandscape, setIsLandscape] = useState(false);
const { height, width } = useWindowDimensions();
const data = async () => {
await ScreenOrientation.lockAsync(
ScreenOrientation.OrientationLock.PORTRAIT_UP
);
};
useEffect(() => {
data();
//ScreenOrientation.unlockAsync();
}, []);
useEffect(() => {
if (height / width > 1.5) {
setIsLandscape(false);
}
if (height / width < 1.5) {
//setIsLandscape(true);
}
}, [height, width]);
return (
<DeviceOrientationChange.Provider value={{ isLandscape, setIsLandscape }}>
{children}
</DeviceOrientationChange.Provider>
);
};