mayemonkey/react-native-scrollable-tabview

Based on pure JS scripts, without relying on native, no need for react-native link, Title / Header / Tabs / Sticky / Screen components can be flexibly configured, among which Tabs / Sticky can slide When it reaches the top, it will be topped.

react-native-scrollable-tabview

English | 简体中文

Based on pure JS scripts, without relying on native, no need for react-native link,Title / Header / Tabs / Sticky / Screen components can be flexibly configured, among which Tabs / Sticky can slide When it reaches the top, it will be topped; what we support is to independently manage its own Sticky / Screen / Badge / tabLabel configuration in the form of a stack, and inject the Screen lifecycle onRefresh / onEndReached They will be triggered when the pull-down refresh and the scroll bar hit the bottom, and finally inject more into Screen / Sticky props

Table of Contents

• Example-API
• Example-TikTok
• Features
• Installation
• Usage
• Props
• Method
• Stack Property
• Badge Property
• Injection lifecycle to Screen
• Injection props to Screen
• Injection props to Sticky
• Known Issues
• Snapshot

Features

• Support to individually set pull-down refresh and up-slide load for each screen (Lifecycle injection or props injection)
• Flex Tabs and multiple Tabs horizontal scrolling support configuration method
• Allow to set up each Screen’s own Sticky component
• Custom badges can be configured for each Tab
• Support pull down to refresh and slide up to load more pre-functions onBeforeRefresh / onBeforeEndReached
• Support animation title, can support animation as interpolate.opacity and interpolate.height

Installation

npm i @itenl/react-native-scrollable-tabview

or

yarn add @itenl/react-native-scrollable-tabview

Usage

import React from 'react';
import ScrollableTabView from '@itenl/react-native-scrollable-tabview';

function App() {
  return (
      <ScrollableTabView
        ref={rf => (this.scrollableTabView = rf)}
        mappingProps={{
          fromRootEst: this.state.est,
        }}
        badges={[
          null,
          [
            <View
              style={{
                position: 'absolute',
                zIndex: 100,
                top: 10,
                right: 0,
              }}
            >
              <Text>new</Text>
            </View>,
            <View
              style={{
                position: 'absolute',
                width: 150,
                height: 50,
                zIndex: 100,
                marginTop: 35,
                right: 0,
                opacity: 0.6,
                backgroundColor: 'pink',
                justifyContent: 'center',
                alignItems: 'center',
              }}
            >
              <Text>Three Tips</Text>
            </View>,
          ],
        ]}
        stacks={[
          {
            screen: One,
            sticky: Sticky,
            tabLabel: 'OneTab',
            tabLabelRender: tabLabel => {
              return `--- ${tabLabel} ---`;
            },
            badge: [<Text>one</Text>, <Text>two</Text>],
            toProps: {
              xx: 123,
            },
          }, {
            screen: ({
              layoutHeight,
              refresh,
              scrollTo,
              toTabView,
              initScreen,
              onRefresh,
              onEndReached,
            }) => {
              // The code is required
              initScreen();
              const [datetime, setDatetime] = useState(Date.now());
              useEffect(() => {
                setInterval(() => {
                  setDatetime(Date.now());
                }, 1000);
              }, []);
              onRefresh((toggled) => {
                toggled(true);
                alert("onRefresh start");
                setTimeout(() => {
                  toggled(false);
                  alert("onRefresh stop");
                }, 3000);
              });
              onEndReached(() => {
                alert("onEndReached");
              });
              return (
                <View
                  style={{
                    flex: 1,
                    backgroundColor: "#151723",
                    justifyContent: "center",
                    alignItems: "center",
                  }}
                >
                  <Text style={{ color: "#ffffff" }}>
                    Test function component {datetime}
                  </Text>
                </View>
              );
            },
            tabLabel: "TestFunctionComponent",
          }
        ]}
        tabsStyle={{}}
        tabWrapStyle={{}}
        tabInnerStyle={{}}
        tabActiveOpacity={0.6}
        tabStyle={{}}
        textStyle={{}}
        textActiveStyle={{}}
        tabUnderlineStyle={{}}
        firstIndex={0}
        syncToSticky={true}
        onEndReachedThreshold={0.1}
        onBeforeRefresh={(next, toggled) => {
          toggled();
          next();
        }}
        onBeforeEndReached={next => {
          next();
        }}
        onTabviewChanged={(index, tabLabel, isFirst) => {
          alert(index);
        }}
        header={() => {
          return <View style={{ backgroundColor: 'pink', height: 120 }}></View>;
        }}
        oneTabHidden={true}
        enableCachePage={true}
        carouselProps={{}}
        sectionListProps={{}}
        toHeaderOnTab={true}
        toTabsOnTab={true}
        tabsShown={false}
        fixedTabs={false}
        fixedHeader={false}
        useScroll={false}
        fillScreen={true}
      ></ScrollableTabView>
  );
}

