React navigation toggle tab bar on scroll

I am working on a project with React Native + React Navigation which has a combination of tab and stack navigators. I am trying to hide the tabbar when the user scrolls down a FlatList/ScrollView to increase the viewable content. The end implementation would use the Animated library to animate it out of view but currently I am just trying to initiate the hide manually via a click. The problem is that when I try to set tabBarVisible via a call to this.props.navigation.setParams({ tabBarVisible: false })} it doesn't work.

The navigation setup is as follows:

TabNavigator
  - HomeStackNavigator
    - HomePage
    - Contact
    - FAQ
 ...
 (total of 5 tabs with stacknavigators)
 ...

Inside the HomePage I have the following:

class HomeScreen extends React.Component {
    render() {
        return (
            <SafeAreaView style={styles.container}>
                <TouchableOpacity onPress={() => this.props.navigation.setParams({ tabBarVisible: false })}>
                    <Text>Hide bar</Text>
                </TouchableOpacity>
            </SafeAreaView>
        );
    }
}

It is basically a call from the HomeScreen -> HomeStack -> TabBar. Any idea why the tab bar visibility is not reachable to the top tab navigator from the screen inside the nested stack navigator?