Hide header in stack navigator React navigation : <p>I'm trying to switch screen using both stack and tab navigator.</p>

<pre><code>const MainNavigation = StackNavigator({
      otp: { screen: OTPlogin },
      otpverify: { screen: OTPverification},
      userVerified: {
        screen: TabNavigator({
          List: { screen: List },
          Settings: { screen: Settings }
        }),
      },
    });
</code></pre>

<p>In this case stacknavigator is used first and then tabnavigator. and i want to hide headers of stack navigator. WIt is not working properly when i use navigationoptions like::</p>

<pre><code>navigationOptions: { header: { visible: false } }
</code></pre>

<p>i'm trying this code on first two components which are using in stacknavigator.
if i use this line then getting some error like:: </p>

<p><a href="https://i.stack.imgur.com/DzbD0.png" rel="noreferrer"><img src="https://i.stack.imgur.com/DzbD0.png" alt="enter image description here"></a></p>
