Stickyheader.js

Brought with ❤️ by

Introduction

Stickyheader.js is a simple React Native library, enabling to create a fully custom header for your iOS and Android apps.

Preview | Getting Started | Contributing | Contributors

Preview

Features

Stickyheader.js ships with 3 different use cases for sticky headers and a possibility to create fully custom header!

Tabbed Header	Avatar Header	Details Header

In Use

Check the live demo on Expo Snack here.

Predefined headers can be accessed through headerType="HeaderName" property, each header can be configured according to your demands using the wide amount of properties. You can change all of them, or use it right out of the box with as little changes as possible to use it for your needs

This is how you can add them in your app:

import React from 'react';
import StickyParallaxHeader from 'react-native-sticky-parallax-header';

const TestScreen = () => (
  <>
    <StickyParallaxHeader headerType="TabbedHeader" />
    {/* <StickyParallaxHeader headerType="AvatarHeader" /> */}
    {/* <StickyParallaxHeader headerType="DetailsHeader" /> */}
  </>
);

export default TestScreen;

Below are examples of those components and description of the props they are accepting.

Tabbed Header

Property	Type	Optional	Default	Description
`headerType`	`TabbedHeader`	No	`TabbedHeader`	Set header type to TabbedHeader
`backgroundColor`	`string`	Yes	`'#1ca75d'`	Header background color
`backgroundImage`	`ImageSourcePropType`	Yes		Header background image source
`bounces`	`boolean`	Yes	`true`	Allow scroll view bounces (IOS)
`contentContainerStyles`	`StyleProp<ViewStyle>`	Yes		Set scroll view body styles
`foregroundImage`	`ImageSourcePropType`	Yes		Set tabbed header image
`headerHeight`	`number`	Yes	`ifIphoneX(92, constants.responsiveHeight(13))`	Set header height
`header`	`element`	Yes		Set custom top header content
`headerSize`	`(h: LayoutRectangle) => void`	Yes		Handler that is called when header's size changes
`initialPage`	`number`	Yes	`0`	Set initial page of tab bar
`keyboardShouldPersistTaps`	`boolean, "always", "never", "handled"`	Yes		Set keyboard persist taps method
`logo`	`ImageSourcePropType`	Yes		Top right header image source
`logoContainerStyle`	`StyleProp<ViewStyle>`	Yes		Top right header image container style
`logoResizeMode`	`ImageResizeMode`	Yes	`contain`	Set top right header image resize mode
`logoStyle`	`StyleProp<ImageStyle>`	Yes		Set top right header image style
`onChangeTab`	`(tab: MountedTabType) => void`	Yes		Callback is called every time when tab is changed
`onMomentumScrollBegin`	`(event: NativeSyntheticEvent<NativeScrollEvent>) => void`	Yes		Called when the momentum scroll starts (scroll which occurs as the ScrollView starts gliding)
`onMomentumScrollEnd`	`(event: NativeSyntheticEvent<NativeScrollEvent>) => void`	Yes		Called when the momentum scroll ends (scroll which occurs as the ScrollView glides to a stop)
`onRef`	`(t: null, StickyParallaxHeaderComponent) => void`	Yes		Obtain ref for StickyParallaxHeaderComponent
`parallaxHeight`	`number`	Yes	`ifIphoneX(constants.responsiveHeight(38),constants.responsiveHeight(48))`	Set parallax header height
`refreshControl`	`element`	Yes		A RefreshControl component, used to provide pull-to-refresh functionality
`rememberTabScrollPosition`	`bool`	Yes	`false`	When switching between tabs remember current scroll position
`scrollEvent`	`(event: NativeSyntheticEvent<NativeScrollEvent>) => void`	Yes		Fires at most once per frame during scrolling (Used in custom animations)
`scrollRef`	`(t: ScrollView) => void` \| `MutableRefObject<ScrollView>`	Yes		Get inner ScrollView ref
`snapStartThreshold`	`number`	Yes		Set start value Threshold of snap
`snapStopThreshold`	`number`	Yes		Set stop value Threshold of snap
`snapToEdge`	`boolean`	Yes	`true`	Should snap header to edge when snap value is exceeded
`snapValue`	`boolean`	Yes	`parralax header height`	Set value where header is closed
`tabTextActiveStyle`	`StyleProp<TextStyle>`	Yes	`{fontSize: 16, lineHeight: 20, paddingHorizontal: 12, paddingVertical: 8, color: colors.white}`	Set active tab text styles
`tabTextContainerActiveStyle`	`StyleProp<ViewStyle>`	Yes	`{backgroundColor: colors.darkMint}`	Set active tab container style
`tabTextStyle`	`StyleProp<TextStyle>`	Yes	`{fontSize: 16, lineHeight: 20, paddingHorizontal: 12, paddingVertical: 8, color: colors.white}`	Set inactive tab style
`tabTextContainerStyle`	`StyleProp<ViewStyle>`	Yes	`{backgroundColor: colors.transparent, borderRadius: 18}`	Set inactive tab container style
`tabWrapperStyle`	`StyleProp<ViewStyle>`	Yes	`{paddingVertical: 12}`	Set single tab container style
`tabs`	`{ content: ReactElement;title?: string;icon?: ReactElement` \| `(isActive: boolean) => ReactElement);`	Yes		Array with tabs names, icons and content to render
`tabsContainerStyle`	`ViewPropTypes.style`	Yes		Set whole tab bar container style
`title`	`string`	Yes		Sets header title
`titleStyle`	`StyleProp<TextStyle>`	Yes		Set style for text in foreground

