Не удается обновить во время существующего перехода состояния, кроме того, функция передана как логическая, и я не знаю почему

Question

У меня есть приложение, которое имеет состояние, которое содержит информацию, если пользователь вошел в систему или нет.Это состояние передается поставщику контекста:

App.native.js

import React, { Component } from "react";
import Orientation, { orientation } from "react-native-orientation";
import Navigator from "./navigation/Navigator";
import { createContext } from 'react';

export const LoginContext = createContext({
  isLoggedIn: false,
  login: () => {},
  logout: () => {}
});


export default class App extends Component {
    constructor(props) {
    super(props);

      this.login = () => {
        this.setState(state => ({
          isLoggedIn: true
        }));
        console.log("Logged in!");
      };

      this.logout = () => {
        this.setState(state => ({
          isLoggedIn: false
        }));
        console.log("Logged out!");
      };   

      this.state = {
        isLoggedIn: false,
        login: this.login,
        logout: this.logout
      };      
  }  

  componentDidMount = () => {
    Orientation.lockToPortrait();
  };

  render() {
    return <LoginContext.Provider value={this.state}><Navigator /></LoginContext.Provider>;
  }
}

На (почти) каждом экране приложения я хочу показать значок в заголовке, например:

SearchScreen.js

import styles from './styles';
import React, { Component } from 'react';
import { Text, View,AsyncStorage } from 'react-native';
import { Button } from 'react-native-elements';
import  LoginIcon  from '../../components/LoginIcon'
import { StatusBar } from 'react-native'

class SearchScreen extends Component {
  static navigationOptions = ({ navigation }) => ({
      headerTitle: "Suchen",
      headerRight: <LoginIcon navigation={navigation} />   
    }); 

  render() {
    return (
      <View style={styles.container}>
      <StatusBar barStyle = "dark-content" hidden = {false} backgroundColor = "#338A3E" />
        <Text>This is the SearchScreen.</Text>
      </View>
    );
  }
}

export default SearchScreen;

Значок должен отображать изображение входа или выхода из системы, в зависимости от состояния приложения.Я пытаюсь сделать это с помощью Context Consumer:

LoginIcon.js

import styles from "./styles";
import React, { Component } from "react";
import { View, AsyncStorage } from "react-native";
import { Icon } from "react-native-elements";
import AntIcon from "react-native-vector-icons/AntDesign";
import {LoginContext} from "../../App.native.js";

const LoginIcon = ({navigation}) => {   
               
    return (
      <LoginContext.Consumer>
        {({isLoggedIn, login, logout}) => {
           return (isLoggedIn ? 
                   <Icon
                    name="logout"
                    type='material-community'
                    containerStyle={styles.icon}                  
                    color="white"                    
                    onPress={logout}
                  />  
                  :
                    <Icon
                    name="login"
                    type='material-community'
                    containerStyle={styles.icon}                  
                    color="white"                    
                    onPress={navigation.navigate("Login")}
                  />  );
          }
        }          
      </LoginContext.Consumer>   
    );    
  
}

export default LoginIcon;

Теперь, когда я вхожу в систему (через экран входа в систему, не показанный здесь), состояние изменяется должным образом (isLoggedIn = true), и значок в заголовке экрана поиска показываетправильная кнопка «Выйти».Это здорово!

Но когда я нажимаю эту кнопку, я получаю две ошибки:

1: Предупреждение: не удается обновить во время существующего состоянияпереход (например, внутри 'render').Методы рендеринга должны быть чистой функцией реквизита и состояния. Это загадка для меня, я знаю, что у меня есть недостаток дизайна, но не знаю, как его решить, потому что ... ну, в основном, всепроисходит внутри функции рендеринга?

2) Неудачный тип реквизита: недопустимый объект 'onPress' типа 'логический', предоставленный для 'Icon', ожидаемая 'функция'.в Icon (в withTheme.js: 24) в Themed.Icon (в LoginIcon.js: 22) в LoginIcon (в SearchScreen.js: 12) Насколько я понимаю, передача реквизитов компоненту функциивозможно, но this.props следует не указывать при вызове prop внутри компонента.Но это не похоже на работу.Как я могу заставить это работать?