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/
Related
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 am trying to make it so whenever something new is rendered into a scroll view, the scroll view will stay put and not bump up and down. Right now if a new component is rendered in, the scrollview appears to be reset to 0.
Is there a way to stop this behavior, and hold position?
Right now for the scrollview I am using:
handleScrollt(event){
this.scroll = event.nativeEvent.contentOffset.y
}
handleSizet(width, height){
if (this.scroll) {
const position = this.scroll + height - this.height
this.refs.sv.scrollTo({x: 0, y: position, animated: false})
}
this.height = height
}
<ScrollView
ref="sv"
scrollEventThrottle={16}
onScroll={this.handleScrollt.bind(this)}
onContentSizeChange={this.handleSizet.bind(this)}
The issue with this is the scrollview will render briefly, before then scrolling to the correct offset. So it seems like theres a brief splash of the top of the screen
you have to define a height for the scrollview.
If the scrollview is supposed to cover an entire View you can get the view's height by:
<View style={styles.contactView} onLayout={(event) => {
var contactViewY = event.nativeEvent.layout.y;
this.setState({contactViewY: contactViewY})
}}>
and then give it to the scrollview
<ScrollView style={[styles.contactScroller, {height: this.state.contactViewY}]}>
Bear in mind that the onLayout method is called immediately once the layout has been calculated, so if the view's height changes later, this two lines of code alone won't update it.
You should try maintainVisibleContentPosition.
Example:
<ScrollView
{...props}
maintainVisibleContentPosition={{
minIndexForVisible: 0,
}}
/>
From the docs:
maintainVisibleContentPosition
When set, the scroll view will adjust the scroll position so that the
first child that is currently visible and at or beyond
minIndexForVisible will not change position. This is useful for lists
that are loading content in both directions, e.g. a chat thread, where
new messages coming in might otherwise cause the scroll position to
jump. A value of 0 is common, but other values such as 1 can be used
to skip loading spinners or other content that should not maintain
position.
i'd like to know if it's possible to put a View inside a zoomable ScrollView but when the user zooms the scrollview, the view's size wont change. The view must be inside the scrollview because the image on the scrollview is bigger than the screen and i`ll render the view overlaying the image in a precise x:y position.
thanks
kinda extreme go horse but if you put the prop onScroll inside scrolView you can get the zoom and divide the width/height of the view by the zoomScale
onScroll={(event) => this.setState({ zoomScale:event.nativeEvent.zoomScale})}
I am trying to create a selector in react native using PANRESPONDER in reactNative. Actually width of a View is oriented from left to right, and Height of the View is oriented from top to bottom. I want to dynamically reverse the box.
So I am giving width and height as a negative Value. But the View disappears. How could I reverse the View ?
If anybody ends up here looking for how to make a value negative of say the screen dimensions so you can move an element around in say a slider..
let screenWidth = Dimensions.get('window').width;
let screenWidthNegative = parseInt('-' + screenWidth);
<View style={[styles.thisViewsStyle, {marginLeft: screenWidthNegative}]}></View>
Is it possible to have a layout which is wrapped with ScrollView:
<ScrollView>
<View>dynamic height</View>
<View>flex with minHeight</View>
<View>static height</View>
</ScrollView>
and meets below prerequisites:
Height of the first View is dynamic (depends on text length). Height of the third View is static (always three buttons inside). Rest of the screen should be filled with View with map, but the minimal height is set to 250.
Now the tricky part: if there is a lot of text in first View, so that map doesn't fit, a scroll should appear. I couldn't achieve that. I was trying to give the map View flex: 1 and minHeight: 250, but it's not rendered at all.
Solution
Ok, I've found a way to fix it. In first render, I get screen height (Dimensions) and height of first and third view (onLayout). Then, I calculate the height of second view (screenHeight - view1 - view3 - naviagtionHeight) and forceUpdate() to re-render it.
Add contentContainerStyle={{flexGrow: 1}} prop to ScrollView and its children's flex:1 would work. So you don't need to calculate it manually.