I have a header section in my react native app where I want - on one row - to display two bits of info, a back button icon, and some text. I am trying to figure out how to arrange these elements so that the back button icon aligns to the horizontal left of the full width of the line, while the text for the client name horizontally aligns at the center of that line. So that means on the right there will just be empty space.
The one way I've gotten this to work thus far feels a little hacky, as it involves creating a 3rd element, with the same proportions as the 1st one, and then just not declaring the name of the Feather icon element. In other words, this works because it aligns the center item between two items aligned to the left and right, even though with the right one, nothing is actually showing on the screen. Is there a less hacky way of doing this, that involves not adding a 3rd "invisible" element?
<View style={{ width: '100%', flexDirection: 'row', justifyContent: 'space-between' }}>
<Feather
name='chevron-left'
size={24}
onPress={() => props.navigation.goBack()}
color={styles.colors.textInverse}
style={{ justifySelf: 'flex-start', alignSelf: 'flex-start' }}
/>
<Text style={{ color: '#fff', fontSize: 18, alignSelf: 'center', justifySelf: 'center' }}>
{props?.client?.firstName} {props?.client?.lastName}
</Text>
<Feather
name='' // Leave this blank
style={{ justifySelf: 'flex-end', alignSelf: 'flex-end' }}
/>
</View>
Use paddingRight for Text to balance out the item on the left. Something like this:
<View style={{ width: '100%', flexDirection: 'row' }}>
<Feather
name='chevron-left'
size={24}
...
/>
<Text style={{ textAlign: 'center', flex: 1, paddingRight: 24 }}>
...
</Text>
</View>
Related
I am trying to space these two bodies together evenly across the device. While implementing it the way I currently am, the space-evenly renders but it spaces it by the words. I would like the space-evenly to base its spacing on the icon instead.
I have provided a demo here as well as the code below.
render() {
return (
<View
style={{
flexDirection: 'row',
top: 75,
justifyContent: 'space-evenly',
}}>
<View style={{ justifyContent: 'center', alignItems: 'center' }}>
<MaterialCommunityIcons
name="map-marker-radius-outline"
color="black"
size={50}>
</MaterialCommunityIcons>
<Text style={{ fontSize: 15 }}>
WORD
</Text>
</View>
<View style={{ justifyContent: 'center', alignItems: 'center' }}>
<MaterialCommunityIcons
name="star-outline"
color="black"
size={50}>
</MaterialCommunityIcons>
<Text style={{ fontSize: 15 }}>
WORD WORD
</Text>
</View>
</View>
);
}
}
if I understand your issue right, you need both elements to take the same space across the available width. For that, you have to add flex: 1 to both of your inner views
<View style={{ justifyContent: 'center', alignItems: 'center', flex: 1 }}>
What I want to achieve:
I want a horizontal view with two elements:
Text
ProgressBar (imported from React Native Paper)
I want the text to take as much space as needed (fit-content). The rest of the width should be taken by the ProgressBar.
What I've tried so far:
<View style={{
flexDirection: 'row',
alignItems: 'center'
}}>
<Text>Difficulty:</Text>
<ProgressBar
progress={0.2}
color="#5E84E2"
/>
</View>
With the above setup, the ProgressBar is not even visible. What am I doing wrong?
You can give flex:1 to progress bar view to fit in remaining space
<View
style={{
flexDirection: 'row',
alignItems: 'center',
}}>
<View>
<Text>Difficulty:</Text>
</View>
<View style={{ flex: 1 }}>
<ProgressBar progress={0.5} color="red" />
</View>
</View>
Preview : https://snack.expo.dev/Ef39fDbCK
I'm trying to place a text in the center of a TouchableOpacity, No, I don't want to use <Button with title.
At the moment the only way I could find to center the text is to make it bigger but that's not the solution I'm searching for..
As you see the text is not placed in the center..
Here is my code, hope you can help.
<View style={{padding: 15}}>
<TouchableOpacity
style={styles.button}
<Text style={{color: 'white' ,fontSize: hp('2.2%') ,justifyContent: 'center', alignItems: 'center' }}>Post Room</Text>
</TouchableOpacity>
</View>
button2: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: "#ff0000",
height: hp('3.5%'),
width: wp('11%'),
borderRadius: 4
},
I not able reproduce the issue but for your Text element, could you try removing the justifyContent and alignItems and replacing it with textAlign: 'center' and textAlignVertical: 'center'
Simply I am trying to make 3 Texts with icons align in a column
I want to give the expo icons a little margin-top so they are next to each text element
Then how can I make the next line in text aligned with the text itself
For Example The (S) in School to be vertically aligned with the (5) in 5th
I searched a lot on how to do that in react-native but with no luck
and I tried some normal CSS stuff but didn't work is it achievable?
Code :
<View style={styles.cardView}>
<Text style={styles.CardTextLayout} > <MaterialIcons name="store" size={21} color="lightgrey" /> {item.key} </Text>
<Text style={styles.locationText} > <Entypo name="location-pin" size={21} color="lightgrey" />5th Settelment, Near Akhnaton School, Cairo</Text>
<Text style={styles.locationText} > <MaterialIcons name="description" size={21} color="lightgrey" />Breif Description about the place and what is offers</Text>
</View>
Styles
CardTextLayout: {
// marginLeft: 8,
fontSize: cardResponsiveFontSize,
fontWeight: 'bold',
textAlign: 'left',
color: '#231F20',
elevation: 8,
},
locationText: {
fontSize: cardResponsiveFontSize,
textAlign: 'left',
color: '#231F20',
elevation: 8,
},
I don't know how you would do that with your current code, but you can try to set it up like this.
<View style={styles.cardView}>
<View style={styles.cardRow}>
<View style={styles.cardIcon}>{put your icon here}</View>
<View style={styles.cardText}>{put your text here}</View>
</View>
...add the other 2 rows here
</View>
And styles
cardRow: {
flexDirection: "row",
flex: 1
},
cardIcon: {
flex: 1
},
cardText: {
flex: 9
}
And add your styles for icons and text.
You can change up the cardIcon and cardText flex ratio so that you get different width for your icon.
You can make a wrapper view with alignItems: 'center' to make both text and icon vertical center
<View style={styles.cardView}>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<MaterialIcons name="store" size={21} color="lightgrey" />
<Text style={styles.CardTextLayout}>{item.key}</Text>
</View>
.....
</View>
I have this simple UI structure:
<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
<Text>A simple fee equal to</Text>
<View style={{ width: 80 }}>
<TextInput style={{ borderWidth: 1, borderColor: 'black' }} />
</View>
<Text>of any settlement or judgment</Text>
</View>
In a small screen, it would show something like this
As shown in the image above, I expected the text, of any settlement or judgment, to not move to the next line.
The closest solution that I could think of was to chunk each text into individual Text elements.
<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
<Text>A simple fee equal to</Text>
<View style={{ width: 80 }}>
<TextInput style={{ borderWidth: 1, borderColor: 'black' }} />
</View>
{'of any settlement or judgment'.split(' ').map((chunk, i) => (
<Text key={i.toString()}>{chunk} </Text>
)}
</View>
resulting to something like this:
Question: Is there a better way to achieve what I want? Or is this the only way to solve the problem?
Well you can write it inside a view with a flexDirection:'row' style property or you can wrap it in another Text like this :
<Text>
<Text>A simple fee equal to</Text>
<View style={{ width: 80 }}>
<TextInput style={{ borderWidth: 1, borderColor: 'black' }} />
</View>
<Text>Of any settlement or Judgement</Text>
</Text>