Адаптация экрана в нижней части навигатора после аутентификации

Question

Я создаю приложение React Native с Firebase и в настоящее время пытаюсь адаптировать экран к определенной вкладке в нижнем навигаторе вкладок путем аутентификации на нем.

Скажем, Tab1 - это исходный экран на этом нижнем навигаторе вкладок, а Tab2 - это экран, на котором я хочу пройти аутентификацию и перейти к нему. Каждый раз, когда я проверяю подлинность и перехожу к Tab2, я хочу, чтобы Tab2 стал экраном, который отображается всякий раз, когда я нажимаю ту же самую нижнюю вкладку.

В этом случае, Home.js- это Tab1, и ему принадлежит следующий код. Здесь, если состояние, называемое экраном, установлено на конкретное имя экрана, он будет условно отображать этот конкретный экран. В противном случае он отобразит кнопки для перехода к этим экранам.HelderScreen, LolsScreenа также AthleanScreen есть 3 возможности стать Tab2.

import React, { Component } from 'react';
import { Text, View, TouchableOpacity, ScrollView } from 'react-native';
import PasswordInputModal from './PasswordInputModal'
import HelderScreen from 'path/to/HelderScreen';
import LolsScreen from 'path/to/LolsScreen';
import AthleanScreen from 'path/to/AthleanScreen';

export default class HomeScreen extends Component {
constructor(props) {
super(props); 
this.state = {
  screen: null,
}
}

switchScreen = () => {
switch (this.state.screen) {
  case 'Helder' : return <HelderScreen />;
  case 'Lols'   : return <LolsScreen />;
  case 'Athlean': return <AthleanScreen />;
  default       : this.setState({ screen: null });
}
}

render() {
if(this.state.screen) { return this.switchScreen() }

 return (
  <View style={styles.container}>
<ScrollView style={styles.flatlist}>
  <View style={styles.flatlist1}>
    <TouchableOpacity onPress={() => this.PasswordInputModal.open('Helder')}>
      <Text style={styles.item}>Empresa do Helder</Text>
    </TouchableOpacity>
  </View>
  <View style={styles.flatlist1}>
    <TouchableOpacity onPress={() => this.PasswordInputModal.open('Lols')}>
      <Text style={styles.item}>Lols Inc</Text>
    </TouchableOpacity>
  </View>
  <View style={styles.flatlist1}>
    <TouchableOpacity onPress={() => this.PasswordInputModal.open('Athlean')}>
      <Text style={styles.item}>Tesla Portugal</Text>
    </TouchableOpacity>
  </View>          
</ScrollView>

<PasswordInputModal
  ref={modal => this.PasswordInputModal = modal} 
  navigation={this.props.navigation}
  onAuthentication={(screen) => this.setState({ screen })} />
  </View>
    );
      }
      }

Это PasswordInputModal.jsи это модальное окно, которое позволяет мне аутентифицироваться на одном из этих экранов и, соответственно, адаптировать его к нижней вкладке. Что я здесь сделал, так это то, что когда пользователь аутентифицирован, состояние screen устанавливается в имя экрана, который должен отображаться. Собственно, это не что-то вроде навигации, а скорее условный рендеринг.

import React, { Component } from 'react';
import { View, TextInput, Button } from 'react-native';
import Modal from 'react-native-modal';

export default class PasswordInputModal extends Component {
  constructor(props) {
super(props);
this.state = {
  password  : '',
  isVisible : false,
  screen    : null,
};
  }

  open = (screen) => this.setState({ isVisible: true, screen: screen });

  close = () => this.setState({ isVisible: false });

  onPressSubmitButton = () => {
//Here, it is taken as authenticated if and only if the input password is "12345".

const isAuthenticated = ("12345" == this.state.password); //If input password is '12345', isAuthenticated gets true boolean value and false otherwise.

if(isAuthenticated) {
  this.props.onAuthentication(this.state.screen);
}
    else {
  console.log("Invalid password"); //Prompt an error alert or whatever you prefer.
}

this.close();
  }

   renderModalContent = () => (
<View>
  <TextInput type={'password'} value={this.state.password} onChangeText={(password) => 
this.setState({ password })} />
  <Button onPress={() => this.onPressSubmitButton()} title="Submit" color="#841584" />
</View>
  );


  render() {
    return (
     <Modal
isVisible={this.state.isVisible}
backdropColor="#000000"
backdropOpacity={0.9}
animationIn="zoomInDown"
animationOut="zoomOutUp"
animationInTiming={600}
animationOutTiming={600}
backdropTransitionInTiming={600}
backdropTransitionOutTiming={600}
  >
    {this.renderModalContent()}
  </Modal>
);
  }
}

Однако код работает не так, как должен. Каждый раз, когда я дважды нажимаю на тот же самый нижний навигатор вкладок после аутентификации и перехода к Tab2, отображается Tab1. Я действительно не знаю, что делаю не так.

Не могли бы вы мне помочь?