How to use password authentication before navigate to screens and adapt it with the bottom tab navigator in React Native?

Question

This question is an extension of this question and it is from the same member who asked this.

First, his problem was, how to authenticate before navigating to screens. But then, he asked, how to adapt that navigated new screen to the particular tab in the bottom tab navigator (Let's say Tab1). That means, after it is navigated to a particular screen after authenticated, he wants to click on another tab (Let's say Tab2), and then click on the previous tab (Tab1) and the navigated screen should still display on that previous tab (Tab1).

I've provided my answer to this new question below...

Answer 1

This is the solution that I'm suggesting.

This answer is an extension of the answer in the first question.

Home.js

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

Here, if the state called screen is set to the particular name of the screen, it will conditionally render that particular screen. Otherwise, it will render the buttons to go to those screens.

PasswordInputModal.js

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 = () => {
    //Use any authentication method you want according to your requirement.
    //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>
    );
  }
}

What I've done here is, when the user is authenticated, a state called screen is set to the name of the screen which should be displayed. Actually, this is not something like navigating. This is actually called Conditional Rendering.

I didn't test this code myself. I hope this will help to the member who asked this question.