Skip to content
React Navigation Extension for Collapsible Header. Make your header of react-navigation collapsible.
Branch: master
Clone or download
Latest commit 8dc33e3 Feb 3, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs update README and greenkeeper.json Feb 3, 2019
example Add option for disabling Face out effect on inner component. (#68) Feb 3, 2019
.eslintrc complete basic module Aug 3, 2018
.gitignore complete basic module Aug 3, 2018
.npmignore publish 0.3.1 Oct 20, 2018
.travis.yml add platform code for web(experimental) Sep 1, 2018
LICENSE Create LICENSE Aug 20, 2018
README.md Update README.md Feb 3, 2019
greenkeeper.json update README and greenkeeper.json Feb 3, 2019
index.js
package-lock.json Support react-navigation v3 (#50) Jan 28, 2019
package.json 3.0.3 release Feb 3, 2019

README.md

react-navigation-collapsible

npm npm Greenkeeper badge

React Navigation Extension for Collapsible Header. Make your header of react-navigation collapsible.

Try Expo Snack

Try Example.

$ cd example
$ npm install
$ react-native run-ios
$ react-native run-android

Usage

react-navigation v2?

If you're using react-navigation v2, please use react-navigation-collapsible@2.0.0 and 2.0.0 README.

Expo

If you use Expo, add this lines to your App.js. (It only affects Android)

/* Support Expo */
import { setExpoStatusBarHeight } from 'react-navigation-collapsible';
import { Constants } from 'expo';
setExpoStatusBarHeight(Constants.statusBarHeight);

Default Header

(MyScreen.js)

import { withCollapsible } from 'react-navigation-collapsible';
const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);

class MyScreen extends Component{
  static navigationOptions = {
    title: 'My Screen'
  };

  render(){
    const { paddingHeight, animatedY, onScroll } = this.props.collapsible;

    return (
      <AnimatedFlatList 
        ...
        contentContainerStyle={{paddingTop: paddingHeight}}
        scrollIndicatorInsets={{top: paddingHeight}}
        _mustAddThis={animatedY}
        onScroll={onScroll} 

        // if you want to use 'onScroll' callback.
        // onScroll={Animated.event(
        //   [{nativeEvent: {contentOffset: {y: animatedY}}}],
        //   {useNativeDriver:true, listener:this.onScroll})} 
        />
    )
  }
}

export default withCollapsible(MyScreen, {iOSCollapsedColor: '#031'});

See example/src/S0_DefaultHeader.js

Extra Header (Search Bar)

See example/src/S1_ExtraHeader.js

Default Header With Tab

See example/src/S2_DefaultHeaderForTab.js and example/src/TabChild1Screen.js

Extra Header With Tab (e.g Facebook Group)

See example/src/S3_ExtraHeaderForTab.js and example/src/TabChild1Screen.js

API

HoC and config method

type CollapsibleParams = {
  iOSCollapsedColor: string, // iOS only
} | {
  collapsibleComponent: React.Component,
  collapsibleBackgroundStyle: {
    ...React.Style
  } & {
    disableFadeoutInnerComponent?: boolean,
    paddingBottom?: number,
  }
}

function withCollapsible (WrappedScreen, collapsibleParams: CollapsibleParams = {})
function withCollapsibleForTab (MaterialTapNavigator, collapsibleParams: CollapsibleParams = {})
function withCollapsibleForTabChild (WrappedScreen)

function setExpoStatusBarHeight (height) // expo only
function setSafeBounceHeight (height)

Given props

render () {
  const {
    paddingHeight,
    translateY, // 0 ~ collapsibleHeaderHeight
    translateOpacity, // 1.0 ~ 0.0
    translateProgress, // 0.0 ~ 1.0
    animatedY,
    onScroll, 
  } = this.props.collapsible;

  ...
}

Limitation

When scroll slowly, the layout is flickering on Android.

This is react-native's regression bug on Android. Here is a workaround. facebook/react-native#15445 (comment)

With State persistence #40

react-navigation provides State persistence as experimental feature. Unfortunately, collapsible header stops collapsible when you use it.

With SectionList #37

ToDo

  • iOS 11 Style Header
  • Hiding bottom tab

Contribution

  • PR is welcome. Please create issue or PR with a sample react-navigation code or Expo Snack.
  • If you've got good example using this module, please update /example.

Dependencies Version of Example

  • react-native: 0.57.8, latest: npm
  • react-navigation: 3.0.9, latest: npm

I've ensured this module is compatible with react-native >=0.56 and react-navigation >=2.11.2. But it does not mean it's not compatible with older versions.

You can’t perform that action at this time.