Hello friends, This is my second tutorial on ScrollView component of react native. Today we would learn about implementing Sticky header to ScrollView component in react native. ScrollView comes with inbuild prop known as StickyHeaderComponent and stickyHeaderIndices. They both used to implement Sticky header on ScrollView in react native. But sadly when tried them then I was unable to implement Sticky header on ScrollView. I have tried so many code combinations to work it but it is not working. I don’t know why? So I write a code with work around this problem. This code will work only if you are using a Fix Sized header. So in this tutorial we would learn about React Native Add Sticky Header to ScrollView.
Live Screenshot :-
Contents in this project React Native Add Sticky Header to ScrollView :-
1. Complete Source Code for App.js File :-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
import React from "react"; import { ScrollView, SafeAreaView, StyleSheet, Text, View, Image } from 'react-native'; export default function App() { const ScrollView_Header = () => { return ( <View style={styleSheet.header}> <Text style={styleSheet.headerText}> ScrollView Sticky Header </Text> </View> ); }; return ( <SafeAreaView style={{ flex: 1 }}> <ScrollView_Header /> <ScrollView stickyHeaderIndices={[1]}> <View style={styleSheet.MainContainer}> <Text style={styleSheet.title}> Example of Vertical ScrollView in React Native </Text> <Text style={styleSheet.text}> Example of Vertical ScrollView in React Native </Text> <Text style={styleSheet.text}> Example of Vertical ScrollView in React Native </Text> <View style={{ width: 200, height: 200, backgroundColor: 'green' }} /> <Image source={{ uri: 'https://reactnative-examples.com/wp-content/uploads/2021/10/white-lily.jpg' }} style={{ width: 300, height: 230, resizeMode: 'contain', margin: 10 }} /> <View style={{ width: 200, height: 200, backgroundColor: 'pink' }} /> <Image source={{ uri: 'https://reactnative-examples.com/wp-content/uploads/2021/10/white-lily.jpg' }} style={{ width: 300, height: 230, resizeMode: 'contain', margin: 10 }} /> <View style={{ width: 200, height: 200, backgroundColor: 'blue' }} /> <Image source={{ uri: 'https://reactnative-examples.com/wp-content/uploads/2021/10/white-lily.jpg' }} style={{ width: 300, height: 230, resizeMode: 'contain', margin: 10 }} /> <Text style={styleSheet.text}> ScrollView Last Element </Text> </View> </ScrollView> </SafeAreaView> ); } const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, alignItems: 'center', justifyContent: 'center', }, title: { fontSize: 25, textAlign: 'center', color: 'black', padding: 5, fontWeight: 'bold' }, text: { fontSize: 22, textAlign: 'center', color: 'black', padding: 5, }, header: { alignItems: 'center', justifyContent: 'center', width: '100%', height: 46, backgroundColor: 'teal' }, headerText: { textAlign: 'center', color: '#fff', fontSize: 22, } }); |
