# rn-parallax-scroll-view

> React Native Scroll View Component With Sticky Header and parallax support

Latest version **1.0.2** (published 2018-08-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install rn-parallax-scroll-view
pnpm add rn-parallax-scroll-view
yarn add rn-parallax-scroll-view
bun add rn-parallax-scroll-view
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2018-08-13 |
| First published | 2018-08-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 2.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Emmancipate Musemwa |
| Maintainers | emancode |
| Keywords | parallax, scroll view, sticky header |

## Links

- npm: https://www.npmjs.com/package/rn-parallax-scroll-view
- Repository: https://github.com/eman1000/rn-parallax-scroll-view
- Homepage: https://github.com/eman1000/rn-parallax-scroll-view#readme
- Issues: https://github.com/eman1000/rn-parallax-scroll-view/issues
- npm.io page: https://npm.io/package/rn-parallax-scroll-view

## Recent versions

- 1.0.2 (latest) — 2018-08-13
- 1.0.1 — 2018-08-13
- 1.0.0 — 2018-08-13

## README

# Example
```js
//LIBRARIES
import React from "react";
import { View, Platform } from "react-native";
import RNParallaxScrollView from "rn-parallax-scroll-view";

const HEADER_MAX_HEIGHT = 300;
const HEADER_MIN_HEIGHT = Platform.OS === 'ios' ? 60 : 73;
const HEADER_SCROLL_DISTANCE = 240;

const thumbnail = require("./images/food.jpg");

class App extends React.Component{

  renderFixedHeader(){
    return(
      <View><Text>Title</Text></View>
    )
  }

  renderScrollViewContent() {
    const data = Array.from({ length: 30 });
    return (
      <View style={styles.scrollViewContent}>
        {data.map((_, i) => (
          <View key={i} style={styles.row}>
            <Text>{i}</Text>
          </View>
        ))}
      </View>
    );
  }
  render(){

    return (
      <View style={{flex:1}}>
        <RNParallaxScrollView
          thumbnail={thumbnail}
          renderFixedHeader={()=>this.renderFixedHeader()}
          renderScrollViewContent={()=>this.renderScrollViewContent()}
          transformHeader
        />
      </View>
    );
  }
}
export default App;
```

# react-native-parallax-scroll-view

A scroll view component that includes:

- parallax header
- sticky header
- customization
- Works on iOS and Android

## Installation

```
$ npm install rn-parallax-scroll-view --save
```

## Demo

![](./rn.gif)


## Usage (API)

All of the properties of `ScrollView` are supported. Please refer to the
[`ScrollView` documentation](https://facebook.github.io/react-native/docs/scrollview.html) for more detail.

The `ParallaxScrollView` component adds a few additional properties, as described below.

| Property | Type | Required | Description |
| -------- | ---- | -------- | ----------- |
| `headerMaxHeight` | `number` | No | The max height of the header defaults to  `300` |
| `headerMinHeight` | `number` | No | The max height of the header defaults to  `60` for ios and `73` for android |
| `headerScrollDistance` | `number` | No | Defaults to `240` |
| `renderFixedHeader` | `func` | Yes | Renders the fixed header |
| `renderScrollViewContent` | `func` | Yes | Renders the scroll view content | 
| `headerBarStyles` | `object` | No | Header component styles |
| `transformHeader` | `bool` | No | Is header scalable |
| `headerWrapperStyles` | `object` | No | Header wrapper for wrapping the header |
| `backgroundImageStyles` | `object` | No | Style background Image |


## Contributing

I welcome contributions! Please open an issues if you have any feature ideas
or find any bugs. I also accept pull requests with open arms. I will
go over the issues when I have time. :)

---
_Source: https://npm.io/package/rn-parallax-scroll-view · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._