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).
Related
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
I have a Modal with a ScrollView inside and some items inside the ScrollView. When the Modal popped up, the item's border is not aligned to the Modal's border. Some components like TextInput become thinner and some is overflow. It's not like this outside of Modal.
This can be solved by setting component's offset explicitly relative to Dimensions.get('window').width. But I just want an implicit solution.
I've done trying setting style properties for ScrollView's contentContainerStyle and also putting a wrapper View inside the ScrollView. None of them works.
I've made it after wrap ScrollView with a View with style flexDirection : 'row'. Yet to figure out why
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
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
How can I set button width to wrap content?
Default html button wraps content, but default sencha button use all width of parent.
Next question. If button width wraps content, how to align button?
Thanks
As far as I know, there is no Ext.Button config like textWrap: true in Sencha Touch 2. But you can try a work-around. Normally you can use width and height config to set absolute size of the button, and minWidth, maxWidth or minHeight, maxHeight for the lowerbound and upperbound of width and height, you should combine them with CSS styles of your text.
About alignment: Ext.Button is just like other Ext components, if it belongs to a parent container, then the config centered:true should align it to the center of the parent container.