Within a parent view, I would like to vertically center align one piece of text and have another at the bottom of the view.Whenever I add the bottom text, it shifts the position of the vertical centered view upwards (to make it the vertical center of the remaining space).
How do I keep the text vertically centered align relative to the parent view?
Update: I understand I can do this using {position: 'absolute',
bottom:0}, but want to understand the flex-box solution.
<View style={{height: 300, borderColor: "black", borderWidth: 1}}>
<View style={{ justifyContent: "center", flex: 1 }}>
<Text>Vert Middle</Text>
</View>
<View>
<Text>Vert Bottom</Text>
</View>
</View>
Just try below code
<View style={{height: 300, borderColor: "balck", borderWidth: 1}}>
<View style={{ backgroundColor: 'red', justifyContent: "center", flex: 1 }}>
<Text>Vert Middle</Text>
</View>
<View style={{position: 'absolute', bottom: 0}}> // Here is your updations
<Text>Vert Bottom</Text>
</View>
</View>
This is going to work for you. Also #Nitish answer is going to work too.
render() {
return (
<View style={{
height: 300,
borderColor: "black",
borderWidth: 1
}}>
<View style={{
justifyContent: "center",
flex: 1
}}>
<Text>Vert Middle</Text>
</View>
<View style={{
height:0, //Here...
justifyContent: "flex-end",
}}>
<Text>Vert Bottom</Text>
</View>
</View>
);
}
Related
Is there a way to create a dropdown navigation menu like in HTML with React Native where the dropdown part is positioned absolute on top of the content that's below the menu?
Without absolute positioning, the dropdown's parent element (image below, blue background) increases its height and the other content is below the dropdown.
When I use position absolute on the dropdown, it's above Item 1 and not below it because React Natives position absolute positions relative to the parent.
My Code:
<View style={{ flex: 1 }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'baseline', backgroundColor: '#3763a4'}}>
<View style={{ backgroundColor: '#FF0000', flex: 1 }}>
<View style={{ padding: 10 }}>
<Text style={{ color: '#FFFFFF' }}>Item 1</Text>
</View>
<View style={{ padding: 10 }}>
<Text style={{ color: '#FFFFFF' }}>Item 1.1</Text>
<Text style={{ color: '#FFFFFF' }}>Item 1.2</Text>
</View>
</View>
<View style={{ padding: 10, backgroundColor: '#FF0000', flex: 1 }}><Text style={{ color: '#FFFFFF' }}>Item 2</Text></View>
<View style={{ padding: 10, backgroundColor: '#FF0000', flex: 1 }}><Text style={{ color: '#FFFFFF' }}>Item 3</Text></View>
</View>
<WebView
source={myHtml}
/>
</View>
How it looks like:
The Webview is below this. Instead, the dropdown should be positioned in top of the Webview.
How it looks like with position absolute:
I hope my explanation is clear enough. This image and link shows a HTML navigation menu: https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp
Absolute position exists in RN: https://reactnative.dev/docs/layout-props#position, it works almost same as on CSS. Try and investigate!
I've found a solution. I had to wrap the absolute positioned View in another View and add zIndex: 1 to position it on top of the Webview.
Code:
<View style={{ flex: 1 }}>
<View style={{ zIndex: 1, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'baseline', backgroundColor: '#3763a4' }}>
<View style={{ backgroundColor: '#FF0000', flex: 1 }}>
<View style={{ padding: 10 }}>
<Text style={{ color: '#FFFFFF' }}>Item 1</Text>
</View>
<View>
<View style={{ backgroundColor: '#FF0000', padding: 10, position: 'absolute' }}>
<Text style={{ color: '#FFFFFF' }}>Item 1.1</Text>
<Text style={{ color: '#FFFFFF' }}>Item 1.2</Text>
</View>
</View>
</View>
<View style={{ padding: 10, backgroundColor: '#FF0000', flex: 1 }}><Text style={{ color: '#FFFFFF' }}>Item 2</Text></View>
<View style={{ padding: 10, backgroundColor: '#FF0000', flex: 1 }}><Text style={{ color: '#FFFFFF' }}>Item 3</Text></View>
</View>
<WebView
source={myHTML}
/>
</View>
Result:
I want to achieve the following:
I want to display a label next to a centered value.
As far as I can see that's not possible with flexbox, right?
How could I achieve that?
Additionally I'd like to have the base-aligned, but currently this option is not working on Android. Therefore I'm using hardcoded paddings for the smaller text boxes. Any other Idea for that?
Another suggestion, if you don't want to use empty Views, is to position Value to the center, and then have the unit positioned absolute (so it goes off the flex) and to the bottom so you ensure it's base-aligned to Value.
<View style={styles.container}>
<Text style={styles.value}>
Value
<Text style={styles.unit}>unit</Text>
</Text>
</View>
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: 'lightgrey',
},
value: {
backgroundColor: '#eee',
textAlign: 'center',
fontSize: 20,
position: 'relative',
},
unit: {
fontSize: 12,
position: 'absolute',
bottom: 0,
},
});
You can use use 3 flex boxes placed horizontally to get a similar effect. Leave the left box blank.
(Ive added background colors for reference)
<View style={styles.container}>
<View
style={{
flexDirection: 'row',
}}>
<View style={{ flex: 1}} /> {/* blank view */}
<View
style={{
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center',
}}>
<Text style={{ fontSize: 30 }}>Value</Text>
</View>
<View
style={{
flex: 1,
justifyContent: 'flex-end',
alignItems: 'fllex-start',
}}>
<Text style={{ fontSize: 12 }}>Unit</Text>
</View>
</View>
</View>
I have this view, where there are two Views in a column:
<View style={styles.container}>
<View style={styles.content}>
<View style={{backgroundColor: 'orange'}}>
<Text>Test</Text>
</View>
<View style={{backgroundColor: 'yellow'}}>
<Text>Test2</Text>
</View>
</View>
</View>
This is my Styles:
container: {
flexDirection: 'row',
backgroundColor: 'white',
justifyContent:'center',
alignItems:'center',
height: 80,
margin: 8,
},
content: {
flex:1,
alignItems: 'stretch',
flexDirection: 'column',
},
Here is a ScreenShot of what it looks with the above code.
How can I get the orange and yellow View to expand vertically equally, without manually defining the height for each of them?
The Text inside should be centered, but left-aligned.
Add flex: 1 to each cell to make them expand and add justifyContent: 'center' to make the text vertically centered. Like this:
<View style={styles.container}>
<View style={styles.content}>
<View style={{ backgroundColor: 'orange', flex: 1, justifyContent: 'center' }}>
<Text>Test</Text>
</View>
<View style={{ backgroundColor: 'yellow', flex: 1, justifyContent: 'center' }}>
<Text>Test2</Text>
</View>
</View>
</View>
I have been struggling to align two items in the following positions: the first one should be on the left side of the row and the second element needs to be in the center of the row.
The following code below does not fully center my second element:
<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
<View style={{ paddingLeft: 10 }}>
<Text style={{ fontSize: 20, color: 'red', fontWeight: '200' }}>LEFT_ELEM</Text>
</View>
<View style={{paddingRight: 10 }}>
<Text>
CENTER
</Text>
</View>
{/* Empty view so that space-between works? */}
<View
style={{paddingRight: 10 }}>
</View>
</View>
This was the closest I could get to the result I wanted. However, it does not do the trick. Could anyone know the best way to implement this successfully?
You need to add flex: 1 to parent View and children Views (all children will have flex: 1 if you want them all to be of equal size, otherwise define width/flex for each child View individually).
Try this:
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}>
<View style={{ flex: 1, paddingLeft: 10 }}>
<Text style={{ fontSize: 20, color: 'red', fontWeight: '200' }}>LEFT_ELEM</Text>
</View>
<View style={{ flex: 1, paddingRight: 10 }}>
<Text style={{ textAlign:'center' }}>CENTER</Text>
</View>
<View
style={{ flex: 1, paddingRight: 10 }}>
</View>
</View>
Added style={{ textAlign:'center' }} to Text in center View child to give you an idea of its centered position. You can modify/remove it.
When I learned Android, I was told not to use too many 'layers' of components. In that philosophy, I decided to use 'absolute' property to the left element to achieve a simpler result. In this scheme, the 'left' item is almost stick to the left wall.
<View
style={{
height: 50,
flexDirection: 'row', // a must
alignItems: 'center', // to make items center vertically.
justifyContent: 'center' // to make the second item center horizontally.
}}
>
<MaterialIcons
style={[styles.titleIcon, { position: 'absolute', left: 0 }]} // on left, still center vertically.
name='arrow-back'
onPress={() => {
navigation.goBack();
}}
/>
<Text style={styles.titleText}>{result.name}</Text> // on center automatically
</View>
<View style={{flex:1, flexDirection: 'row', justifyContent: 'space-around'}}>
<View style={{width: 50, height: 50}}>
<Text style={{ fontSize: 20, color: 'red', fontWeight: '200' }}>LEFT_ELEM</Text>
</View>
<View style={{ width: 50, height: 50}}>
<Text>CENTER</Text>
</View>
<View style={{ width: 50, height: 50}}/>
</View>
i am trying to split the screen using flexbox, but i am not getting the result i desire, here is what i have
<View style={{flex: 1}}>
<View style={{flex: 1}}>{/* half of the screen */}</View>
<View style={{flex: 1}}>{/* the other half */}
{/*<Swiper>*/}
<View style={{flex: 1}}>{/* a quarter of the other half */}</View>
<View style={{flex: 1}}>{/* a quarter of the other half */}</View>
<View style={{flex: 1}}>{/* a quarter of the other half */}</View>
<View style={{flex: 1}}>{/* a quarter of the other half */}</View>
{/*</Swiper>*/}
</View>
</View>
the problem that i am having is that the other half of the screen expands to take the size of the full screen, it is just appended to the first half without taking into consideration that is bounded by the half it exist in
screenshot
how should i approach this?
Uhm, so I kind of know what I am doing in React Native now, after over a year of learning.
<View style={{ flex: 1 }}>
<View style={{ backgroundColor: 'gray', flex: 1 }} />
<View style={{ flex: 1 }}>
<Swiper>
<View
style={{
alignItems: 'center',
backgroundColor: 'red',
justifyContent: 'center',
height: Dimensions.get('window').height / 2
}}>
<Text style={{ color: 'white' }}>Test</Text>
</View>
<View
style={{
alignItems: 'center',
backgroundColor: 'green',
justifyContent: 'center',
height: Dimensions.get('window').height / 2
}}>
<Text style={{ color: 'white' }}>Test</Text>
</View>
<View
style={{
alignItems: 'center',
backgroundColor: 'blue',
justifyContent: 'center',
height: Dimensions.get('window').height / 2
}}>
<Text style={{ color: 'white' }}>Test</Text>
</View>
</Swiper>
</View>
</View>
Try giving flexDirection: 'row' style to the outermost view.
Here's my solution: https://rnplay.org/apps/DQ2gxA
The basic idea is that you have the amount of columns (8 in this case) as a constant and then you split the available space with your needs. And use flexDirection: 'row' with the parent containers.