React Native ScrollView
provides stickyHeaderIndices
prop which is used to stick components at the top.
This prop accepts an array of indices of children components of ScrollView, starting from 0. It works in both Android and iOS phones. In this article we will focus on sticking single item only.
It is used like this –
<ScrollView stickyHeaderIndices={[0]} > ... </ScrollView>
In the above snippet we are passing [0]
as the value of stickyHeaderIndices
prop. This means that the element at position 0 will stick to the top of the scrollview when the list surpass it’s position.
Code Example
import React from 'react'; import { StyleSheet, Text, SafeAreaView, ScrollView, StatusBar, View } from 'react-native'; const App = () => { return ( <SafeAreaView style={styles.container}> <ScrollView style={styles.scrollView} stickyHeaderIndices={[0]} > <View style={[styles.textView, {marginTop: 40}]}> <Text style={styles.text}>View 1</Text> </View> <View style={styles.textView}> <Text style={styles.text}>View 2</Text> </View> <View style={styles.textView}> <Text style={styles.text}>View 3</Text> </View> <View style={styles.textView}> <Text style={styles.text}>View 4</Text> </View> <View style={styles.textView}> <Text style={styles.text}>View 5</Text> </View> <View style={styles.textView}> <Text style={styles.text}>View 6</Text> </View> <View style={styles.textView}> <Text style={styles.text}>View 7</Text> </View> <View style={styles.textView}> <Text style={styles.text}>View 8</Text> </View> <View style={styles.textView}> <Text style={styles.text}>View 9</Text> </View> <View style={styles.textView}> <Text style={styles.text}>View 10</Text> </View> <View style={styles.textView}> <Text style={styles.text}>View 11</Text> </View> <View style={styles.textView}> <Text style={styles.text}>View 12</Text> </View> </ScrollView> </SafeAreaView> ); } const styles = StyleSheet.create({ container: { flex: 1, paddingTop: StatusBar.currentHeight, }, scrollView: { backgroundColor: 'pink', marginHorizontal: 20, }, textView: { padding: 10, marginVertical: 10, backgroundColor: '#FFF000', borderBottomWidth: 1 }, text: { fontSize: 42, }, }); export default App;
Output –
In the above image you can see that View 1 is the first child of the list. The first phone shows that it’s not stick to the top yet because the list is not scrolled. But as we start scrolling, View 1 stick to the top, as shown in second phone. Why View 1 is sticked? Because we are setting index 0 in stickyHeaderIndices
prop.
In the code we are setting stickyHeaderIndices={[0]}
at line 9
Live Demo
Conclusion
If you want to stick a single child element at the top of ScrollView, you need to pass it’s index in stickyHeaderIndices
prop. It accepts an array of indices and works in Android as well as iOS.
React Native Series
Alert
- Basic Alert
- Dismiss on Clicking Outside
- Input Fields in Alert Dialog – Prompt()
- Dark-Light Theme of Dialog
ActivityIndicator
- Basic Circular Loader
- Change size of Circular Loader
- Show/hide Circular Loader
- Change color of Circular Loader
Button
FlatList
- Simple List
- Single Item Selection from List
- Multiple Item Selection from List
- Adding separator between list items
- Multiple columns List
- Showing Message in Empty List
- Add Footer to the List
- Add Header to the List
- Horizontal List
- Inverted List
- Pull to Refresh in List
- Infinite Loading List
SectionList
ScrollView
- ScrollView
- Stick Single Item at Header
- Stick Multiple Items at Header
- Stick Item at Footer
- Hide Sticky Element on Scroll
Image
- Display Image from remote url
- Display local storage image
- Display Base64 Image
- Display Gif & Webp Images
- Adding Blur to Image
- Displaying loader for Image
- Resizemode for Images
- Setting Default Placeholder Image
- Background Image
Modal
RefreshControl
- RefreshControl
- Change Refresh Loader Color
- Change Refresh Loader Size
- Change Refresh Loader Background Color
- Title under Refresh Loader
- Change color of title under refresh loader
StatusBar
- Get StatusBar Size
- Change StatusBar Background Color
- Display StatusBar icons & text in While Color
- Display StatusBar icons & text in Dark Color
- Hiding StatusBar
- Translucent StatusBar
Switch
Text
- Adding Text
- Bold Text
- Italic Text
- Underline Text
- Selecting Text for copy-paste
- Changing Highlight Color of Text Selection
- Fit text in View box
- Clickable anchors in text
- Truncate Lengthy Text
TextInput
- Simple Input Field
- Auto Capitalize Text in Input Field
- Multiline Input Field
- Hide Cursor in Input Field
- Clear input Field using X
- Clear input Field when focused
- Change Cursor Color in Input Field
- Disable input field
- Icon at the left of Input Field
- Dark-Light Keyboard
- Avoid Overlapping of Keyboard
- Limiting Characters in Input Field
- Numeric Keyboard
- Email Id Keyboard
- Phone number Keyboard
- Url Keyboard
- Placeholder in input field
- Placeholder Color in Input Field
- Password Input Field
- Programmatically select text in Input Field
- Change Text Selection Color in Input Field
- Select Whole text in Input Field on Focus
- Write text from center in input field
- Changing underline color of input field
TouchableWithoutFeedback
TouchableHighlight
TouchableOpacity
Pressable
Appearance
AppState
ToastAndroid
Dimensions
Keyboard