react-navigation-collapsible v5.0.0-alpha1

react-navigation-collapsible

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

Try out on Expo Snack

Compatibility 🚧

The navigation tab is no longer supported due to the Android bug from react-native.

Usage

For Regular Stack Header

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

function App() {
  return (
    <NavigationNativeContainer>
      <Stack.Navigator>
        /* Wrap your Stack.Screen */
        {CollapsibleStack(
          <Stack.Screen
            name="HomeScreen"
            component={MyScreen}
            options={{
              headerStyle: { backgroundColor: 'green' },
              title: 'Home',
            }}
          />,
          {
            collapsedColor: 'red',
          }
        )}
      </Stack.Navigator>
    </NavigationNativeContainer>
  );
}

import { Animated } from 'react-native';
import { useCollapsibleStack } from 'react-navigation-collapsible';

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

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

See /example/App.tsx and /example/src/S1-RegularHeaderScreen.tsx

Install

# install module
yarn add react-navigation-collapsible@next

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