Bottom tab bar should not occur anywhere but only on the first initial screen that renders via Webview in React Native

Question

I have a webview component in my project, where the flow being => The bottomTabBar opens the initial screen of the url that is given to Webview source prop, which should remain, when any link is clicked on the webview and it moves to another screen, the bottomtabbar should not come up.

Below is my WebviewScreen code :

import React, {Component} from 'react';
import {WebView} from 'react-native-webview';
import {View, SafeAreaView, ActivityIndicator} from 'react-native';

export default class ConsultationHomeScreen extends Component {
  renderLoadingView = () => {
    return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <ActivityIndicator size="large" />
      </View>
    );
  };
  render() {
    const {url} = this.props.route.params;
    return (
      <SafeAreaView style={{flex: 1}}>
        <WebView
          source={{uri: url}}
          renderLoading={this.renderLoadingView}
          startInLoadingState={true}
          ref={(ref) => {
            this.webview = ref;
          }}
          onNavigationStateChange={(event) => {
            if (event.url !== url) {
              this.webview.stopLoading();
            }
          }}
        />
      </SafeAreaView>
    );
  }
}

And Appnavigation.js

import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import LoginScreen from '../screens/authentication/LoginScreen';
import OtpScreen from '../screens/authentication/OtpScreen';
import AddChild from '../screens/Child/AddChild';
import AcceptInviteScreen from '../screens/AcceptInviteScreen';
import ConsultationHomeScreen from '../screens/ConsultationHomeScreen';
import HomeScreen from '../screens/HomeScreen/HomeScreen';
import PlansScreen from '../screens/PlansScreen';
const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

function BottomTabBar() {
  return (
    <Tab.Navigator
      lazy={false}
      tabBarOptions={{
        labelStyle: {
          color: '#FF1493',
          fontSize: 15,
        },
      }}>
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarIcon: () => {
            <MaterialIcon name="home" color="#FF1493" size={20} />;
          },
        }}
      />
      <Tab.Screen
        name="Consult"
        component={ConsultationHomeScreen}
        initialParams={{
          url: 'some link',
        }}
      />
      <Tab.Screen name="Plans" component={PlansScreen} />
    </Tab.Navigator>
  );
}

export default function AppNavigation() {
  return (
    <NavigationContainer>
      <Stack.Navigator headerMode="none">
        <Stack.Screen name="login" component={LoginScreen} />
        <Stack.Screen name="otp" component={OtpScreen} />

        <Stack.Screen name="addchild" component={AddChild} />

        <Stack.Screen
          name="acceptinvitescreen"
          component={AcceptInviteScreen}
        />
        <Stack.Screen name="home" component={BottomTabBar} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

However, am unable to remove the bottomtabbar,could anyone please suggest how should I implement this behaviour?

Step1-> Webview initial screen renders and has bottomtabtabr Step2-> Link clicked on the initial screen and navigates to next screen handled by web source Step3->Bottom tab bar should not occur anywhere but only on the first initial screen

Please,any suggestion would be appreciated and let me know if anything else is required for better understanding.

Answer 1

I tested this modification in your source code and it works like a charm.

GIT difference in WebviewScreen.js :

@@ -23,6 +23,7 @@ export default class ConsultationHomeScreen extends Component {
       }}
       onNavigationStateChange={(event) => {
         if (event.url !== url) {
+          this.props.navigation.setOptions({ tabBarVisible: false });
           this.webview.stopLoading();
         }
       }}

Let me know if you have any issue.