React Native Head Tab View

A package forked from zyslife/react-native-head-tab-view, which supports Shopify's FlashLish and a few little things that I think will help you 😗

import {
  HScrollView,
  HFlatList,
  HSectionList,
  HFlashList,
} from 'react-native-head-tab-view-flashlist-support';

The following components are currently supported:
react-native-scrollable-tab-view

react-native-head-tab-view

react-native-tab-view

Demo

Example

If your tabs component is react-native-scrollable-tab-view

import * as React from 'react';
import {View} from 'react-native';
import {HScrollView} from 'react-native-head-tab-view-flashlist-support';
import {CollapsibleHeaderTabView} from 'react-native-head-tab-view-flashlist-support/rn-tab-view-collapsible-header';
export default class ExampleBasic extends React.PureComponent<any> {
  render() {
    return (
      <CollapsibleHeaderTabView
        renderScrollHeader={() => (
          <View style={{height: 200, backgroundColor: 'red'}} />
        )}>
        <HScrollView index={0}>
          <View style={{height: 1000, backgroundColor: '#ff4081'}} />
        </HScrollView>
        <HScrollView index={1}>
          <View style={{height: 1000, backgroundColor: '#673ab7'}} />
        </HScrollView>
      </CollapsibleHeaderTabView>
    );
  }
}

If your tabs component is react-native-tab-view

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-flashlist-support';
import {CollapsibleHeaderTabView} from 'react-native-head-tab-view-flashlist-support/rn-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

Run the example

cd Example
yarn or npm install

//run Android
react-native run-android

//run iOS
cd ios
pod install
cd ../
react-native run-ios

Installation

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

yarn add react-native-head-tab-view react-native-gesture-handler react-native-reanimated
or
npm install react-native-head-tab-view-flashlist-support react-native-gesture-handler react-native-reanimated --save

Linking

1. react-native-gesture-handler Refer to the official documentation
2. react-native-reanimated Refer to the official documentation

Documentation

CollapsibleHeaderProps

renderScrollHeader (React.ComponentType | React.ReactElement | null) (require)

render the collapsible header

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) => void

Gets the animation value of the shared collapsible header.

<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

scrollEnabled (boolean)

Whether to allow the scene to slide vertically

refreshHeight (number)

If this height is reached, a refresh event will be triggered （onStartRefresh）
it defaults to 80

overflowPull (number)

It's the distance beyond the refreshHeight, the distance to continue the displacement, when the pull is long enough,
it defaults to 50.

pullExtendedCoefficient (number)

When the maximum drop-down distance is reached(refreshHeight+overflowPull), the refreshControl moves the distance for each pixel the finger moves The recommended number is between 0 and 1.

FloatingButtonComponent (React.Element)

Floating button will show when scroll down

componentId (String)

TabView's id, required if you want to use scrollToTop() function

tabContentBackgroundColor (String)

Background color of tabView's content

index (number) (require)

The number of the screen.
If you use react-native-scrollable-tab-view, it should correspond to the number of the children element in the TabView.

If you use react-native-tab-view, it should correspond to the index of the navigationState of the TabView
Please check the Example .

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 scene is refreshing

renderRefreshControl (() => React.ComponentType | React.ReactElement | null)

A custom RefreshControl for scene

renderLoadingView ((headerHeight: number) => React.ReactElement)

You can provide a LoadingView when the scene is transparent until the height of the onContentSizeRange callback is less than minHeight.

enableSnap (boolean)

When it stops sliding, it automatically switches to the folded and expanded states.

StickyHeaderComponent (React.Element)

Sticky component located below the tabBar

LoadingComponent (React.Element)

Loading view, along with loadingVisible props (required)

loadingVisible (boolean)

Tips.

1. With HFlashlist, some props like( maintainVisibleContentPosition, paddings props of contentContainerStyle, ...) is not working
2. When changing tabView's routes right in a screen or component, you should adding animationEnabled={false} to tabView props, otherwise there will be some bugs about ui, gestures,...( react-native-tab-view issue)

Refer to the official documentation. I'm sure it won't be difficult for you

Thank you for your effort.