CODEWITHSUNDEEP
javascriptreact-native
Muaath Alhaddad
Muaath Alhaddad

Reputation: 361

Align inner tags of Touchable component in React Native

I could not align the inner tags of Touchable component here is my code: 

render(){
return(
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<TouchablewithoutFeedback onPress={()=> this.incrementCount()}>
<Text style={{alignslef: 'center'>
Count 
</Text>
</TouchablewithoutFeedback>
);}

Upvotes: 0

Views: 291

Answers (2)

Muaath Alhaddad
Muaath Alhaddad

Reputation: 361

This is the answer of my query previously.

render(){
return(
<TouchablewithoutFeedback>
<Text style={{**textAlign:'center'**}}>click here</Text>
</TouchablewithoutFeedback>
);
}

However, I discovered a complete way to style the button properly because the former answer did not fully recover my styling, the text was aligned to the center horizontally successfully but not vertically.

so here is the complete answer: 

render(){
return(
<TouchablewithoutFeedback style={styles.btn}>
<Text style={styles.btnText}>
Click me
<Text>
</TouchablewithoutFeedback>
);
}
const styles = StyleSheet.create({
btn:{
width: 200,
height: 200,
justifyContent: 'center',
alignItems: 'center'
},
btnText:{
fontSize: 25,
color: 'red'
}
})

Upvotes: 0

D. H Luong
D. H Luong

Reputation: 1356

You can include a style prop for TouchableWithoutFeedback that is alignItems: ‘center’, or use textAlign instead of alignSelf inside Text’s styles

Upvotes: 1

Related Questions