here is the full file, the code was stripped & some aspects were renamed for breviity

Category.js

import React, { PropTypes } from 'react';
import { View, Image, ScrollView, TouchableHighlight, Text, Animated } from 'react-native';
import images from '../../config/images';
import Icon from 'react-native-vector-icons/FontAwesome';
import styles from './styles';
import Loading from '../../components/Loading';
import settings from '../../config/settings';

export const HEADER_MAX_HEIGHT = 200;
const HEADER_MIN_HEIGHT = 0;
const HEADER_SCROLL_DISTANCE = HEADER_MAX_HEIGHT - HEADER_MIN_HEIGHT;

const Category = (props) => {

  const { expand, category, scrollY } = props;

  const headerHeight = scrollY.interpolate({
    inputRange: [0, HEADER_SCROLL_DISTANCE],
    outputRange: [HEADER_MAX_HEIGHT, HEADER_MIN_HEIGHT],
    extrapolate: 'clamp'
  });

  // const imageOpacity = scrollY.interpolate({
  //   inputRange: [0, HEADER_SCROLL_DISTANCE / 2, HEADER_SCROLL_DISTANCE],
  //   outputRange: [1, 1, 0],
  //   extrapolate: 'clamp'
  // });

  const imageTranslate = scrollY.interpolate({
    inputRange: [0, HEADER_SCROLL_DISTANCE],
    outputRange: [0, -50],
    extrapolate: 'clamp'
  });

  const subCategories = category.children.map((subCategory, index) => (
    <TouchableHighlight onPress={expand.bind(this, subCategory)} style={styles.link} key={index}>
        <View style={styles.linkContent}>
          <Text style={styles.linkText}>{subCategory.name}</Text>
          <Icon name="chevron-right" size={styles.icon.fontSize} color={styles.icon.color} />
        </View>
    </TouchableHighlight>
  ));

  return (
    <View style={styles.container}>
      <ScrollView
        automaticallyAdjustContentInsets={false}
        style={styles.fill}
        contentContainerStyle={styles.scrollViewContent}
        scrollEventThrottle={16}
        onScroll={Animated.event(
          [{nativeEvent: {contentOffset: {y: scrollY}}}]
        )}>
        {subCategories}
      </ScrollView>
      <Animated.View style={[styles.header, {height: headerHeight}]}>
        <Animated.Image
          style={[
            styles.backgroundImage,
            {transform: [{translateY: imageTranslate}]},
          ]}
          source={{uri: settings.serverURL + category.images[0].filename}}
        />
      </Animated.View>
    </View>
  );

}

Category.propTypes = {
  category: PropTypes.object.isRequired
}

export default Category;

styles.js

import { StyleSheet } from 'react-native';
import { HEADER_MAX_HEIGHT } from './Category';

export default StyleSheet.create({
    container: {
      marginTop: 65,
      flex: 1
    },
    image: {
      width: null,
      height: 150
    },
    link: {
      height: 40,
      padding: 10,
      borderBottomWidth: 1,
      borderColor: '#ccc'
    },
    linkContent: {
      flexDirection: 'row'
    },
    linkText: {
      color: '#555',
      flexGrow: 1
    },
    icon: {
      fontSize: 26,
      color: '#ccc'
    },
    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
    },
    fill: {
      flex: 1,
    },
    scrollViewContent: {
      // marginTop: 200,
      marginTop: HEADER_MAX_HEIGHT
    },
    backgroundImage: {
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      width: null,
      // height: 200,
      height: HEADER_MAX_HEIGHT,
      resizeMode: 'cover'
    }
});