React Native Stretchable Header

A React Native scrollable stretchable header component. Works on iOS & Android.

Preview

Installation

npm install react-native-stretchable-header --save

Usage

Import StretchableHeader component:

import StretchableHeader from 'react-native-stretchable-header';

<StretchableHeader
  headerImageHeight={350}
  headerImageSource={require('./image.jpg')}
  contentView={renderContentView()}
/>

Configuration

prop	type/valid values	default	description
headerImageHeight	number	100	Height of header image
headerImageSource	ImageSourcePropType	null	Stretchable header image RN image source
contentView	ReactElement	100	Height of header image

Scrolling Animation

You can use animatedValueScrollY for using the scrolling animation value of content offset Y.

import StretchableHeader, {animatedValueScrollY} from 'react-native-stretchable-header';

With Navigation Bar

For instance, if you want to create navigation bar like preview below:

You can copy and use TopNavigation from Example. Customize it based on your needs.

Demo Application

This repository contains a demo React Native application with a customizable example of the StretchableHeader component in use.

To use the demo application:

1. Clone this repository: https://github.com/iqbalansyor/react-native-stretchable-header.git
2. Navigate to the demo application: cd path/to/this/repository/react-native-stretchable-header/Example
3. Install demo application dependencies: npm install
4. For ios, run cd ios && pod install && cd ..
5. Run npm run start || react-native run-android || react-native run-ios

Contact me

• Iqbal Ansyori - [e-mail]

Contributing

Feel free to try it out. Please submit a pull request with any features/fixes for the project.

License

This project is licensed under the MIT License - see the MIT Open Source Initiative for details.