CODEWITHSUNDEEP
react-nativereact-navigation
drtapha
drtapha

Reputation: 569

How to hide the tabBar in the child screen of a StackNavigator

I declare two screens A and B in a StackNavigator. The StackNavigator is nested in a tabNavigator. The bar is visible for the both screens. And i want to show it just in the screen A. I set the tabBarVisible to false in the screen B but no effects.

import React,{Component} from 'react'; 
import {Text} from 'react-native'; 

import {StackNavigator, TabNavigator} from 'react-navigation'; 



class ScreenA extends Component {
 static navigationOptions = {
    title: 'A'
 }

 render(){
    <Text>ScreenA</Text>
 }
}

class ScreenB extends Component {
 static navigationOptions = {
    title: 'B'
 }

 render(){
    <Text>ScreenB</Text>
 }
}

const HomeScreen = new StackNavigator({
 A : {screen : ScreenA}, 
 B : {Screen : ScreenB}
}); 

const TabBar = new TabNavigator({
 Main : {screen : HomeScreen}
}); 

export default TabBar;

Upvotes: 1

Views: 3804

Answers (2)

Lopakhin
Lopakhin

Reputation: 299

It's quite easy actually, just set tabBarVisible to false in navigationOptions

Upvotes: 0

ufxmeng
ufxmeng

Reputation: 2600

If you don't want to see the TabBar with screen B, you should not nest screen B inside a TabNavigator, you need to redesign you navigator to move the screen B out of the TabNavigator.

AppScreen.js

import React, {Component} from "react";
import {Button, Text, View} from "react-native";
import {NavigationActions, StackNavigator, TabNavigator} from "react-navigation";

//reference to the root App navigator
let appNavRef;

class ScreenA extends Component {
    static navigationOptions = {
        title: 'A'
    };

    _handlerPress = () => {

        //handle navigation
        const navigateAction = NavigationActions.navigate({
            type: 'Navigation/NAVIGATE',
            routeName: 'bNav',
            params: {},
        });
        appNavRef.dispatch(navigateAction)
    };

    render() {
        return (
            <View>
                <Text>ScreenA</Text>
                <Button title="GoToB" onPress={this._handlerPress}/>
            </View>
        )
    }
}

class ScreenB extends Component {
    static navigationOptions = {
        title: 'B'
    };

    render() {
        return <Text>ScreenB</Text>
    }
}

const HomeScreen = new StackNavigator({
    A: {screen: ScreenA}
    //move screen B outside
});

const TabBar = new TabNavigator({
    Main: {screen: HomeScreen}
});

class TabScreen extends Component {

    //hide the StackNavigator header bar
    static navigationOptions = {
        header: null,
    };

    render() {
        return (
            <TabBar/>
        );
    }
}

const AppNav = new StackNavigator({
    tabNav: {screen: TabScreen},
    bNav: {screen: ScreenB}
});

class App extends Component {

    render() {
        return (
            //get the reference to the root navigator
            <AppNav ref={navigatorRef => {
                appNavRef = navigatorRef
            }}/>
        );
    }

}

export default App;

index.android.js

    import AppScreen from './src/test/AppScreen'

    export default class myapp extends Component {
        render() {
            return (<AppScreen/>);
        }
    }
//the rest code...

Upvotes: 2

Related Questions