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>
Related
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'
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
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 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>
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.