https://github.com/benevbright/react-navigation-collapsible
An extension of react-navigation that makes your header collapsible.
https://github.com/benevbright/react-navigation-collapsible
Last synced: 5 months ago
JSON representation
An extension of react-navigation that makes your header collapsible.
- Host: GitHub
- URL: https://github.com/benevbright/react-navigation-collapsible
- Owner: benevbright
- License: mit
- Archived: true
- Created: 2018-08-02T21:51:28.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2021-11-07T09:09:32.000Z (over 4 years ago)
- Last Synced: 2024-12-31T22:18:01.306Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 19.8 MB
- Stars: 1,163
- Watchers: 13
- Forks: 93
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - react-navigation-collapsible - navigation that makes your header collapsible. | benevbright | 1046 | (TypeScript)
README
# react-navigation-collapsible
[](https://www.npmjs.com/package/react-navigation-collapsible) [](https://www.npmjs.com/package/react-navigation-collapsible) [](https://github.com/prettier/prettier) [](https://github.com/benevbright/react-navigation-collapsible/actions?query=workflow%3ACI) [](https://expo.io/)
An extension of react-navigation that makes your header collapsible.
Try out the demo on [Expo Snack](https://snack.expo.io/@benevbright/react-navigation-collapsible)
🏗 **The Collapsible Tab-navigator** is no longer supported due to the [Android bug from react-native](https://github.com/facebook/react-native/issues/21801).
## Usage
### 1-1. Default Header
```js
// Expo ONLY
import { disableExpoTranslucentStatusBar } from 'react-navigation-collapsible';
/* Call this If you have disabled Expo's default translucent statusBar. */
disableExpoTranslucentStatusBar();
```
```js
import { Animated } from 'react-native';
import { useCollapsibleHeader } from 'react-navigation-collapsible';
const MyScreen = ({ navigation, route }) => {
const options = {
navigationOptions: {
headerStyle: { backgroundColor: 'green', height: 150 } /* Optional */,
headerBackground: /* Optional */,
},
config: {
collapsedColor: 'red' /* Optional */,
useNativeDriver: true /* Optional, default: true */,
elevation: 4 /* Optional */,
disableOpacity: true /* Optional, default: false */,
},
};
const {
onScroll /* Event handler */,
onScrollWithListener /* Event handler creator */,
containerPaddingTop /* number */,
scrollIndicatorInsetTop /* number */,
/* Animated.AnimatedValue contentOffset from scrolling */
positionY /* 0.0 ~ length of scrollable component (contentOffset)
/* Animated.AnimatedInterpolation by scrolling */,
translateY /* 0.0 ~ -headerHeight */,
progress /* 0.0 ~ 1.0 */,
opacity /* 1.0 ~ 0.0 */,
} = useCollapsibleHeader(options);
/* in case you want to use your listener
const listener = ({nativeEvent}) => {
// I want to do something
};
const onScroll = onScrollWithListener(listener);
*/
return (
);
};
```
See [/example/src/DefaultHeaderScreen.tsx](example/src/DefaultHeaderScreen.tsx)
### 1-2. Sticky Header
See [/example/src/StickyHeaderScreen.tsx](example/src/StickyHeaderScreen.tsx)
### 1-3. Background Header
See [/example/src/BackgroundHeaderScreen.tsx](example/src/BackgroundHeaderScreen.tsx)
---
### 2. Sub Header (e.g Search Bar)
```js
import { Animated } from 'react-native';
import {
useCollapsibleSubHeader,
CollapsibleSubHeaderAnimator,
} from 'react-navigation-collapsible';
const MySearchBar = () => (
);
const MyScreen = ({ navigation, route }) => {
const {
onScroll /* Event handler */,
containerPaddingTop /* number */,
scrollIndicatorInsetTop /* number */,
translateY,
} = useCollapsibleSubHeader();
return (
<>
{/* Wrap your component with `CollapsibleSubHeaderAnimator` */}
>
);
};
```
See [/example/src/SubHeaderScreen.tsx](example/src/SubHeaderScreen.tsx)
### 3. Custom Header
```js
import { Animated } from 'react-native';
import { useCollapsibleHeader } from 'react-navigation-collapsible';
const MyScreen = ({ navigation, route }) => {
const options = {
navigationOptions: {
/* Add a custom header to 'useCollapsibleHeader' options the same way you would add it to the Stack.Screen options */
header: ({ scene, previous, navigation }) => {
const { options } = scene.descriptor;
const title =
options.headerTitle !== undefined
? options.headerTitle
: options.title !== undefined
? options.title
: scene.route.name;
return (
) : (
undefined
)
}
style={options.headerStyle}
/>
);
},
},
};
const {
onScroll /* Event handler */,
containerPaddingTop /* number */,
scrollIndicatorInsetTop /* number */,
} = useCollapsibleHeader(options);
return (
);
};
```
See [/example/src/CustomHeaderScreen.tsx](example/src/CustomHeaderScreen.tsx)
`react-navigation` recommends to use `headerMode='screen'` when you use the custom header. [[Set `headerMode` to `screen`]](https://reactnavigation.org/docs/stack-navigator/#set-headermode-to-screen)
## Install
```bash
# install module
yarn add react-navigation-collapsible
```
## Contribution
PR is welcome!
### How to test changes with the example?
[/example](example) imports the library directly from the root folder, configured with [babel-plugin-module-resolver](example/babel.config.js#L10).
So, just build the library with the `watch` option and run the example.
```bash
yarn tsc -w
cd example && yarn ios
```