Кнопка выхода из системы не появляется После входа в систему?

Question

Я установил аутентификацию firebase для своего собственного собственного реактивного приложения. Мне удалось создать новый логин и ошибку аутентификации для любого неправильного логина.

Как только пользователь войдет в систему, я хочу, чтобы он вышел из системы с помощью кнопки, но, к сожалению, кнопка не видна, и на экране появляется только текст.

«App.js»

 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: "",
          authDomain: "",
          databaseURL: "",
          projectId: "",
          storageBucket: "",
          messagingSenderId: ""
         }
        );

      firebase.auth().onAuthStateChanged((user) => {
        if (user) {
          this.setState({ loggedIn: true });
        } else {
       this.setState({ loggedIn: false });
       }
      });
     }

    renderContent() {
      switch (this.state.loggedIn) {
      case true:
        return (
          <Button onPress={() => firebase.auth().signOut()}>
           Log Out
          </Button>
         );
      case false:
         return <LoginForm />;
      default:
        return <Spinner size="large" />;
      }
  }

  render() {
     return (
       <View>
        <Header headerText="Authentication" />
        {this.renderContent()}
       </View>
    );
   }
  }

export default App;

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

Заранее спасибо.

Answer 1

отредактируйте свою кнопку следующим образом

 <Button children="Log Out" onPress={() => firebase.auth().signOut()}>           
 </Button>