Animated.js

import React, { useState } from 'react';
import {
  View, Text, Animated, StyleSheet, TouchableWithoutFeedback, ScrollView,
} from 'react-native';
import PropTypes from 'prop-types';

export default function Home() {
  const [animated, setAnimated] = useState(new Animated.Value(0));

  const animatedEvent = {
    backgroundColor: animated.interpolate({
      inputRange: [0, 3000],
      outputRange: ['blue', 'red'],
    }),
  };

  return (
    <ScrollView
      scrollEventThrottle={16}
      onScroll={(e) => {
        animated.setValue(e.nativeEvent.contentOffset.y);
      }}
    >
      <View style={styles.container}>
        <Animated.View
          style={[styles.box, animatedEvent]}
        />
      </View>
    </ScrollView>
  );
}

Home.propTypes = {
   navigation: PropTypes.object , // eslint-disable-line
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    width: '100%',
    height: 3000,
    backgroundColor: 'blue',
  },
});