From 25d58184dcb5418ea1102244e4ccfbb74b9f22d7 Mon Sep 17 00:00:00 2001
From: Federico Cicerone <federico.cicerone@gmail.com>
Date: Fri, 23 Nov 2018 18:02:21 +0100
Subject: [PATCH 1/4] Fixed empty space on init scroll.

---
 Headroom.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/Headroom.js b/Headroom.js
index 519ee72..62545f4 100644
--- a/Headroom.js
+++ b/Headroom.js
@@ -21,8 +21,13 @@ export default class Headroom extends Component {
   _onScroll(event) {
     const currentOffset = event.nativeEvent.contentOffset.y
 
-    // Ignore scroll events outside the scrollview
-    if (currentOffset < 0 || currentOffset > (event.nativeEvent.contentSize.height - event.nativeEvent.layoutMeasurement.height)) {
+    const scrollOutside =
+      currentOffset < 0 ||
+      currentOffset >
+        event.nativeEvent.contentSize.height -
+          event.nativeEvent.layoutMeasurement.height
+    const scrollUnderHeader = currentOffset <= this.props.headerHeight
+    if (scrollOutside || scrollUnderHeader) {
       return
     }
 

From 0c989c9939a01aef0ca4ec528293e5daadc6fd0b Mon Sep 17 00:00:00 2001
From: Federico Cicerone <federico.cicerone@gmail.com>
Date: Tue, 4 Dec 2018 15:53:01 +0100
Subject: [PATCH 2/4] Animating position instead of height.

---
 Headroom.js | 50 +++++++++++++++++++++++++++++++-------------------
 1 file changed, 31 insertions(+), 19 deletions(-)

diff --git a/Headroom.js b/Headroom.js
index 62545f4..41e4c1b 100644
--- a/Headroom.js
+++ b/Headroom.js
@@ -1,24 +1,23 @@
 import React, { Component } from 'react' // eslint-disable-line no-unused-vars
 import {
-    Animated,
-    StyleSheet,
-    ScrollView,
-    Dimensions,
-    View,
+  Animated,
+  StyleSheet,
+  View
 } from 'react-native'
 
 export default class Headroom extends Component {
-  constructor(props) {
+  constructor (props) {
     super(props)
     this.state = {
-      height: new Animated.Value(this.props.headerHeight), // The header height
+      height: new Animated.Value(0), // The header top position
       visible: true, // Is the header currently visible
+      useNativeDriver: true
     }
     // How long does the slide animation take
     this.slideDuration = this.props.slideDuration || 400
   }
 
-  _onScroll(event) {
+  _onScroll (event) {
     const currentOffset = event.nativeEvent.contentOffset.y
 
     const scrollOutside =
@@ -31,23 +30,25 @@ export default class Headroom extends Component {
       return
     }
 
-    if ((this.state.visible && currentOffset > this.offset) ||
-        (!this.state.visible && currentOffset < this.offset)) {
+    if (
+      (this.state.visible && currentOffset > this.offset) ||
+      (!this.state.visible && currentOffset < this.offset)
+    ) {
       this._toggleHeader()
     }
 
     this.offset = currentOffset
   }
 
-  _toggleHeader() {
+  _toggleHeader () {
     Animated.timing(this.state.height, {
       duration: this.slideDuration,
-      toValue: this.state.visible ? 0 : this.props.headerHeight,
+      toValue: this.state.visible ? -this.props.HEADER_HEIGHT : 0
     }).start()
-    this.setState({visible: !this.state.visible})
+    this.setState({ visible: !this.state.visible })
   }
 
-  render() {
+  render () {
     const { headerComponent, ScrollableComponent } = this.props
     return (
       <View style={styles.container}>
@@ -55,11 +56,22 @@ export default class Headroom extends Component {
           onScroll={this._onScroll.bind(this)}
           {...this.props}
         >
-          <View style={{marginTop: this.props.headerHeight}}>
+          <View style={{ marginTop: this.props.headerHeight }}>
             {this.props.children}
           </View>
         </ScrollableComponent>
-        <Animated.View style={[styles.header, { height: this.state.height }]}>
+        <Animated.View
+          style={[
+            styles.header,
+            {
+              transform: [
+                {
+                  translateY: this.state.height
+                }
+              ]
+            }
+          ]}
+        >
           {headerComponent}
         </Animated.View>
       </View>
@@ -69,13 +81,13 @@ export default class Headroom extends Component {
 
 var styles = StyleSheet.create({
   container: {
-    flex: 1,
+    flex: 1
   },
   header: {
     position: 'absolute',
     top: 0,
     left: 0,
     right: 0,
-    overflow: 'hidden',
-  },
+    overflow: 'hidden'
+  }
 })

From 5cc64fd98b29f5b77703cb02b4077a4514f4438e Mon Sep 17 00:00:00 2001
From: Federico Cicerone <federico.cicerone@gmail.com>
Date: Tue, 4 Dec 2018 16:22:48 +0100
Subject: [PATCH 3/4] Fix invalid prop.

---
 Headroom.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Headroom.js b/Headroom.js
index 41e4c1b..e99d707 100644
--- a/Headroom.js
+++ b/Headroom.js
@@ -43,7 +43,7 @@ export default class Headroom extends Component {
   _toggleHeader () {
     Animated.timing(this.state.height, {
       duration: this.slideDuration,
-      toValue: this.state.visible ? -this.props.HEADER_HEIGHT : 0
+      toValue: this.state.visible ? -this.props.headerHeight : 0
     }).start()
     this.setState({ visible: !this.state.visible })
   }

From c9831cf525929a12314a2241cf57a7efd1777e56 Mon Sep 17 00:00:00 2001
From: Federico Cicerone <federico.cicerone@gmail.com>
Date: Mon, 4 Mar 2019 20:35:59 +0100
Subject: [PATCH 4/4] Force visibility on header.

---
 Headroom.js | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/Headroom.js b/Headroom.js
index e99d707..cd24622 100644
--- a/Headroom.js
+++ b/Headroom.js
@@ -1,9 +1,5 @@
 import React, { Component } from 'react' // eslint-disable-line no-unused-vars
-import {
-  Animated,
-  StyleSheet,
-  View
-} from 'react-native'
+import { Animated, StyleSheet, View } from 'react-native'
 
 export default class Headroom extends Component {
   constructor (props) {
@@ -17,6 +13,14 @@ export default class Headroom extends Component {
     this.slideDuration = this.props.slideDuration || 400
   }
 
+  componentWillReceiveProps (nextProps) {
+    const { forceVisible } = nextProps
+    if (forceVisible && !this.state.visible) {
+      this.setState({ visible: true })
+      this._toggleHeader()
+    }
+  }
+
   _onScroll (event) {
     const currentOffset = event.nativeEvent.contentOffset.y