npmpackage.info

Gathering detailed insights and metrics for react-native-collapsible-tab-view-navigation

react-native-collapsible-tab-view-navigation - 0.0.0-alpha.0 | npmpackage.info

react-native-collapsible-tab-view-navigation

A cross-platform Collapsible Tab View component for React Native

0.0.0-alpha.0

996

MIT

TypeScript

34.83 kB

2.6

Installations

npm install react-native-collapsible-tab-view-navigation

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

14.7.0

NPM Version

6.14.7 Pull Requests

Open

15

Total

128

Closed

30

Merged

83

Issues

Open

176

Total

349

Closed

173

Releases

Unable to fetch releases

Languages

TypeScript

Kotlin

Ruby

Objective-C++

JavaScript

Objective-C

Shell

Swift

TypeScript (91.58%)

Kotlin (2.93%)

Ruby (2.05%)

Objective-C++ (1.72%)

JavaScript (1.27%)

Objective-C (0.21%)

Shell (0.1%)

Swift (0.07%)

C (0.06%)

Developer

PedroBern

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

996 Stars

512 Commits

208 Forks

7 Watchers

27 Branches

15 Contributors

Updated on Jul 13, 2025

Maintainers

View All 15 Contributors

Package Meta Information

Latest Version

0.0.0-alpha.0

Package Id

react-native-collapsible-tab-view-navigation@0.0.0-alpha.0

Unpacked Size

34.83 kB

Size

7.07 kB

File Count

NPM Version

6.14.7

Node Version

14.7.0

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 Native Collapsible Tab View

Expo App
Demo
Features
Installation
Quick Start
Guides
- Scroll on Header
API Reference
Known Issues
Alternative Libraries
Contributing
- Documentation Changes

🚀 Version 6 released with Reanimated v3 support

React Native Collapsible Tab View is a versatile library for creating collapsible tab views using Reanimated.

Explore the examples for the source code of the Expo app.

Credits

The react-native-tab-view example app was used as a template for the demos.

Demo

Default	Snap	revealHeaderOnScroll	revealHeaderOnScroll + Snap

Features

UI thread animations and interactions
High customizability
Full TypeScript support
Lazy loading with fade-in animation
DiffClamp header
Interpolated header
Scroll snap (with interpolated header)
Animated snap (with diffClamp header)
Scrollable tabs, inspired by the react-native-tab-view tab bar

Installation

To install the library, open a terminal in your project's root directory and run:

1yarn add react-native-collapsible-tab-view react-native-pager-view

Then, add Reanimated, follow the official installation guide.

Quick Start

1import React from 'react'
2import { View, StyleSheet, ListRenderItem } from 'react-native'
3import { Tabs } from 'react-native-collapsible-tab-view'
4
5const HEADER_HEIGHT = 250
6
7const DATA = [0, 1, 2, 3, 4]
8const identity = (v: unknown): string => v + ''
9
10const Header = () => {
11  return <View style={styles.header} />
12}
13
14const Example: React.FC = () => {
15  const renderItem: ListRenderItem<number> = React.useCallback(({ index }) => {
16    return (
17      <View style={[styles.box, index % 2 === 0 ? styles.boxB : styles.boxA]} />
18    )
19  }, [])
20
21  return (
22    <Tabs.Container
23      renderHeader={Header}
24      headerHeight={HEADER_HEIGHT} // optional
25    >
26      <Tabs.Tab name="A">
27        <Tabs.FlatList
28          data={DATA}
29          renderItem={renderItem}
30          keyExtractor={identity}
31        />
32      </Tabs.Tab>
33      <Tabs.Tab name="B">
34        <Tabs.ScrollView>
35          <View style={[styles.box, styles.boxA]} />
36          <View style={[styles.box, styles.boxB]} />
37        </Tabs.ScrollView>
38      </Tabs.Tab>
39    </Tabs.Container>
40  )
41}
42
43const styles = StyleSheet.create({
44  box: {
45    height: 250,
46    width: '100%',
47  },
48  boxA: {
49    backgroundColor: 'white',
50  },
51  boxB: {
52    backgroundColor: '#D8D8D8',
53  },
54  header: {
55    height: HEADER_HEIGHT,
56    width: '100%',
57    backgroundColor: '#2196f3',
58  },
59})
60
61export default Example
62

Guides

Scrolling on the Header

To enable scrolling from the header, follow these steps:

If the HeaderComponent does not contain touchable components, set the pointerEvents prop to 'none'.
If the HeaderComponent does contain touchable components, set the pointerEvents prop to 'box-none' to ensure they function properly.

Note: If any child component within the HeaderComponent should not respond to touches, such as an <Image /> element, set its pointerEvents prop to 'none'. Otherwise, it may unintentionally become the target of a touch gesture on iOS devices and prevent scrolling.

