Gathering detailed insights and metrics for react-native-head-tab-view-flashlist-support
Gathering detailed insights and metrics for react-native-head-tab-view-flashlist-support
Installations
npm install react-native-head-tab-view-flashlist-supportDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
20.11.0
NPM Version
10.2.4
Releases
Unable to fetch releases
Languages
6
TypeScript
Java
Objective-C
JavaScript
Starlark
Ruby
TypeScript (91.01%)
Java (3.62%)
Objective-C (2.46%)
JavaScript (1.39%)
Starlark (1.06%)
Ruby (0.45%)
Developer
TranTuan520
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
2 Stars
124 Commits
1 Branches
1 Contributors
Updated on Jun 20, 2024
Maintainers
1
Package Meta Information
Latest Version
1.0.18
Package Id
react-native-head-tab-view-flashlist-support@1.0.18
Unpacked Size
128.86 kB
Size
19.82 kB
File Count
21
NPM Version
10.2.4
Node Version
20.11.0
Published on
Feb 26, 2024
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
2
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 😗
1import { 2 HScrollView, 3 HFlatList, 4 HSectionList, 5 HFlashList, 6} from 'react-native-head-tab-view-flashlist-support';
The following components are currently supported:
react-native-scrollable-tab-view
Demo
Example
If your tabs component is react-native-scrollable-tab-view
1import * as React from 'react'; 2import {View} from 'react-native'; 3import {HScrollView} from 'react-native-head-tab-view-flashlist-support'; 4import {CollapsibleHeaderTabView} from 'react-native-head-tab-view-flashlist-support/rn-tab-view-collapsible-header'; 5export default class ExampleBasic extends React.PureComponent<any> { 6 render() { 7 return ( 8 <CollapsibleHeaderTabView 9 renderScrollHeader={() => ( 10 <View style={{height: 200, backgroundColor: 'red'}} /> 11 )}> 12 <HScrollView index={0}> 13 <View style={{height: 1000, backgroundColor: '#ff4081'}} /> 14 </HScrollView> 15 <HScrollView index={1}> 16 <View style={{height: 1000, backgroundColor: '#673ab7'}} /> 17 </HScrollView> 18 </CollapsibleHeaderTabView> 19 ); 20 } 21}
If your tabs component is react-native-tab-view
1import * as React from 'react'; 2import {View, StyleSheet, Dimensions} from 'react-native'; 3import {SceneMap} from 'react-native-tab-view'; 4import {HScrollView} from 'react-native-head-tab-view-flashlist-support'; 5import {CollapsibleHeaderTabView} from 'react-native-head-tab-view-flashlist-support/rn-tab-view-collapsible-header'; 6 7const FirstRoute = () => ( 8 <HScrollView index={0}> 9 <View style={[styles.scene, {backgroundColor: '#ff4081'}]} /> 10 </HScrollView> 11); 12 13const SecondRoute = () => ( 14 <HScrollView index={1}> 15 <View style={[styles.scene, {backgroundColor: '#673ab7'}]} /> 16 </HScrollView> 17); 18 19const initialLayout = {width: Dimensions.get('window').width}; 20 21export default function TabViewExample() { 22 const [index, setIndex] = React.useState(0); 23 const [routes] = React.useState([ 24 {key: 'first', title: 'First'}, 25 {key: 'second', title: 'Second'}, 26 ]); 27 28 const renderScene = SceneMap({ 29 first: FirstRoute, 30 second: SecondRoute, 31 }); 32 33 return ( 34 <CollapsibleHeaderTabView 35 renderScrollHeader={() => ( 36 <View style={{height: 200, backgroundColor: 'red'}} /> 37 )} 38 navigationState={{index, routes}} 39 renderScene={renderScene} 40 onIndexChange={setIndex} 41 initialLayout={initialLayout} 42 /> 43 ); 44} 45 46const styles = StyleSheet.create({ 47 scene: { 48 flex: 1, 49 }, 50});
More examples：Example
Run the example
1cd Example 2yarn or npm install 3 4//run Android 5react-native run-android 6 7//run iOS 8cd ios 9pod install 10cd ../ 11react-native run-ios
Installation
- The first step is to add the base library and its dependencies
1yarn add react-native-head-tab-view react-native-gesture-handler react-native-reanimated 2or 3npm install react-native-head-tab-view-flashlist-support react-native-gesture-handler react-native-reanimated --save
Linking
- react-native-gesture-handler Refer to the official documentation
- react-native-reanimated Refer to the official documentation
Documentation
CollapsibleHeaderProps
renderScrollHeader (React.ComponentType | React.ReactElement | null) (require)
render the collapsible header
1renderScrollHeader={()=><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.
1<CollapsibleHeaderTabView 2 makeScrollTrans={(scrollValue) => { 3 this.setState({scrollValue}); 4 }} 5/>
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
HScrollView \ HFlatList \ HSectionList \ HFlashlist
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.
- With HFlashlist, some props like( maintainVisibleContentPosition, paddings props of contentContainerStyle, ...) is not working
- 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.
No vulnerabilities found.
No security vulnerabilities found.