React Native Head Tab View

:tada::tada::tada: v4.0.0-rc.12 has been released, I hope you can help me test and collect questions. In this version, there is a big change. All animations will run on the UI thread, which will make the components much smoother. Unfortunately, the version requiring React Native is greater than 0.62.0. Because we rely on react-native-reanimated2.0, that's what it requires.

Here are some changes and optimizations. Disruptive Changes:

• Remove makeHeaderHeight and change it to headerHeight

It's not mandatory, but it would be nice if you did

• Removed SlideAnimated mode

this mode was used for ScrollView/FlatList scrolling stalling when dragging headers, no longer needed.

• Remove the scene's refreshHeight property
  Both the TabView and Scene used to have the refreshHeight property. Now I think they are duplicate, just set refreshHeight on the TabView, its default value is 80

• The usage of HPageViewHoc has changed

1# Past usage:
2import { HPageViewHoc } from 'react-native-head-tab-view'
3const HScrollView = HPageViewHoc(ScrollView)
4const HFlatList = HPageViewHoc(FlatList)
5const HSectionList = HPageViewHoc(SectionList)
6# Current usage
7import { HScrollView,HFlatList,HSectionList } from 'react-native-head-tab-view'

The following components are currently supported:
react-native-scrollable-tab-view
react-native-tab-view

For detailed usage, please refer to Example and Installation.

Features

v4.0.0-rc

• Fix for TAB slider stuttering when dragging headers
• Optimized pull-down refresh for easier expansion and better performance
• When switching tabbars, the scene is no longer re-rendered
• renderScrollHeader can accept ReactElement.
• Add enableSnap to props. (If it is true,it automatically switches to the folded and expanded states.)

dependencies:

1.react-native-gesture-handler
2.react-native-reanimated

v3.0

• Support for extension of other Tabs components, support for shared collapsible headers
• The built-in tabs component is discarded

dependencies:

1.react-native-gesture-handler

v2.0

• Add a pull-down refresh for the Tab page（v2.0~）
• Add a pull-down refresh for the Tabview（v2.0.6~）
• Add the new slide mode to Collapsible Headers and Tabview（v2.1.0~）

v1.0

• Built-in Scrollable tabs
• All Tab pages share collapsible headers
• Collapsible Headers controls the slide of the Tabview in the vertical direction
• Collapsible Headers can respond to an event

dependencies:

1.react-native-gesture-handler
2.@react-native-community/viewpager

Demo

Example

If your tabs component is react-native-scrollable-tab-view

1import * as React from 'react';
2import { View } from 'react-native';
3import { HScrollView } from 'react-native-head-tab-view'
4import { CollapsibleHeaderTabView } from 'react-native-scrollable-tab-view-collapsible-header'
5export default class ExampleBasic extends React.PureComponent<any> {
6    render() {
7        return (
8            <CollapsibleHeaderTabView renderScrollHeader={() => <View style={{ height: 200, backgroundColor: 'red' }} />}>
9                <HScrollView index={0}>
10                    <View style={{ height: 1000, backgroundColor: '#ff4081' }} />
11                </HScrollView>
12                <HScrollView index={1}>
13                    <View style={{ height: 1000, backgroundColor: '#673ab7' }} />
14                </HScrollView>
15            </CollapsibleHeaderTabView>
16        )
17    }
18}

If your tabs component is react-native-tab-view

1import * as React from 'react';
2import { View, StyleSheet, Dimensions } from 'react-native';
3import { SceneMap } from 'react-native-tab-view';
4import { HScrollView } from 'react-native-head-tab-view'
5import { CollapsibleHeaderTabView } from 'react-native-tab-view-collapsible-header'
6
7const FirstRoute = () => (
8    <HScrollView index={0}>
9        <View style={[styles.scene, { backgroundColor: '#ff4081' }]} />
10    </HScrollView>
11);
12
13const SecondRoute = () => (
14    <HScrollView index={1}>
15        <View style={[styles.scene, { backgroundColor: '#673ab7' }]} />
16    </HScrollView>
17);
18
19const initialLayout = { width: Dimensions.get('window').width };
20
21export default function TabViewExample() {
22    const [index, setIndex] = React.useState(0);
23    const [routes] = React.useState([
24        { key: 'first', title: 'First' },
25        { key: 'second', title: 'Second' },
26    ]);
27
28    const renderScene = SceneMap({
29        first: FirstRoute,
30        second: SecondRoute,
31    });
32
33    return (
34        <CollapsibleHeaderTabView
35            renderScrollHeader={() => <View style={{ height: 200, backgroundColor: 'red' }} />}
36            navigationState={{ index, routes }}
37            renderScene={renderScene}
38            onIndexChange={setIndex}
39            initialLayout={initialLayout}
40        />
41    );
42}
43
44const styles = StyleSheet.create({
45    scene: {
46        flex: 1,
47    },
48});

More examples：Example

Run the example

1cd Example
2yarn or npm install
3
4//run Android 
5react-native run-android
6
7//run iOS 
8cd ios
9pod install
10cd ../
11react-native run-ios

Installation

• The first step is to add the base library and its dependencies

1yarn add react-native-head-tab-view react-native-gesture-handler react-native-reanimated  
2or  
3npm install react-native-head-tab-view react-native-gesture-handler react-native-reanimated --save

• The second step is to select the extension library based on the tabs component you are using

If your tabs component is react-native-scrollable-tab-view

yarn add react-native-scrollable-tab-view-collapsible-header

If your tabs component is react-native-tab-view

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

Version

Linking

1. react-native-gesture-handler Refer to the official documentation
2. react-native-reanimated Refer to the official documentation

Documentation

- If your tabs component is react-native-tab-view   
>You need to add [this dependency library](https://github.com/zyslife/react-native-tab-view-collapsible-header)

​```js
import { CollapsibleHeaderTabView } from 'react-native-tab-view-collapsible-header' 

1renderScrollHeader={()=><View style={{height:180,backgroundColor:'red'}}/>}

1<CollapsibleHeaderTabView
2    makeScrollTrans={(scrollValue) => {
3        this.setState({ scrollValue })
4    }}
5/>

Tips.

1. If you are not planning to upgrade to RN0.62 in the near future, you can use the v3 version.
2. You may encounter problems with React-Native-Reanimated2.0 when you first start using V4.

Refer to the official documentation. I'm sure it won't be difficult for you

Thank you for your effort.