```js
const PI = ({navigation})=>{
   useEffect(()=>{
       // **option one** navigation.setOptions({tabBarVisible:false})
   )
   return(
       <View></View>
   );
}

const Foo=({navigation})=> {
  const [tabBarVisible,setTabBarVisible]= useState(true)
    useEffect(()=>{
      navigation.setOptions({tabBarVisible:tabBarVisible})
    })
    const changevisiual =(val)=>{
      navigation.setOptions({tabBarVisible:val})
    }
    return (
        <HomeStack.Navigator {/* **option two** onChange={({route})=>changevisiual(route.name=='pi'?false:true)}*/} >
            <HomeStack.Screen name="pi" component={PI} />
            <HomeStack.Screen name="tau" component={TAU} />
        </HomeStack.Navigator>
    )
}

  export default function App() {
    return (
      <NavigationContainer>
          <Tab.Navigator>
            <Tab.Screen name="fooobar" component={fooobar} />
            <Tab.Screen name="foo" component={Foo}/>
            <Tab.Screen name="bar" component={bar} />
            <Tab.Screen name="barfoo" component={barfoo} />
          </Tab.Navigator>
        </NavigationContainer>
      );
   }
```

I want to make the bottom tab navigation bar disappear when on the PI screen and then reappear when on the TAU screen and on any other tabs. I'm currently using expo and prefer functional components ten fold :) I do figure that I could use Redux.js for such a task but I'm not comfortable enough with it yet. I only displayed two options or ideas that I had in trying to solve this although neither of them worked. If you think of another way please let me know...
//Side note does anyone know how to parse props/params through a .Screen?

```
< .Screen name="e"  component={E} name={"Euler's number"} navigationOptions={({navigation})=>{header:'this is a header'} } />

//then either
function E ({navigation,route},props){
props.name
route.params.name
route.params.header
}

```