https://github.com/weifxn/react-native-scrollview-header

An Animated ScrollView Header for React Native
https://github.com/weifxn/react-native-scrollview-header

android ios react-native ui-components

Last synced: about 1 month ago
JSON representation

An Animated ScrollView Header for React Native

• Host: GitHub
• URL: https://github.com/weifxn/react-native-scrollview-header
• Owner: weifxn
• License: mit
• Created: 2019-01-23T15:48:05.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-04-08T02:21:09.000Z (over 5 years ago)
• Last Synced: 2024-08-06T12:38:31.444Z (about 2 months ago)
• Topics: android, ios, react-native, ui-components
• Language: JavaScript
• Homepage:
• Size: 14.2 MB
• Stars: 14
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-native - react-native-scrollview-header ★5 - An animated ScrollView header that transitions from transparent background to opaque upon scrolling. (Components / UI)
• awesome-react-native - react-native-scrollview-header ★5 - An animated ScrollView header that transitions from transparent background to opaque upon scrolling. (Components / UI)

README

        
# React Native ScrollView Header

[![npm (scoped)](https://img.shields.io/badge/react--native--scrollview--header-v1.0.6-green.svg)](https://github.com/weifxn/react-native-scrollview-header)

_Animated ScrollView Header for React Native_



## Installation

```bash

$ npm install react-native-scrollview-header

```

_or_

```bash

$ yarn add react-native-scrollview-header

```

## Usage

```js

import React from 'react'

import { View } from 'react-native'

import Header from 'react-native-scrollview-header';

class Component extends React.Component {

	render() {

		const data = [{ name: 'Pink Floyd', age: '30' }];

		return (

			

				{data.map(item => (

					 {item.name} 

				))}

			

		);

	}

}

```

## Props

| Prop  | Default  | Type | Description |

| :------------ |:---------------:| :---------------:| :-----|

| title | undefined | `string` | Title for header |

| titleStyle | undefined | `object` | Styles for header title |

| headerStyle | undefined | `object` | Styles for title container |

| barStyle | undefined | `object` | Styles for header bar |

| maxHeight | 130 | `number` | Maximum height of header (animated) |

| minHeight | 95 | `number` | Minimum height of header (animated) |

| extras | undefined | `object` | Extra items above title (icon) |