ReactNative - button not showing up - react-native

Question

I'm having trouble displaying my custom component in ReactNative on Android simulator. Specifically, the appears as a flat line (height is close to 0 - see the blue line immediately below "Authentication"), when it should have some height. How do I make the button have height? See below. Thanks!
Here's my code:
App.js (the parts that are relevant towards displaying the button)
renderContent() {
return (
<Button onPress={() => firebase.auth().signOut()}>
Log Out
</Button>
);
}
render() {
return (
<View>
<Header headerText="Authentication"/>
{this.renderContent()} //button is rendered here.
</View>
);
}
Custom-defined button:
import React from 'react';
import { Text, TouchableOpacity } from 'react-native';
const Button = ({ onPress, children }) => {
const { buttonStyle, textStyle } = styles;
return (
<TouchableOpacity onPress={onPress} style={buttonStyle}>
<Text style={textStyle}>
{children}
</Text>
</TouchableOpacity>
);
};
const styles = {
textStyle: {
alignSelf: 'center',
color: '#007aff',
fontSize: 16,
fontWeight: '600',
paddingTop: 10,
paddingBottom: 10
},
buttonStyle: {
flex: 1,
alignSelf: 'stretch',
backgroundColor: '#fff',
borderRadius: 5,
borderWidth: 1,
borderColor: '#007aff',
marginLeft: 5,
marginRight: 5
}
};
export { Button };

Answer 1

You should specify your custom button height.
<View>
<View>
<Header headerText="Authentication"/>
</View>
<View style={{height:50}}>
{this.renderContent()} //button is rendered here.
</View>
</View>
Or you can use ScrollView instead.
<View>
<View>
<Header headerText="Authentication"/>
</View>
<ScrollView>
{this.renderContent()} //button is rendered here.
</ScrollView>
</View>