API Reference

Core

Tabs.Container

Basic usage looks like this:

1import { Tabs } from 'react-native-collapsible-tab-view'
2
3const Example = () => {
4   return (
5     <Tabs.Container renderHeader={MyHeader}>
6       <Tabs.Tab name="A">
7         <ScreenA />
8       </Tabs.Tab>
9       <Tabs.Tab name="B">
10         <ScreenB />
11       </Tabs.Tab>
12     </Tabs.Container>
13   )
14}

Props

name	type	default	description
`allowHeaderOverscroll`	`boolean \| undefined`	`false`	Whether the header moves down during overscrolling (for example on pull-to-refresh on iOS) or sticks to the top
`cancelLazyFadeIn`	`boolean \| undefined`
`cancelTranslation`	`boolean \| undefined`
`containerStyle`	`StyleProp<ViewStyle>`
`headerContainerStyle`	`StyleProp<AnimateStyle<ViewStyle>>`
`headerHeight`	`number \| undefined`		Is optional, but will optimize the first render.
`initialTabName`	`string \| undefined`
`lazy`	`boolean \| undefined`		If lazy, will mount the screens only when the tab is visited. There is a default fade in transition.
`minHeaderHeight`	`number \| undefined`		Header minimum height when collapsed
`onIndexChange`	`((index: number) => void) \| undefined`		Callback fired when the index changes. It receives the current index.
`onTabChange`	`(data: { prevIndex: number index: number prevTabName: T tabName: T }) => void`		Callback fired when the tab changes. It receives the previous and current index and tabnames.
`pagerProps`	`Omit<FlatListProps<number>, 'data' \| 'keyExtractor' \| 'renderItem' \| 'horizontal' \| 'pagingEnabled' \| 'onScroll' \| 'showsHorizontalScrollIndicator' \| 'getItemLayout'>`		Props passed to the pager. If you want for example to disable swiping, you can pass `{ scrollEnabled: false }`
`renderHeader`	`(props: TabBarProps<TabName>) => React.ReactElement \| null`
`renderTabBar`	`(props: TabBarProps<TabName>) => React.ReactElement \| null`	`(props: TabBarProps<TabName>) => MaterialTabBar`
`revealHeaderOnScroll`	`boolean \| undefined`		Reveal header when scrolling down. Implements diffClamp.
`snapThreshold`	`number \| null \| undefined`	`null`	Percentage of header height to define as the snap point. A number between 0 and 1, or `null` to disable snapping.
`tabBarHeight`	`number \| undefined`		Is optional, but will optimize the first render.
`width`	`number \| undefined`		Custom width of the container. Defaults to the window width.

Tabs.Tab

Wrap your screens with Tabs.Tab. Basic usage looks like this:

1<Tabs.Container ...>
2  <Tabs.Tab name="A" label="First Tab">
3   <ScreenA />
4  </Tabs.Tab>
5  <Tabs.Tab name="B">
6   <ScreenA />
7  </Tabs.Tab>
8</Tabs.Container>

Props

name	type
`label`	`string \| ((props: TabItemProps<T>) => ReactNode) \| undefined`
`name`	`T`

Tabs.Lazy

Typically used internally, but if you want to mix lazy and regular screens you can wrap the lazy ones with this component.

Props

name	type
`cancelLazyFadeIn`	`boolean \| undefined`
`startMounted`	`boolean \| undefined`

Tabs.FlatList

Use like a regular FlatList.

Tabs.FlashList

Use like a regular FlashList.

Tabs.MasonryFlashList

Use like a regular MasonryFlashList.

Tabs.ScrollView

Use like a regular ScrollView.

Tabs.SectionList

Use like a regular SectionList.

Ref

You can pass a ref to Tabs.Container.

1const ref = React.useRef()
2<Tabs.Container ref={ref}>

method	type
jumpToTab	`(name: T) => boolean`
setIndex	`(index: number) => boolean`
getFocusedTab	`() => T`
getCurrentIndex	`() => number`

Hooks

`useCollapsibleStyle`

This hook provides access to key styles for the collapsible tab view. It can be used to obtain the progressViewOffset and pass it to the RefreshControl of the scroll view.

1const {
2  contentContainerStyle,
3  progressViewOffset,
4  style,
5} = useCollapsibleStyle()

Values

name	type
contentContainerStyle	`{ minHeight: number; paddingTop: number; }`
progressViewOffset	`number`
style	`{ width: number; }`

`useAnimatedTabIndex`

This hook returns an animated value representing the current tab index. As the tab view can be in between panes while swiping, this value is a floating-point number.

1const tabIndex = useAnimatedTabIndex()

`useFocusedTab`

This hook returns the name of the currently focused tab.

