npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

rn-collapsible-tab-view

v1.0.3

Published

Collapsible tab view component for React Native

Downloads

76

Readme

react-native-collapsible-tab-view

Cloned from https://github.com/PedroBern/react-native-collapsible-tab-view and adapted to allow horizontal scroll and touchables at the top container element. To reduce the complexity and time to implement it the snap and header overscroll feature were removed.

Credits

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

Demo

| Default | | | :-----: | |

|

Features

  • Animations and interactions on the UI thread
  • Highly customizable
  • Fully typed with TypeScript
  • Lazy support with fade-in animation
  • Interpolated header
  • Scrollable tabs, inspired by the react-native-tab-view tab bar
  • Support horizontal and vertical window

Installation

Open a Terminal in the project root and run:

yarn add react-native-collapsible-tab-view@next

Then, add Reanimated v2, follow the official installation guide.

Quick Start

import React from 'react'
import { View, StyleSheet, ListRenderItem } from 'react-native'
import { Tabs } from 'react-native-collapsible-tab-view'

const HEADER_HEIGHT = 250

const DATA = [0, 1, 2, 3, 4]
const identity = (v: unknown): string => v + ''

const Header = () => {
  return <View style={styles.header} />
}

const Example: React.FC = () => {
  const renderItem: ListRenderItem<number> = React.useCallback(({ index }) => {
    return (
      <View style={[styles.box, index % 2 === 0 ? styles.boxB : styles.boxA]} />
    )
  }, [])

  return (
    <Tabs.Container
      renderHeader={Header}
      headerHeight={HEADER_HEIGHT} // optional
    >
      <Tabs.Tab name="A">
        <Tabs.FlatList
          data={DATA}
          renderItem={renderItem}
          keyExtractor={identity}
        />
      </Tabs.Tab>
      <Tabs.Tab name="B">
        <Tabs.ScrollView>
          <View style={[styles.box, styles.boxA]} />
          <View style={[styles.box, styles.boxB]} />
        </Tabs.ScrollView>
      </Tabs.Tab>
    </Tabs.Container>
  )
}

const styles = StyleSheet.create({
  box: {
    height: 250,
    width: '100%',
  },
  boxA: {
    backgroundColor: 'white',
  },
  boxB: {
    backgroundColor: '#D8D8D8',
  },
  header: {
    height: HEADER_HEIGHT,
    width: '100%',
    backgroundColor: '#2196f3',
  },
})

export default Example

API reference

Core

Tabs.Container

Basic usage looks like this:

import { Tabs } from 'react-native-collapsible-tab-view'

const Example = () => {
  return (
    <Tabs.Container renderHeader={MyHeader}>
      <Tabs.Tab name="A">
        <ScreenA />
      </Tabs.Tab>
      <Tabs.Tab name="B">
        <ScreenB />
      </Tabs.Tab>
    </Tabs.Container>
  )
}

Props

| name | type | default | description | | :------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------: | | 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 \| number \| 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 horiztontal flatlist. 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 | | | 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:

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

Props

| name | type | | :---: | :-------------------: | | label | string \| 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.ScrollView

Use like a regular ScrollView.

Tabs.SectionList

Use like a regular SectionList.

Ref

You can pass a ref to Tabs.Container.

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

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

Hooks

useCollapsibleStyle

Hook to access some key styles that make the whole think work. You can use this to get the progessViewOffset and pass to the refresh control of scroll view.

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

Values

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

useAnimatedTabIndex

Returns an animated value representing the current tab index, as a floating point number.

const tabIndex = useAnimatedTabIndex()

useFocusedTab

Returns the currently focused tab name.

const focusedTab = useFocusedTab()

useHeaderMeasurements

Returns the top distance and the header height. See the animated header example in the example folder.

const { top, height } = useHeaderMeasurements()

Default Tab Bar

MaterialTabItem

Any additional props are passed to the pressable component.

Props

| name | type | default | description | | :-------------: | :------------------------------------------------------------------------------------------: | :-------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------: | | activeColor | string \| undefined | null | Color applied to the label when active | | inactiveColor | string \| undefined | null | Color applied to the label when inactive | | inactiveOpacity | number \| undefined | 0.7 | | | index | number | | | | indexDecimal | SharedValue<number> | | | | label | string | | | | 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 | #DDDDDD | | | pressOpacity | number \| undefined | Platform.OS === 'ios' ? 0.2 : 1 | | | 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

See this open issue. We use scrollTo to synchronize the unfocused tabs, it's supposed to work only with ScrollView, but works great with FlatList, until the RefreshControl is added. Note that this happens only to android.

Workaround: see the Android Shared Pull To Refresh example in the expo app. You can have a single pull to refresh for the Tabs.Container.

iOS FlatList stickyHeaderIndices and iOS SectionList stickySectionHeadersEnabled

When you use the stickyHeaderIndices prop on a FlatList or stickySectionHeadersEnabled on a SectionList, the sticky elements don't scroll up when the header collapses. This happens only on iOS.

See #136

ref.setIndex

This isn't an issue, but you need to know. When using containerRef.current.setIndex(i), if setting to the current index, the screen will scroll to the top. You can prevent this behavior like this:

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