react-native-tab-view-collapsible-header

Extend react-native-tab-view to have shared collapsible headers

Please check the base library before using this library.

Demo

Example

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

More examples：Example

Installation

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

1
2yarn add react-native-head-tab-view react-native-gesture-handler  

• Then add this library

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

Version

Documentation

1import { CollapsibleHeaderTabView } from 'react-native-scrollable-tab-view-collapsible-header' 

1import { 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/>