Why are my buttons disappearing in React Native? - reactjs

Question

So I am trying to have two buttons on my React Native project and whenever I add text to my code the buttons disappear. Does anyone know why? The text I am trying to add is below
<Text
style={{
fontSize: 55,
fontFamily: 'Futura',
color: '#707070',
textAlign: 'left',
paddingTop: 50,
paddingLeft: 30
}}
>
Feed
</Text>
<Text
style={{
fontSize: 22,
fontFamily: 'Futura',
color: '#BABABA',
textAlign: 'left',
paddingTop: 10,
paddingLeft: 30
}}
>
Find the Circle for your needs!
</Text>
and the code I am trying to add it to is this
<View style={styles.container}>
<View style={styles.buttonContainer}>
<Button title="Button 1"/>
</View>
<View style={styles.buttonContainer}>
<Button title="Button 2"/>
</View>
</View>
All of my code is below but it only shows the text not the buttons.
import React, { Component } from 'react';
import { Button, View, StyleSheet, Text } from 'react-native';
export default class GridView extends Component {
render() {
return (
<View>
<Text
style={{
fontSize: 55,
fontFamily: 'Futura',
color: '#707070',
textAlign: 'left',
paddingTop: 50,
paddingLeft: 30
}}
>
Feed
</Text>
<Text
style={{
fontSize: 22,
fontFamily: 'Futura',
color: '#BABABA',
textAlign: 'left',
paddingTop: 10,
paddingLeft: 30
}}
>
Find the Circle for your needs!
</Text>
<View style={styles.container}>
<View style={styles.buttonContainer}>
<Button title="Button 1"/>
</View>
<View style={styles.buttonContainer}>
<Button title="Button 2"/>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
},
buttonContainer: {
flex: 1,
},
headers: {
fontSize: 50,
}
});

Answer 1

This should fix your issue: My guess is there is something wrong with a parent component that is cutting of the render. If this is the only view on page also try adding the style {flex:1} to the outer most layer. This can happen sometimes if there is some styling on navigation setup that get passed to childern.
<View style={{flex:1}>
<Text style={{...}}>Feed</Text>
<Text style={{...}}>Find the Circle for your needs!</Text>
<View style={styles.container}>
<View style={styles.buttonContainer}>
<Button title="Button 1"/>
</View>
<View style={styles.buttonContainer}>
<Button title="Button 2"/>
</View>
</View>
</View>