Check how to customise Tabbed Header example

Details Header

Property	Type	Optional	Default	Description
`headerType`	`DetailsHeader`	Yes	`TabbedHeader`	Set header type to TabbedHeader
`backgroundColor`	`string`	Yes	`'#1ca75d'`	Header background color
`backgroundImage`	`ImageSourcePropType`	Yes		Header background image source
`bounces`	`boolean`	Yes	`true`	Allow scroll view bounces (IOS)
`tag`	`string`	Yes		Sets header tag name
`title`	`string`	Yes		Sets header title
`children`	`ReactNode`	Yes		Render content inside ScrollView
`contentContainerStyles`	`StyleProp<ViewStyle>`	Yes		Set scroll view body styles
`contentIcon`	`ImageSourcePropType`	Yes		Sets content icon
`contentIconNumber`	`number`	Yes		Sets amount of cards shown on content icon
`hasBorderRadius`	`boolean`	Yes	`true`	Adds radius to header's right bottom border
`headerHeight`	`number`	Yes	`ifIphoneX(92, constants.responsiveHeight(13))`	Set header height
`headerSize`	`(h: LayoutRectangle) => void`	Yes	Handler that is called when header's size changes
`image`	`ImageSourcePropType`	Yes		Sets header image
`keyboardShouldPersistTaps`	`boolean, "always", "never", "handled"`	Yes		Set keyboard persist taps method
`leftTopIcon`	`ImageSourcePropType`	Yes		Set icon for left top button
`leftTopIconOnPress`	`() => void`	Yes		Define action on left top button press
`rightTopIcon`	`ImageSourcePropType`	Yes		Set icon for right top button
`rightTopIconOnPress`	`() => void`	Yes		Define action on right top button press
`onMomentumScrollBegin`	`(event: NativeSyntheticEvent<NativeScrollEvent>) => void`	Yes		Called when the momentum scroll starts (scroll which occurs as the ScrollView starts gliding)
`onMomentumScrollEnd`	`(event: NativeSyntheticEvent<NativeScrollEvent>) => void`	Yes		Called when the momentum scroll ends (scroll which occurs as the ScrollView glides to a stop)
`onRef`	`(t: null, StickyParallaxHeaderComponent) => void`	Yes		Obtain ref for StickyParallaxHeaderComponent
`parallaxHeight`	`number`	Yes	`ifIphoneX(constants.responsiveHeight(38),constants.responsiveHeight(48))`	Set parallax header height
`refreshControl`	`element`	Yes		A RefreshControl component, used to provide pull-to-refresh functionality
`scrollEvent`	`(event: NativeSyntheticEvent<NativeScrollEvent>) => void`	Yes		Fires at most once per frame during scrolling (Used in custom animations)
`scrollRef`	`(t: ScrollView) => void` \| `MutableRefObject<ScrollView>`	Yes		Get inner ScrollView ref
`snapStartThreshold`	`number`	Yes		Set start value Threshold of snap
`snapStopThreshold`	`number`	Yes		Set stop value Threshold of snap
`snapToEdge`	`boolean`	Yes	`true`	Should snap header to edge when snap value is exceeded
`snapValue`	`boolean`	Yes	`parralax header height`	Set value where header is closed

