Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Text not displaying inside View

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'
    }
});
like image 393
Josh Avatar asked Mar 30 '18 05:03

Josh


1 Answers

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'
    }
});
like image 111
Josh Avatar answered Nov 08 '22 16:11

Josh