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!

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