anim.js

import * as React from 'react';
import { Text, View, StyleSheet, Animated, FlatList, PlatformOS } from 'react-native';
import { Constants } from 'expo';

const HEADER_HEIHT = 55;

export default class App extends React.Component {
  data = new Array(20).fill(1);

  scrollY = new Animated.Value(0);

  render() {
    const translateY = this.scrollY.interpolate({
      inputRange: [-200, 0, 70],
      outputRange: [HEADER_HEIHT + 15 + 200, HEADER_HEIHT + 15, 20],
      extrapolate: 'clamp',
    });

    const elevation = this.scrollY.interpolate({
      inputRange: [0, 50, HEADER_HEIHT],
      outputRange: [0, 0, 3],
      extrapolate: 'clamp',
    })


    return (
      <View style={styles.container}>
        <Animated.View style={[styles.header, { elevation }]}>
          <Animated.View
            style={{
              width: 20,
              height: 20,
              backgroundColor: 'red',
              transform: [{ translateY }],
              zIndex: 2,
              borderRadius: 20,
            }}
          />
        </Animated.View>
        <Animated.FlatList
          data={this.data}
          ListHeaderComponent={() => (
            <View
              style={{
                backgroundColor: 'white',
                height: 50,
                alignItems: 'center',
                flex: 1,
                marginBottom: 20,
                zIndex: 0,
                elevation: 3,
              }}
            />
          )}
          renderItem={({ index }) => (
            <View style={styles.item}>
              <Text>{index}</Text>
            </View>
          )}
          onScroll={Animated.event(
            [{ nativeEvent: { contentOffset: { y: this.scrollY } } }],
            { useNativeDriver: PlatformOS === 'ios' }
          )}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: 'white',
  },
  item: {
    backgroundColor: 'white',
    padding: 30,
    marginBottom: 10,
    elevation: 0,
  },
  header: {
    height: HEADER_HEIHT,
    backgroundColor: 'white',
    alignItems: 'center',
    zIndex: 4,
  },
});