react-native-collapsingtoolbar-parallax-header

React-native-collapsingtoolbar-parallax-header

Screen Shot

 

Getting Started

$ npm i react-native-collapsingtoolbar-parallax-header 

or

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

Usage

Import the component:

    import CollapsingToolbar from 'react-native-collapsingtoolbar-parallax-header';
    import Icon from 'react-native-vector-icons/Ionicons'; 

    <CollapsingToolbar 
        leftItem={<Icon name="md-menu" size={30} color="#fff" />}
        rightItem={<Icon name="md-create" size={30}  color="#fff" />}   
        toolbarColor='#2196f3'  
        title='Demo Toolbar'
        src={require('../../../images/drawer6.png')}>
        <Text>
            Create             
        </Text>
    </CollapsingToolbar>

Props

Prop	Type	Default	description
src	object		require('img.png') or {uri: url}
title	string	Home	toolbar title
titleColor	string	#fff	toolbar title text color
toolbarColor	string	#e91e63	toolbar background color
toolbarMaxHeight	number	300	maximum height of toolbar
toolbarMinHeight	number	55	minimum height of toolbar
leftItem	PropTypes.element		toolbar left menu item
leftItemPress	func
leftItem	PropTypes.element		toolbar right item
rightItemPress	func