xxxxxxxxxx
import { .. , Animated } from 'react-native'
const HEADER_HEIGHT = 70 //<<<<<<<<------Header Height global declaration
const DashboardScreen = () => {
// COPY PASTE
const scrollY = new Animated.Value(0)
const diffClamp = Animated.diffClamp(scrollY, 0, HEADER_HEIGHT)
const tarnslateY = diffClamp.interpolate({
inputRange: [0, HEADER_HEIGHT],
outputRange: [0, -HEADER_HEIGHT]
})
// COPY PASTE
return(
<View style={styles.container}>
<Animated.View style={{ // Animated.View
backgroundColor: "rgba(213,215,121,0.7)",
height: HEADER_HEIGHT,
position: "absolute",
top: 0,
left: 0,
right: 0,
zIndex: 10,
elevation: 10,
transform: [{ translateY: tarnslateY }]
}}>
</Animated.View>
<Animated.FlatList // Animated.Flatlist
data={data}
renderItem={_renderItem}
onScroll={(e) => {
scrollY.setValue(e.nativeEvent.contentOffset.y)
}}
/>
</View>
)
xxxxxxxxxx
<ScrollView
style={styles.screen}
stickyHeaderIndices={[0]}
>
<View><Text>Hello1</Text></View>
<View><Text>Hello2</Text></View>
<View><Text>Hello3</Text></View>
</ScrollView>
// Show "Hello1" as sticky component