diff --git a/example/Pages/BasicUsage.js b/example/Pages/BasicUsage.js
index d8ad8c3..07622aa 100644
--- a/example/Pages/BasicUsage.js
+++ b/example/Pages/BasicUsage.js
@@ -24,12 +24,9 @@ class BasicUsage extends React.Component {
           maxHeight={200}
           minHeight={MIN_HEIGHT}
           renderHeader={() => <Image source={require('../assets/NZ.jpg')} style={styles.image} />}
-          renderForeground={() =>
-            <View style={{ height: 150, justifyContent: 'center', alignItems: 'center' }}>
-              <TouchableOpacity onPress={() => console.log('tap!!')}>
-                <Text style={{ backgroundColor: 'transparent' }}>Tap Me!</Text>
-              </TouchableOpacity>
-            </View>}
+          renderForeground={() => <View />}
+          renderFixedForeground={() => <View />}
+          renderTouchableFixedForeground={() => <View />}
         >
           <View style={{ height: 1000 }}>
             <TriggeringView onHide={() => console.log('text hidden')}>
diff --git a/src/ImageHeaderScrollView.js b/src/ImageHeaderScrollView.js
index 455d7dd..a19f77d 100644
--- a/src/ImageHeaderScrollView.js
+++ b/src/ImageHeaderScrollView.js
@@ -122,10 +122,10 @@ class ImageHeaderScrollView extends Component<DefaultProps, Props, State> {
     ];
 
     return (
-      <Animated.View style={[styles.header, headerTransformStyle]}>
+      <Animated.View style={[styles.header, headerTransformStyle, { backgroundColor: 'red' }]}>
         {this.props.renderHeader()}
         <Animated.View style={overlayStyle} />
-        <View style={styles.fixedForeground}>
+        <View style={[styles.fixedForeground, { backgroundColor: 'blue' }]}>
           {this.props.renderFixedForeground()}
         </View>
       </Animated.View>
@@ -146,7 +146,7 @@ class ImageHeaderScrollView extends Component<DefaultProps, Props, State> {
       opacity: this.props.fadeOutForeground ? opacity : 1,
     };
     return (
-      <Animated.View style={[styles.header, headerTransformStyle]}>
+      <Animated.View style={[styles.header, headerTransformStyle, { backgroundColor: 'yellow' }]}>
         {this.props.renderForeground()}
       </Animated.View>
     );
@@ -171,7 +171,14 @@ class ImageHeaderScrollView extends Component<DefaultProps, Props, State> {
     };
 
     return (
-      <Animated.View style={[styles.header, styles.touchableFixedForeground, headerTransformStyle]}>
+      <Animated.View
+        style={[
+          styles.header,
+          styles.touchableFixedForeground,
+          headerTransformStyle,
+          { backgroundColor: 'orange' },
+        ]}
+      >
         {this.props.renderTouchableFixedForeground()}
       </Animated.View>
     );
@@ -200,7 +207,7 @@ class ImageHeaderScrollView extends Component<DefaultProps, Props, State> {
 
     const childrenContainerStyle = StyleSheet.flatten([
       { transform: [{ translateY: headerScrollDistance }] },
-      { backgroundColor: 'white', paddingBottom: maxHeight },
+      { backgroundColor: 'pink', paddingBottom: maxHeight },
       childrenStyle,
     ]);
 
@@ -211,10 +218,15 @@ class ImageHeaderScrollView extends Component<DefaultProps, Props, State> {
         onLayout={() => this.container.measureInWindow((x, y) => this.setState({ pageY: y }))}
       >
         {this.renderHeader()}
-        <Animated.View style={[styles.container, { transform: [{ translateY: topMargin }] }]}>
+        <Animated.View
+          style={[
+            styles.container,
+            { transform: [{ translateY: topMargin }], backgroundColor: 'black' },
+          ]}
+        >
           <ScrollView
             ref={ref => (this.scrollViewRef = ref)}
-            style={styles.container}
+            style={[styles.container, { backgroundColor: 'green' }]}
             scrollEventThrottle={16}
             onScroll={Animated.event([
               { nativeEvent: { contentOffset: { y: this.state.scrollY } } },