mirror of
https://github.com/zhigang1992/nativewind.git
synced 2026-06-15 10:17:54 +08:00
fix: inline useDeviceOrientation to remove need to transpile
This commit is contained in:
19
package-lock.json
generated
19
package-lock.json
generated
@@ -1,16 +1,15 @@
|
||||
{
|
||||
"name": "tailwindcss-react-native",
|
||||
"version": "1.0.0",
|
||||
"version": "0.0.0",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "tailwindcss-react-native",
|
||||
"version": "1.0.0",
|
||||
"version": "0.0.0",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/types": "7.18.2",
|
||||
"@react-native-community/hooks": "^2.8.1",
|
||||
"css-mediaquery": "^0.1.2",
|
||||
"css-to-react-native": "^3.0.0",
|
||||
"micromatch": "^4.0.5",
|
||||
@@ -5711,15 +5710,6 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/@react-native-community/hooks": {
|
||||
"version": "2.8.1",
|
||||
"resolved": "https://registry.npmjs.org/@react-native-community/hooks/-/hooks-2.8.1.tgz",
|
||||
"integrity": "sha512-DCmCIC0Gn9m6K0Mlg2MwNmTxMEpBu5lTLsI6b/XUAv/vLGa6o+X7RhCai4FWeqkjCU36+ZOwaLzDo4NBWMXaoQ==",
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0",
|
||||
"react-native": ">=0.59"
|
||||
}
|
||||
},
|
||||
"node_modules/@react-native/assets": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@react-native/assets/-/assets-1.0.0.tgz",
|
||||
@@ -25606,11 +25596,6 @@
|
||||
"ora": "^3.4.0"
|
||||
}
|
||||
},
|
||||
"@react-native-community/hooks": {
|
||||
"version": "2.8.1",
|
||||
"resolved": "https://registry.npmjs.org/@react-native-community/hooks/-/hooks-2.8.1.tgz",
|
||||
"integrity": "sha512-DCmCIC0Gn9m6K0Mlg2MwNmTxMEpBu5lTLsI6b/XUAv/vLGa6o+X7RhCai4FWeqkjCU36+ZOwaLzDo4NBWMXaoQ=="
|
||||
},
|
||||
"@react-native/assets": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@react-native/assets/-/assets-1.0.0.tgz",
|
||||
|
||||
@@ -47,7 +47,6 @@
|
||||
],
|
||||
"dependencies": {
|
||||
"@babel/types": "7.18.2",
|
||||
"@react-native-community/hooks": "^2.8.1",
|
||||
"css-mediaquery": "^0.1.2",
|
||||
"css-to-react-native": "^3.0.0",
|
||||
"micromatch": "^4.0.5",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { createContext, PropsWithChildren, useContext } from "react";
|
||||
import { useWindowDimensions } from "react-native";
|
||||
import { useDeviceOrientation } from "@react-native-community/hooks";
|
||||
import { useDeviceOrientation } from "./use-device-orientation";
|
||||
|
||||
export interface DeviceMediaContext {
|
||||
width: number;
|
||||
|
||||
60
src/context/use-device-orientation.ts
Normal file
60
src/context/use-device-orientation.ts
Normal file
@@ -0,0 +1,60 @@
|
||||
/**
|
||||
* ISC License (ISC)
|
||||
*
|
||||
* Copyright (c) 2018 - 2020 React Native Community
|
||||
*
|
||||
* Permission to use, copy, modify, and distribute this software for any
|
||||
* purpose with or without fee is hereby granted, provided that the above
|
||||
* copyright notice and this permission notice appear in all copies.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
|
||||
* WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
|
||||
* MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
|
||||
* ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
|
||||
* WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
|
||||
* ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
|
||||
* OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
|
||||
*/
|
||||
|
||||
/*
|
||||
* Source: https://github.com/react-native-community/hooks/blob/34548fb56e30cb115e9dfbf516663eaa862a50ea/src/useDeviceOrientation.ts
|
||||
*/
|
||||
import { useEffect, useState } from "react";
|
||||
import { Dimensions, ScaledSize } from "react-native";
|
||||
|
||||
const isOrientationPortrait = ({ width, height }: ScaledSize) =>
|
||||
height >= width;
|
||||
const isOrientationLandscape = ({ width, height }: ScaledSize) =>
|
||||
width >= height;
|
||||
|
||||
export function useDeviceOrientation() {
|
||||
const [orientation, setOrientation] = useState(() => {
|
||||
const screen = Dimensions.get("screen");
|
||||
return {
|
||||
portrait: isOrientationPortrait(screen),
|
||||
landscape: isOrientationLandscape(screen),
|
||||
};
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const onChange = ({ screen }: { screen: ScaledSize }) => {
|
||||
setOrientation({
|
||||
portrait: isOrientationPortrait(screen),
|
||||
landscape: isOrientationLandscape(screen),
|
||||
});
|
||||
};
|
||||
|
||||
const subscription = Dimensions.addEventListener("change", onChange);
|
||||
|
||||
return () => {
|
||||
if (typeof subscription?.remove === "function") {
|
||||
subscription.remove();
|
||||
} else {
|
||||
// React Native < 0.65
|
||||
Dimensions.removeEventListener("change", onChange);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
return orientation;
|
||||
}
|
||||
Reference in New Issue
Block a user