Props

All props are optional

Prop	Type	Default	Description
stacks	Array	[]	Page Stack < Read Stack Property >
mappingProps	Object	{}	Associate mapping data to Stack / Sticky
badges	Array	[]	Badges for each Tab < Read Badge Property >
tabsStyle	Object	{}	The entire Tabs style
tabWrapStyle	Object / Function	{}	Single Tab wrap style (The function parameters provide item, index, and need to return the style object, eg. return index == 1 && {zIndex: 10})
tabInnerStyle	Object	{}	Single Tab inner style
tabActiveOpacity	Number	0.6	Transparency after Tab button click
tabStyle	Object	{}	Single Tab style
textStyle	Object	{}	Text style in Tab
textActiveStyle	Object	{}	Select the active text style
tabUnderlineStyle	Object	{}	Select the active underline style
firstIndex	Number / Null	null	Set the stack of firstIndex to active (make sure that the number of stacks is greater than to firstIndex when setting the firstIndex value)
syncToSticky	Boolean	true	Whether it is synchronized (render triggered in the Screen componentDidUpdate will update Sticky)
onEndReachedThreshold	Number	0.2	Bottom callback threshold
onBeforeRefresh	Function	null	Pull down to refresh the pre-functions, execute next to execute onRefresh function in Screen, execute toggled to switch system loading, you can pass true / false to specify (callback contains next, toggled two formal parameters)
onBeforeEndReached	Function	null	Slide up to load more pre-functions, execute next will execute the onEndReached function in the Screen (callback contains next formal parameters)
onTabviewChanged	Function	null	Tab switch completion callback (callback contains index, tabLabel, isFirst parameters)
screenScrollThrottle	Number	60	Screen Throttle parameters during lateral sliding, Unit (ms)
header	Function / JSX Element / Class Component	null	Top component (if the function needs to return Element)
stickyHeader	Function / JSX Element / Class Component	null	Top component (if the function needs to return Element) for sticky
oneTabHidden	Boolean	false	Hide itself when there is only one Tab
enableCachePage	Boolean	true	Whether the persistent page will not be destroyed after switching
carouselProps	Object	{}	The remaining attributes passed to Carousel < Read Carousel >
sectionListProps	Object	{}	Remaining attributes passed to SectionList < Read SectionList >
toHeaderOnTab	Boolean	false	Click to trigger the activated Tab will scroll to Header (high priority)
toTabsOnTab	Boolean	false	Click to trigger the activated Tab will scroll to Tabs
tabsShown	Boolean	true	Configure Tabs display and hide
fixedTabs	Boolean	false	When enableCachePage is true, slide to switch Screen to set the minimum height to ensure that the Header and Tabs will not bounce
fixedHeader	Boolean	false	Render together with Tabs, fix the top Header, do not follow the scroll
useScroll	Boolean	false	Does Tabs support horizontal scrolling (it needs to be enabled when there are multiple category Tabs, it is recommended that tabStyle pass in a fixed width)
useScrollStyle	Object	{}	Set contentContainerStyle for scrolling Tabs, usually add margins to the left and right sides paddingLeft paddingHorizontal
fillScreen	Boolean	true	Fill the entire Screen
title	Function / JSX Element / Class Component	null	Animation title
titleArgs	Object	{ style: {}, interpolateOpacity: {}, interpolateHeight: {} }	Title parameter configuration < Read interpolate >
onScroll	Function	null	Scroll event monitoring
onScroll2Horizontal	Function	null	Scroll event monitoring for orizontal
tabsEnableAnimated	Boolean	false	Enable sliding effect for Tabs, Need to specify width for tabStyle
tabsEnableAnimatedUnderlineWidth	Number	0	To set a fixed width for the Tabs Underline and add a jumping animation, you need to enable tabsEnableAnimated=true. (It is recommended to pass in one third of tabStyle.width or a fixed 30px)
errorToThrow	Boolean	false	console.error will throw an error throw new Error()

