title: Bottom tab bar should not occur anywhere but only on the first initial screen that renders via Webview in React Native
body: <p>I have a webview component in my project, where the flow being =&gt;
  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.</p>
  <p>Below is my WebviewScreen code :</p>
  <pre><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 = () =&gt; {
      return (
        &lt;View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}&gt;
          &lt;ActivityIndicator size=&quot;large&quot; /&gt;
        &lt;/View&gt;
      );
    };
    render() {
      const {url} = this.props.route.params;
      return (
        &lt;SafeAreaView style={{flex: 1}}&gt;
          &lt;WebView
            source={{uri: url}}
            renderLoading={this.renderLoadingView}
            startInLoadingState={true}
            ref={(ref) =&gt; {
              this.webview = ref;
            }}
            onNavigationStateChange={(event) =&gt; {
              if (event.url !== url) {
                this.webview.stopLoading();
              }
            }}
          /&gt;
        &lt;/SafeAreaView&gt;
      );
    }
  }
  </code></pre>
  <p>And Appnavigation.js</p>
  <pre><code>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 (
      &lt;Tab.Navigator
        lazy={false}
        tabBarOptions={{
          labelStyle: {
            color: '#FF1493',
            fontSize: 15,
          },
        }}&gt;
        &lt;Tab.Screen
          name=&quot;Home&quot;
          component={HomeScreen}
          options={{
            tabBarIcon: () =&gt; {
              &lt;MaterialIcon name=&quot;home&quot; color=&quot;#FF1493&quot; size={20} /&gt;;
            },
          }}
        /&gt;
        &lt;Tab.Screen
          name=&quot;Consult&quot;
          component={ConsultationHomeScreen}
          initialParams={{
            url: 'some link',
          }}
        /&gt;
        &lt;Tab.Screen name=&quot;Plans&quot; component={PlansScreen} /&gt;
      &lt;/Tab.Navigator&gt;
    );
  }
  
  export default function AppNavigation() {
    return (
      &lt;NavigationContainer&gt;
        &lt;Stack.Navigator headerMode=&quot;none&quot;&gt;
          &lt;Stack.Screen name=&quot;login&quot; component={LoginScreen} /&gt;
          &lt;Stack.Screen name=&quot;otp&quot; component={OtpScreen} /&gt;
  
          &lt;Stack.Screen name=&quot;addchild&quot; component={AddChild} /&gt;
  
          &lt;Stack.Screen
            name=&quot;acceptinvitescreen&quot;
            component={AcceptInviteScreen}
          /&gt;
          &lt;Stack.Screen name=&quot;home&quot; component={BottomTabBar} /&gt;
        &lt;/Stack.Navigator&gt;
      &lt;/NavigationContainer&gt;
    );
  }
  </code></pre>
  <p>However, am unable to remove the bottomtabbar,could anyone please suggest how should I implement this behaviour?</p>
  <p>Step1-&gt; Webview initial screen renders and has bottomtabtabr
  Step2-&gt; Link clicked on the initial screen and navigates to next screen handled by web source
  Step3-&gt;Bottom tab bar should not occur anywhere but only on the first initial screen</p>
  <p>Please,any suggestion would be appreciated and let me know if anything else is required for better understanding.</p>