Skip to content

Commit 538dd3a

Browse files
committed
Update Read Me
1 parent ac1016b commit 538dd3a

File tree

2 files changed

+61
-1
lines changed

2 files changed

+61
-1
lines changed

.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
2+
npm-debug\.log

README.md

Lines changed: 59 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,59 @@
1-
# RNParallax
1+
2+
# react-native-parallax-header
3+
- A react native scroll view component with Parallax header :p
4+
- Inspired by [GitHub - jaysoo/react-native-parallax-scroll-view](https://github.com/jaysoo/react-native-parallax-scroll-view)
5+
- Code is based on [React Native ScrollView animated header – App & Flow – Medium](https://medium.com/appandflow/react-native-scrollview-animated-header-10a18cb9469e) and added little customisation :p
6+
7+
## Installation
8+
```bash
9+
$ npm i react-native-parallax-header --save
10+
```
11+
12+
## Example
13+
```jsx
14+
import ReactNativeParallaxHeader from 'react-native-parallax-header';
15+
16+
const viewImages = {
17+
background: require('../../../img/test.jpg'),
18+
};
19+
20+
21+
const styles = StyleSheet.create({
22+
container: {
23+
backgroundColor: Colors.white,
24+
},
25+
titleStyle: {
26+
fontSize: normalize(16),
27+
},
28+
});
29+
30+
render() {
31+
return (
32+
<View flex style={styles.container}>
33+
<ReactNativeParallaxHeader
34+
headerHeight={normalize(170)}
35+
navbarColor={Colors.primary}
36+
title={'Parallax Header :p'}
37+
titleStyle={styles.titleStyle}
38+
backgroundImage={viewImages.background}
39+
renderNavBar={this.renderNavBar}
40+
renderContent={this.renderContent}
41+
/>
42+
</View>
43+
);
44+
}
45+
```
46+
47+
## API Usage
48+
| Property | Type | Required | Description | Default |
49+
| -------- | ---- | -------- | ----------- |
50+
| `renderNavBar` | `func` | No | This renders the nav bar component | Empty `<View />` |
51+
| `renderContent` | `func` | **YES** | This renders the scroll view content | - |
52+
| `backgroundColor` | `string` | No | This is the color of the parallax background (before scrolling up), **will not be used if `backgroundImage` is specified** | Default color is `#777777` |
53+
| `backgroundImage` | `image source` | No | This renders the background image of the header | Default is `null` |
54+
| `navbarColor` | `string` | No | This is the background color of the navbar (after scroll up) | Default color is `3498db` |
55+
| `title` | `string` | No | This is the title to be display in the header | Default is empty string `‘’` |
56+
| `titleStyle` | `style` | No | This is the title style to override default font size/color | Default to `color: ‘white’ `text and `fontSize: 16` |
57+
| `headerHeight` | `number` | No | This is the header maximum height | Default to `200` |
58+
| `scrollEventThrottle` | `number` | No | This is the scroll event throttle | Default is `16` |
59+

0 commit comments

Comments
 (0)