Skip to main content

Header

Headers are navigation components that display information and actions relating to the current screen. This component is exported in this library and works well with the other scroll containers this library provides.

Props​

showNavBar​

An animated value between 0 and 1 that indicates whether the header's children should be visible.

headerStyle​

An optional style object to apply to the header's root container.

Note: Do not apply an absolute position to this container. Instead, use the absoluteHeader prop on any of the scroll containers to absolutely position the header.

headerLeft​

An optional React element to display on the left side of the header.

headerRight​

An optional React element to display on the right side of the header.

headerCenter​

An optional React element to display in the center of the header.

headerLeftStyle​

An optional style object to apply to the header's left container.

headerRightStyle​

An optional style object to apply to the header's right container.

headerCenterStyle​

An optional style object to apply to the header's center container.

headerLeftFadesIn​

An optional boolean to indicate whether the header's left container should fade in when the showNavBar is 1.

headerRightFadesIn​

An optional boolean to indicate whether the header's right container should fade in when the showNavBar is 1.

headerCenterFadesIn​

An optional boolean to indicate whether the header's center container should fade in when the showNavBar is 1.

ignoreTopSafeArea​

An optional boolean to indicate whether the header should ignore the top safe area. This is useful when you want to display the header behind the status bar. Defaults to false. If you are rendering this header in an iOS modal, you should set this to true.

noBottomBorder​

An optional boolean to indicate whether the header should not have a bottom border. Defaults to false.

initialBorderColor​

An optional color to use for the header's bottom border color initially. When the user scrolls down, the color will animate to the supplied borderColor. Defaults to #E5E5E5.

borderColor​

An optional color to use for the header's bottom border. Defaults to #E5E5E5.

borderWidth​

An optional width to use for the header's bottom border. Defaults to StyleSheet.hairlineWidth.

SurfaceComponent​

An optional component that can act as the surface of the header. Please ensure that the styling applied to the component includes StyleSheet.absoluteFill or StyleSheet.absoluteFillObject to ensure that the surface component fills the header.

Note: If you want to use a BlurView as the surface and want the content below to be seen under the surface, make sure you set absoluteHeader to true on the scroll container.

Example​

The following example will make the header have a cyan background when the user scrolls the scroll container up:

const SURFACE_BG_COLOR = 'cyan';

const HeaderSurface: React.FC<SurfaceComponentProps> = ({ showNavBar }) => (
  <FadingView
    opacity={showNavBar}
    // StyleSheet.absoluteFill is needed to ensure that the component fills up the header.
    style={[StyleSheet.absoluteFill, { backgroundColor: SURFACE_BG_COLOR }]}
  />
);

const HeaderComponent: React.FC<ScrollHeaderProps> = ({ showNavBar }) => {
  const navigation = useNavigation();
  const onPressProfile = () => navigation.navigate('Profile');

  return (
    <Header
      showNavBar={showNavBar}
      // ...
      SurfaceComponent={HeaderSurface} // <- usage
    />
  );
};

See the example application's Header SurfaceComponent Interpolation screen in for a working example.