Gitingest

Include files under: 50kb

Summary

Repository: zyslife/react-native-scrollable-tab-view-collapsible-header
Files analyzed: 7

Estimated tokens: 2.2k

Download

Directory Structure

Directory structure:

└── zyslife-react-native-scrollable-tab-view-collapsible-header/

    ├── README.md

    ├── CollapsibleHeaderTabView.tsx

    ├── createHeaderTabsComponent.tsx

    ├── index.d.ts

    ├── index.js

    ├── package.json

    └── SlideTabView.tsx

Files Content

================================================
FILE: README.md
================================================
# react-native-scrollable-tab-view-collapsible-header

Extend [react-native-scrollable-tab-view](https://github.com/ptomasroos/react-native-scrollable-tab-view) to have shared collapsible headers

Please check the [base library](https://github.com/zyslife/react-native-head-tab-view) before using this library.


## Demo


![demo_ios.gif](https://github.com/zyslife/react-native-head-tab-view/blob/master/demoGIF/demo_ios.gif) 

## Example   

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

const FirstRoute = () => (
    <HScrollView index={0}>
        <View style={[styles.scene, { backgroundColor: '#ff4081' }]} />
    </HScrollView>
);

const SecondRoute = () => (
    <HScrollView index={1}>
        <View style={[styles.scene, { backgroundColor: '#673ab7' }]} />
    </HScrollView>
);

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 (
        <CollapsibleHeaderTabView
            renderScrollHeader={() => <View style={{ height: 200, backgroundColor: 'red' }} />}
            navigationState={{ index, routes }}
            renderScene={renderScene}
            onIndexChange={setIndex}
            initialLayout={initialLayout}
        />
    );
}

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

More examples：[Example](https://github.com/zyslife/react-native-head-tab-view/blob/master/Example/src)  


## 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-scrollable-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

<details>
<summary>CollapsibleHeaderTabView</summary>  
  
    
- If your tabs component is react-native-scrollable-tab-view  
```js  
import { CollapsibleHeaderTabView } from 'react-native-scrollable-tab-view-collapsible-header' 
```

- If your tabs component is react-native-tab-view   
```js
import { CollapsibleHeaderTabView } from 'react-native-tab-view-collapsible-header' 
```  

`CollapsibleHeaderTabView` extends the props for the tabs component by adding the **CollapsibleHeaderProps**

#### CollapsibleHeaderProps  

##### `renderScrollHeader` _(React.ComponentType<any> | React.ReactElement | null)_  (require)

*render the collapsible header*

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


##### `headerHeight`  (optional)

The height of collapsible header.  


##### `tabbarHeight`  (optional)

The height of collapsible tabbar  

##### `frozeTop`  

The height at which the top area of the Tabview is frozen    


##### `overflowHeight`  

Sets the upward offset distance of the TabView and TabBar  

##### `makeScrollTrans`  _(scrollValue: Animated.ShareValue<boolean>) => void_   
Gets the animation value of the shared collapsible header.   
```js 
<CollapsibleHeaderTabView
    makeScrollTrans={(scrollValue) => {
        this.setState({ scrollValue })
    }}
/>
```

##### `onStartRefresh`  _(() => void)_   
If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality.  
Make sure to also set the isRefreshing prop correctly.

##### `isRefreshing`  _(boolean)_   
Whether the TabView is refreshing  

##### `renderRefreshControl`  _(() => React.ReactElement)_   
A custom RefreshControl

##### `refreshHeight`  _(number)_   
If this height is reached, a refresh event will be triggered （onStartRefresh）  
 it defaults to 80
 
##### `scrollEnabled` _(boolean)_
Whether to allow the scene to slide vertically

---  


</details>




================================================
FILE: CollapsibleHeaderTabView.tsx
================================================
import createHeaderTabsComponent from './createHeaderTabsComponent'
import ScrollableTabView from 'react-native-scrollable-tab-view'
export default createHeaderTabsComponent(ScrollableTabView)


================================================
FILE: createHeaderTabsComponent.tsx
================================================

import React, { useRef } from 'react';
import {
    StyleSheet,
} from 'react-native';
import { GestureContainer, CollapsibleHeaderProps, GestureContainerRef } from 'react-native-head-tab-view'
import ScrollableTabView, { DefaultTabBar, ScrollableTabViewProperties } from 'react-native-scrollable-tab-view'

type ZTabViewProps = Omit<ScrollableTabViewProperties, 'ref'> & CollapsibleHeaderProps
type ForwardTabViewProps = ZTabViewProps & { forwardedRef: React.Ref<ScrollableTabView>, Component: typeof ScrollableTabView }

export default function createHeaderTabsComponent(Component: typeof ScrollableTabView, config?: {}): React.ForwardRefExoticComponent<React.PropsWithoutRef<ZTabViewProps> & React.RefAttributes<ScrollableTabView>> {

    return React.forwardRef((props: ZTabViewProps, ref) => {
        return <CollapsibleHeaderTabView {...props} forwardedRef={ref} Component={Component} />
    });

}

const CollapsibleHeaderTabView: React.FC<ForwardTabViewProps> = (props: ForwardTabViewProps) => {
    const mRef = useRef<GestureContainerRef>()
    const _onChangeTab = (e: any) => {
        props.onChangeTab && props.onChangeTab(e)
        mRef.current && mRef.current.setCurrentIndex(e.i)
    }

    const _renderTabBar = (mProps: any) => {
        if (props.renderTabBar) return props.renderTabBar(mProps)
        return <DefaultTabBar {...mProps} style={styles.tabbarStyle} />
    }

    const renderTabView = (mProps: {
        renderTabBarContainer: any,
    }) => {
        const { Component } = props
        return <Component
            ref={props.forwardedRef}
            tabBarBackgroundColor={'transparent'}
            {...props}
            renderTabBar={(tabbarProps) => {
                const newProps = { ...tabbarProps }
                delete tabbarProps.scrollValue
                return mProps.renderTabBarContainer(_renderTabBar(newProps))
            }}
            onChangeTab={_onChangeTab}
        />
    }
    return <GestureContainer
        ref={mRef}
        initialPage={props.initialPage || 0}
        renderTabView={renderTabView}
        {...props} />
}


const styles = StyleSheet.create({
    tabbarStyle: {
        backgroundColor: '#fff'
    }
})


================================================
FILE: index.d.ts
================================================
import React from 'react';
import { CollapsibleHeaderProps } from 'react-native-head-tab-view'
import { ScrollableTabViewProperties } from 'react-native-scrollable-tab-view'

export type ZTabViewProps = Omit<ScrollableTabViewProperties, 'ref'> & CollapsibleHeaderProps

export class CollapsibleHeaderTabView extends React.Component<ZTabViewProps>{ }


================================================
FILE: index.js
================================================
export { default as createHeaderTabsComponent } from './createHeaderTabsComponent'
export { default as CollapsibleHeaderTabView } from './CollapsibleHeaderTabView'


================================================
FILE: package.json
================================================
{
  "name": "react-native-scrollable-tab-view-collapsible-header",
  "version": "2.0.1",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "yu zou <zouyu123007@163.com>",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/zyslife/react-native-scrollable-tab-view-collapsible-header.git"
  },
  "homepage": "https://github.com/zyslife/react-native-scrollable-tab-view-collapsible-header#readme",
  "license": "ISC",
  "keywords": [
    "react-native-component",
    "react-component",
    "react-native",
    "ios",
    "android",
    "tab",
    "swipe",
    "scrollable",
    "tabview",
    "head",
    "collapsible-header"
  ],
  "peerDependencies": {
    "react-native-head-tab-view": "^4.0.0"
  },
  "description": "Extend react-native-scrollable-tab-view to have shared collapsible headers"
}



================================================
FILE: SlideTabView.tsx
================================================
import createHeaderTabsComponent  from './createHeaderTabsComponent'
import ScrollableTabView from 'react-native-scrollable-tab-view'
export default createHeaderTabsComponent(ScrollableTabView, { slideAnimated: true })