❤
npm
Sign UpSign In

react-native-customer-stack-tab
TypeScript icon, indicating that this package has built-in type declarations

1.0.1 • Public • Published

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; 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

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

MIT Licensed

Readme

Keywords

Package Sidebar

Install

npm i react-native-customer-stack-tab

Weekly Downloads

1

Version

1.0.1

License

MIT

Unpacked Size

49 kB

Total Files

9

Last publish

Collaborators

  • sevody
Try on RunKit
Report malware