getting null height for touchableOpacity - reactjs

Question

Hi I am new to react native, I am following a course from udemy. In the course while creating a custom made button I am getting null height of the button but according to the course instructor the button should have height.
Below is the source code for App.js
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import firebase from 'firebase';
import { Header, Button, Spinner } from './components/common';
import LoginForm from './components/LoginForm';
class App extends Component {
state = { loggedIn: null };
componentWillMount() {
firebase.initializeApp({
apiKey: 'AIzaSyB9AnPpTlaO5XbzPOhPPVBhCbn0SEel7hw',
authDomain: 'authentication-ce600.firebaseapp.com',
databaseURL: 'https://authentication-ce600.firebaseio.com',
projectId: 'authentication-ce600',
storageBucket: 'authentication-ce600.appspot.com',
messagingSenderId: '979192009377'
});
firebase.auth().onAuthStateChanged((user) => {
if (user){
this.setState({ loggedIn: true });
}
else{
this.setState({ loggedIn: false });
}
});
}
renderContent (){
switch (this.state.loggedIn) {
case true:
return (
<Button>
Log Out
</Button>
);
case false:
return <LoginForm />;
default:
return <Spinner size="large" />;
}
}
render (){
return (
<View>
<Header headerText="Auth"/>
{this.renderContent()}
</View>
);
}
};
export default App;
Below is the Button.js
import React from 'react';
import { Text, TouchableOpacity } from 'react-native';
const Button = ({onPress, children}) => {
return (
<TouchableOpacity onPress={onPress} style={styles.buttonStyle}>
<Text style={styles.textStyle}> {children} </Text>
</TouchableOpacity>
);
};
const styles = {
buttonStyle: {
flex: 1,
alignSelf: 'stretch',
backgroundColor: '#fff',
borderRadius: 5,
borderWidth: 1,
borderColor: '#007aff',
marginLeft: 5,
marginRight: 5
},
textStyle: {
fontSize: 16,
paddingTop: 10,
paddingBottom: 10,
color: '#007aff',
fontWeight: '600'
}
};
export {Button} ;
Here is what the expected output should be:
this is the actual ouput which I am getting:
Thanks in advance

Answer 1

This is because your <Header /> must have some height so it takes up all the space inside the parent <View></View> that's inside app.js. Now, since your <TouchableOpacity> inside button.js doesn't have any height (it only has flex). By just having flex it will take up the remaining available space and not take any height of it's own. There is no available space for it since the parent <View> in app.js doesn't have height of it's own. The parent <View>'s height will be equal to the height of the <Header>. There will be no available space for the Button.
For a quick fix, inside your button.js just give some height to buttonStyle like 200. You can also give it some width.
You can also apply a height (More than the header's height) to your parent <View> for this issue to go away.
Hope I've helped!

Answer 2

You can make slight change to Button.js to below
const Button = props => (
<TouchableOpacity onPress={props.onPress} style={styles.buttonStyle}>
<Text style={styles.textStyle}>{props.children}</Text>
</TouchableOpacity>
);
export default Button;
And in your App.js, you can pass those props as below to the Button component,
<Button
onPress={() => {
console.log('clicked');
}}
children={'Text Name'}
/>

Answer 3

import React, { Component } from 'react';
import { View } from 'react-native';
import firebase from 'firebase';
import { Header, Button, Spinner } from './components/common';
import LoginForm from './components/LoginForm';
class App extends Component {
state = { loggedIn: null };
componentWillMount (){
firebase.initializeApp({
apiKey: 'AIzaSyCnz8V-MuEiOWcs3oyBBxyO6BCjpAGJm7o',
authDomain: 'react-native-auth-284c7.firebaseapp.com',
databaseURL: 'https://react-native-auth-284c7.firebaseio.com',
storageBucket: 'react-native-auth-284c7.appspot.com',
messagingSenderId: '1049444233116'
});
firebase.auth().onAuthStateChanged((user) => {
if (user) {
this.setState({ loggedIn: true });
} else {
this.setState({ loggedIn: false });
}
});
}
renderContent() {
switch (this.state.loggedIn) {
case true:
return <View style={styles.buttonContainerStyle}>
<Button onPress={() => firebase.auth().signOut()}>
Log Out
</Button>
</View>;
case false:
return <LoginForm />;
default:
return <Spinner size="large" />;
}
}
render() {
return (
<View>
<Header headerText="Authentication" />
{this.renderContent()}
</View>
);
}
}
const styles = {
buttonContainerStyle: {
flexDirection: 'row',
height: 40
}
};
export default App;
Copied this code from https://github.com/csjcode/react-native-auth/blob/master/src/App.js .This code worked for me