/ Stretchy Header

A library create a fully custom header for your iOS and Android apps

A library create a fully custom header for your iOS and Android apps

Stickyheader.js

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

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
readme_TabbedHeader readme_AvatarHeader readme_DetailsHeader

In Use

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

readme_Tabbed

Property Type Optional Default Description
backgroundColor string Yes #1ca75d Header background color
headerHeight number Yes ifIphoneX(92, constants.responsiveHeight(13)) Sets height of folded header
backgroundImage number Yes null Sets header background image
title string Yes "Mornin' Mark! \nReady for a quiz?" Sets header title
bounces bool Yes true Bounces on swiping up
snapToEdge bool Yes true Boolean to fire the function for snap To Edge
renderBody func Yes title => <RenderContent title={title} /> Function that renders body of the header (can be empty)
tabs arrayOf(shape({})) Yes [{title: 'Popular',content: <RenderContent title="Popular Quizes" />},...] Array with tabs names and content
logo func Yes require('../../assets/images/logo.png') Set header logo
logoStyle style Yes { height: 24, width: 142 } Set header logo style
logoContainerStyle style Yes { width: '100%', paddingHorizontal: 24, paddingTop: Platform.select({ ios: ifIphoneX(50, 40), android: 55 }), flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'} Set header logo container style
logoResizeMode "contain", "cover", "stretch", "center", "repeat" Yes "contain" Set header logo resize mode
foregroundImage oneOfType([object, number]) Yes Set image in the foreground
titleStyle Text.propTypes.style Yes Set style for text in foreground
tabText Text.propTypes.style Yes {fontSize: 16, lineHeight: 20, paddingHorizontal: 12, paddingVertical: 8, color: colors.white} Set inactive tab style
tabTextActiveStyle Text.propTypes.style Yes {fontSize: 16, lineHeight: 20, paddingHorizontal: 12, paddingVertical: 8, color: colors.white} Set active tab stylee
tabTextContainerStyle ViewPropTypes.style Yes {backgroundColor: colors.transparent, borderRadius: 18} Set inactive tab container style
tabTextContainerActiveStyle ViewPropTypes.style Yes {backgroundColor: colors.darkMint} Set active tab container style
tabWrapperStyle ViewPropTypes.style Yes {paddingVertical: 12} Set single tab container style
tabsContainerStyle ViewPropTypes.style Yes Set whole tab bar container style
header func Yes Fuction that renders custom header
scrollEvent func Yes Scroll event to apply custom animations
onRef func Yes Reference callback. You can call goToPage(pageNumber) method through ref to programatically navigate to given tab

Details Header

readme_Details

Property Type Required Default Description
backgroundColor string No #1ca75d Header background color
backgroundImage ImageSourcePropType No null Sets header background image
bounces boolean No true Bounces on swiping up
hasBorderRadius boolean No true Adds radius to header's left bottom border
headerHeight number No ifIphoneX(92, constants.responsiveHeight(13)) Sets height of folded header
iconNumber number No 10 Set amount of cards shown on icon
image ImageSourcePropType No require('../../assets/images/photosPortraitBrandon.png') Sets header image
leftTopIconOnPress () => void No () => {} Define action on left top button press
leftTopIcon ImageSourcePropType No require('../../assets/icons/iconCloseWhite.png') Set icon for left top button
renderBody (title: string) => ReactElement No title => <RenderContent title={title} /> Function that renders body of the header (can be empty)
rightTopIconOnPress () => void No () => {} Define action on right top button press
rightTopIcon ImageSourcePropType No require('../../assets/icons/Icon-Menu.png') Set icon for right top button
snapToEdge boolean No true Boolean to fire the function for snap To Edge
tag string No "Product Designer" Sets header tag name
title string No "Design System" Sets header title

Avatar Header

readme_Avatar

Property Type Optional Default Description
backgroundColor string No #1ca75d Header background color
backgroundImage ImageSourcePropType No null Sets header background image
bounces boolean No true Bounces on swiping up
foreground () => ReactElement No - Function that renders the foreground of the header
hasBorderRadius boolean No true Adds radius to header's left bottom border
headerHeight number No ifIphoneX(92, constants.responsiveHeight(13)) Sets height of folded header
header () => ReactElement No - Function that renders custom header
image ImageSourcePropType No require('../../assets/images/photosPortraitBrandon.png') Sets header image
leftTopIconOnPress () => void No () => {} Define action on left top button press
leftTopIcon ImageSourcePropType No require('../../assets/icons/iconCloseWhite.png') Set icon for left top button
parallaxHeight number No - Set parallax header height
renderBody (title: string) => ReactElement No title => <RenderContent title={title} /> Function that renders body of the header (can be empty)
rightTopIconOnPress () => void No () => {} Define action on right top button press
rightTopIcon ImageSourcePropType No require('../../assets/icons/Icon-Menu.png') Set icon for right top button
scrollEvent (event: NativeSyntheticEvent<NativeScrollEvent>) => void No require('../../assets/icons/Icon-Menu.png') Scroll event to apply custom animations
snapStartThreshold number No - Set start value Threshold of snap
snapStopThreshold number No - Set stop value Threshold of snap
snapToEdge boolean No true Boolean to fire the function for snap To Edge
snapValue number No - Set value where header is closed
subtitle string No "Coffee buff. Web enthusiast. Unapologetic student. Gamer. Avid organizer." Sets description(subtitle) section
title string No "Brandon Sets header title
transparentHeader boolean No false Set header transparency to render custom header

GitHub

Comments