Halo sobat KonsepKoding kali ini KonsepKoding akan membuat tutorial mengenai Sticky Header React Native, disini untuk datanya menggunakan data dummy dan bisa di sesuaikan nantinya dengan kebutuhan kamu.

Tutorial Membuat Sticky Header React Native

Tutorial Membuat Sticky Header React Native
Tutorial Membuat Sticky Header React Native

Pertama pastikan kamu sudah membuat project React Native

Pastikan kamu telah mengintall : react-native-safe-area-context

Kemudian ketikan kode di bawah ini:

import React, {useRef} from 'react';
import {
View,
Text,
StyleSheet,
ScrollView,
Animated,
NativeSyntheticEvent,
NativeScrollEvent,
} from 'react-native';
import {useSafeAreaInsets} from 'react-native-safe-area-context';

const StickyHeaderScreen = () => {
const insets = useSafeAreaInsets(); // Handle safe area insets
const translateY = useRef(new Animated.Value(0)).current; // Header animation
const lastScrollY = useRef(0); // Track the scroll position

const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
const currentY = event.nativeEvent.contentOffset.y;
const scrollingUp = currentY < lastScrollY.current;

Animated.timing(translateY, {
toValue: scrollingUp ? 0 : -100, // Adjust to hide/show header
duration: 200,
useNativeDriver: true,
}).start();

lastScrollY.current = currentY;
};

const dummyData = Array.from({length: 30}, (_, i) => `Item ${i + 1}`);

return (
<View style={styles.container}>
<Animated.View
style={[
styles.header,
{
transform: [{translateY}],
paddingTop: insets.top, // Safe area padding
},
]}
>
<Text style={styles.headerText}>My Awesome Sticky Header</Text>
</Animated.View>

<ScrollView
onScroll={handleScroll}
scrollEventThrottle={16}
contentContainerStyle={{paddingTop: 100 + insets.top}} // Adjust for header height
>
{dummyData.map((item, index) => (
<View key={index} style={styles.item}>
<Text style={styles.itemText}>{item}</Text>
</View>
))}
</ScrollView>
</View>
);
};

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f3f3f3',
},
header: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
height: 100, // Increased height for better aesthetics
backgroundColor: '#3b5998', // Vibrant color (e.g., Facebook blue)
justifyContent: 'center',
alignItems: 'center',
zIndex: 10,
elevation: 5,
borderBottomWidth: 1,
borderBottomColor: '#ddd',
},
headerText: {
color: '#fff',
fontSize: 22,
fontWeight: 'bold',
},
subHeaderText: {
color: '#dfe3ee',
fontSize: 14,
marginTop: 5,
},
item: {
height: 60,
justifyContent: 'center',
alignItems: 'center',
borderBottomWidth: 1,
borderBottomColor: '#ddd',
},
itemText: {
fontSize: 16,
color: '#333',
},
});

export default StickyHeaderScreen;

Kemudian silahkan run kodingan React Native tadi maka hasilnya akan menjadi Sticky Header  ketika di scroll ke atas.

Baca Tutorial React Native KonsepKoding Lainnya :
#32 Tutorial Kalkulasi Latitude Longitude Dua Jarak React Native
#33 Tutorial React Native Handle OnSwipe Pada iOS
#34 Tutorial View Aspect Ratio Square React Native