javascript - Text visas inte inuti View

Varför visas inte denna text inuti denna vy? Försökte använda flex på cirkeln och texten. Jag gillar långa promenader på stranden och att skriva extra tecken för att kvalificera mig för att detta inlägg ska vara aktivt.

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'
    }
});

Svar #1

Texten var dold på grund av utfyllnad och höjd. Korrigerad CSS är som följer:

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'
    }
});