Skip to content

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

License

Notifications You must be signed in to change notification settings

alexpchin/react-navigation-collapsible

 
 

Repository files navigation

react-navigation-collapsible

npm npm code style: prettier ci: github runs with expo

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

Try out on Expo Snack

Compatibility 🚧

react-navigation react-navigation-collapsible Documentation
≥ v5 (latest) v5 (latest) current
≥ v3 v3 v3-4 branch
v2 v2 v2 branch

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

Usage

1-1. Default Header

import { createCollapsibleStack } from 'react-navigation-collapsible';

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        /* Wrap your Stack.Screen */
        {createCollapsibleStack(
          <Stack.Screen
            name="HomeScreen"
            component={MyScreen}
            options={{
              headerStyle: { backgroundColor: 'green' },
              title: 'Home',
            }}
          />,
          {
            collapsedColor: 'red' /* Optional */,
            useNativeDriver: true /* Optional, default: true */,
          }
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}
import { Animated } from 'react-native';
import { useCollapsibleStack } from 'react-navigation-collapsible';

const MyScreen = ({ navigation, route }) => {
  const {
    onScroll /* Event handler */,
    onScrollWithListener /* Event handler creator */,
    containerPaddingTop /* number */,
    scrollIndicatorInsetTop /* number */,
    /* Animated.AnimatedInterpolation by scrolling */
    translateY /* 0.0 ~ -headerHeight */,
    progress /* 0.0 ~ 1.0 */,
    opacity /* 1.0 ~ 0.0 */,
  } = useCollapsibleStack();

  /* in case you want to use your listener
  const listener = ({nativeEvent}) => {
    console.log(nativeEvent);
  };
  const onScroll = onScrollWithListener(listener);
  */

  return (
    <Animated.FlatList
      onScroll={onScroll}
      contentContainerStyle={{ paddingTop: containerPaddingTop }}
      scrollIndicatorInsets={{ top: scrollIndicatorInsetTop }}
      /* rest of your stuff */
    />
  );
};

See /example/App.tsx and /example/src/DefaultHeaderScreen.tsx

1-2. Sticky Header

See /example/src/StickyHeaderScreen.tsx


2. Sub Header (e.g Search Bar)

import { createCollapsibleStackSub } from 'react-navigation-collapsible';
/* use 'createCollapsibleStackSub' instead of 'createCollapsibleStack' */

/* The rest are the same with the default header. */
import { Animated } from 'react-native';
import {
  useCollapsibleStack,
  CollapsibleStackSub,
} from 'react-navigation-collapsible';

const MySearchBar = () => (
  <View style={{ padding: 15, width: '100%', height: 60 }}>
    <TextInput placeholder="search here" />
  </View>
);

const MyScreen = ({ navigation, route }) => {
  const {
    onScroll /* Event handler */,
    containerPaddingTop /* number */,
    scrollIndicatorInsetTop /* number */,
  } = useCollapsibleStack();

  return (
    <>
      <Animated.FlatList
        onScroll={onScroll}
        contentContainerStyle={{ paddingTop: containerPaddingTop }}
        scrollIndicatorInsets={{ top: scrollIndicatorInsetTop }}
        /* rest of your stuff */
      />
      /* Wrap your component with `CollapsibleStackSub` */
      <CollapsibleStackSub>
        <MySearchBar />
      </CollapsibleStackSub>
    </>
  );
};

See /example/App.tsx and /example/src/SubHeaderScreen.tsx

Install

# install module
yarn add react-navigation-collapsible

Contribution

PR is welcome!

Testing your library code with the example

/example imports the library directly from the root folder, configured with babel-plugin-module-resolver. So, just turn the watch option on at the root folder while you're making changes on the library, and check them on the example.

yarn tsc -w

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 60.6%
  • Objective-C 12.7%
  • Ruby 8.5%
  • Java 8.0%
  • JavaScript 5.8%
  • Makefile 2.3%
  • Other 2.1%