Comments (4)
I found a solution that seemed to work pefectly for me here: facebook/react-native#23693 (comment)
It essentially boils down to - load a full-size view component at your app root, then get the dimensions from the onLayout
prop's call argument e.nativeEvent.layout
.
Here's a minimal TypeScript hook for ease of use:
import React, { useContext, useState } from "react";
import { Dimensions, LayoutRectangle, View } from "react-native";
type LayoutSize = Pick<LayoutRectangle, "width" | "height">;
const ScreenDimensionsContext = React.createContext<LayoutSize | null>(null);
export const useActualDimensions = () => {
const dimensions = useContext(ScreenDimensionsContext);
if (!dimensions) throw new Error("useDimensions hook must be used inside provider");
return dimensions;
};
interface ScreenDimensionsProviderProps {
children: React.ReactNode;
}
export function ActualDimensionsProvider({ children }: ScreenDimensionsProviderProps) {
const [dimensions, setDimensions] = useState<LayoutSize>(Dimensions.get("window"));
return (
<ScreenDimensionsContext.Provider value={dimensions}>
<View style={{flex: 1}} onLayout={(e) => setDimensions(e.nativeEvent.layout)}>
{children}
</View>
</ScreenDimensionsContext.Provider>
);
}
from react-native-extra-dimensions-android.
@JeffreyVanelderenACA Thanks for letting me know. I'll look at testing this on the latest RN version, but likely in the New Year. I've a lot of different on-going projects that require my attention.
from react-native-extra-dimensions-android.
I had the same feeling as @JeffreyVanelderenACA, I was looking for an alternative but could not find any.
from react-native-extra-dimensions-android.
Any news?
from react-native-extra-dimensions-android.
Related Issues (20)
- 你好,有小米/华为/vivo这类手机虚拟导航条显示隐藏监听的方法吗 HOT 7
- Add method to check if soft buttons are present HOT 6
- SOFT_MENU_BAR_HEIGHT is wrong on Pixel 3 XL HOT 4
- Default Android versioning HOT 2
- ExtraDimensions.isSoftMenuBarEnabled() always returns false HOT 11
- Android build fail HOT 11
- Add index.d.ts into npm release HOT 3
- Inconsistent results HOT 4
- Update RNPM for RN 0.60+ HOT 17
- ExtraDimensions not defined. HOT 1
- Cannot get height value. ExtraDimensions.getRealWindowHeight() give empty value.
- Can update to the non rnpm version
- Wrong values HOT 3
- SOFT_MENU_BAR_HEIGHT is returning 0 HOT 2
- Typescript declaration file
- Deprecation in next release FYI HOT 1
- How to achieve `useWindowDimensions` with this library?
- Unable to resolve module HOT 1
- WARNING: this package breaks keyboard events and can potentially lead to a hidden tabbar HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-extra-dimensions-android.