An extension of react-navigation that makes your header collapsible.
Try out on Expo Snack
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.
import {
createCollapsibleStack,
// disableExpoTranslucentStatusBar,
} from 'react-navigation-collapsible';
/* Expo only: If you disabled Expo's default translucent statusBar, please call this function as well.
disableExpoTranslucentStatusBar();
*/
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
See https://github.com/example/src/StickyHeaderScreen.tsx
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 https://github.com/example/App.tsx and https://github.com/example/src/SubHeaderScreen.tsx
# install module
yarn add react-navigation-collapsible
PR is welcome!
/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
Author: benevbright
GitHub: https://github.com/benevbright/react-navigation-collapsible
#reactjs #javascript #react-native