react-navigation-collapsible
An extension of react-navigation that makes your header collapsible.
Try out on Expo Snack
Compatibility ?, react-navigation, react-navigation-collapsible, Documentation, ------------------, ------------------------------, ------------------------------------------------------------------------------------, ^5.0.0 (next), ^5.0.0 (latest), current, ^4.0.0 (latest), ^3.0.0, v3-4 branch, ^2.0.0, ^2.0.0, v2 branch, ? The Callapsible Tab-navigator is no longer supported due to the Android bug from react-native.
Usage
1. Default Header
import { createCollapsibleStack } from 'react-navigation-collapsible';
function App() {
return (
<NavigationNativeContainer>
<Stack.Navigator>
/* Wrap your Stack.Screen */
{createCollapsibleStack(
<Stack.Screen
name="HomeScreen"
component={MyScreen}
options={{
headerStyle: { backgroundColor: 'green' },
title: 'Home',
}}
/>,
{
collapsedColor: 'red' /* Optional */,
}
)}
</Stack.Navigator>
</NavigationNativeContainer>
);
}
import { Animated } from 'react-native';
import { useCollapsibleStack } from 'react-navigation-collapsible';
const MyScreen = ({ navigation, route }) => {
const {
onScroll /* Event handler */,
containerPaddingTop /* number */,
scrollIndicatorInsetTop /* number */,
/* Animated.AnimatedInterpolation by scrolling */
translateY /* 0.0 ~ -headerHeight */,
progress /* 0.0 ~ 1.0 */,
opacity /* 1.0 ~ 0.0 */,
} = useCollapsibleStack();
return (
<Animated.FlatList
onScroll={onScroll}
contentContainerStyle={{ paddingTop: containerPaddingTop }}
scrollIndicatorInsets={{ top: scrollIndicatorInsetTop }}
/* rest of your stuff */
/>
);
};
See /example/App.tsx and /example/src/DefaultHeaderScreen.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