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

!demo_ios.gif

Example

``js
import * as React from 'react';
import { View, StyleSheet, Dimensions, ScrollView } from 'react-native';
import { SceneMap } from 'react-native-tab-view';
import { HPageViewHoc } from 'react-native-head-tab-view'
import { CollapsibleHeaderTabView } from 'react-native-tab-view-collapsible-header'
const HScrollView = HPageViewHoc(ScrollView)

const FirstRoute = () => (



);

const SecondRoute = () => (



);

const initialLayout = { width: Dimensions.get('window').width };

export default function TabViewExample() {
const [index, setIndex] = React.useState(0);
const [routes] = React.useState([
{ key: 'first', title: 'First' },
{ key: 'second', title: 'Second' },
]);

const renderScene = SceneMap({
first: FirstRoute,
second: SecondRoute,
});

return (
makeHeaderHeight={() => 200}
renderScrollHeader={() => }
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={initialLayout}
/>
);
}

const styles = StyleSheet.create({
scene: {
flex: 1,
},
});
`

More examples：Example

Installation

- The first step is to add the base library and its dependencies
`sh

yarn add react-native-head-tab-view react-native-gesture-handler
`
- Then add this library
`sh
yarn add react-native-tab-view-collapsible-header
`

Version

| react-native-head-tab-view | react-native-scrollable-tab-view | react-native-tab-view-collapsible-header |
| :--------------: | :--------------------: | :--------------------: |
| v1 ~ v2 | - | - |
| v3 | v0 | v0 |
| v4-rc.1 | v1 | v1 |
| v4-rc.2 | v2 | v2 |


---


Documentation