reactjs - Dynamically hide/transparent header in react navigation 4x?

Question

I have a loader in place but in loads under the header. What i need is too hide or make the header transparent when the loader is loading and again reshow or unhide the header when the loader is ended !

How to implement that ?

As of now am using this,

static navigationOptions = ({ navigation }) => {
        return {
            title: navigation.getParam('from'),
            headerStyle: {
                backgroundColor: '#673AB7',
            },
            headerTitleStyle: {
                color: '#fff'
            },
            headerTitleAlign: 'center',
            headerTintColor: '#fff'
        }
    };

Can this be changed dynamically ? if so how is it ? please guide !

Am using react navigation 4x

question from:https://stackoverflow.com/questions/65871170/dynamically-hide-transparent-header-in-react-navigation-4x

Answer 1

You can use:

const loading = <Some state to be received as a prop whether the loader is loading>

stackName: {
  screen:ComponentScreenName,
  navigationOptions: {
    headerShown: !loading
  }
 }