Текст вне контейнера с Flexbox и React native

Question

При работе с native и flexbox я не понимаю, почему текст находится вне контейнера (оранжевый bakcground)?

<View style={styles.main_container}>
    <View style={styles.infos_container}>
        <View style={styles.info_item}>
            <Text style={styles.info_name}>
                Âge
            </Text>
            <Text style={styles.info_value}>
                18
            </Text>
        </View>
        <View style={styles.info_item}>
            <Text style={styles.info_name}>
                Médias publics
            </Text>
            <Text style={styles.info_value}>
                2
            </Text>
        </View>
    </View>
</View>

const styles = StyleSheet.create({
    infos_container: {
        backgroundColor: 'orange',
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'wrap',
        padding: 5,
    },
    info_item: {
        margin: 5,
        alignItems: 'center',
    },
    info_name: {
        color: '#6c757d',
        fontSize: 11,
    },
    info_value: {
        color: '#343a40',
    },
})

Iпросто хочу, чтобы мои блоки styles.info_item были горизонтальными, а оранжевый фон

Answer 1

удалить flex: 1 из infos_container настроек flex: 0 в main_container не должно влиять на стиль infos_container

infos_container: {
   backgroundColor: 'orange',
   flexDirection: 'row',
   flexWrap: 'wrap',
   padding: 5,
},

Answer 2

Вы не импортировали main_container в своем стиле. Может быть, у вас есть flex: 0 внутри
Измените свой стиль следующим образом:

main_container: {
  flex: 1,
},
infos_container: {
  backgroundColor: 'orange',
  alignSelf: 'stretch',
  flexDirection: 'row',
  flexWrap: 'wrap',
  padding: 5,
},
info_item: {
    margin: 5,
    alignItems: 'center',
},
info_name: {
    color: '#6c757d',
    fontSize: 11,
},
info_value: {
    color: '#343a40',
},