├── 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 ScrollableTabView from 'react-native-scrollable-tab-view'
3 | export default createHeaderTabsComponent(ScrollableTabView)


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


--------------------------------------------------------------------------------
/index.d.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { CollapsibleHeaderProps } from 'react-native-head-tab-view'
3 | import { ScrollableTabViewProperties } from 'react-native-scrollable-tab-view'
4 | 
5 | export type ZTabViewProps = Omit<ScrollableTabViewProperties, 'ref'> & CollapsibleHeaderProps
6 | 
7 | export class CollapsibleHeaderTabView extends React.Component<ZTabViewProps>{ }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-native-scrollable-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-scrollable-tab-view-collapsible-header.git"
12 |   },
13 |   "homepage": "https://github.com/zyslife/react-native-scrollable-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-scrollable-tab-view to have shared collapsible headers"
32 | }
33 | 


--------------------------------------------------------------------------------
/createHeaderTabsComponent.tsx:
--------------------------------------------------------------------------------
 1 | 
 2 | import React, { useRef } from 'react';
 3 | import {
 4 |     StyleSheet,
 5 | } from 'react-native';
 6 | import { GestureContainer, CollapsibleHeaderProps, GestureContainerRef } from 'react-native-head-tab-view'
 7 | import ScrollableTabView, { DefaultTabBar, ScrollableTabViewProperties } from 'react-native-scrollable-tab-view'
 8 | 
 9 | type ZTabViewProps = Omit<ScrollableTabViewProperties, 'ref'> & CollapsibleHeaderProps
10 | type ForwardTabViewProps = ZTabViewProps & { forwardedRef: React.Ref<ScrollableTabView>, Component: typeof ScrollableTabView }
11 | 
12 | export default function createHeaderTabsComponent(Component: typeof ScrollableTabView, config?: {}): React.ForwardRefExoticComponent<React.PropsWithoutRef<ZTabViewProps> & React.RefAttributes<ScrollableTabView>> {
13 | 
14 |     return React.forwardRef((props: ZTabViewProps, ref) => {
15 |         return <CollapsibleHeaderTabView {...props} forwardedRef={ref} Component={Component} />
16 |     });
17 | 
18 | }
19 | 
20 | const CollapsibleHeaderTabView: React.FC<ForwardTabViewProps> = (props: ForwardTabViewProps) => {
21 |     const mRef = useRef<GestureContainerRef>()
22 |     const _onChangeTab = (e: any) => {
23 |         props.onChangeTab && props.onChangeTab(e)
24 |         mRef.current && mRef.current.setCurrentIndex(e.i)
25 |     }
26 | 
27 |     const _renderTabBar = (mProps: any) => {
28 |         if (props.renderTabBar) return props.renderTabBar(mProps)
29 |         return <DefaultTabBar {...mProps} style={styles.tabbarStyle} />
30 |     }
31 | 
32 |     const renderTabView = (mProps: {
33 |         renderTabBarContainer: any,
34 |     }) => {
35 |         const { Component } = props
36 |         return <Component
37 |             ref={props.forwardedRef}
38 |             tabBarBackgroundColor={'transparent'}
39 |             {...props}
40 |             renderTabBar={(tabbarProps) => {
41 |                 const newProps = { ...tabbarProps }
42 |                 delete tabbarProps.scrollValue
43 |                 return mProps.renderTabBarContainer(_renderTabBar(newProps))
44 |             }}
45 |             onChangeTab={_onChangeTab}
46 |         />
47 |     }
48 |     return <GestureContainer
49 |         ref={mRef}
50 |         initialPage={props.initialPage || 0}
51 |         renderTabView={renderTabView}
52 |         {...props} />
53 | }
54 | 
55 | 
56 | const styles = StyleSheet.create({
57 |     tabbarStyle: {
58 |         backgroundColor: '#fff'
59 |     }
60 | })


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


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