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
After v3.0, the built-in Scrollable tabs component has been removed.We will only extend the other tabs component so that each Tab page has a shared collapsible header.
The following components are currently supported:
react-native-scrollable-tab-view
react-native-tab-view
For detailed usage, please refer to Example and Installation.
If your tabs component is react-native-scrollable-tab-view
import * as React from 'react';
import {
View,
ScrollView,
} from 'react-native';
import { HPageViewHoc } from 'react-native-head-tab-view'
import { CollapsibleHeaderTabView } from 'react-native-scrollable-tab-view-collapsible-header'
const HScrollView = HPageViewHoc(ScrollView)
export default class ExampleBasic extends React.PureComponent<any> {
render() {
return (
<CollapsibleHeaderTabView
makeHeaderHeight={() => 200}
renderScrollHeader={() => <View style={{ height: 200, backgroundColor: 'red' }} />}
>
<HScrollView index={0}>
<View style={{ height: 1000, backgroundColor: '#ff4081' }} />
</HScrollView>
<HScrollView index={1}>
<View style={{ height: 1000, backgroundColor: '#673ab7' }} />
</HScrollView>
</CollapsibleHeaderTabView>
)
}
}
If your tabs component is react-native-tab-view
import * as React from 'react';
import { View, StyleSheet, Dimensions, ScrollView } from 'react-native';
import { SceneMap } from 'react-native-tab-view';
import { HPageViewHoc } from 'react-native-head-tab-view'
import { CollapsibleHeaderTabView } from 'react-native-tab-view-collapsible-header'
const HScrollView = HPageViewHoc(ScrollView)
const FirstRoute = () => (
<HScrollView index={0}>
<View style={[styles.scene, { backgroundColor: '#ff4081' }]} />
</HScrollView>
);
const SecondRoute = () => (
<HScrollView index={1}>
<View style={[styles.scene, { backgroundColor: '#673ab7' }]} />
</HScrollView>
);
const initialLayout = { width: Dimensions.get('window').width };
export default function TabViewExample() {
const [index, setIndex] = React.useState(0);
const [routes] = React.useState([
{ key: 'first', title: 'First' },
{ key: 'second', title: 'Second' },
]);
const renderScene = SceneMap({
first: FirstRoute,
second: SecondRoute,
});
return (
<CollapsibleHeaderTabView
makeHeaderHeight={() => 200}
renderScrollHeader={() => <View style={{ height: 200, backgroundColor: 'red' }} />}
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={initialLayout}
/>
);
}
const styles = StyleSheet.create({
scene: {
flex: 1,
},
});
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-scrollable-tab-view
Install additional project react-native-scrollable-tab-view-collapsible-header
yarn add react-native-scrollable-tab-view-collapsible-header
react-native-tab-view
Install additional project react-native-tab-view-collapsible-header
yarn add react-native-tab-view-collapsible-header
import { CollapsibleHeaderTabView ,SlideTabView} from 'react-native-scrollable-tab-view-collapsible-header'
import { CollapsibleHeaderTabView ,SlideTabView} from 'react-native-tab-view-collapsible-header'
CollapsibleHeaderTabView
and SlideTabView
extends the props for your tabs component by adding the CollapsibleHeaderProps
renderScrollHeader
(React.ComponentType | React.ReactElement | null) (require)render the collapsible header
renderScrollHeader={()=><View style={{height:180,backgroundColor:'red'}}/>}
makeHeaderHeight
(require)The height of collapsible header.
<CollapsibleHeaderTabView
makeHeaderHeight={() => 180}
/>
tabbarHeight
The height of collapsible tabbar
If this parameter is set, the initial rendering performance will be improved.
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.Value) => voidGets the animation value of the shared collapsible header.
<CollapsibleHeaderTabView
makeScrollTrans={(scrollValue: Animated.Value) => {
this.setState({ scrollValue })
}}
/>
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
refreshHeight
(number)If this height is reached, a refresh event will be triggered (onStartRefresh)
scrollEnabled
(boolean)Whether to allow the scene to slide vertically
makeRoomInRefreshing
(boolean)Does the ListView leave a space of "refreshHeight" while the ListView is pull-down. it defaults to true
import { HPageViewHoc } from 'react-native-head-tab-view'
const HScrollView = HPageViewHoc(ScrollView)
const HFlatList = HPageViewHoc(FlatList)
const HSectionList = HPageViewHoc(SectionList)
//If you're using SlideTabView, then the second argument to HPageViewHoc should be passed {slideAnimated: true}. In this mode, use the RefreshControl control built into ScrollView.
//ex.
const HScrollView = HPageViewHoc(ScrollView, { slideAnimated: true })
HScrollView
,HFlatList
and HSectionList
must all have the index
propertyindex
(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.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.
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.