├── index.js
├── CollapsibleHeaderTabView.tsx
├── SlideTabView.tsx
├── index.d.ts
├── package.json
├── createHeaderTabsComponent.tsx
└── README.md


/index.js:
--------------------------------------------------------------------------------
1 | export { default as createHeaderTabsComponent } from './createHeaderTabsComponent'
2 | export { default as CollapsibleHeaderTabView } from './CollapsibleHeaderTabView'


--------------------------------------------------------------------------------
/CollapsibleHeaderTabView.tsx:
--------------------------------------------------------------------------------
1 | import createHeaderTabsComponent from './createHeaderTabsComponent'
2 | import { TabView } from 'react-native-tab-view'
3 | export default createHeaderTabsComponent(TabView)


--------------------------------------------------------------------------------
/SlideTabView.tsx:
--------------------------------------------------------------------------------
1 | import createHeaderTabsComponent from './createHeaderTabsComponent'
2 | import { TabView } from 'react-native-tab-view'
3 | export default createHeaderTabsComponent(TabView, { slideAnimated: true })


--------------------------------------------------------------------------------
/index.d.ts:
--------------------------------------------------------------------------------
1 | import { TabViewProps, Route } from 'react-native-tab-view';
2 | import React from 'react';
3 | 
4 | import { CollapsibleHeaderProps } from 'react-native-head-tab-view'
5 | 
6 | export type ZTabViewProps<T extends Route> = Partial<TabViewProps<T>> &
7 |     Pick<TabViewProps<T>, 'onIndexChange' | 'navigationState' | 'renderScene'> & CollapsibleHeaderProps
8 | 
9 | export class CollapsibleHeaderTabView<T extends Route> extends React.Component<ZTabViewProps<T>>{ }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-native-tab-view-collapsible-header",
 3 |   "version": "2.0.1",
 4 |   "main": "index.js",
 5 |   "scripts": {
 6 |     "test": "echo \"Error: no test specified\" && exit 1"
 7 |   },
 8 |   "author": "yu zou <zouyu123007@163.com>",
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/zyslife/react-native-tab-view-collapsible-header.git"
12 |   },
13 |   "homepage": "https://github.com/zyslife/react-native-tab-view-collapsible-header#readme",
14 |   "license": "ISC",
15 |   "keywords": [
16 |     "react-native-component",
17 |     "react-component",
18 |     "react-native",
19 |     "ios",
20 |     "android",
21 |     "tab",
22 |     "swipe",
23 |     "scrollable",
24 |     "tabview",
25 |     "head",
26 |     "collapsible-header"
27 |   ],
28 |   "peerDependencies": {
29 |     "react-native-head-tab-view": "^4.0.0"
30 |   },
31 |   "description": "Extend react-native-tab-view to have shared collapsible headers"
32 | }
33 | 


