react-navigation-collapsible

An extension of react-navigation that makes your header collapsible.

Try out the demo on Expo Snack

🏗 The Collapsible Tab-navigator is no longer supported due to the Android bug from react-native.

Usage

1-1. Default Header

1// Expo ONLY
2import { disableExpoTranslucentStatusBar } from 'react-navigation-collapsible';
3
4/* Call this If you have disabled Expo's default translucent statusBar. */
5disableExpoTranslucentStatusBar();

1import { Animated } from 'react-native';
2import { useCollapsibleHeader } from 'react-navigation-collapsible';
3
4const MyScreen = ({ navigation, route }) => {
5  const options = {
6    navigationOptions: {
7      headerStyle: { backgroundColor: 'green', height: 150 } /* Optional */,
8      headerBackground: <Image /> /* Optional */,
9    },
10    config: {
11      collapsedColor: 'red' /* Optional */,
12      useNativeDriver: true /* Optional, default: true */,
13      elevation: 4 /* Optional */,
14      disableOpacity: true /* Optional, default: false */,
15    },
16  };
17  const {
18    onScroll /* Event handler */,
19    onScrollWithListener /* Event handler creator */,
20    containerPaddingTop /* number */,
21    scrollIndicatorInsetTop /* number */,
22    /* Animated.AnimatedValue contentOffset from scrolling */
23    positionY /* 0.0 ~ length of scrollable component (contentOffset)
24    /* Animated.AnimatedInterpolation by scrolling */,
25    translateY /* 0.0 ~ -headerHeight */,
26    progress /* 0.0 ~ 1.0 */,
27    opacity /* 1.0 ~ 0.0 */,
28  } = useCollapsibleHeader(options);
29
30  /* in case you want to use your listener
31  const listener = ({nativeEvent}) => {
32    // I want to do something
33  };
34  const onScroll = onScrollWithListener(listener);
35  */
36
37  return (
38    <Animated.FlatList
39      onScroll={onScroll}
40      contentContainerStyle={{ paddingTop: containerPaddingTop }}
41      scrollIndicatorInsets={{ top: scrollIndicatorInsetTop }}
42      /* rest of your stuff */
43    />
44  );
45};

See /example/src/DefaultHeaderScreen.tsx

1-2. Sticky Header

See /example/src/StickyHeaderScreen.tsx

1-3. Background Header

See /example/src/BackgroundHeaderScreen.tsx

---

2. Sub Header (e.g Search Bar)

1import { Animated } from 'react-native';
2import {
3  useCollapsibleSubHeader,
4  CollapsibleSubHeaderAnimator,
5} from 'react-navigation-collapsible';
6
7const MySearchBar = () => (
8  <View style={{ padding: 15, width: '100%', height: 60 }}>
9    <TextInput placeholder="search here" />
10  </View>
11);
12
13const MyScreen = ({ navigation, route }) => {
14  const {
15    onScroll /* Event handler */,
16    containerPaddingTop /* number */,
17    scrollIndicatorInsetTop /* number */,
18    translateY,
19  } = useCollapsibleSubHeader();
20
21  return (
22    <>
23      <Animated.FlatList
24        onScroll={onScroll}
25        contentContainerStyle={{ paddingTop: containerPaddingTop }}
26        scrollIndicatorInsets={{ top: scrollIndicatorInsetTop }}
27        /* rest of your stuff */
28      />
29      {/* Wrap your component with `CollapsibleSubHeaderAnimator` */}
30      <CollapsibleSubHeaderAnimator translateY={translateY}>
31        <MySearchBar />
32      </CollapsibleSubHeaderAnimator>
33    </>
34  );
35};

See /example/src/SubHeaderScreen.tsx

3. Custom Header

1import { Animated } from 'react-native';
2import { useCollapsibleHeader } from 'react-navigation-collapsible';
3
4const MyScreen = ({ navigation, route }) => {
5  const options = {
6    navigationOptions: {
7      /* Add a custom header to 'useCollapsibleHeader' options the same way you would add it to the Stack.Screen options */
8      header: ({ scene, previous, navigation }) => {
9        const { options } = scene.descriptor;
10        const title =
11          options.headerTitle !== undefined
12            ? options.headerTitle
13            : options.title !== undefined
14            ? options.title
15            : scene.route.name;
16
17        return (
18          <MyHeader
19            title={title}
20            leftButton={
21              previous ? (
22                <MyBackButton onPress={navigation.goBack} />
23              ) : (
24                undefined
25              )
26            }
27            style={options.headerStyle}
28          />
29        );
30      },
31    },
32  };
33  const {
34    onScroll /* Event handler */,
35    containerPaddingTop /* number */,
36    scrollIndicatorInsetTop /* number */,
37  } = useCollapsibleHeader(options);
38
39  return (
40    <Animated.FlatList
41      onScroll={onScroll}
42      contentContainerStyle={{ paddingTop: containerPaddingTop }}
43      scrollIndicatorInsets={{ top: scrollIndicatorInsetTop }}
44      /* rest of your stuff */
45    />
46  );
47};

See /example/src/CustomHeaderScreen.tsx

react-navigation recommends to use headerMode='screen' when you use the custom header. [Set headerMode to screen]

Install

1# install module
2yarn add react-navigation-collapsible

Contribution

PR is welcome!

How to test changes with the example?

/example imports the library directly from the root folder, configured with babel-plugin-module-resolver. So, just build the library with the watch option and run the example.

1yarn tsc -w
2cd example && yarn ios