Skip to content

Commit 304f3fc

Browse files
NhacsamNhacsam
committed
Update README
1 parent 6209fc7 commit 304f3fc

1 file changed

Lines changed: 17 additions & 16 deletions

File tree

‎README.md‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -49,39 +49,40 @@ The `HeaderImageScrollView` handle also the following props. None is required :
4949

5050
### Header
5151

52-
| Property | Type | Default | Description |
52+
| Property | Type | Default | Description | Example |
5353
| -------- | ---- | ------- | ----------- |
54-
| `renderHeader` | `function` | Empty view | Function which return the component to use as header. It can return background image for example. |
55-
| `headerImage` | Image source Props (object or number) | `undefined` | Shortcut for `renderHeader={() => <Image source={this.props.headerImage} style={{ height: this.props.maxHeight, width: Dimensions.get('window').width }} />}` |
56-
| `maxHeight` | `number` | `80` | Max height for the header |
57-
| `minHeight` | `number` | `125` | Min height for the header (in navbar mode) |
58-
| `minOverlayOpacity` | `number` | `0` | Opacity of a black overlay on the header before any scroll |
59-
| `maxOverlayOpacity` | `number` | `0.3` | Opacity of a black overlay on the header when in navbar mode |
60-
| `overlayColor` | `string` | `black` | Color of the overlay on the header |
54+
| `renderHeader` | `function` | Empty view | Function which return the component to use as header. It can return background image for example. | [example](https://github.com/bamlab/react-native-image-header-scroll-view-example/blob/3b9d2d0d7f71c6bf877e2d10cc65c9ab7e1b484d/src/Pages/PullToRefresh.js#L37) |
55+
| `headerImage` | Image source Props (object or number) | `undefined` | Shortcut for `renderHeader={() => <Image source={this.props.headerImage} style={{ height: this.props.maxHeight, width: Dimensions.get('window').width }} />}` | [example](https://github.com/bamlab/react-native-image-header-scroll-view-example/blob/master/src/Pages/BasicUsage.js#L26) |
56+
| `maxHeight` | `number` | `80` | Max height for the header | [example](https://github.com/bamlab/react-native-image-header-scroll-view-example/blob/master/src/Pages/BasicUsage.js#L24) |
57+
| `minHeight` | `number` | `125` | Min height for the header (in navbar mode) | [example](https://github.com/bamlab/react-native-image-header-scroll-view-example/blob/master/src/Pages/BasicUsage.js#L24) |
58+
| `minOverlayOpacity` | `number` | `0` | Opacity of a black overlay on the header before any scroll | [example](https://github.com/bamlab/react-native-image-header-scroll-view-example/blob/3b9d2d0d7f71c6bf877e2d10cc65c9ab7e1b484d/src/Pages/TvShow.js#L96) |
59+
| `maxOverlayOpacity` | `number` | `0.3` | Opacity of a black overlay on the header when in navbar mode | [example](https://github.com/bamlab/react-native-image-header-scroll-view-example/blob/3b9d2d0d7f71c6bf877e2d10cc65c9ab7e1b484d/src/Pages/TvShow.js#L96) |
60+
| `overlayColor` | `string` | `black` | Color of the overlay on the header | [example](https://github.com/bamlab/react-native-image-header-scroll-view-example/blob/master/src/Pages/Colors.js#L16) |
61+
6162

6263

6364
### Foreground
6465

6566
| Property | Type | Default | Description |
6667
| -------- | ---- | ------- | ----------- |
67-
| `renderForeground` | `function` | Empty view | Function which return the component to use at foreground. The component is render in front of the header and scroll with the ScrollView. It can return a title for example.|
68-
| `renderFixedForeground` | `function` | Empty view | Function which return the component to use as fixed foreground. The component is displayed with the header but not affected by the overlay.|
69-
| `foregroundParallaxRatio` | `number` | `1` | Ration for parallax effect of foreground when scrolling. If 2, the header goes up two times faster than the scroll |
70-
| `fadeOutForeground` | `bool` | `false` | If set, add a fade out effect on the foreground when scroll up |
71-
| `renderTouchableFixedForeground` | `function` | Empty view | Same as `renderFixedForeground` but allow to use touchable in it. [*Can cause performances issues on Android*](https://github.com/bamlab/react-native-image-header-scroll-view/issues/6)|
68+
| `renderForeground` | `function` | Empty view | Function which return the component to use at foreground. The component is render in front of the header and scroll with the ScrollView. It can return a title for example.| [example](https://github.com/bamlab/react-native-image-header-scroll-view-example/blob/master/src/Pages/TvShow.js#L112) |
69+
| `renderFixedForeground` | `function` | Empty view | Function which return the component to use as fixed foreground. The component is displayed with the header but not affected by the overlay.| [example](https://github.com/bamlab/react-native-image-header-scroll-view-example/blob/3b9d2d0d7f71c6bf877e2d10cc65c9ab7e1b484d/src/Pages/TvShow.js#L100) |
70+
| `foregroundParallaxRatio` | `number` | `1` | Ration for parallax effect of foreground when scrolling. If 2, the header goes up two times faster than the scroll | [example](https://github.com/bamlab/react-native-image-header-scroll-view-example/blob/master/src/Pages/Colors.js#L23) |
71+
| `fadeOutForeground` | `bool` | `false` | If set, add a fade out effect on the foreground when scroll up | [example](https://github.com/bamlab/react-native-image-header-scroll-view-example/blob/master/src/Pages/Colors.js#L13) |
72+
| `renderTouchableFixedForeground` | `function` | Empty view | Same as `renderFixedForeground` but allow to use touchable in it. [*Can cause performances issues on Android*](https://github.com/bamlab/react-native-image-header-scroll-view/issues/6)| [example](https://github.com/bamlab/react-native-image-header-scroll-view-example/blob/master/src/Pages/PullToRefresh.js#L45) |
7273

7374
### Mixed
7475

7576
| Property | Type | Default | Description |
7677
| -------- | ---- | ------- | ----------- |
77-
| `ScrollViewComponent` | `Component` | `ScrollView` | The component to be used for scrolling. Can be any component with an `onScroll` props (ie. `ListView`, `FlatList`, `SectionList` or `ScrollView`) |
78-
| `scrollViewBackgroundColor` | `string` | `white` | Background color of the scrollView content |
78+
| `ScrollViewComponent` | `Component` | `ScrollView` | The component to be used for scrolling. Can be any component with an `onScroll` props (ie. `ListView`, `FlatList`, `SectionList` or `ScrollView`) | [example](https://github.com/bamlab/react-native-image-header-scroll-view-example/blob/master/src/Pages/Avignon.js#L34) |
79+
| `scrollViewBackgroundColor` | `string` | `white` | Background color of the scrollView content | [example](https://github.com/bamlab/react-native-image-header-scroll-view-example/blob/master/src/Pages/PullToRefresh.js#L52) |
7980

8081

8182
### TriggeringView
8283

8384
The module also export a TriggeringView component. It is a simple view witch accept callback called when it disappear
84-
or appear at the top of the ImageHeaderScrollView
85+
or appear at the top of the ImageHeaderScrollView. You can see [an exemple in the dedicated repository](https://www.youtube.com/watch?v=PsgxTiif0w8&index=17&list=UUwi4cpbdkeuyYD8lDo3Z6qA).
8586

8687
All of the properties of `View` are supported.
8788

0 commit comments

Comments
 (0)