Cannot style custom header with absolute positioning.

[mdanishseera]

Current Behavior

I am trying to animate the header so that it hides when scroll view scrolls up and show it again when it scrolls down. I was following this issue which achieves the behavior #480 . The problem is the solution doesn't use the custom component for the header, where as I am using the custom component to show the image instead of text.

How to reproduce
I have a stack navigator as follows:

const AppNavigator = createStackNavigator(
  {
    Home: MainListing,
    Details: DetailsScreen
  },
  {
    initialRouteName: 'Home',
    defaultNavigationOptions: {
      headerStyle: { backgroundColor: customTheme.COLORS.PRIMARY },
      headerTitle: (obj) => {
        return (
          <Image source={Logo} style={{ resizeMode: 'contain', width: 100, height: 100 }} />
        )
      },
      cardStyle: { backgroundColor: '#FFFFFF' },
    },
  }
)

And a the screen which is the home screen in the stack navigator

class MainListing extends React.Component {

  render() {
    return (
      <ScreenContainer>
        <ScrollView>
          //some other components so that the view scrolls
        </ScrollView>
      </ScreenContainer>
    );
  }
}

const ThemedElement = withGalio(MainListing);
ThemedElement.navigationOptions = ({ navigation, navigationOptions }) => {
  const { params } = navigation.state;
  return {
    headerStyle: {   
      position:'absolute',   
      ...navigationOptions.headerStyle
    }
  };
};
export default ThemedElement;

I am using the Galio framework hence added the navigationOptions to the constant.

You can see the position: absolute style applied to override the default options, with this code in place style doesn't apply and I get the warning saying position absolute is not supported on headerStyle

My versions of the npm modules are as follows:
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-gesture-handler": "^1.5.3",
"react-native-reanimated": "^1.4.0",
"react-native-safe-area-context": "^0.6.2",
"react-native-screens": "^2.0.0-alpha.22",
"react-native-vector-icons": "^6.6.0",
"react-navigation": "^4.0.10",
"react-navigation-stack": "^2.0.12"

How do I make the custom header achieve this behavior?

[bibipkins]

I had some issues with custom header
but as suggested in here https://github.com/react-navigation/stack/issues/351
setting headerTitle to some component does not make you header "custom". It is still only the title, not the whole header. And in newer versions of react-navigation and react-navigation-stack this title gets wrapped by some other component that does not let you position or transform your title much.
So instead I would suggest making the header truly custom by setting navigation options like

navigationOptions: ({ navigation }) => {
    return {
      header: () => <YourCustomHeader navigation={navigation} />
    }
}

After that you can do with your header pretty much whatever you want

[mdanishseera]

@bibipkins thanks, your comment solves the problem, closing the issue.