react native: change style property on scroll scrollview - react-native

Question

I have a view (flex: 0) above a scrollview (flex: 1). When I scroll down on the scrollview (event.nativeEvent.contentOffset.y > 0), I want to change the border bottom color of the top view.
Current code:
const Screen = (props) => {
// ...
const [bottom, setBottom] = useState(0);
const scrollE = (event) => {
setBottom(event.nativeEvent.contentOffset.y > 0 ? 1 : 0);
};
return (
<View style={{ flex: 1 }}>
<View style={{ flex: 0, borderBottomWidth: bottom, borderBottomColor: 'black' }}>
<Text>HEADER</Text>
</View>
<ScrollView style={{ flex: 1 }} contentContainerStyle={{ flexGrow: 1 }} onScroll={scrollE} scrollEventThrottle={16}>
// ... scrollview content
</ScrollView>
</View>
);
};
It seems like my screen is flashing when scrolling. I think it has something to do with the re-renders everytime my border state changes. I tried changing it with use ref to this, but this does not work either:
const Screen = (props) => {
// ...
const bottom = useRef(0);
const scrollE = (event) => {
bottom.current = event.nativeEvent.contentOffset.y > 0 ? 1 : 0;
};
return (
<View style={{ flex: 1 }}>
<View style={{ flex: 0, borderBottomWidth: bottom.current, borderBottomColor: 'black' }}>
<Text>HEADER</Text>
</View>
<ScrollView style={{ flex: 1 }} contentContainerStyle={{ flexGrow: 1 }} onScroll={scrollE} scrollEventThrottle={16}>
// ... scrollview content
</ScrollView>
</View>
);
};
I do not need a "sticky" header that resizes, I only want the border bottom width to change.

Answer 1

I would do it with animated API, hope this helps
const Screen = (props) => {
const scrollY= new Animated.Value(0)
const scrollE = (event) => {
Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }],{ useNativeDriver: true })
};
const bottom = scrollY.interpolate({
inputRange: [0, 10],
outputRange: [1, 0],
})
return (
<View style={{ flex: 1 }}>
<View style={{ flex: 0, borderBottomWidth: bottom, borderBottomColor: 'black' }}>
<Text>HEADER</Text>
</View>
<ScrollView style={{ flex: 1 }} contentContainerStyle={{ flexGrow: 1 }} onScroll={scrollE} scrollEventThrottle={16}>
// ... scrollview content
</ScrollView>
</View>
);
};