Method

  <ScrollableTabView
    ref={rf => (this.scrollableTabView = rf)}
  >
  </ScrollableTabView> 
  this.scrollableTabView.getCurrentRef();
  this.scrollableTabView.toTabView(1);
  this.scrollableTabView.scrollTo(0);
  this.scrollableTabView.clearStacks(()=>alert('done'));

Name	Type	Description
getCurrentRef(index: number.optional)	Function	Get the instance of the currently active view, you can pass index to get the specified instance
toTabView(index: number.required / label: string.required)	Function	Jump to the specified Screen
scrollTo(index: number.required)	Function	Swipe up and down to the specified position (passing in 0 is the default positioning to tabs / passing in a negative number is set to the top)
clearStacks(callback: function.optional)	Function	Clear the Stacks and related state (Tabs / Badge / Stacks))

Stack Property

Name	Type	Description
screen	Class / Function Component	Screen components ( If the function component must call initScreen )
sticky	Class Component	Sticky component, The context of this type of component will be returned in the instance
tabLabel	String	Tab display name
tabLabelRender	Function	Custom Tab rendering function, priority is higher than tabLabel
badge	Array	For the current Tab badge, it is mutually exclusive with the badges attribute, and has a higher priority than the outermost attribute badges < Read Badge Property >
toProps	Object	toProps Only pass to Screen without data association

Badge Property

Type	Description
JSX Element	Badges/Hovering Tips, etc. rendered based on the current Tab

Injection lifecycle to Screen (On Class Component)

Name	Type	Description
onRefresh	Function	Triggered when pull-down refresh, the formal parameter toggled function is used to switch the display of the native loading state, if the user switches the tab during loading, it will be forced to hide and reset the state
onEndReached	Function	Swipe up to load more triggers

Injection props to Screen

Name	Type	Description
refresh()	Function	Manually trigger refresh and synchronize Screen status to Sticky
scrollTo(index: number.required)	Function	Swipe up and down to the specified position (passing in 0 is the default positioning to tabs / passing in a negative number is set to the top)
toTabView(index: number.required / label: string.required)	Function	Jump to the specified Screen
layoutHeight.container	Number	Total height of the Container
layoutHeight.header	Number	Total height of the Header
layoutHeight.tabs	Number	Total height of the Tabs
layoutHeight.screen	Number	Total height of the Screen
initScreen	Function	(On Function Component) If it is a function component, it must be called
onRefresh	Function	(On Function Component) < Read onRefresh description >
onEndReached	Function	(On Function Component) < Read onEndReached description >

Injection props to Sticky

Name	Type	Description
screenContext	Object	Get Screen context

Known Issues

• If you just add a Stack, you can Push, but if you need to update or delete a Stack, please use clearStacks and then add the Stacks you need

Snapshot

Android (Sliding Tabs)

iOS (Bounce Tabs)

API Example

---

MIT Licensed