CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
kirimi
kirimi

Reputation: 1400

react-native: How to hide bottom tabbar onPress

I am trying to hide bottomTabbar when I onPress a botton.

In my App.js file I have my ButtomTabNavigator :

const ButtomTabNavigator = createBottomTabNavigator(
  {
    screenOne: {
      screen: RealReviewMain,
      navigationOptions: ({ navigation }) => ({
        tabBarVisible: true,
      })
    },
    screenTwo: {
      screen: RealReviewMain,
//Here I set the tabbarVisible to true
      navigationOptions: ({ navigation }) => ({
        tabBarVisible: true,
      })
    },
  },
)

From ScreenTwo, I try to hide bottom tabbar using onPress

<TouchableOpacity
          onPress={()=> {
            this.props.navigation.setParams({ tabBarVisible: false });
          }}/>

Is this the right way to do it? nothing happens.

Any advice or comment would be really appreciated! Thanks in advance!

Upvotes: 0

Views: 890

Answers (2)

Auticcat
Auticcat

Reputation: 4489

It's possible to hide/show a tabBar based off button press. Using static navigationOptions. An example would be:

 static navigationOptions = ({ navigation }) => {
    return {tabBarVisible: navigation.state.params.tabBarVisible}
}

This is a simple example, you would need to initialize tabBarVisible since it would be false. A full component could look like:

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

class Screen extends Component {

    componentDidMount = () => {
        this.props.navigation.setParams({ tabBarVisible: true }) //initialize the state
    }

    static navigationOptions = ({ navigation }) => {

        return {tabBarVisible:navigation.state.params && navigation.state.params.tabBarVisible}
    }
    render() {
        return (
            <View style={{flex:1}}>           
                <Button title={"hide"} onPress={() => this.props.navigation.setParams({tabBarVisible:false})}/>
                <Button title={"show"} onPress={() => this.props.navigation.setParams({tabBarVisible:true})}/>
            </View>
        )
    }
}


export default Screen

Upvotes: 2

Simone Righi
Simone Righi

Reputation: 11

As far as i know, you cannot hide navigation elements once they are rendered in the page. But, as stated here you can hide navigation elements in specific screens as follows:

const FeedStack = createStackNavigator({
    FeedHome: FeedScreen,
    Details: DetailsScreen,
});

FeedStack.navigationOptions = ({ navigation }) => {
    let tabBarVisible = true;
    if (navigation.state.index > 0) {
        tabBarVisible = false;
    }

    return {
        tabBarVisible,
    };
};

If you want to hide the navigator in a specific screen you can add an if condition:

if (navigation.state.index > 0 && navigation.state.routes[1].routeName === "<name of the screen>")

Upvotes: 0

Related Questions