When stickyHeaderIndices is used, style of component changes - react-native

Question

I've searched common problems and how to use stickyHeaderIndices and so on. But stuck with one point, and I didn't even find why this occurs, so couldn't search on the internet.
Everything works fine on web, but not on my phone when I use sticky.
My Scroll View Structure:
<ScrollView stickyHeaderIndices={[0]} style={styles.layout}>
<View style={styles.topBar}>
<Text style={styles.title}>Messages</Text>
<View style={styles.notificationIcon}>
<Text style={styles.notificationIconTxt}>{notificationCount}</Text>
</View>
</View>
<ChatItem pairingCategory={'Name'} />
</ScrollView>
View that I want to stick on top:
If I use the structure above, it sticks on top but style of the component changes (as in the picture below), I want that bubble to stay next to text.
Here's my styles:
const styles = StyleSheet.create({
layout: {
flex: 1,
backgroundColor: colors.lightBg
},
topBar: {
backgroundColor: colors.lightBg,
paddingVertical: 15,
paddingLeft: 24,
flexDirection: 'row',
flexWrap: 'nowrap',
alignItems: 'center',
},
title: {
fontSize: 32,
marginRight: 8,
},
notificationIcon: {
borderRadius: 15,
justifyContent: 'center',
alignItems: 'center',
width: 30,
height: 30,
backgroundColor: colors.mainBg,
padding: 5
},
notificationIconTxt: {
color: 'white',
fontWeight: "700"
}
})
Whenever I delete stickyHeaderIndices, topBar view seems the way I want, but not sticks to top.
Why it happens, and what can I do to solve it?

Answer 1

Solved!
I still don't know, what was the reason for it, but created new component called ChatListTopBar then wrapped my first children View.
function ChatListTopBar({notificationCount}) {
return (
<View style={styles.topBar}>
<Text lineBreakMode='false' style={styles.title}>Mesajlar</Text>
<View style={styles.notificationIcon}>
<Text style={styles.notificationIconTxt}>15</Text>
</View>
</View>
)
}
//ScrollView section seems so
<ScrollView stickyHeaderIndices={[0]} style={styles.layout}>
<ChatListTopBar notificationCount={notificationCount} />
<ChatItem pairingCategory={'Name'} />
</ScrollView>
Replacing like so, just fixed the issue!

Answer 2

wrap your View which you are trying to stick with <></>