npm install react-native-customer-stack-tabview

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

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

``shell npm i @itenl/react-native-scrollable-tabview`or`shell yarn add @itenl/react-native-scrollable-tabview`

`Usage`

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

function App() { return ( ref={rf => (this.scrollableTabView = rf)} mappingProps={{ fromRootEst: this.state.est, }} badges={[ null, [ style={{ position: 'absolute', zIndex: 100, top: 10, right: 0, }} > new , style={{ position: 'absolute', width: 150, height: 50, zIndex: 100, marginTop: 35, right: 0, opacity: 0.6, backgroundColor: 'pink', justifyContent: 'center', alignItems: 'center', }} > Three Tips , ], ]} stacks={[ { screen: One, sticky: Sticky, tabLabel: 'OneTab', tabLabelRender: tabLabel => { return--- ${tabLabel} ---; }, badge: [one, two], 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 ( style={{ flex: 1, backgroundColor: "#151723", justifyContent: "center", alignItems: "center", }} > Test function component {datetime} ); }, 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 ; }} oneTabHidden={true} enableCachePage={true} carouselProps={{}} sectionListProps={{}} toHeaderOnTab={true} toTabsOnTab={true} tabsShown={false} fixedTabs={false} fixedHeader={false} useScroll={false} fillScreen={true} > ); }`

`Props`

All props are optional

Prop | Type | Default | Description ----------------- | -------- | ----------- | -----------stacks | Array | [] | Page Stack < Read Stack Property >mappingProps| Object | {} | Associate mapping data to Stack / Stickybadges| Array | [] | Badges for each Tab < Read Badge Property >tabsStyle| Object | {} | The entire Tabs styletabWrapStyle | 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 styletabActiveOpacity| Number | 0.6 | Transparency after Tab button clicktabStyle| Object | {} | Single Tab styletextStyle| Object | {} | Text style in TabtextActiveStyle| Object | {} | Select the active text styletabUnderlineStyle| Object | {} | Select the active underline stylefirstIndex | 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 firstIndexvalue)syncToSticky | Boolean | true | Whether it is synchronized (render triggered in the Screen componentDidUpdatewill update Sticky)onEndReachedThreshold| Number | 0.2 | Bottom callback thresholdonBeforeRefresh | 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, toggledtwo formal parameters)onBeforeEndReached | Function | null | Slide up to load more pre-functions, execute next will execute the onEndReached function in the Screen (callback contains nextformal parameters)onTabviewChanged | Function | null | Tab switch completion callback (callback contains index, tabLabel, isFirstparameters)screenScrollThrottle | Number | 60 | ScreenThrottle 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 stickyoneTabHidden| Boolean | false | Hide itself when there is only one TabenableCachePage| Boolean | true | Whether the persistent page will not be destroyed after switchingcarouselProps| 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 TabstabsShown| Boolean | true | Configure Tabs display and hidefixedTabs | Boolean | false | When enableCachePageis true, slide to switch Screen to set the minimum height to ensure that the Header and Tabs will not bouncefixedHeader| Boolean | false | Render together with Tabs, fix the top Header, do not follow the scrolluseScroll | Boolean | false | Does Tabs support horizontal scrolling (it needs to be enabled when there are multiple category Tabs, it is recommended that tabStylepass in a fixed width)useScrollStyle | Object | {} | Set contentContainerStyle for scrolling Tabs, usually add margins to the left and right sides paddingLeft paddingHorizontalfillScreen| Boolean | true | Fill the entire Screentitle| Function / JSX Element / Class Component | null | Animation titletitleArgs | Object | { style: {}, interpolateOpacity: {}, interpolateHeight: {} }| Title parameter configuration < Read interpolate >onScroll| Function | null | Scroll event monitoringonScroll2Horizontal| Function | null | Scroll event monitoring for orizontaltabsEnableAnimated | Boolean | false | Enable sliding effect for Tabs, Need to specify width for tabStyletabsEnableAnimatedUnderlineWidth | 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.widthor a fixed 30px)errorToThrow | Boolean | false | console.error will throw an error throw new Error()