I am having difficulty in determining the height of a header in the headerTitle option of a stackNavigator. when I attempt to use the useHeaderheight hook outside a screen component, it returns a 'Couldn't find the header height. Are you inside a screen in a navigator with a header?' error. Who can suggest a work around please?
You can access the header height using the following method. Note that this is a deprecated method by react-navigation so you will get a warning when using the following, but it works.
import { Header } from 'react-navigation';
Header.HEIGHT;
Related
I am running the code posted (for Class Component) at:
https://reactnative.dev/docs/dimensions
Yet, at the Android Studio simulator, If I "rotate" the device the dimension's values do not change i.e. I was expecting that the height and width could change with the rotation but this is not happening. Any ideas why?
According to the info posted at the previous link it says:
Although dimensions are available immediately, they may change (e.g due to device rotation, foldable devices etc) so any rendering logic or styles that depend on these constants should try to call this function on every render, rather than caching the value (for example, using inline styles rather than setting a value in a StyleSheet).
I also tried using using useWindowDimensions but this is limited to functional react components.
So far, I can not find a reliable way to detect if an Android device rotated using React-Native and class components :-(
Note: This problem also happens with React Function Component
Try: https://reactnative.dev/docs/usewindowdimensions
It works for me
import { useWindowDimensions } from 'react-native';
const { height, width } = useWindowDimensions();
I had the same problem. Upgrading react-native to version 0.64.2 fixed it.
My problem on 0.61.5 was not that the values were not correct, but that the view was not re-rendered at all after the rotation, so I added this to the constructor() and it worked:
Dimensions.addEventListener('change', () => {
this.setState({});
});
I want to open drawer with touching anywhere on screen.I tried with minSwipeDistance property of drawer navigator.Although I didn't get error It didn't work.How should I implement this process into my code? If anyone knows help me please! Thanks in advance!
For React Navigation V5
put this to take the device width
function ProfileDrawer() {
const dimensions = useWindowDimensions();
and edgeWidth is what you want I think
<Drawer.Navigator initialRouteName="Profile"
edgeWidth={dimensions.width}
>
You can check the Official Page to see detail for DrawerNavigator:
https://reactnavigation.org/docs/drawer-navigator#props
I have been searching for a good way to get the height of the Header component of a react-native stack navigator to no avail. I've come across a stale, complicated answer that doesn't provide the header height specifically, but seems to unavoidably combine the bottom tab bar height as well. I'd like to know how to calculate the height of just the navigation header and status bar with react-navigation.
For reference, my project is using react-navigation 3.11 however I would happily attempt an upgrade if there is a solution involving features exclusive to 4.x. I have checked the documentation and see how I could supply a static header style but I don't want this. I'd just like to be able to access the navigation header style's height attribute from within a view.
Thanks.
In React Navigation >4.x you can use HeaderHeightContext or useHeaderHeight with React's Context API to get the height of the header:
import { HeaderHeightContext } from '#react-navigation/stack';
// ...
<HeaderHeightContext.Consumer>
{headerHeight => (
/* ... */
)}
</HeaderHeightContext.Consumer>
or
import { useHeaderHeight } from '#react-navigation/stack';
// ...
const headerHeight = useHeaderHeight();
In React Native, using the following:
<StatusBar backgroundColor={config.colors.backgroundGray} barStyle="dark-content" />
works well. However when navigating to a different screen, even though the above is the only instance of StatusBar used in the entire app, the status bar style turns to what essentially is "light-content" on its own. Rendering the StatusBar component deeper in again seems to yield no results.
The backgroundColor is controllable however. Any ideas?
You can apply Statusbar's own function to App.js.
App.js
import { StatusBar } from 'react-native';
StatusBar.setBarStyle('dark-content', true);
static setBarStyle(style: StatusBarStyle, [animated]: boolean)
I'm using onLayout to detect screen orientation and it's working fine inside my root view, but when I implemented inside the drawer it didn't work, any reason why this happens ?
code :
import Drawer from 'react-native-drawer'
...
onLayout(e) {
console.log('onLayout');
}
<Drawer onLayout={this.onLayout}
It didn't log any thing when orientation changed!
This is because the Drawer component doesn't take onLayout as a prop. You can see in the source code that the rendered View does use onLayout, but it's not pulling from something like this.props.onLayout.
I'm not exactly sure what you're looking to do, but maybe this issue will help you. As it shows, you can pass a function into openDrawerOffset instead of an integer or a ratio in order to be a little more dynamic with how you set your offset:
openDrawerOffset={(viewport) => {
if (viewport.width < 400) {
return viewport.width * 0.1;
}
return viewport.width - 400;
}}
You might also benefit from the Event handlers that react-native-drawer has to offer.