How do I align the 2 touchableOpacity components to the right and left respectively? Here is how it currently looks like:
Here is how my code looks like:
<View style={{ flex: 1,
alignItems: 'flex-start',
justifyContent: 'center',
paddingLeft: 30}}>
//Other components are here
<View style={{flexDirection: 'row', justifyContent:'space-between'}}>
<TouchableOpacity style={{width: 100, height: 50, backgroundColor: 'black', alignItems: 'center', justifyContent: 'center'}}>
<View>
<Text style={{color: 'white'}}>Submit</Text>
</View>
</TouchableOpacity>
<TouchableOpacity style={{width: 100, height: 50, backgroundColor: 'gray', alignItems: 'center', justifyContent: 'center'}}>
<View>
<Text style={{color: 'white'}}>Cancel</Text>
</View>
</TouchableOpacity>
</View>
</View>
Add a width to your view (since the flex-start is messing it up) might do the trick:
<View style={{flexDirection: 'row', justifyContent:'space-between', width:"100%"}}>
Give flex 1 in second view
<View style={{flex: 1, flexDirection: 'row', justifyContent:'space-between'
Related
I am working on a responsive design using flex on react-native
<View
style={{
flexDirection: 'row',
alignItems: 'center',
flexWrap: 'wrap',
justifyContent: 'space-between',
paddingHorizontal: 10
}}>
<View style={{ flex: 0, backgroundColor: 'red'}}>
<Text style={{ fontSize: 22 }}>
{ moment().format('LL') }
</Text>
</View>
<View style={{flex: 0, backgroundColor: 'blue'}}>
<Text style={{ fontSize: 22,flex: 1, alignSelf: 'flex-end'}}>
# 123123123123123
</Text>
</View>
</View>
This is working properly on a normal scale font.
The output is like this
Then, when the device uses a larger scale of font.
The output is like this
The blue component overflows on the container.
But, when I removed the alignItems: center from the style.
It is working fine.
Any other solution or work around for this?
I think you should design it like this
Working Example Here
<View style={{ width: '100%', flexDirection: 'row' }}>
<View style={{ flex: 1 }}>
<Text
style={{ fontSize: 22 }}
adjustsFontSizeToFit={true}
numberOfLines={1}>
June 23, 2021
</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end', justifyContent: 'center' }}>
<Text
style={{ fontSize: 22 }}
adjustsFontSizeToFit={true}
numberOfLines={1}>
# 123123123123123
</Text>
</View>
</View>
I'm trying to make a top menu and colorize it, but backgroudColor property doesn't work.
How the app looks now
<View>
<View style={{
flex: 1,
height: 50,
flexDirection: 'row',
justifyContent: 'space-between',
backgroundColor: 'skyblue'
}}>
<View style={{flex: 1, backgroundColor: 'skyblue'}}><Text style={style.upMenu.text}>H</Text></View>
<View style={{flex: 1, backgroundColor: 'skyblue'}}><Text style={style.upMenu.text}>Plugins</Text></View>
<View style={{flex: 1, backgroundColor: 'skyblue'}}><Text style={style.upMenu.text}>Remote</Text></View>
<View style={{flex: 1, backgroundColor: 'skyblue'}}><Text style={style.upMenu.text}>P</Text></View>
</View>
</View>
Solved
Thanks a lot, your answers both are very useful!
Give prop flex:1 to the parent view style.
<View style={{flex:1}}>
.....Child Views
</View>
use the code below,
<View style={{ flex: 1 }}>
<View
style={{
flex: 1,
height: 50,
flexDirection: "row",
justifyContent: "space-between",
backgroundColor: "#87ceeb",
maxHeight: 20
}}
>
<View style={{ flex: 1, backgroundColor: "#87ceeb" }}>
<Text style={style.upMenu.text}>H</Text>
</View>
<View style={{ flex: 1, backgroundColor: "#87ceeb" }}>
<Text style={style.upMenu.text}>Plugins</Text>
</View>
<View style={{ flex: 1, backgroundColor: "#87ceeb" }}>
<Text style={style.upMenu.text}>Remote</Text>
</View>
<View style={{ flex: 1, backgroundColor: "#87ceeb" }}>
<Text style={style.upMenu.text}>P</Text>
</View>
</View>
</View>
to get the required header height use the maxHeight to change it
<View style={{height: '100%', width: '100%'}}>
{OtherContent}
<ScrollView>
<View style={{flexDirection: 'row', flexWrap: 'wrap', padding: 20}}>
{children}
</View>
<ScrollView>
</View>
I want the View inside ScrollView to be in center of the screen without changing it's children position
Children:
<View style={Styles.docsContainer}>
{arr.map((document, index) => {
return (
<TouchableOpacity key={index} style={[Style.docStyle} onPress={null}>
<Icon name='file-text-o'/>
<Text>{document.name}</Text>
</TouchableOpacity>
);
})}
</View>
const Styles: {
docsContainer: {
flexDirection: 'row',
flexWrap: 'wrap',
padding: 20,
},
docStyle: {
alignItems: 'center',
padding: 20,
margin: 5,
marginBottom: 10,
borderRadius: 8,
width: 170
}
}
Indeed, we don't need parent View, we just need scrollView as flewGrow 1 which makes scrollView have full height and width as per device.
My approach:
<ScrollView contentContainerStyle={{ flexGrow: 1, justifyContent: 'center', alignItems: 'center' }}>
<View style={{
alignItems: 'center',
justifyContent: 'center',
flex: 1,
}}>
<Text>mahesh nandam</Text>
</View>
</ScrollView>
Try this.
The Viewis your ScrollView's immediate children. So you can style ScrollView using contentContainerStyle and align it in center like this.
<View style={{height: '100%', width: '100%'}}>
<ScrollView
contentContainerStyle={{
flexGrow: 1,
justifyContent: 'center',
alignItems: 'center',
}}
>
<View style={{flexDirection: 'row', flexWrap: 'wrap', padding: 20}}>
{children}
</View>
<ScrollView>
</View>
I guess it's what you're loooking for.
Center Horizontally
If you only want to center the View horizontally, you can set alignItems: 'center' to ScrollView's contentContainerStyle.
<View style={{ height: '100%', width: '100%' }}>
<Text>Other content</Text>
<ScrollView contentContainerStyle={{ alignItems: 'center' }}>
<View style={{ flexDirection: 'row', flexWrap: 'wrap', padding: 20, backgroundColor: 'red' }}>
<Text>children</Text>
</View>
</ScrollView>
</View>
The inner View is highlighted in red.
Center Horizontally and Vertically
In this case, you can set { flex: 1, justifyContent: 'center', alignItems: 'center' } for the same contentContainerStyle.
<View style={{ height: '100%', width: '100%' }}>
<Text>Other content</Text>
<ScrollView contentContainerStyle={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<View style={{ flexDirection: 'row', flexWrap: 'wrap', padding: 20, backgroundColor: 'red' }}>
<Text>children</Text>
</View>
</ScrollView>
</View>
If what you expect is different layout than in either of the screenshots, please share a simple sketch of the layout.
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 want to do this, where both of the texts are on 1 horizontal line and one of them is in the center and the other is on the right:
This is what I have, ignore the colors (it doesn't work at all):
styles:
rowLabelText: {
color: "#0B1219",
fontFamily: Fonts.Knockout31JuniorMiddleWeight,
fontSize: 16.0,
},
Markup:
<View style={{flexDirection: 'row', height: 30, flexWrap: 'wrap', backgroundColor: 'green'}}>
<View style={{ flex: 1, backgroundColor: 'red', justifyContent: 'center', alignSelf: 'center'}}>
<Text style={styles.rowLabelText}>
adjkfdasjkfaskj
</Text>
</View>
<View style={{ flex: 1, backgroundColor: 'blue', justifyContent: 'center', alignSelf: 'flex-end' }}>
<Text style={styles.rowLabelText}>
adjkfdasjkfaskj
</Text>
</View>
</View>
I am having trouble. Could someone assist me?
It looks like your problem is with with alignSelf you want to use alignItems.
This is how your code will look like.
Your View:
<View style={styles.textContainer}>
<View style={styles.leftContainer}>
<Text style={styles.rowLabelText}>
adjkfdasjkfaskj
</Text>
</View>
<View style={styles.rightContainer}>
<Text style={styles.rowLabelText}>
adjkfdasjkfaskj
</Text>
</View>
</View>
Your styles:
textContainer:{
flexDirection: 'row',
height: 30,
backgroundColor: 'green'
},
leftContainer:{
flex: 1,
justifyContent: 'center',
alignItems:'center',
backgroundColor: 'red',
},
rightContainer:{
flex: 1,
justifyContent: 'center',
alignItems: 'flex-end',
backgroundColor: 'blue',
},
rowLabelText: {
color: "#0B1219",
fontSize: 16.0,
},
One way to center text with respect to the entire width of the screen while also having some text to the right side of the centered text is to use absolute positioning on the right text.
By using absolute positioning on the right text, it will not affect the position of the centered text.
<View style={{flexDirection: 'row'}}>
<View style={{flex:1, alignItems: 'center', backgroundColor: 'red'}}>
<Text>50%</Text>
</View>
<View style={{position:'absolute', right: 20, backgroundColor: 'blue'}}>
<Text>+$0.80</Text>
</View>
</View>