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'
Related
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>
I'm trying to center two separate texts in their components, I'm using react-native and native-base. I cannot center the text vertically and horizontally within the Text component itself. I have divided into colors to see the problem graphically.
The elements:
<View
style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'red'
}}>
<Text uppercase={false} style={styles.buttonTextLeft}>
{title}
</Text>
<Text uppercase={false} style={styles.buttonTextLeftGreen}>
{subTitle}
</Text>
</View>
The styles:
buttonTextLeft: {
fontFamily: 'Cuprum-Bold',
fontSize: normalize(20),
color: '#005f99',
flex: 1,
flexDirection: 'row',
backgroundColor: 'yellow'
},
buttonTextLeftGreen: {
fontFamily: 'Cuprum-Bold',
fontSize: normalize(20),
color: '#94cf1c',
flex: 1,
flexDirection: 'row',
backgroundColor: 'green'
},
what you see commented are all the tests I did. certainly, it is stupid but I have not yet solved, do you have any idea? Thanks.
SOLUTION
For those who had the same problem, I enter the code of my correct and clean current situation (without the backgroundColor):
JS
<View
style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
}}
>
<Text uppercase={false} style={styles.buttonTextLeft}>
{title}
</Text>
<Text uppercase={false} style={styles.buttonTextLeftGreen}>
{subTitle}
</Text>
</View>
Styles
buttonTextLeft: {
fontFamily: 'Cuprum-Bold',
fontSize: normalize(20),
flex: 1,
flexDirection: 'row',
lineHeight: normalize(20),
paddingVertical: normalize(4),
color: '#005f99',
},
buttonTextLeftGreen: {
fontFamily: 'Cuprum-Bold',
fontSize: normalize(20),
flex: 1,
flexDirection: 'row',
lineHeight: normalize(20),
paddingVertical: normalize(4),
color: '#94cf1c',
},
Maybe I didn't understand your problem truly, I guess your problem is inside green and yellow area.
I had same issue and for handling this issue I used line-height: 20 and paddingVertical: 5. the 20 and 5 numbers are sample and for my project design. you put your numbers instead of them.
Setting the line height of the text to be the desired height of the box should work. For example if you want the yellow box to be 50 tall you would set lineHeight: 50 on the text.
Hope that helps.
I am trying to center a text vertically and horizontally on the screen. This is my code
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.header}>
<Text> Header </Text>
</View>
<Text style={styles.text}> some text in the middle center of the screen </Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor:'white',
alignItems:'center',
justifyContent:'center'
},
header: {
backgroundColor: 'green',
alignSelf: 'stretch',
alignItems: 'center',
heigth: 80 // this dose not change the header height
},
text:{
//flex: 1,
justifyContent:'center',
}
});
If I add the flex:1 to text, the header will also be centered which is not expected. I don't know if it's related but the I am also not able to modify the header view height. How can I solve this? The problems can be reproduced on this snack.
<div data-snack-id="S1urACbJM" data-snack-platform="ios" data-snack-preview="true" data-snack-theme="light" style="overflow:hidden;background:#fafafa;border:1px solid rgba(0,0,0,.16);border-radius:4px;height:505px;width:100%"></div>
<script async src="https://snack.expo.io/embed.js"></script>
This is one way to center text in the screen:
<View style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'blue'
}}>
<Text style={{backgroundColor: 'red'}}>
Your Text
</Text>
</View>
And you can also try with position:'absolute':
<View style={{
backgroundColor: 'blue',
position: 'absolute',
top: 0, left: 0,
right: 0, bottom: 0,
justifyContent: 'center',
alignItems: 'center'}}>
<Text style={{backgroundColor: 'red'}}> Your Text </Text>
</View>
I suggest setting the header as position:'absolute' , and use flex:1 and justify-content:'center' on the container.
Check the updated style
const styles = StyleSheet.create({
container: {
backgroundColor:'white',
alignItems:'center',
justifyContent:'center',
flex:1,
paddingTop:20 //this amount should be equal to the header height so that any items displayed inside the container will start after the absolute positioned header
},
header: {
backgroundColor: 'green',
alignSelf: 'center',
justifyContent:"flex-start",
alignItems: 'center',
position:"absolute",
top:0
}
});
Regarding the height you just have a typo in the word height
I'm using React Native and trying to create a specific layout.
I have an image, vertically & horizontally centred (within a View) and some Text on top of the image also vertically & horizontally centred. The Text needs to come on top of image/background image therefore I put it inside the image tag.
Now the content of that text can be very long and because it is inside the image tag, it wraps.
How can I make it so the content inside Text won't wrap and still be on top of the Image?
My layout so far:
The layout I'm trying to achieve
My code:
<TouchableHighlight onPress={onPress}>
<View style={styles.categoryContainer}>
<View style={styles.leftContainer}>
<View style={styles.categoryIndexContainer}>
<Text style={styles.categoryIndex}>01</Text>
</View>
</View>
<View style={styles.middleContainer}>
<Image source={img} style={styles.categoryImage}>
<Text style={styles.categoryName}>Some very long title name</Text>
</Image>
</View>
<View style={styles.rightContainer}></View>
</View>
</TouchableHighlight>
const styles = StyleSheet.create({
categoryContainer: {
flexDirection: 'row',
},
leftContainer: {
width: 50,
paddingLeft: 15,
paddingTop: 30,
},
middleContainer: {
alignItems: 'center',
justifyContent: 'center',
flex: 1,
flexDirection: 'row',
},
rightContainer: {
width: 50,
},
categoryName: {
color: '#ffffff',
fontWeight: 'bold',
fontSize: 40,
textAlign: 'center',
backgroundColor: 'transparent',
flexWrap: 'nowrap',
},
categoryImage: {
alignItems:'center',
justifyContent:'center',
flexWrap: 'nowrap',
},
})
Thanks
You should specify on categoryName style: position: 'absolute' then set the top, left, right, bottom attributes until you place the Text above the Image.
I have the following
<View style={{maxWidth: 700}}>
<View style={{backgroundColor: 'red', flexDirection: 'row', justifyContent: 'space-between'}}>
<Text>Left Item</Text>
<Text>Right Item</Text>
</View>
</View>
which is working as I'd expect on a large device (vertical black lines are edges of emulator screen).
All I would like to do is center this on the screen.
When I attempt to do so by adding alignSelf: 'center' to the parent
<View style={{maxWidth: 700, alignSelf: 'center'}}>
<View style={{backgroundColor: 'red', flexDirection: 'row', justifyContent: 'space-between'}}>
<Text>Left Item</Text>
<Text>Right Item</Text>
</View>
</View>
the width is lost.
I assume this is because by default alignSelf it is 'stretch'. Is there a way to both stretch the content to use maxWidth and center it on the screen?
Try using flex:1 along with maxWidth to both make it stretch but limit the width to 700
<View style={{flexDirection:'row', alignItems: 'center', justifyContent: 'center'}}>
<View style={{flex:1, maxWidth: 700, backgroundColor:'red', flexDirection:'row', justifyContent:'space-between'}}>
<Text>Left Item</Text>
<Text>Right Item</Text>
</View>
</View>
Using maxWidth along with width: '100%' does the trick for me.