react-native-collapsible-tab-view-with-infinite-scroll

• Features

• Installation

• Quick Start

  • Core
    • Tabs.FlatList
    • Tabs.SectionList
    • Tabs.ScrollView
    • Ref
  • Hooks

• Contributing

  • Documentation changes

Courtesy

extended version of the react-native-collapsible-tab-view with a bug fix and new feature.

Features

• support infinite scrolling in tab contents
• support multiple onScroll
• Animations and interactions on the UI thread
• Highly customizable
• Fully typed with TypeScript

Installation

Open a Terminal in the project root and run:

yarn add react-native-collapsible-tab-with-scroll

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 Header = () => {
  return <View style={styles.header} />
}


  return (
    <Tabs.Container
      renderHeader={Header}
      headerHeight={HEADER_HEIGHT} // optional
    >
      <Tabs.Tab name="A">
        <Tabs.ScrollView
        onScroll={({nativeEvent})=>console..log(nativeEvent)}>
          <View style={[styles.box, styles.boxA]} />
          <View style={[styles.box, styles.boxB]} />
        </Tabs.ScrollView>
      <Tabs.Tab name="B">
        <Tabs.ScrollView
        onScroll={({nativeEvent})=>console..log(nativeEvent)}>
          <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

Props

• support all props provided in react-native-collapsible-tab-view

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>

Tabs.FlatList

Use like a regular FlatList.

Tabs.ScrollView

Use like a regular ScrollView.

Props

name	type
onScroll	event | undefined

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

• support all hooks provided by react-native-collapsible-tab-view

Contributing

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

Please follow the angular commit message format.

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

yarn typescript
yarn lint

To fix formatting errors, run the following:

yarn lint -- --fix

Remember to add tests for your change if possible.