1const focusedTab = useFocusedTab()

`useHeaderMeasurements`

This hook returns the top distance and the header height. For an example of how to use this, check out the animated header example in the example folder.

1const { top, height } = useHeaderMeasurements()

useCurrentTabScrollY

This hook returns the vertical scroll position of the current tab as an Animated SharedValue.

Since this library requires handling the onScroll event for its functionality, this is the only way to react to changes in the scroll position of the underlying scrollable component.

1const scrollY = useCurrentTabScrollY()

Default Tab Bar

MaterialTabItem

Any additional props are passed to the pressable component.

Props

name	type	description
`activeColor`	`string \| undefined`	Color applied to the label when active
`inactiveColor`	`string \| undefined`	Color applied to the label when inactive
`inactiveOpacity`	`number \| undefined`
`index`	`number`
`indexDecimal`	`SharedValue<number>`
`label`	`string \| ((props: TabItemProps<T>) => ReactNode)`
`labelStyle`	`StyleProp<AnimateStyle<TextStyle>>`	Style to apply to the tab item label
`name`	`T`
`onLayout`	`(((event: LayoutChangeEvent) => void) & ((event: LayoutChangeEvent) => void)) \| undefined`	Invoked on mount and layout changes with {nativeEvent: { layout: {x, y, width, height}}}.
`onPress`	`(name: T) => void`
`pressColor`	`string \| undefined`
`pressOpacity`	`number \| undefined`
`scrollEnabled`	`boolean \| undefined`
`style`	`StyleProp<ViewStyle>`	Either view styles or a function that receives a boolean reflecting whether the component is currently pressed and returns view styles.

Known Issues

Android FlatList Pull to Refresh

Refer to this open issue. We utilize scrollTo to synchronize the unfocused tabs. While it is intended for use with ScrollView, it works well with FlatList, until the RefreshControl is added. Note that this issue occurs only on Android.

Workaround: Check out the Android Shared Pull To Refresh example in the expo app. You can implement a single pull-to-refresh for the Tabs.Container.

iOS FlatList StickyHeaderIndices and iOS SectionList StickySectionHeadersEnabled

When using the stickyHeaderIndices prop on a FlatList or stickySectionHeadersEnabled on a SectionList, the sticky elements do not scroll up as the header collapses. This issue is specific to iOS.

See #136.

`ref.setIndex`

This is not an issue per se, but it's essential to be aware of it. When using containerRef.current.setIndex(i), if you set it to the current index, the screen will scroll to the top. You can prevent this behavior as follows:

1const index = pageRef.current?.getCurrentIndex()
2if (index !== nextIndex) {
3  pageRef.current?.setIndex(nextIndex)
4}

Alternative Libraries

If you do not require a full-featured tab view, consider another option: a simple segmented control / material tab bar without swiping or snapping, using only the React Native Animated API.

react-native-collapsible-segmented-view

Contributing and running the Example

While developing, you can run the example app to test your changes.

First run yarn in root:

1yarn

Then prepare the example:

1cd example
2yarn

Then run the example:

yarn ios

Please follow the angular commit message format.

Make sure your code passes TypeScript and ESLint. Run the following to verify:

1yarn typescript
2yarn lint

To fix formatting errors, run the following:

1yarn lint -- --fix

Documentation changes

Edit the README_TEMPLATE, or update the docstrings inside the src folder, and run:

1yarn docs

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.

2

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

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

Pinned-Dependencies

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

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.6

/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

react-native-collapsible-tab-view-navigation

Installations

Developer Guide

Yes

CommonJS

14.7.0

6.14.7

Pull Requests

15

128

30

83

Issues

176

349

173

Releases

Unable to fetch releases

Languages

Developer

PedroBern

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

React Native Collapsible Tab View

🚀 Version 6 released with Reanimated v3 support

Demo

Features

Installation

Quick Start

Guides

Scrolling on the Header

API Reference

Core

Tabs.Container

Props

Tabs.Tab

Props

Tabs.Lazy

Props

Tabs.FlatList

Tabs.FlashList

Tabs.MasonryFlashList

Tabs.ScrollView

Tabs.SectionList

Ref

Hooks

useCollapsibleStyle

Values

useAnimatedTabIndex

useFocusedTab

useHeaderMeasurements

useCurrentTabScrollY

Default Tab Bar

MaterialTabItem

Props

Known Issues

Android FlatList Pull to Refresh

iOS FlatList StickyHeaderIndices and iOS SectionList StickySectionHeadersEnabled

ref.setIndex

Alternative Libraries

Contributing and running the Example

Documentation changes

10

10

9

2

0

0

0

0

`useCollapsibleStyle`

`useAnimatedTabIndex`

`useFocusedTab`

`useHeaderMeasurements`

`ref.setIndex`