Add collapsible headers to your tab-view components.
:tada::tada::tada: v4.0.0-rc.13 has been released, I hope you can help me test and collect questions.
In this version, there is a big change. All animations will run on the UI thread, which will make the components much smoother. Unfortunately, the version requiring React Native is greater than 0.62.0. Because we rely on react-native-reanimated2.0
, that's what it requires.
Here are some changes and optimizations. Disruptive Changes:
makeHeaderHeight
and change it to headerHeight
It's not mandatory, but it would be nice if you did
SlideAnimated
modethis mode was used for ScrollView/FlatList scrolling stalling when dragging headers, no longer needed.
- Remove the scene's
refreshHeight
property
Both the TabView and Scene used to have the refreshHeight property. Now I think they are duplicate, just set refreshHeight on the TabView, its default value is 80
HPageViewHoc
has changed# Past usage:
import { HPageViewHoc } from 'react-native-head-tab-view'
const HScrollView = HPageViewHoc(ScrollView)
const HFlatList = HPageViewHoc(FlatList)
const HSectionList = HPageViewHoc(SectionList)
# Current usage
import { HScrollView,HFlatList,HSectionList } from 'react-native-head-tab-view'
The following components are currently supported:
react-native-scrollable-tab-view
react-native-tab-view
For detailed usage, please refer to Example and Installation.
renderScrollHeader
can accept ReactElement.
enableSnap
to props. (If it is true,it automatically switches to the folded and expanded states.)
1.react-native-gesture-handler
2.react-native-reanimated
dependencies:
1.react-native-gesture-handler
dependencies:
1.react-native-gesture-handler
2.@react-native-community/viewpager
If your tabs component is react-native-scrollable-tab-view
import * as React from 'react';
import { View } from 'react-native';
import { HScrollView } from 'react-native-head-tab-view'
import { CollapsibleHeaderTabView } from 'react-native-scrollable-tab-view-collapsible-header'
export default class ExampleBasic extends React.PureComponent<any> {
render() {
return (
<CollapsibleHeaderTabView 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 } from 'react-native';
import { SceneMap } from 'react-native-tab-view';
import { HScrollView } from 'react-native-head-tab-view'
import { CollapsibleHeaderTabView } from 'react-native-tab-view-collapsible-header'
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
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-reanimated
or
npm install react-native-head-tab-view react-native-gesture-handler react-native-reanimated --save
yarn add react-native-scrollable-tab-view-collapsible-header
yarn add react-native-tab-view-collapsible-header
react-native-head-tab-view | react-native-scrollable-tab-view-collapsible-header | react-native-tab-view-collapsible-header |
---|---|---|
v1 ~ v2 | - | - |
v3 | v0 | v0 |
v4-rc.1 | v1 | v1 |
v4-rc.2~ | v2 | v2 |
You need to add this dependency library
import { CollapsibleHeaderTabView } from 'react-native-scrollable-tab-view-collapsible-header'
You need to add this dependency library
import { CollapsibleHeaderTabView } from 'react-native-tab-view-collapsible-header'
CollapsibleHeaderTabView
extends the props for the tabs component by adding the CollapsibleHeaderProps
renderScrollHeader
(React.ComponentTyperender the collapsible header
renderScrollHeader={()=><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.ShareValueGets the animation value of the shared collapsible header.
<CollapsibleHeaderTabView
makeScrollTrans={(scrollValue) => {
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
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.
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.ComponentTypeA 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.
React-Native-Reanimated2.0
when you first start using V4.Refer to the official documentation. I'm sure it won't be difficult for you
Thank you for your effort.