Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
react-native-head-tab-view
Advanced tools
import { ScrollView } from 'react-native';
import { HPageViewHoc, TabView } from 'react-native-head-tab-view'
const HScrollView = HPageViewHoc(ScrollView)
_renderScene = (sceneProps: { item: string, index: number }) => {
return <HScrollView {...sceneProps}>
<View style={{ height: 800, backgroundColor: 'red' }} />
<View style={{ height: 800, backgroundColor: 'green' }} />
<View style={{ height: 800, backgroundColor: 'blue' }} />
</HScrollView>
}
render() {
return (
<View style={{ flex: 1, backgroundColor: '#FFF' }}>
<TabView
tabs={['tab1','tab2','tab3']}
renderScene={this._renderScene}
makeHeaderHeight={() => { return 180 }}
renderScrollHeader={()=><View style={{height:180,backgroundColor:'red'}}/>}
onChangeTab={this.onChangeTab}
/>
</View>
)
}
More examples:Example
cd Example
yarn or npm install
//run Android
react-native run-android
//run iOS
cd ios
pod install
cd ../
react-native run-ios
yarn add react-native-head-tab-view react-native-gesture-handler @react-native-community/viewpager
or
npm install react-native-head-tab-view react-native-gesture-handler @react-native-community/viewpager --save
https://github.com/react-native-community/react-native-viewpager#Linking
Some versions of @react-native-community/viewpager
1.x | 2.x | 3.x |
---|---|---|
iOS support | iOS support | |
Android support | Android support | AndroidX support |
tabs
(required
) (tabs :string[])The data source for Tabbar and TabView Example:
<TabView
tabs={['tab1','tab2','tab3']}
/>
<Tabbar
tabs={['tab1','tab2','tab3']}
/>
averageTab
(boolean)Whether items in a Tabbar divide the width of the container of the Tabbar equally
it defaults to true.
true
: All TAB items divide the width of the tabbar equally
false
: The width depends on the text of the label item. Wrapped in a ScrollView
Example:
<TabView
tabs={['tab1','tab2','tab3']}
averageTab={true|false}
/>
tabNameConvert
_((tabname: string) => string)Convert the elements in tabs into the titles you want
example:
tabNameConvert={(tabname)=>return tabname+'_aguai'}
tabsContainerStyle
(StyleProp)These styles will be applied to the Tabbar view content container which wraps all of the child views.
activeTextStyle
(StyleProp)The style of the tab item when active defaults to { fontSize: 14, color: '#4D4D4D', fontWeight: 'bold' }
inactiveTextStyle
(StyleProp)The style of the tab item when inactive defaults to { fontSize: 14, color: '#848484', fontWeight: 'bold' }
isRefreshing
(boolean)Whether the scene is refreshing
onStartRefresh
(() => void)If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality.
Make sure to also set the isRefreshing prop correctly.
renderRefreshControl
(() => React.ReactElement)A custom RefreshControl for scene
refreshHeight
(number)If this height is reached, a refresh event will be triggered (onStartRefresh)
it defaults to 100
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.
renderScene
(required
) (renderScene :(info: TabViewItemInfo) => React.ReactElement | null | undefined)Takes an item from tabs and render the scene of the TAB item When renderScrollHeader is assigned, pass info to the component wrapped by HPageViewHoc
Example:
<TabView
renderScene={(sceneProps)=>{
const {item} = sceneProps
if (item == 'ScrollView') {
return <Page1 {...sceneProps} />
} else if (item == 'FlatList') {
return <Page2 {...sceneProps} />
} else if (item == 'SectionList') {
return <Page3 {...sceneProps} />
}
return null;
}}
/>
renderScrollHeader
(React.ComponentType | React.ReactElement | null)render the collapsible header
<TabView
makeHeaderHeight={() => { return 180 }}
/>
frozeTop
(number)The height at which the top area of the Tabview is frozen
<TabView
frozeTop={50}
/>
headerRespond
(boolean)【This property has been deprecated,By default, the header responds to events.】Collapsible headers can respond to an event it defaults to false
<TabView
headerRespond={true}
/>
makeHeaderHeight
The height of collapsible header
renderScrollHeader={()=><View style={{height:180,backgroundColor:'red'}}/>}
renderHeader
(React.ComponentType | React.ReactElement | null)render the header of the Tabview
renderFooter
(React.ComponentType | React.ReactElement | null)render the footer of the Tabview
initialPage
(number)The sequence number of the initial scene. it defaults to 0
preInitSceneNum
(number)Number of pre-loaded pages
it defaults to 0
renderTabBar
(React.ComponentType | React.ReactElement | null)Render the custom tabbar
onChangeTab
((value: ChangeTabProperties): void)This method is called when the scene is switched
<TabView
onChangeTab={({from,curIndex}) => { console.log('from:'+from+'-to:'+curIndex) }}
/>
onScroll
((value: number): void)Horizontal scrolling invokes this method
value
: Progress relative to total length
locked
(boolean)Whether horizontal sliding is allowed.
it defaults to false
scrollEnabled
(boolean)Whether to allow the scene to slide vertically
tabbarStyle
(StyleProp)The style of the Tabbar
extraData
(any)A marker property for telling the tabview to re-render (since it implements PureComponent).
stick it here and treat it immutably.
isRefreshing
(boolean)Whether the TabView is refreshing
onStartRefresh
(() => void)If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality.
Make sure to also set the isRefreshing prop correctly.
renderRefreshControl
(() => React.ReactElement)A custom RefreshControl
refreshHeight
(number)If this height is reached, a refresh event will be triggered (onStartRefresh)
style
(StyleProp)The style of the tabbar
underLineHidden
(boolean)Whether the underline is displayed
it defaults to false
underlineStyle
(StyleProp)The style of the underlined container
lineStyle
(StyleProp)The style of the underline
tabItemStyle
(StyleProp)The style of the tab item
renderTabItem
(React.ComponentType | React.ReactElement | null)Takes an item from data and renders it
renderTabItemButton
(React.ComponentType | React.ReactElement | null)Takes an item from data and renders it to the TAB Item button
scrollValue
(Animated.Value)Progress relative to total length
renderLeftView
(React.ComponentType | React.ReactElement | null)Render the view to the left of the Tabbar
renderRightView
(React.ComponentType | React.ReactElement | null)Render the view to the right of the Tabbar
FAQs
Tab view component for React Native
The npm package react-native-head-tab-view receives a total of 1,248 weekly downloads. As such, react-native-head-tab-view popularity was classified as popular.
We found that react-native-head-tab-view demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.