Repository files navigation

A ScrollView-like component that:

• Has a fixed image header
• Keep the image as a nav bar
• Works on iOS and Android

/!\ Warning /!\The lib has been upgraded to match with new React and React Native standards (hooks, deprecated methods, etc...).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.I advice you to update the lib in a separate commit to roll back if necessary.However the lib should work for most of cases, so don't be scared to update the lib.It is a first step to improve the lib in the future, so please be understanding 😇

$ npm install react-native-image-header-scroll-view --save

|

You can find this example code here :https://github.com/bamlab/react-native-image-header-scroll-view-example/blob/master/src/Pages/TvShow.js

import{ImageHeaderScrollView,TriggeringView}from'react-native-image-header-scroll-view';// Inside of a component's render() method:render(){return(<ImageHeaderScrollViewmaxHeight={200}minHeight={MIN_HEIGHT}headerImage={require("../../assets/NZ.jpg")}renderForeground={()=>(<Viewstyle={{height:150,justifyContent:"center",alignItems:"center"}}><TouchableOpacityonPress={()=>console.log("tap!!")}><Textstyle={{backgroundColor:"transparent"}}>Tap Me!</Text></TouchableOpacity></View>)}><Viewstyle={{height:1000}}><TriggeringViewonHide={()=>console.log("text hidden")}><Text>Scroll Me!</Text></TriggeringView></View></ImageHeaderScrollView>);}

Result :

You can find examples in adedicated repository.

All of the properties ofScrollView are supported. Please refer to theScrollView documentation for more detail.

TheImageHeaderScrollView handle also the following props. None is required :

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.It accept callback called when it disappear or appear at the top of the ImageHeaderScrollView. You can seean exemple in the dedicated repository.

All of the properties ofView are supported.

Just set themaxOverlayOpacity to0.

<ImageHeaderScrollViewminOverlayOpacity={0}maxOverlayOpacity={0}{/* ... */}/>

You have two solutions :

1. You can use thedisableHeaderGrow props. It will keep the ios elastic scroll effect.
2. You can also use thebounces={false} propsfrom the scroll view.

Results :

disableHeaderGrow	bounces={false}

All contributions are welcomed, that might be either adding new features, doing some refaco of the exisiting code or fixing bugs.

How to contribute

1. Fork the project & clone locally. Follow the initial setup here.
2. Create a branch, naming it either a feature or bug: git checkout -b feature/that-new-feature or bug/fixing-that-bug
3. Code and commit your changes. Write a good commit message. Best would be to use gitcommitizen
4. Test your changes in the example

• launch the Expo project:cd example && yarn start && cd ..
• compile typescript to lib folder : `yarn tsc --noEmit``
• watch your feature/fix in your simulator

5. Push to the branch: git push origin feature/that-new-feature
6. Create a pull request for your branch 🎉

• generator-rn-toolbox
• react-native-image-resizer
• react-native-numberpicker-dialog
• react-native-animated-picker