mugilan-codes / sticky-parallax-header

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

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

Pull to refresh

Rendering icons in tabs

Icons in tabs

Getting Started

Prerequisites

• React Native
• Yarn
• node v10.9.0

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.