React-native rendering button but not showing its height

Question

I am trying to render logout button and its rendering it but its not showing height for the button. i am also adding the files which have data for Both button.js and app.js. now the problem is its showind button but the height of the button is 1 dont know why. i copied this code from somewhere and trying to make something out of it. some other place i am easily able to use button width. but not here.

and my common/index.js has all exported files like Button.js and all getting button in this form.its showing but not with the size

Button.js

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

App.js

import React, {Component} from 'react';
import { View } from 'react-native';
import firebase from 'firebase';
import { Header, Button, Spinner, Card } from './components/common';
import LoginForm from './components/LoginForm';

class App extends Component {

  state = { loggedIn: null };

  componentWillMount() {
    firebase.initializeApp({
      apiKey: '***********************************',
      authDomain: '*********************************',
      databaseURL: '***********************************',
      projectId: '***************************************',
      storageBucket: '*************************************',
      messagingSenderId: '32810678085'
    });



 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="Authentication" />
        {this.renderContent()}
      </View>
    )
  }
}

export default App;

Answer 1

I've had the exact same problem. First of all, the version of React Native in the tutorial was different to the version that you used judging by the date of the post, this could point to a possible explanation of why the code worked in the tutorial but not in our code, although I can't know.

On the other side, it's not exactly true that the button code works in other parts of the code.

When you render the login form, the button is enclosed in a CardSection component.

<Card>
...
    <CardSection>
        {this.renderButton()}
    </CardSection>
</Card>

The CardSection component defines the flexDirection of its children as 'row' (horizontal) and the flex property of the Button "flex: 1" expands the width of the button along the horizontal (row) axis of its parent.

So, to make that code work in current versions of react-native, you have two options:

1.- Enclose the logout button in a CardSection:

import { Header, Button, CardSection } from './components/common';

renderContent() {
  if (this.state.loggedIn) {
    return (
      <CardSection>
        <Button>Log Out</Button>
      </CardSection>
    );
  }
  return <LoginForm />;
}

2.- Enclose the button in a View and give it at least a style property of "flexDirection: row":

renderContent() {
  if (this.state.loggedIn) {
    return (
      <View style={style.containerStyle}>
        <Button>Log Out</Button>
      </View>
    );
  }
  return <LoginForm />;
}

const style = {
    containerStyle: {
      flexDirection: 'row',
    }
};

Answer 2

Just add this:

marginTop:5

to the buttonStyle object.

Answer 3

Usually you should wrap your TouchableOpacity sections in Views, they respond much better to styling. When learning react-native i often ran into a similar error.

I like to structure my implementation of buttons like so:

//Note i have edited this to tie in with your code
//
//Button.js file
//
//
return (
<View style = {buttonStyle}>
    <TouchableOpacity onPress={onPress}>
        <Text style={textStyle}>
            {children}
        </Text>
    </TouchableOpacity>
</View>);

EDIT: Now, you should be able to add a height component to the buttonStyle, and then the button should display as you expect :-) Pseudo code:

//Other styling components...
height: 50,
//Other styling components...