Avatar Header

Property	Type	Optional	Default	Description
`headerType`	`DetailsHeader`	Yes	`TabbedHeader`	Set header type to TabbedHeader
`backgroundColor`	`string`	Yes	`'#1ca75d'`	Header background color
`backgroundImage`	`ImageSourcePropType`	Yes		Header background image source
`bounces`	`boolean`	Yes	`true`	Allow scroll view bounces (IOS)
`children`	`ReactNode`	Yes		Render content inside ScrollView
`contentContainerStyles`	`StyleProp<ViewStyle>`	Yes		Set scroll view body styles
`hasBorderRadius`	`boolean`	Yes	`true`	Adds radius to header's right bottom border
`headerHeight`	`number`	Yes	`ifIphoneX(92, constants.responsiveHeight(13))`	Set header height
`headerSize`	`(h: LayoutRectangle) => void`	Yes		Handler that is called when header's size changes
`image`	`ImageSourcePropType`	Yes		Sets header image
`leftTopIcon`	`ImageSourcePropType`	Yes		Set icon for left top button
`leftTopIconOnPress`	`() => void`	Yes		Define action on left top button press
`rightTopIcon`	`ImageSourcePropType`	Yes		Set icon for right top button
`rightTopIconOnPress`	`() => void`	Yes		Define action on right top button press
`onMomentumScrollBegin`	`(event: NativeSyntheticEvent<NativeScrollEvent>) => void`	Yes		Called when the momentum scroll starts (scroll which occurs as the ScrollView starts gliding)
`onMomentumScrollEnd`	`(event: NativeSyntheticEvent<NativeScrollEvent>) => void`	Yes		Called when the momentum scroll ends (scroll which occurs as the ScrollView glides to a stop)
`parallaxHeight`	`number`	Yes	`ifIphoneX(constants.responsiveHeight(38),constants.responsiveHeight(48))`	Set parallax header height
`refreshControl`	`element`	Yes		A RefreshControl component, used to provide pull-to-refresh functionality
`scrollEvent`	`(event: NativeSyntheticEvent<NativeScrollEvent>) => void`	Yes		Fires at most once per frame during scrolling (Used in custom animations)
`scrollRef`	`(t: ScrollView) => void` \| `MutableRefObject<ScrollView>`	Yes		Get inner ScrollView ref
`snapStartThreshold`	`number`	Yes		Set start value Threshold of snap
`snapStopThreshold`	`number`	Yes		Set stop value Threshold of snap
`snapToEdge`	`boolean`	Yes	`true`	Should snap header to edge when snap value is exceeded
`snapValue`	`boolean`	Yes	`parralax header height`	Set value where header is closed
`subtitle`	`string`	Yes		Sets header subtitle
`title`	`string`	Yes		Sets header title

Custom Header

Custom header props and example

Handling StickyParallaxHeader body ScrollView reference

As callback function

<StickyParallaxHeader
  scrollRef={(ref) => {
    paralaxScrollRef.current = ref;
  }}
  foreground={this.renderForeground()}
  header={this.renderHeader()}
>
  {renderBody()}
</StickyParallaxHeader>

As useRef value

const paralaxScrollRef = useRef(null);

<StickyParallaxHeader
  scrollRef={paralaxScrollRef}
  foreground={this.renderForeground()}
  header={this.renderHeader()}
>
  {renderBody()}
</StickyParallaxHeader>

Handling nested scrollables

Handling nested flatlist props and example

Changing Statusbar style

Changing StatusBar style

Pull to refresh

Rendering icons in tabs

Icons in tabs

Getting Started

Prerequisites

Installation

For React Native >= 0.60.0 use version 0.0.60 and above, for previous React Native versions use 0.0.59

Installation for React Native >= 0.60.0

Add latest package version

$ yarn add react-native-sticky-parallax-header

Installation for React Native < 0.60.0

Installation steps for React Native < 0.60.0

Contributing

Contributing guidelines

Contributors

License

The gem is available as open source under the terms of the MIT License.

evrimulgen / sticky-parallax-header