Why is this Text not displaying inside this View? Tried flexing on the circle and text. I like long walks on the beach and writing extra characters to qualify for this post to be active.
import React, {Component} from 'react';
import {View, StyleSheet, Text} from 'react-native';
export default class Interest extends Component {
constructor(props) {
super(props);
}
render() {
return(
<View style={styles.circle}>
<Text style={styles.text}>{this.props.title}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
circle: {
//flex: 1,
padding: 15,
borderRadius: 50,
borderWidth: 1,
borderColor: 'black',
height: 10,
minWidth: 80,
alignItems: 'center',
marginBottom: 10
},
text: {
//flex: 0,
fontFamily: "CircularStd-Book",
fontSize: 14,
color: '#2f354b',
textAlign: 'center'
}
});
Text was hidden by padding and height. Corrected CSS is as follows:
const styles = StyleSheet.create({
circle: {
padding: 8,
borderRadius: 50,
borderWidth: 1,
borderColor: 'black',
height: 35,
marginBottom: 10,
alignItems: 'center'
},
text: {
fontFamily: "CircularStd-Book",
fontSize: 14,
color: '#2f354b',
textAlign: 'center'
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With