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.
Related
The situation:
I am building a tooltip that has to programmatically position itself based on an avatar component that lives in a different package.
The avatar lives in the header part of the screen and I can't colocate the tooltip to be next to it code-wise, because the tooltip needs to be dismissed once the user interacts/touches the screen.
The Problem:
is that I can't just use onLayout event on the avatar because it fades into the view and the layout event always results in { x: 0, y: 0 }, which is not accurate and doesn't reflect the actual position of the avatar.
Thanks in advance for any help or advice that you can offer!
What I tried:
Passing a callback for onLayout, but as I mentioned above it doesn't return the correct values.
Using the measure function, but it resulted in the same values as onLayout.
Using the PanResponder on that avatar and requested to respond to move events, but because the avatar doesn't move the onPanResponderMove doesn't get triggered.
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
I'm trying to set the initial scroll position of a ListView in react native.
Right now, I'm doing this:
componentDidMount() {
let i = this.props.images.indexOf(this.props.current);
if(i != -1) {
this.refs.listView.scrollTo({ x:i*this.props.width, y:0, animated:false });
}
}
where the images prop is the datasource for the ListView, the current prop is where I want to be initially scrolled to, and the width prop is the width of the component. (The component scrolls horizontally).
This works, but there's a delay between the initial render and the call to componentDidMount, giving me a flash of the end of end of the list before the list is scrolled.
Is there a way of setting an initial scroll position of the list? Or better way of doing this to get rid of that flash?
On iOS you can use the ScrollView#contentOffset to set the initial scroll position of a ListView, which inherits the properties of ScrollView.
If you are looking for an Android solution, the ListView.scrollTo method you are calling seems like the best bet for the general case.
That said, if I interpret your code sample correctly, you are using the ListView for a paginated, horizontal list, perhaps with the help of the pagingEnabled property? If this is the case, on Android you might look at using ViewPagerAndroid instead, and setting the initialPage property.
My children views may be a different width, but it not be bigger than parent view. How can I fix it?
This is a screenshot of how it looks now:
you can give your parent view width as device window width like this:
var {height, width} = Dimensions.get('window');
Implement height and width as you required like this in your parent view:
<View style={{height:height, width:width}}></View>
After constructing your parent view, you can give your child view width and height as your own interest like :
style={{height:40, width:250}}
also you should have some knowledge on react-native flex to construct others layout you can view from here
I would need to see your code, but for React, you should be using Flexbox to align children for consistency.
http://moduscreate.com/aligning-children-using-flexbox-in-react-native/