A React Native component that supports a collapsible header and custom refresh control, powered by Reanimated and GestureHandler.
Features
- Collapsible header.
- Support for FlashList.
- Custom refresh control.
- Bounce effect support on iOS.
- Support for iOS, Android, and Web.
- Zoom header when pulling to refresh.
How to use it:
1. Import the packages.
import React, { useCallback, useState } from "react";
import { StatusBar, Text, View } from "react-native";
import { useSharedValue } from "react-native-reanimated";
import { Route, TabView } from "showtime-tab-view";
import { TabFlashList } from "./tab-flash-list";
2. Basic usages.
const StatusBarHeight = StatusBar.currentHeight ?? 0;
const TabScene = ({ route }: any) => {
return (
<TabFlashList
index={route.index}
data={new Array(20).fill(0)}
estimatedItemSize={60}
renderItem={({ index }) => {
return (
<View
style={{
height: 60,
backgroundColor: "#fff",
marginBottom: 8,
justifyContent: "center",
alignItems: "center",
}}
>
<Text>{`${route.title}-Item-${index}`}</Text>
</View>
);
}}
/>
);
};
export function Example() {
const [isRefreshing, setIsRefreshing] = useState(false);
const [routes] = useState<Route[]>([
{ key: "like", title: "Like", index: 0 },
{ key: "owner", title: "Owner", index: 1 },
{ key: "created", title: "Created", index: 2 },
]);
const [index, setIndex] = useState(0);
const animationHeaderPosition = useSharedValue(0);
const animationHeaderHeight = useSharedValue(0);
const renderScene = useCallback(({ route }: any) => {
switch (route.key) {
case "like":
return <TabScene route={route} index={0} />;
case "owner":
return <TabScene route={route} index={1} />;
case "created":
return <TabScene route={route} index={2} />;
default:
return null;
}
}, []);
const onStartRefresh = async () => {
setIsRefreshing(true);
setTimeout(() => {
console.log("onStartRefresh");
setIsRefreshing(false);
}, 300);
};
const renderHeader = () => (
<View style={{ height: 300, backgroundColor: "#000" }}></View>
);
return (
<TabView
onStartRefresh={onStartRefresh}
isRefreshing={isRefreshing}
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={setIndex}
lazy
renderScrollHeader={renderHeader}
minHeaderHeight={44 + StatusBarHeight}
animationHeaderPosition={animationHeaderPosition}
animationHeaderHeight={animationHeaderHeight}
/>
);
}
Preview:
Download Details:
Author: showtime-xyz
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/showtime-xyz/showtime-tab-view
License: MIT
