Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
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}
/>
Convert the elements in tabs into the titles you want
example:
tabNameConvert={(tabname)=>return tabname+'_aguai'}
These styles will be applied to the Tabbar view content container which wraps all of the child views.
The style of the tab item when active defaults to { fontSize: 14, color: '#4D4D4D', fontWeight: 'bold' }
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)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)
The style of the tabbar
Whether the underline is displayed
it defaults to false
The style of the underlined container
The style of the underline
The style of the tab item
Takes an item from data and renders it
Takes an item from data and renders it to the TAB Item button
Progress relative to total length
Render the view to the left of the Tabbar
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,319 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
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.