How would I change the opacity of sticky headers when pushed off-screen in react native

I've been trying to make the headers in my SectionList transition in opacity when pushed off-screen by another header but can't seem to figure out how to do it.

I've attempted to animate the headers opacity when the SectionList is scrolled with minimal success as I couldn't get the headers Y position to get the header to animate its opacity out at the right point and I'm not sure if it would work even if I could of obtained the Y position as I'm very new with react-native and typescript, though I have done a fair amount of javascript in the past.

Here's my current code:
SectionList

import React from "react";import { View, Text, TouchableOpacity, StyleSheet, SectionList } from "react-native";import PropTypes from 'prop-types';import MessageItem from "./MessageItem";import TimestampDivider from "./TimestampDivider";const renderSectionHeader = ({ section: { title } } : { section: { title: String } }) => {    return (<TimestampDivider text={title} />    );  }  const renderItem = (props: any) => {      return (<MessageItem        {...props.item}      />    );  }export default class SettingsList extends React.Component<any> {     constructor(props: any) {        super(props);    }    render() {      return (<SectionList        sections={this.props.sections}        style={{ flex: 1, width: '100%' }}        showsVerticalScrollIndicator={false}        bounces={false}        onEndReachedThreshold={0.5}        // ItemSeparatorComponent={StyledSearchItemSeparator}        keyExtractor={(it) => it}        renderItem={renderItem}        stickySectionHeadersEnabled={true}        renderSectionHeader={renderSectionHeader}      />      );    }}

Header (Being used as a timestamp thing for a chat app)

import React from "react";import { View, Text, TouchableOpacity, StyleSheet, Animated } from "react-native";import PropTypes from 'prop-types';export default class TimestampDivider extends React.Component<any> {     constructor(props: any) {        super(props);    }    render() {      return (<Animated.View style={[styles.view, {opacity: this.props.test}]}><Text style={styles.text}>{this.props.text || 'date'}</Text></Animated.View>      );    }}const styles = StyleSheet.create({    text: {        fontSize: 18,        color: '#fff',        justifyContent: 'center',        marginHorizontal: 10,        textAlign: 'center',    },    view: {        marginVertical: 10,        backgroundColor: '#777',        borderRadius: 90,        width: 100,        alignSelf: 'center',        height: 28,        justifyContent: 'center'    }})

So far this is the best way I've found to do it, however if there is a more logical way to do what I'm trying to do any tips would be much appreciated.

how it looks currently:gif example