├── .babelrc ├── .circleci └── config.yml ├── .editorconfig ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .prettierrc ├── LICENCE ├── README.md ├── example ├── App.tsx ├── app.json ├── assets │ ├── NZ.jpg │ ├── adaptive-icon.png │ ├── favicon.png │ ├── icon.png │ └── splash.png ├── babel.config.js ├── metro.config.js ├── package.json ├── tsconfig.json └── yarn.lock ├── package.json ├── readmeAssets ├── basicUsage.gif ├── demoAndroid.gif ├── demoBounces.gif ├── demoDisableHeaderGrow.gif └── demoIos.gif ├── src ├── ImageHeaderScrollView.tsx ├── TriggeringView.tsx ├── index.d.ts └── index.ts ├── tsconfig.json └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-native"] 3 | } 4 | -------------------------------------------------------------------------------- /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | # Javascript Node CircleCI 2.0 configuration file 2 | # 3 | # Check https://circleci.com/docs/2.0/language-javascript/ for more details 4 | # 5 | version: 2 6 | jobs: 7 | build: 8 | docker: 9 | # specify the version you desire here 10 | - image: circleci/node:7.10 11 | 12 | # Specify service dependencies here if necessary 13 | # CircleCI maintains a library of pre-built images 14 | # documented at https://circleci.com/docs/2.0/circleci-images/ 15 | # - image: circleci/mongo:3.4.4 16 | 17 | working_directory: ~/react-native-image-header-scroll-view 18 | 19 | steps: 20 | - checkout 21 | 22 | # Download and cache dependencies 23 | - restore_cache: 24 | keys: 25 | - v1-dependencies-{{ checksum "package.json" }} 26 | # fallback to using the latest cache if no exact match is found 27 | - v1-dependencies- 28 | 29 | - run: yarn install 30 | 31 | - save_cache: 32 | paths: 33 | - node_modules 34 | key: v1-dependencies-{{ checksum "package.json" }} 35 | 36 | # run tests! 37 | - run: yarn test 38 | 39 | 40 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = false 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | **/node_modules 2 | **/example/metro.config.js 3 | **/example/babel.config.js 4 | **/lib 5 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "plugins": ["react", "react-native", "prettier"], 4 | "parserOptions": { 5 | "ecmaFeatures": { 6 | "jsx": true 7 | } 8 | }, 9 | "rules": { 10 | "prettier/prettier": "error", 11 | "react-native/no-unused-styles": 2, 12 | "react-native/split-platform-components": 2, 13 | "react-native/no-inline-styles": 2, 14 | "react/prop-types": 0 15 | }, 16 | "env": { 17 | "browser": true, 18 | "react-native/react-native": true 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/**/* 2 | npm-debug.* 3 | .idea 4 | 5 | example/node_modules 6 | example/.expo 7 | example/.expo-shared 8 | example/npm-debug.* 9 | example/*.jks 10 | example/*.p8 11 | example/*.p12 12 | example/*.key 13 | example/*.mobileprovision 14 | example/*.orig.* 15 | example/web-build/ 16 | 17 | # macOS 18 | example/.DS_Store 19 | 20 | lib -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "singleQuote": true, 4 | "bracketSpacing": true, 5 | "tabWidth": 2, 6 | "printWidth": 100 7 | } 8 | -------------------------------------------------------------------------------- /LICENCE: -------------------------------------------------------------------------------- 1 | Copyright 2017 BAM 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-native-image-header-scroll-view 2 | 3 | ![badge](https://circleci.com/gh/bamlab/react-native-image-header-scroll-view.svg?style=shield&circle-token=:circle-token) 4 | 5 | A ScrollView-like component that: 6 | - Has a fixed image header 7 | - Keep the image as a nav bar 8 | - Works on iOS and Android 9 | 10 | ## Breaking changes 11 | 12 | ### Version 1.0.0 13 | **/!\ Warning /!\\** 14 | The lib has been upgraded to match with new React and React Native standards (hooks, deprecated methods, etc...). 15 | The version 1.0.0 may contain some bugs or regressions. Ping me in issues if you notice a bad behaviour of the upgraded lib on your project. 16 | I advice you to update the lib in a separate commit to roll back if necessary. 17 | However the lib should work for most of cases, so don't be scared to update the lib. 18 | **It is a first step to improve the lib in the future, so please be understanding 😇** 19 | 20 | ## Installation 21 | 22 | ``` 23 | $ npm install react-native-image-header-scroll-view --save 24 | ``` 25 | 26 | ## Demo 27 | 28 | ![react-native-image-header-scroll-view demo android](./readmeAssets/demoAndroid.gif)|![react-native-image-header-scroll-view demo ios](./readmeAssets/demoIos.gif) 29 | 30 | You can find this example code here : https://github.com/bamlab/react-native-image-header-scroll-view-example/blob/master/src/Pages/TvShow.js 31 | 32 | ## Basic Usage 33 | 34 | ```jsx 35 | import { ImageHeaderScrollView, TriggeringView } from 'react-native-image-header-scroll-view'; 36 | 37 | // Inside of a component's render() method: 38 | render() { 39 | return ( 40 | ( 45 | 46 | console.log("tap!!")}> 47 | Tap Me! 48 | 49 | 50 | )} 51 | > 52 | 53 | console.log("text hidden")}> 54 | Scroll Me! 55 | 56 | 57 | 58 | ); 59 | } 60 | ``` 61 | 62 | Result : 63 | 64 | ![Basic Usage](./readmeAssets/basicUsage.gif) 65 | 66 | 67 | You can find examples in a [dedicated repository](https://github.com/bamlab/react-native-image-header-scroll-view-example). 68 | 69 | ## Usage (API) 70 | 71 | All of the properties of `ScrollView` are supported. Please refer to the 72 | [`ScrollView` documentation](https://facebook.github.io/react-native/docs/scrollview.html) for more detail. 73 | 74 | The `ImageHeaderScrollView` handle also the following props. None is required : 75 | 76 | ### Header 77 | 78 | | Property | Type | Default | Description | Example | 79 | | -------- | ---- | ------- | ----------- | ------- | 80 | | `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) | 81 | | `headerImage` | Image source Props (object or number) | `undefined` | Shortcut for `renderHeader={() => }` | [example](https://github.com/bamlab/react-native-image-header-scroll-view-example/blob/master/src/Pages/BasicUsage.js#L26) | 82 | | `maxHeight` | `number` | `125` | Max height for the header | [example](https://github.com/bamlab/react-native-image-header-scroll-view-example/blob/master/src/Pages/BasicUsage.js#L24) | 83 | | `minHeight` | `number` | `80` | 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) | 84 | | `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) | 85 | | `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) | 86 | | `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) | 87 | | `useNativeDriver` | `boolean` | `false` | Use native driver for the animation for performance improvement. A few props are unsupported at the moment if `useNativeDriver=true` (`onScroll`, `ScrollComponent`, `renderTouchableFixedForeground`) | - | 88 | |`headerContainerStyle`|`Object`|`undefined`| Optional styles to be passed to the container of the header component| 89 | |`disableHeaderGrow`|`boolean`|`undefined`| Disable to grow effect on the header| 90 | 91 | ### Foreground 92 | 93 | | Property | Type | Default | Description | Example | 94 | | -------- | ---- | ------- | ----------- | ------- | 95 | | `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) | 96 | | `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) | 97 | | `foregroundExtrapolate` | `string` | `clamp` | Optional prop that allows override extrapolate mode for foreground. Use `null` to allow extrapolation, which is usefull for using foreground as bottom title | - | 98 | | `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) | 99 | | `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) | 100 | | `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) | 101 | |`fixedForegroundContainerStyles`|`Object`|`undefined`| Optional styles to be passed to the container of the fixed foreground component| 102 | 103 | ### Mixed 104 | 105 | | Property | Type | Default | Description | Example | 106 | | -------- | ---- | ------- | ----------- | ------- | 107 | | `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) | 108 | | `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) | 109 | 110 | 111 | ### TriggeringView 112 | 113 | The module also export a TriggeringView component. It is a spy View you put on the page that will can call various callback during the scroll. 114 | It accept callback called when it disappear or appear at the top of the ImageHeaderScrollView. You can see [an exemple in the dedicated repository](https://github.com/bamlab/react-native-image-header-scroll-view-example). 115 | 116 | All of the properties of `View` are supported. 117 | 118 | 119 | | Property | Type | Description | 120 | | -------- | ---- | ----------- | 121 | | `onBeginHidden` | `function` | Called when the component start to be hidden at the top of the scroll view. | 122 | | `onHide` | `function` | Called when the component is not displayed any more after scroll up | 123 | | `onBeginDisplayed` | `function` | Called when the component begin to be displayed again after scroll down | 124 | | `onDisplay` | `function` | Called when the component finished to be displayed again. | 125 | | `onTouchTop` | `function` | Called when the Top of the component touch the Top of the ScrollView. (`onDisplay` + `onBeginHidden`) | 126 | | `onTouchBottom` | `function` | Called when the Bottom of the component touch the Top of the ScrollView. (`onHide` + `onBeginDisplayed`) | 127 | 128 | 129 | 130 | ## FAQ 131 | 132 | ### How to remove the black image overlay 133 | 134 | Just set the `maxOverlayOpacity` to `0`. 135 | 136 | ```jsx 137 | 142 | 143 | ``` 144 | 145 | ### How to remove the image zomming on scroll down 146 | 147 | You have two solutions : 148 | 149 | 1. You can use the `disableHeaderGrow` props. It will keep the ios elastic scroll effect. 150 | 2. You can also use the `bounces={false}` props [from the scroll view](https://facebook.github.io/react-native/docs/scrollview#bounces). 151 | 152 | Results : 153 | 154 | | `disableHeaderGrow` | `bounces={false}` | 155 | | ------------------- | ----------------- | 156 | ![react-native-image-header-scroll-view demo disableHeaderGrow](./readmeAssets/demoDisableHeaderGrow.gif)|![react-native-image-header-scroll-view demo bounces](./readmeAssets/demoBounces.gif) 157 | 158 | 159 | ## Contributing 160 | 161 | All contributions are welcomed, that might be either adding new features, doing some refaco of the exisiting code or fixing bugs. 162 | 163 | **How to contribute** 164 | 165 | 1. Fork the project & clone locally. Follow the initial setup here. 166 | 2. Create a branch, naming it either a feature or bug: git checkout -b feature/that-new-feature or bug/fixing-that-bug 167 | 3. Code and commit your changes. Write a good commit message. Best would be to use git [commitizen](https://github.com/commitizen/cz-cli) 168 | 4. Test your changes in the example 169 | - launch the Expo project: `cd example && yarn start && cd ..` 170 | - compile typescript to lib folder : `yarn tsc --noEmit`` 171 | - watch your feature/fix in your simulator 172 | 5. Push to the branch: git push origin feature/that-new-feature 173 | 6. Create a pull request for your branch 🎉 174 | 175 | 176 | ## Other open-source modules by the folks at [BAM](http://github.com/bamlab) 177 | 178 | * [generator-rn-toolbox](https://github.com/bamlab/generator-rn-toolbox) 179 | * [react-native-image-resizer](https://github.com/bamlab/react-native-image-resizer) 180 | * [react-native-numberpicker-dialog](https://github.com/bamlab/react-native-numberpicker-dialog) 181 | * [react-native-animated-picker](https://github.com/bamlab/react-native-animated-picker) 182 | -------------------------------------------------------------------------------- /example/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; 3 | 4 | import { ImageHeaderScrollView, TriggeringView } from 'react-native-image-header-scroll-view'; 5 | 6 | export default function App() { 7 | return ( 8 | ( 13 | 14 | console.log('tap!!')}> 15 | Tap Me! 16 | 17 | 18 | )} 19 | > 20 | 21 | console.log('text hidden')}> 22 | Scroll Me! 23 | 24 | 25 | 26 | ); 27 | } 28 | 29 | const styles = StyleSheet.create({ 30 | foregroundContainer: { 31 | height: 200, 32 | justifyContent: 'center', 33 | alignItems: 'center', 34 | }, 35 | header: { backgroundColor: 'transparent' }, 36 | content: { height: 1000 }, 37 | }); 38 | -------------------------------------------------------------------------------- /example/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "example", 4 | "slug": "example", 5 | "version": "1.0.0", 6 | "orientation": "portrait", 7 | "icon": "./assets/icon.png", 8 | "splash": { 9 | "image": "./assets/splash.png", 10 | "resizeMode": "contain", 11 | "backgroundColor": "#ffffff" 12 | }, 13 | "updates": { 14 | "fallbackToCacheTimeout": 0 15 | }, 16 | "assetBundlePatterns": ["**/*"], 17 | "ios": { 18 | "supportsTablet": true 19 | }, 20 | "android": { 21 | "adaptiveIcon": { 22 | "foregroundImage": "./assets/adaptive-icon.png", 23 | "backgroundColor": "#FFFFFF" 24 | } 25 | }, 26 | "web": { 27 | "favicon": "./assets/favicon.png" 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /example/assets/NZ.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bamlab/react-native-image-header-scroll-view/4c0b69c872f25513f6ba712a0cdfda7a0e93e2d8/example/assets/NZ.jpg -------------------------------------------------------------------------------- /example/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bamlab/react-native-image-header-scroll-view/4c0b69c872f25513f6ba712a0cdfda7a0e93e2d8/example/assets/adaptive-icon.png -------------------------------------------------------------------------------- /example/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bamlab/react-native-image-header-scroll-view/4c0b69c872f25513f6ba712a0cdfda7a0e93e2d8/example/assets/favicon.png -------------------------------------------------------------------------------- /example/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bamlab/react-native-image-header-scroll-view/4c0b69c872f25513f6ba712a0cdfda7a0e93e2d8/example/assets/icon.png -------------------------------------------------------------------------------- /example/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bamlab/react-native-image-header-scroll-view/4c0b69c872f25513f6ba712a0cdfda7a0e93e2d8/example/assets/splash.png -------------------------------------------------------------------------------- /example/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | plugins: [ 6 | [ 7 | 'module-resolver', 8 | { 9 | alias: { 10 | 'react-native-image-header-scroll-view': '..', 11 | }, 12 | }, 13 | ], 14 | ], 15 | }; 16 | }; 17 | -------------------------------------------------------------------------------- /example/metro.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-undef */ 2 | const path = require('path'); 3 | const blacklist = require('metro-config/src/defaults/blacklist'); 4 | const escape = require('escape-string-regexp'); 5 | const fs = require('fs'); 6 | 7 | const root = path.resolve(__dirname, '..'); 8 | const pak = JSON.parse(fs.readFileSync(path.join(root, 'package.json'), 'utf8')); 9 | 10 | const modules = [ 11 | '@babel/runtime', 12 | ...Object.keys({ 13 | ...pak.dependencies, 14 | ...pak.peerDependencies, 15 | }), 16 | ]; 17 | 18 | module.exports = { 19 | projectRoot: __dirname, 20 | watchFolders: [root], 21 | resolver: { 22 | blacklistRE: blacklist([new RegExp(`^${escape(path.join(root, 'node_modules'))}\\/.*$`)]), 23 | extraNodeModules: modules.reduce((acc, name) => { 24 | acc[name] = path.join(__dirname, 'node_modules', name); 25 | return acc; 26 | }, {}), 27 | }, 28 | transformer: { 29 | getTransformOptions: async () => ({ 30 | transform: { 31 | experimentalImportSupport: false, 32 | inlineRequires: true, 33 | }, 34 | }), 35 | }, 36 | }; 37 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "node_modules/expo/AppEntry.js", 3 | "scripts": { 4 | "start": "expo start", 5 | "android": "expo start --android", 6 | "ios": "expo start --ios", 7 | "web": "expo start --web", 8 | "eject": "expo eject" 9 | }, 10 | "dependencies": { 11 | "expo": "~39.0.2", 12 | "expo-status-bar": "~1.0.2", 13 | "react": "16.13.1", 14 | "react-dom": "16.13.1", 15 | "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz", 16 | "react-native-web": "~0.13.12" 17 | }, 18 | "devDependencies": { 19 | "@babel/core": "^7.12.3", 20 | "@types/react": "~16.9.35", 21 | "@types/react-dom": "~16.9.8", 22 | "@types/react-native": "~0.63.2", 23 | "babel-plugin-module-resolver": "^4.0.0", 24 | "escape-string-regexp": "^4.0.0", 25 | "typescript": "~3.9.5" 26 | }, 27 | "private": true 28 | } 29 | -------------------------------------------------------------------------------- /example/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowSyntheticDefaultImports": true, 4 | "jsx": "react-native", 5 | "lib": ["dom", "esnext"], 6 | "moduleResolution": "node", 7 | "noEmit": true, 8 | "skipLibCheck": true, 9 | "resolveJsonModule": true, 10 | "strict": true 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-image-header-scroll-view", 3 | "version": "1.0.0", 4 | "description": "ScrollView with an image in header which become a navbar", 5 | "main": "lib/index.js", 6 | "scripts": { 7 | "lint": "eslint .", 8 | "test": "npm run lint && npm run tsc --noEmit", 9 | "prettify": "prettier --write src/**.js", 10 | "build": "tsc", 11 | "prepare": "npm run build", 12 | "preversion": "npm run lint" 13 | }, 14 | "files": [ 15 | "README.md", 16 | "LICENCE", 17 | "lib", 18 | "readmeAssets" 19 | ], 20 | "repository": { 21 | "type": "git", 22 | "url": "git+https://github.com/bamlab/react-native-image-header-scroll-view.git" 23 | }, 24 | "keywords": [ 25 | "React-native", 26 | "ScrollView", 27 | "animation", 28 | "navbar", 29 | "react-component", 30 | "ios", 31 | "android" 32 | ], 33 | "author": "Spoutnik97 ", 34 | "license": "MIT", 35 | "bugs": { 36 | "url": "https://github.com/bamlab/react-native-image-header-scroll-view/issues" 37 | }, 38 | "homepage": "https://github.com/bamlab/react-native-image-header-scroll-view#readme", 39 | "devDependencies": { 40 | "@types/react": "^16.9.56", 41 | "@types/react-native": "^0.63.35", 42 | "babel-eslint": "^10.1.0", 43 | "babel-preset-react-native": "4.0.0", 44 | "eslint": "^7.13.0", 45 | "eslint-plugin-prettier": "^3.1.4", 46 | "eslint-plugin-react": "^7.21.5", 47 | "eslint-plugin-react-native": "^3.10.0", 48 | "prettier": "^1.10.2", 49 | "react": "16.2.0", 50 | "react-native": "0.52.2", 51 | "typescript": "^4.0.5" 52 | }, 53 | "peerDependencies": { 54 | "react": ">=16.8.1", 55 | "react-native": ">=0.59.0" 56 | }, 57 | "dependencies": {}, 58 | "types": "./lib/index.d.ts" 59 | } 60 | -------------------------------------------------------------------------------- /readmeAssets/basicUsage.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bamlab/react-native-image-header-scroll-view/4c0b69c872f25513f6ba712a0cdfda7a0e93e2d8/readmeAssets/basicUsage.gif -------------------------------------------------------------------------------- /readmeAssets/demoAndroid.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bamlab/react-native-image-header-scroll-view/4c0b69c872f25513f6ba712a0cdfda7a0e93e2d8/readmeAssets/demoAndroid.gif -------------------------------------------------------------------------------- /readmeAssets/demoBounces.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bamlab/react-native-image-header-scroll-view/4c0b69c872f25513f6ba712a0cdfda7a0e93e2d8/readmeAssets/demoBounces.gif -------------------------------------------------------------------------------- /readmeAssets/demoDisableHeaderGrow.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bamlab/react-native-image-header-scroll-view/4c0b69c872f25513f6ba712a0cdfda7a0e93e2d8/readmeAssets/demoDisableHeaderGrow.gif -------------------------------------------------------------------------------- /readmeAssets/demoIos.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bamlab/react-native-image-header-scroll-view/4c0b69c872f25513f6ba712a0cdfda7a0e93e2d8/readmeAssets/demoIos.gif -------------------------------------------------------------------------------- /src/ImageHeaderScrollView.tsx: -------------------------------------------------------------------------------- 1 | import React, { 2 | forwardRef, 3 | FunctionComponent, 4 | MutableRefObject, 5 | useImperativeHandle, 6 | useRef, 7 | useState, 8 | } from 'react'; 9 | import { 10 | Animated, 11 | ScrollView, 12 | StyleSheet, 13 | View, 14 | Image, 15 | Dimensions, 16 | ImageSourcePropType, 17 | ScrollViewProps, 18 | } from 'react-native'; 19 | 20 | type Props = ScrollViewProps & { 21 | children?: React.ElementType; 22 | childrenStyle?: any; 23 | overlayColor: string; 24 | foregroundParallaxRatio: number; 25 | maxHeight: number; 26 | maxOverlayOpacity: number; 27 | minHeight: number; 28 | minOverlayOpacity: number; 29 | renderFixedForeground: () => React.ElementType; 30 | renderForeground?: () => React.ElementType; 31 | renderHeader: () => React.ElementType; 32 | foregroundExtrapolate: 'clamp' | 'extend' | 'identity' | undefined; 33 | renderTouchableFixedForeground?: () => React.ElementType; 34 | ScrollViewComponent: React.ElementType; 35 | scrollViewBackgroundColor: string; 36 | headerImage?: ImageSourcePropType; 37 | useNativeDriver: boolean; 38 | headerContainerStyle?: Object; 39 | fixedForegroundContainerStyles?: Object; 40 | disableHeaderGrow?: boolean; 41 | }; 42 | 43 | export const ImageHeaderScrollView: FunctionComponent = forwardRef( 44 | ( 45 | { 46 | overlayColor = 'black', 47 | disableHeaderGrow = false, 48 | foregroundParallaxRatio = 1, 49 | maxHeight = 125, 50 | maxOverlayOpacity = 0.3, 51 | minHeight = 80, 52 | minOverlayOpacity = 0, 53 | renderFixedForeground = () => , 54 | foregroundExtrapolate = 'clamp', 55 | renderHeader: renderHeaderProps = () => , 56 | ScrollViewComponent: ScrollViewComponentProps = ScrollView, 57 | scrollViewBackgroundColor = 'white', 58 | childrenStyle, 59 | style, 60 | contentContainerStyle, 61 | useNativeDriver, 62 | headerContainerStyle, 63 | headerImage, 64 | fixedForegroundContainerStyles, 65 | renderTouchableFixedForeground: renderTouchableFixedForegroundProps, 66 | renderForeground: renderForegroundProps, 67 | onScroll: onScrollProps, 68 | ...scrollViewProps 69 | }, 70 | ref 71 | ) => { 72 | const scrollY = useRef(new Animated.Value(0)).current; 73 | const [pageY, setPageY] = useState(0); 74 | const containerRef = useRef>(null).current; 75 | const scrollViewRef = useRef>(null).current; 76 | 77 | useImperativeHandle(ref, () => ({ 78 | getChildContext: () => { 79 | return { 80 | scrollY: scrollY, 81 | scrollPageY: pageY + minHeight, 82 | }; 83 | }, 84 | })); 85 | const interpolateOnImageHeight = (outputRange: Array) => { 86 | const headerScrollDistance = maxHeight - minHeight; 87 | return scrollY.interpolate({ 88 | inputRange: [0, headerScrollDistance], 89 | outputRange, 90 | extrapolate: 'clamp', 91 | }); 92 | }; 93 | 94 | const Header = () => { 95 | if (headerImage) { 96 | return ( 97 | 104 | ); 105 | } 106 | return renderHeaderProps(); 107 | }; 108 | 109 | const renderHeader = () => { 110 | const overlayOpacity = interpolateOnImageHeight([minOverlayOpacity, maxOverlayOpacity]); 111 | 112 | const headerScale = scrollY.interpolate({ 113 | inputRange: [-maxHeight, 0], 114 | outputRange: [3, 1], 115 | extrapolate: 'clamp', 116 | }); 117 | 118 | const headerTransformStyle = { 119 | height: maxHeight, 120 | transform: !disableHeaderGrow ? [{ scale: headerScale }] : undefined, 121 | }; 122 | 123 | const overlayStyle = [ 124 | styles.overlay, 125 | { opacity: overlayOpacity, backgroundColor: overlayColor }, 126 | ]; 127 | 128 | const disableOverlay = minOverlayOpacity === maxOverlayOpacity && maxOverlayOpacity === 0; 129 | 130 | return ( 131 | 132 | {Header()} 133 | {!disableOverlay && } 134 | 135 | {renderFixedForeground()} 136 | 137 | 138 | ); 139 | }; 140 | 141 | const renderForeground = () => { 142 | const headerTranslate = scrollY.interpolate({ 143 | inputRange: [0, maxHeight * 2], 144 | outputRange: [0, -maxHeight * 2 * foregroundParallaxRatio], 145 | extrapolate: foregroundExtrapolate, 146 | }); 147 | 148 | const headerTransformStyle = { 149 | height: maxHeight, 150 | transform: [{ translateY: headerTranslate }], 151 | }; 152 | 153 | if (!renderForegroundProps) { 154 | return ; 155 | } 156 | 157 | return ( 158 | 159 | {renderForegroundProps()} 160 | 161 | ); 162 | }; 163 | 164 | const renderTouchableFixedForeground = () => { 165 | const height = interpolateOnImageHeight([maxHeight, minHeight]); 166 | 167 | if (!renderTouchableFixedForegroundProps) { 168 | return ; 169 | } 170 | 171 | if (useNativeDriver) { 172 | if (__DEV__) { 173 | console.warn( 174 | 'useNativeDriver=true and renderTouchableFixedForeground is not supported at the moment due to the animation of height unsupported with the native driver' 175 | ); 176 | } 177 | return null; 178 | } 179 | 180 | return ( 181 | 182 | {renderTouchableFixedForegroundProps()} 183 | 184 | ); 185 | }; 186 | 187 | const onContainerLayout = () => { 188 | if (!containerRef) { 189 | return; 190 | } 191 | containerRef.current.measureInWindow((_x, y) => { 192 | if (containerRef) { 193 | setPageY(y); 194 | } 195 | }); 196 | }; 197 | 198 | const onScroll = (e: any) => { 199 | if (onScrollProps) { 200 | onScrollProps(e); 201 | } 202 | scrollY.setValue(e.nativeEvent.contentOffset.y); 203 | }; 204 | 205 | const ScrollViewComponent = useNativeDriver ? Animated.ScrollView : ScrollViewComponentProps; 206 | 207 | const inset = maxHeight - minHeight; 208 | 209 | return ( 210 | 221 | {renderHeader()} 222 | 245 | {renderTouchableFixedForeground()} 246 | {renderForeground()} 247 | 248 | ); 249 | } 250 | ); 251 | 252 | const styles = StyleSheet.create({ 253 | container: { 254 | flex: 1, 255 | }, 256 | header: { 257 | position: 'absolute', 258 | top: 0, 259 | left: 0, 260 | right: 0, 261 | overflow: 'hidden', 262 | }, 263 | overlay: { 264 | position: 'absolute', 265 | top: 0, 266 | right: 0, 267 | left: 0, 268 | bottom: 0, 269 | zIndex: 100, 270 | }, 271 | fixedForeground: { 272 | position: 'absolute', 273 | top: 0, 274 | right: 0, 275 | left: 0, 276 | bottom: 0, 277 | zIndex: 101, 278 | }, 279 | touchableFixedForeground: { 280 | zIndex: 102, 281 | }, 282 | }); 283 | -------------------------------------------------------------------------------- /src/TriggeringView.tsx: -------------------------------------------------------------------------------- 1 | import React, { FunctionComponent, MutableRefObject, useEffect, useRef, useState } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { View, Animated, ViewProps } from 'react-native'; 4 | 5 | interface Props extends ViewProps { 6 | onBeginHidden: Function; 7 | onHide: Function; 8 | onBeginDisplayed: Function; 9 | onDisplay: Function; 10 | onTouchTop: Function; 11 | onTouchBottom: Function; 12 | bottomOffset?: number; 13 | topOffset?: number; 14 | } 15 | 16 | type Context = { 17 | scrollPageY?: number; 18 | scrollY: Animated.Value; 19 | }; 20 | 21 | export const TriggeringView: FunctionComponent = ({ 22 | topOffset = 0, 23 | bottomOffset = 0, 24 | onDisplay, 25 | onBeginDisplayed, 26 | onHide, 27 | onBeginHidden, 28 | onTouchBottom, 29 | onTouchTop, 30 | onLayout, 31 | children, 32 | ...viewProps 33 | }) => { 34 | const [initialPageY, setInitialPageY] = useState(0); 35 | const ref = useRef>(null).current; 36 | const [touched, setTouched] = useState(false); 37 | const [hidden, setHidden] = useState(false); 38 | const [context, setContext] = useState({ 39 | scrollPageY: 0, 40 | scrollY: new Animated.Value(0), 41 | }); 42 | 43 | const [height, setHeight] = useState(0); 44 | useEffect(() => { 45 | if (!context.scrollY) { 46 | return; 47 | } 48 | const listenerId = context.scrollY.addListener(onScroll); 49 | 50 | return () => { 51 | context.scrollY.removeListener(listenerId); 52 | }; 53 | }, []); 54 | 55 | const handleOnLayout = (e: any) => { 56 | if (onLayout) { 57 | onLayout(e); 58 | } 59 | if (!ref) { 60 | return; 61 | } 62 | const layout = e.nativeEvent.layout; 63 | setHeight(layout.height); 64 | 65 | ref.current.measure((_x, _y, _width, _height, _ageX, pageY) => { 66 | setInitialPageY(pageY); 67 | }); 68 | }; 69 | 70 | const onScroll = (event: any) => { 71 | if (!context.scrollPageY) { 72 | return; 73 | } 74 | const pageY = initialPageY - event.value; 75 | triggerEvents(context.scrollPageY, pageY, pageY + height); 76 | }; 77 | 78 | const triggerEvents = (value: number, top: number, bottom: number) => { 79 | if (!touched && value >= top + topOffset) { 80 | setTouched(true); 81 | onBeginHidden(); 82 | onTouchTop(true); 83 | } else if (touched && value < top + topOffset) { 84 | setTouched(false); 85 | 86 | onDisplay(); 87 | onTouchTop(false); 88 | } 89 | 90 | if (!hidden && value >= bottom + bottomOffset) { 91 | setHidden(true); 92 | onHide(); 93 | onTouchBottom(true); 94 | } else if (hidden && value < bottom + bottomOffset) { 95 | setHidden(false); 96 | onBeginDisplayed(); 97 | onTouchBottom(false); 98 | } 99 | }; 100 | 101 | return ( 102 | 103 | {children} 104 | 105 | ); 106 | }; 107 | -------------------------------------------------------------------------------- /src/index.d.ts: -------------------------------------------------------------------------------- 1 | declare module "react-native-image-header-scroll-view" { 2 | import type { ScrollViewProps, ViewStyle, TextStyle, ImageStyle, Animated } from "react-native"; 3 | 4 | interface Dictionary { 5 | [key: string]: string; 6 | } 7 | 8 | interface SourceObjectProps { 9 | uri?: string, 10 | bundle?: string; 11 | method?: string; 12 | headers?: Dictionary; 13 | body?: string; 14 | cache?: 'default' | 'reload' | 'force-cache' | 'only-if-cached'; 15 | width?: number; 16 | height?: number; 17 | scale?: number; 18 | } 19 | 20 | type SourceProps = number | SourceObjectProps | SourceObjectProps[]; 21 | 22 | interface HeaderImageScrollViewProps extends ScrollViewProps { 23 | children?: React.ReactElement; 24 | childrenStyle?: ViewStyle | TextStyle | ImageStyle; 25 | overlayColor?: string; // defaults to black 26 | fadeOutForeground?: boolean; 27 | foregroundParallaxRatio?: number; // defaults to 1 28 | maxHeight?: number; // default is 80 29 | minHeight?: number; // default is 125 30 | maxOverlayOpacity?: number; // defaults to 0.3 31 | minOverlayOpacity?: number; // defaults to 0 32 | renderFixedForeground?: () => React.ReactElement; 33 | renderForeground?: () => React.ReactElement; 34 | renderHeader?: () => React.ReactElement; // default is an empty view. 35 | foregroundExtrapolate?: string; 36 | renderTouchableFixedForeground?: () => React.ReactElement; 37 | ScrollViewComponent?: React.ComponentType; 38 | scrollViewBackgroundColor?: string; // defaults to white. 39 | headerImage?: SourceProps; 40 | useNativeDriver?: boolean; // defaults to false. 41 | headerContainerStyle?: object; 42 | fixedForegroundContainerStyles?: object; 43 | disableHeaderGrow?: boolean; 44 | } 45 | 46 | interface HeaderImageScrollViewState { 47 | scrollY: Animated.Value; 48 | pageY: number; 49 | } 50 | 51 | class HeaderImageScrollView extends React.Component {} 52 | 53 | interface TriggeringViewProps { 54 | onBeginHidden?: Function; 55 | onHide?: Function; 56 | onBeginDisplayed?: Function; 57 | onDisplay?: Function; 58 | onTouchTop?: Function; 59 | onTouchBottom?: Function; 60 | children?: React.ReactNode; 61 | onLayout?: Function; 62 | bottomOffset?: number; 63 | topOffset?: number; 64 | style?: ViewStyle; 65 | } 66 | 67 | interface TriggeringViewState { 68 | touched: boolean; 69 | hidden: boolean; 70 | } 71 | 72 | class TriggeringView extends React.Component {} 73 | 74 | export default HeaderImageScrollView; 75 | export { TriggeringView } 76 | } 77 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | export { ImageHeaderScrollView } from './ImageHeaderScrollView'; 2 | export { TriggeringView } from './TriggeringView'; 3 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */, 5 | "jsx": "react", 6 | // "outFile": "./", /* Concatenate and emit output to single file. */ 7 | "outDir": "./lib" /* Redirect output structure to the directory. */, 8 | "strict": true /* Enable all strict type-checking options. */, 9 | "baseUrl": "./" /* Base directory to resolve non-absolute module names. */, 10 | "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */, 11 | // "allowJs": true, 12 | /* Advanced Options */ 13 | "skipLibCheck": true /* Skip type checking of declaration files. */, 14 | "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */, 15 | "declaration": true 16 | }, 17 | "exclude": ["node_modules", "example", "lib"], 18 | "include": ["src"] 19 | } 20 | --------------------------------------------------------------------------------