Is there a way to programmatically find the height of the Header bar (the one that shows 'Hitchhiking Map' on the following screenshot? I.e. the height from the top of the screen to the bottom of the Header bar.
A cross-platform solution would be ideal.
Edit: I'm using React Navigation which renders the header bar.
Try using TotalNavHeight like so:
import { Navigator } from 'react-native'
// ...
let height = Navigator.NavigationBar.Styles.General.TotalNavHeight
Related
Is it possible to change the height (or add a padding to its content) of a react-native-screens/native-stack header? The default react navigation header has different style properties (such as height) than the native one has. The action buttons on the right should have a few px space to the bottom of the header when the header is collapsed (content scrolled).
I am trying to create a mobile app using react native. I am using react navigation 4. I wanted to create a top bar navigation in a screen. That's why i used createMaterialTopTabNavigator. the top bas has two tab Ongoing and Finished. Now the top bar tab placed to the top of the app. But I want to place it underneath the left drawer navigator and the screen title. Please see this image. https://sarderitworld.com/demo/toptab.png
I am not getting any option for do this.
const deleveriesBottomTabWIthTopTabs = createMaterialTopTabNavigator({
OnGoing : DeleveriesOnGoingStackNavigator,
Finished : DeleveriesFinishedStackNavigator
})
const boottomTabNavigator = createBottomTabNavigator({
Deleveries : deleveriesBottomTabWIthTopTabs,
Request: RequestAsSenderStackNavigator
})
I want to place the top tab bar underneath after the left drawer menu and screen title.
I'm writing a React Native reusable component, which in some state needs to display an overlay on the screen. It seems that the way to do this, is using position:absolute. But that does not work very well in my situation, as the component is not child of the root-view and therefore cannot obtain the full screen area.
See this demo example on Snack:
https://snack.expo.io/#dennismadsen/position-absolute-test
In this case the position is obtained based on the position of the AssetExample element.
Here is how the above example looks like:
I would like the overlay to be positioned in the top of the screen like this:
How can I solve this?
Maybe get the width and height from Dimensions? that way you will always get 100%
import { .....,Dimensions,.... } from 'react-native';
const width= Dimensions.get('window').width;
const height= Dimensions.get('window').height;
I solved the problem by using Overlay from react-native-elements.
I'm also stuck with the same problem. I've created ListItem input fields where the DatePicker is inside it.
I have a very strange bug in the height or positioning of a scene in a StackNavigator.
I have a BottomTabNavigator with several StackNavigators inside.
The AppNavigator has lazy: true.
I'm using always a custom header component, set in the StackNavigator options header key.
The problem occurs when I switch from one tab to the other and the StackNavigator first scene renders. It seems the height or the positioning of the scene is off at the beginning and then it gets right.
I've logged the StackNavigator options during the re-renders and the only thing that changes when the positioning goes from wrong to right is the layout minHeight and minWidth that are both 0 in the beginning (wrong position) and have normal values like 751 in the last render (right position).
Any idea what could cause this?
I've attached a gif showing the issue
Consider this simple ScrollView.
On iOS, clicking on the text will but the text to the top because scrollTo({ y: 250 }) scrolls even if end of scrollView is reached.
On Android, the text doesn't move.
How to get on Android the same behavior we have on iOS?
You can work around this by adding padding to the contentContainerStyle of the ScrollView. A good starting point would be to add padding equal to the height of the device's screen.
import { Dimensions } from 'react-native';
const ANDROID_SCREEN_HEIGHT_PADDING = Dimensions.get('window').height;
then, when rendering:
<ScrollView
contentContainerStyle={{paddingBottom: ANDROID_SCREEN_HEIGHT_PADDING}}>
...
</ScrollView>
You could use this for necessary extra Android padding in every direction. If you are using horizontal={true}, for example, you could add padding equal to the width of the screen and add it to the paddingLeft style property to get the intended scrolling behavior on Android.
This behavior is due to the underlying implementation of ScrollView on Android in React-Native. See also:
React native Android ScrollView scrollTo not working