Merge pull request #32 from bamlab/fix-issues

Fix issues

Author: Nhacsam

.circleci/config.yml

@@ -26,7 +26,7 @@ jobs:
           # fallback to using the latest cache if no exact match is found
           - v1-dependencies-
 
-      - run: yarn install && cd example && yarn install && cd ..
+      - run: yarn install 
 
       - save_cache:
           paths:

.eslintignore

@@ -1,6 +1 @@
 **/node_modules
-**/android
-**/ios
-**/vendors
-**/coverage
-**/flow-coverage

.eslintrc

@@ -1,28 +1,7 @@
 {
-  "extends": [
-    "react-app",
-    "prettier",
-    "prettier/flowtype",
-    "prettier/react"
-  ],
-  "plugins": [
-    "flowtype",
-    "react",
-    "prettier"
-  ],
-  "globals": {
-    "__DEV__": true
-  },
+  "extends": ["bambi/native"],
   "rules": {
-    "no-use-before-define": 0,
-    "no-unused-vars": "error",
-    "prettier/prettier": [
-      "error",
-      {
-        "trailingComma": "es5",
-        "singleQuote": true,
-        "printWidth": 100
-      }
-    ]
+    "prettier/prettier": "error",
+    "flowtype/type-id-match": [0, ""],
   }
 }

.flowconfig

@@ -12,18 +12,16 @@
 ; For RN Apps installed via npm, "Libraries" folder is inside
 ; "node_modules/react-native" but in the source repo it is in the root
 .*/Libraries/react-native/React.js
-.*/Libraries/react-native/ReactNative.js
 
-.*/node_modules/react-navigation
-
-; Do not remove all example to have react-native
-.*/example/.*
+; Ignore metro
+.*/node_modules/metro/.*
 
 [include]
 
 [libs]
-example/node_modules/react-native/Libraries/react-native/react-native-interface.js
-example/node_modules/react-native/flow
+node_modules/react-native/Libraries/react-native/react-native-interface.js
+node_modules/react-native/flow/
+node_modules/react-native/flow-github/
 flow/
 
 [options]
@@ -35,18 +33,23 @@ munge_underscores=true
 
 module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
 
+module.file_ext=.js
+module.file_ext=.jsx
+module.file_ext=.json
+module.file_ext=.native.js
+
 suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FlowFixMeProps
 suppress_type=$FlowFixMeState
 suppress_type=$FixMe
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(5[0-3]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(5[0-3]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
 suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
 
 unsafe.enable_getters_and_setters=true
 
 [version]
-^0.53.0
+^0.61.0

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "bracketSpacing": true,
+  "tabWidth": 2,
+  "printWidth": 100
+}

README.md

@@ -28,9 +28,7 @@ render() {
     <HeaderImageScrollView
       maxHeight={200}
       minHeight={MIN_HEIGHT}
-      renderHeader={() => (
-        <Image source={require('../assets/NZ.jpg')} style={styles.image} />
-      )}
+      headerImage={require('../../assets/NZ.jpg')}
     >
       <View style={{ height: 1000 }}>
         <TriggeringView onHide={() => console.log('text hidden')} >
@@ -42,6 +40,8 @@ render() {
 }
 ```
 
+You can find examples in a [dedicated repository](https://github.com/bamlab/react-native-image-header-scroll-view-example).
+
 ## Usage (API)
 
 All of the properties of `ScrollView` are supported. Please refer to the
@@ -50,31 +50,41 @@ All of the properties of `ScrollView` are supported. Please refer to the
 The `HeaderImageScrollView` handle also the following props. None is required :
 
 ### Header
-| Property | Type | Default | Description |
+
+| Property | Type | Default | Description | Example |
 | -------- | ---- | ------- | ----------- |
-| `renderHeader` | `function` | Empty view | Function which return the component to use as header. It can return background image for example. |
-| `maxHeight` | `number` | `80` | Max height for the header |
-| `minHeight` | `number` | `125` | Min height for the header (in navbar mode) |
-| `minOverlayOpacity` | `number` | `0` | Opacity of a black overlay on the header before any scroll |
-| `maxOverlayOpacity` | `number` | `0.3` | Opacity of a black overlay on the header when in navbar mode |
-| `overlayColor` | `string` | `black` | Color of the overlay on the header |
+| `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) |
+| `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) |
+| `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) |
+| `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) |
+| `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) |
+| `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) |
+| `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) |
+
 
 
 ### Foreground
 
 | Property | Type | Default | Description |
 | -------- | ---- | ------- | ----------- |
-| `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.|
-| `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.|
-| `foregroundParallaxRatio` | `number` | `1` | Ration for parallax effect of foreground when scrolling. If 2, the header goes up two times faster than the scroll |
-| `fadeOutForeground` | `bool` | `false` | If set, add a fade out effect on the foreground when scroll up |
-| `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)|
+| `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) |
+| `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) |
+| `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) |
+| `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) |
+| `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) |
+
+### Mixed
+
+| Property | Type | Default | Description |
+| -------- | ---- | ------- | ----------- |
+| `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) |
+| `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) |
 
 
 ### TriggeringView
 
 The module also export a TriggeringView component. It is a simple view witch accept callback called when it disappear
-or appear at the top of the ImageHeaderScrollView
+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).
 
 All of the properties of `View` are supported.