--------------------------------------------------------------------------------
/createHeaderTabsComponent.tsx:
--------------------------------------------------------------------------------
 1 | import { TabView, TabViewProps, Route, TabBar } from 'react-native-tab-view';
 2 | import React, { useEffect, useRef } from 'react';
 3 | import { GestureContainer, CollapsibleHeaderProps, GestureContainerRef } from 'react-native-head-tab-view'
 4 | 
 5 | type ZTabViewProps<T extends Route> = Partial<TabViewProps<T>> &
 6 |     Pick<TabViewProps<T>, 'onIndexChange' | 'navigationState' | 'renderScene'> & CollapsibleHeaderProps
 7 | type ForwardTabViewProps<T extends Route> = ZTabViewProps<T> & { forwardedRef: React.Ref<TabView<T>>, Component: typeof TabView }
 8 | 
 9 | export default function createHeaderTabsComponent<T extends Route>(Component: typeof TabView, config?: {}): React.ForwardRefExoticComponent<React.PropsWithoutRef<ZTabViewProps<T>> & React.RefAttributes<TabView<T>>> {
10 | 
11 |     return React.forwardRef((props: ZTabViewProps<T>, ref) => {
12 |         return <CollapsibleHeaderTabView {...props} forwardedRef={ref} Component={Component} />
13 |     });
14 | }
15 | 
16 | function CollapsibleHeaderTabView<T extends Route>(props: ForwardTabViewProps<T>): any {
17 |     const mRef = useRef<GestureContainerRef>()
18 |     const initialPageRef = useRef(props.navigationState.index)
19 |     
20 |     useEffect(() => {
21 |         mRef.current && mRef.current.setCurrentIndex(props.navigationState.index)
22 |     }, [props.navigationState.index])
23 | 
24 |     const _renderTabBar = (tabbarProps: any) => {
25 |         if (props.renderTabBar) {
26 |             return props.renderTabBar(tabbarProps)
27 |         }
28 |         return <TabBar {...tabbarProps} />
29 |     }
30 | 
31 |     const renderTabView = (e: { renderTabBarContainer: any }) => {
32 |         const { Component } = props
33 |         return <Component
34 |             ref={props.forwardedRef}
35 |             {...props}
36 |             renderTabBar={(tabbarProps) => e.renderTabBarContainer(_renderTabBar(tabbarProps))} />
37 |     }
38 | 
39 |     return <GestureContainer
40 |         ref={mRef}
41 |         initialPage={initialPageRef.current}
42 |         renderTabView={renderTabView}
43 |         {...props} />
44 | }
45 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # react-native-tab-view-collapsible-header
  2 | 
  3 | Extend [react-native-tab-view](https://github.com/satya164/react-native-tab-view) to have shared collapsible headers
  4 | 
  5 | Please check the [base library](https://github.com/zyslife/react-native-head-tab-view) before using this library.
  6 | 
  7 | 
  8 | ## Demo
  9 | 
 10 | 
 11 | ![demo_ios.gif](https://github.com/zyslife/react-native-head-tab-view/blob/master/demoGIF/demo_ios.gif) 
 12 | 
 13 | ## Example   
 14 | 
 15 | ```js
 16 | import * as React from 'react';
 17 | import { View, StyleSheet, Dimensions, ScrollView } from 'react-native';
 18 | import { SceneMap } from 'react-native-tab-view';
 19 | import { HPageViewHoc } from 'react-native-head-tab-view'
 20 | import { CollapsibleHeaderTabView } from 'react-native-tab-view-collapsible-header'
 21 | const HScrollView = HPageViewHoc(ScrollView)
 22 | 
 23 | const FirstRoute = () => (
 24 |     <HScrollView index={0}>
 25 |         <View style={[styles.scene, { backgroundColor: '#ff4081' }]} />
 26 |     </HScrollView>
 27 | );
 28 | 
 29 | const SecondRoute = () => (
 30 |     <HScrollView index={1}>
 31 |         <View style={[styles.scene, { backgroundColor: '#673ab7' }]} />
 32 |     </HScrollView>
 33 | );
 34 | 
 35 | const initialLayout = { width: Dimensions.get('window').width };
 36 | 
 37 | export default function TabViewExample() {
 38 |     const [index, setIndex] = React.useState(0);
 39 |     const [routes] = React.useState([
 40 |         { key: 'first', title: 'First' },
 41 |         { key: 'second', title: 'Second' },
 42 |     ]);
 43 | 
 44 |     const renderScene = SceneMap({
 45 |         first: FirstRoute,
 46 |         second: SecondRoute,
 47 |     });
 48 | 
 49 |     return (
 50 |         <CollapsibleHeaderTabView
 51 |             makeHeaderHeight={() => 200}
 52 |             renderScrollHeader={() => <View style={{ height: 200, backgroundColor: 'red' }} />}
 53 |             navigationState={{ index, routes }}
 54 |             renderScene={renderScene}
 55 |             onIndexChange={setIndex}
 56 |             initialLayout={initialLayout}
 57 |         />
 58 |     );
 59 | }
 60 | 
 61 | const styles = StyleSheet.create({
 62 |     scene: {
 63 |         flex: 1,
 64 |     },
 65 | });
 66 | ```
 67 | 
 68 | More examples：[Example](https://github.com/zyslife/react-native-head-tab-view/blob/master/Example/src)  
 69 | 
 70 | 
 71 | ## Installation
 72 | 
 73 | - The first step is to add the base library and its dependencies
 74 | ```sh
 75 | 
 76 | yarn add react-native-head-tab-view react-native-gesture-handler  
 77 | ```  
 78 | - Then add this library  
 79 | ```sh
 80 | yarn add react-native-tab-view-collapsible-header
 81 | ```
 82 | 
 83 | 
 84 | ## Version
 85 | 
 86 | |       react-native-head-tab-view       |          react-native-scrollable-tab-view          |    react-native-tab-view-collapsible-header   |
 87 | | :--------------: | :--------------------: | :--------------------: |
 88 | | v1 ~ v2 | - | - |
 89 | |   v3   | v0 | v0 |
 90 | |   v4-rc.1   | v1 | v1 |
 91 | |   v4-rc.2   | v2 | v2 |
 92 | 
 93 | 
 94 | ---
 95 | ## Documentation
 96 | 
 97 | <details>
 98 | <summary>CollapsibleHeaderTabView</summary>  
 99 |   
100 |     
101 | - If your tabs component is react-native-scrollable-tab-view  
102 | ```js  
103 | import { CollapsibleHeaderTabView } from 'react-native-scrollable-tab-view-collapsible-header' 
104 | ```
105 | 
106 | - If your tabs component is react-native-tab-view   
107 | ```js
108 | import { CollapsibleHeaderTabView } from 'react-native-tab-view-collapsible-header' 
109 | ```  
110 | 
111 | `CollapsibleHeaderTabView` extends the props for the tabs component by adding the **CollapsibleHeaderProps**
112 | 
113 | #### CollapsibleHeaderProps  
114 | 
115 | ##### `renderScrollHeader` _(React.ComponentType<any> | React.ReactElement | null)_  (require)
116 | 
117 | *render the collapsible header*
118 | 
119 | ```js
120 | renderScrollHeader={()=><View style={{height:180,backgroundColor:'red'}}/>}
121 | ```  
122 | 
123 | 
124 | ##### `headerHeight`  (optional)
125 | 
126 | The height of collapsible header.  
127 | 
128 | 
129 | ##### `tabbarHeight`  (optional)
130 | 
131 | The height of collapsible tabbar  
132 | 
133 | ##### `frozeTop`  
134 | 
135 | The height at which the top area of the Tabview is frozen    
136 | 
137 | 
138 | ##### `overflowHeight`  
139 | 
140 | Sets the upward offset distance of the TabView and TabBar  
141 | 
142 | ##### `makeScrollTrans`  _(scrollValue: Animated.ShareValue<boolean>) => void_   
143 | Gets the animation value of the shared collapsible header.   
144 | ```js 
145 | <CollapsibleHeaderTabView
146 |     makeScrollTrans={(scrollValue) => {
147 |         this.setState({ scrollValue })
148 |     }}
149 | />
150 | ```
151 | 
152 | ##### `onStartRefresh`  _(() => void)_   
153 | If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality.  
154 | Make sure to also set the isRefreshing prop correctly.
155 | 
156 | ##### `isRefreshing`  _(boolean)_   
157 | Whether the TabView is refreshing  
158 | 
159 | ##### `renderRefreshControl`  _(() => React.ReactElement)_   
160 | A custom RefreshControl
161 | 
162 | ##### `refreshHeight`  _(number)_   
163 | If this height is reached, a refresh event will be triggered （onStartRefresh）  
164 |  it defaults to 80
165 |  
166 | ##### `scrollEnabled` _(boolean)_
167 | Whether to allow the scene to slide vertically
168 | 
169 | ---  
170 | 
171 | 
172 | </details>
173 | 
174 | 


--------------------------------------------------------------------------------