Animated - status bar height

App.js

import React, { useRef, useEffect } from 'react';
import PropTypes from 'prop-types';
import { View, Text, StyleSheet, Animated, StatusBar } from 'react-native';

const HEADER_MAX_HEIGHT = 100;
const HEADER_MIN_HEIGHT = 35;
const HEADER_SCROLL_DISTANCE = HEADER_MAX_HEIGHT - HEADER_MIN_HEIGHT;

const styles = StyleSheet.create({
  fill: {
    flex: 1,
  },
  row: {
    height: 40,
    margin: 16,
    backgroundColor: '#D3D3D3',
    alignItems: 'center',
    justifyContent: 'center',
  },
  header: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    backgroundColor: '#03A9F4',
    overflow: 'hidden',
  },
  bar: {
    marginTop: 28,
    height: 32,
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    backgroundColor: 'transparent',
    color: 'white',
    fontSize: 18,
  },
  scrollViewContent: {
    marginTop: 0,
  },
});

const data = Array.from({ length: 30 });

const ScrollableHeader = () => {
  const animatedScrollYValue = useRef(new Animated.Value(0)).current;
  const headerHeight = animatedScrollYValue.interpolate({
    inputRange: [0, HEADER_SCROLL_DISTANCE],
    outputRange: ["green", "white"],
    extrapolate: 'clamp',
  });
  return (
    <View style={styles.fill}>
      <StatusBar translucent
                 backgroundColor={"transparent"}
                 barStyle={"dark-content"}/>

      <Animated.ScrollView
        style={styles.fill}
        contentContainerStyle={styles.scrollViewContent}
        scrollEventThrottle={16}
        onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: animatedScrollYValue } } }])}
      >
        <View style={{paddingTop: HEADER_MIN_HEIGHT + 12, height: (HEADER_MAX_HEIGHT),
          backgroundColor: 'green', flexDirection: 'row', paddingBottom: 12, paddingHorizontal: 12}}>
          <View style={{flex: 1, backgroundColor: 'tomato'}}/>
          <View style={{flex: 4, backgroundColor: 'lightblue'}}/>
        </View>
        <View style={styles.scrollViewContent}>
          {data.map((_, i) => (
            <View key={i} style={styles.row}>
              <Text>{i}</Text>
            </View>
          ))}
        </View>
      </Animated.ScrollView>
      <Animated.View style={[styles.header,{height: 35, backgroundColor: headerHeight}]}/>
    </View>
  );
};

ScrollableHeader.propTypes = {
  navigation: PropTypes.shape({
    navigate: PropTypes.func.isRequired,
  }).isRequired,
};

export default ScrollableHeader;