Repository files navigation

• Expo App
• Demo
• Features
• Installation
• Quick Start
• Guides
  • Scroll on Header
• API Reference
  • Core
    • Tabs.Container
    • Tabs.Lazy
    • Tabs.FlatList
    • Tabs.FlashList
    • Tabs.MasonryFlashList
    • Tabs.SectionList
    • Tabs.ScrollView
    • Ref
  • Hooks
    • useCollapsibleStyle
    • useAnimatedTabIndex
    • useFocusedTab
    • useHeaderMeasurements
  • Default Tab Bar
    • MaterialTabBar
    • MaterialTabItem
• Known Issues
  • Android FlatList Pull to Refresh
  • iOS FlatList StickyHeaderIndices
  • ref.setIndex
• Alternative Libraries
• Contributing
  • Documentation Changes

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

• Explore theexamples for the source code of the Expo app.

Credits

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

Default	Snap	revealHeaderOnScroll	revealHeaderOnScroll + Snap

• UI thread animations and interactions
• High customizability
• FullTypeScript 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 thereact-native-tab-view tab bar

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

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

Then, addReanimated,follow the official installation guide.

importReactfrom'react'import{View,StyleSheet,ListRenderItem}from'react-native'import{Tabs}from'react-native-collapsible-tab-view'constHEADER_HEIGHT=250constDATA=[0,1,2,3,4]constidentity=(v:unknown):string=>v+''constHeader=()=>{return<Viewstyle={styles.header}/>}constExample:React.FC=()=>{constrenderItem:ListRenderItem<number>=React.useCallback(({ index})=>{return(<Viewstyle={[styles.box,index%2===0 ?styles.boxB :styles.boxA]}/>)},[])return(<Tabs.ContainerrenderHeader={Header}headerHeight={HEADER_HEIGHT}// optional><Tabs.Tabname="A"><Tabs.FlatListdata={DATA}renderItem={renderItem}keyExtractor={identity}/></Tabs.Tab><Tabs.Tabname="B"><Tabs.ScrollView><Viewstyle={[styles.box,styles.boxA]}/><Viewstyle={[styles.box,styles.boxB]}/></Tabs.ScrollView></Tabs.Tab></Tabs.Container>)}conststyles=StyleSheet.create({box:{height:250,width:'100%',},boxA:{backgroundColor:'white',},boxB:{backgroundColor:'#D8D8D8',},header:{height:HEADER_HEIGHT,width:'100%',backgroundColor:'#2196f3',},})exportdefaultExample

To enable scrolling from the header, follow these steps:

• If theHeaderComponentdoes not contain touchable components, set thepointerEvents prop to'none'.
• If theHeaderComponentdoes contain touchable components, set thepointerEvents prop to'box-none' to ensure they function properly.

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

Basic usage looks like this:

import{Tabs}from'react-native-collapsible-tab-view'constExample=()=>{return(<Tabs.ContainerrenderHeader={MyHeader}><Tabs.Tabname="A"><ScreenA/></Tabs.Tab><Tabs.Tabname="B"><ScreenB/></Tabs.Tab></Tabs.Container>)}

Wrap your screens withTabs.Tab. Basic usage looks like this:

<Tabs.Container...><Tabs.Tabname="A"label="First Tab"><ScreenA/></Tabs.Tab><Tabs.Tabname="B"><ScreenA/></Tabs.Tab></Tabs.Container>

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

Use like a regular FlatList.

Use like a regular FlashList.

Use like a regular MasonryFlashList.

Use like a regular ScrollView.

Use like a regular SectionList.

You can pass a ref toTabs.Container.

constref=React.useRef()<Tabs.Containerref={ref}>

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

const{  contentContainerStyle,  progressViewOffset,  style,}=useCollapsibleStyle()

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.

consttabIndex=useAnimatedTabIndex()

This hook returns the name of the currently focused tab.

constfocusedTab=useFocusedTab()

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.

const{ top, height}=useHeaderMeasurements()

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

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

constscrollY=useCurrentTabScrollY()

Any additional props are passed to the pressable component.

Refer tothis open issue. We utilizescrollTo to synchronize the unfocused tabs. While it is intended for use withScrollView, it works well withFlatList, until theRefreshControl is added. Note that this issue occurs only on Android.

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

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

See#136.

This is not an issue per se, but it's essential to be aware of it. When usingcontainerRef.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:

constindex=pageRef.current?.getCurrentIndex()if(index!==nextIndex){pageRef.current?.setIndex(nextIndex)}

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

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

First runyarn in root:

yarn

Then prepare the example:

cd exampleyarn

Then run the example:

yarn ios

Please follow theangular commit message format.

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

yarn typescriptyarn lint

To fix formatting errors, run the following:

yarn lint -- --fix

Edit theREADME_TEMPLATE, or update the docstrings inside thesrc folder, and run:

yarn docs