npmpackage.info

Gathering detailed insights and metrics for steste-react-navigation-collapsible

steste-react-navigation-collapsible - 5.0.1 | npmpackage.info

steste-react-navigation-collapsible

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

5.0.1

1,164

MIT

TypeScript

23.55 kB

2.5

Installations

npm install steste-react-navigation-collapsible

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Pull Requests

Open

3

Total

97

Closed

42

Merged

52

Issues

Open

13

Total

109

Closed

96

Releases

Unable to fetch releases

Languages

TypeScript

Java

Objective-C

JavaScript

Makefile

Ruby

Starlark

Shell

TypeScript (65.48%)

Java (14.45%)

Objective-C (10.47%)

JavaScript (4.35%)

Makefile (1.92%)

Ruby (1.7%)

Starlark (1.4%)

Shell (0.23%)

Developer

benevbright

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

1,164 Stars

268 Commits

94 Forks

12 Watchers

6 Branches

16 Contributors

Updated on Jun 25, 2025

Maintainers

View All 16 Contributors

Package Meta Information

Latest Version

5.0.1

Package Id

steste-react-navigation-collapsible@5.0.1

Unpacked Size

23.55 kB

Size

6.56 kB

File Count

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

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
≥ 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. Default Header

1import { createCollapsibleStack } from 'react-navigation-collapsible';
2
3function App() {
4  return (
5    <NavigationContainer>
6      <Stack.Navigator>
7        /* Wrap your Stack.Screen */
8        {createCollapsibleStack(
9          <Stack.Screen
10            name="HomeScreen"
11            component={MyScreen}
12            options={{
13              headerStyle: { backgroundColor: 'green' },
14              title: 'Home',
15            }}
16          />,
17          {
18            collapsedColor: 'red' /* Optional */,
19          }
20        )}
21      </Stack.Navigator>
22    </NavigationContainer>
23  );
24}

1import { Animated } from 'react-native';
2import { useCollapsibleStack } from 'react-navigation-collapsible';
3
4const MyScreen = ({ navigation, route }) => {
5  const {
6    onScroll /* Event handler */,
7    containerPaddingTop /* number */,
8    scrollIndicatorInsetTop /* number */,
9    /* Animated.AnimatedInterpolation by scrolling */
10    translateY /* 0.0 ~ -headerHeight */,
11    progress /* 0.0 ~ 1.0 */,
12    opacity /* 1.0 ~ 0.0 */,
13  } = useCollapsibleStack();
14
15  return (
16    <Animated.FlatList
17      onScroll={onScroll}
18      contentContainerStyle={{ paddingTop: containerPaddingTop }}
19      scrollIndicatorInsets={{ top: scrollIndicatorInsetTop }}
20      /* rest of your stuff */
21    />
22  );
23};

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

2. Sub Header (e.g Search Bar)

1import { createCollapsibleStackSub } from 'react-navigation-collapsible';
2/* use 'createCollapsibleStackSub' instead of 'createCollapsibleStack' */
3
4/* The rest are the same with the default header. */

1import { Animated } from 'react-native';
2import {
3  useCollapsibleStack,
4  CollapsibleStackSub,
5} from 'react-navigation-collapsible';
6
7const MySearchBar = () => (
8  <View style={{ padding: 15, width: '100%', height: 60 }}>
9    <TextInput placeholder="search here" />
10  </View>
11);
12
13const MyScreen = ({ navigation, route }) => {
14  const {
15    onScroll /* Event handler */,
16    containerPaddingTop /* number */,
17    scrollIndicatorInsetTop /* number */,
18  } = useCollapsibleStack();
19
20  return (
21    <>
22      <Animated.FlatList
23        onScroll={onScroll}
24        contentContainerStyle={{ paddingTop: containerPaddingTop }}
25        scrollIndicatorInsets={{ top: scrollIndicatorInsetTop }}
26        /* rest of your stuff */
27      />
28      /* Wrap your component with `CollapsibleStackSub` */
29      <CollapsibleStackSub>
30        <MySearchBar />
31      </CollapsibleStackSub>
32    </>
33  );
34};

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

Install

1# install module
2yarn 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.

1yarn tsc -w

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

9

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

1

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

45 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-c2jc-4fpr-4vhg
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-7gc6-qh9x-w6h8
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-mph8-6787-r8hw
Warn: Project is vulnerable to: GHSA-7mhc-prgv-r3q4
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-qrpm-p2h7-hrv2
Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
Warn: Project is vulnerable to: GHSA-4cpg-3vgw-4877
Warn: Project is vulnerable to: GHSA-rxrc-rgv4-jpvx
Warn: Project is vulnerable to: GHSA-2j79-8pqc-r7x6
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6
Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj
Warn: Project is vulnerable to: GHSA-gff7-g5r8-mg8m
Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Warn: Project is vulnerable to: GHSA-5fg8-2547-mr8q
Warn: Project is vulnerable to: GHSA-crh6-fp67-6883
Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9

Score

2.5

/10

Last Scanned on 2025-07-14

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

steste-react-navigation-collapsible

Installations

Developer Guide

Yes

CommonJS

Pull Requests

3

97

42

52

Issues

13

109

96

Releases

Unable to fetch releases

Languages

Developer

benevbright

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

react-navigation-collapsible

Compatibility 🚧

Usage

1. Default Header

2. Sub Header (e.g Search Bar)

Install

Contribution

Testing your library code with the example

10

10

9

1

0

0

0

0

0

0

0

0

0

2.5

/10