From 49f6fc94e3890339e615c9d1dcffd7313fbc6719 Mon Sep 17 00:00:00 2001
From: chris-divvito <chris@divvito.com>
Date: Wed, 29 Aug 2018 12:58:38 +1000
Subject: [PATCH 1/4] Handle rapid changes to collapsed prop

I had an issue while using a collapsible that was to be collapsed while the keyboard was showing. When the device (iPhone X in this case) was rotated, the following series of events unfolds:
1. `KeyboardWillHide` event emitted
2. We pass `collapsed: false` to the `<Collapsible/>`
3. `_toggleCollapsed(false)` -> `_measureContent()` starts
4. `KeyboardWillShow` event emitted
5. We pass `collapsed: true` to the `<Collapsible/>`
6. `_toggleCollapsed(false)` -> `_transitionToHeight(0)`
7. measuring finishes
8. `_transitionToHeight(contentHeight)` is started due to callback from _measureContent
9. content now has a height, even though it has `collapsed: true` prop.

I'm not altogether sure why on iOS react native fires the KeyboardWillHide and KeyboardWillShow events one after the other when the device is rotated, but that seems to be the case.

The attached change makes the behaviour, instead of assuming that after measuring, the content should be shown uncollapsed; that after measuring the content should be shown in whatever state the collapsed property is once measuring is completed. Other than resolving my own issue it should work for other cases where the property changes rapidly.
---
 Collapsible.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/Collapsible.js b/Collapsible.js
index 06e8a3a..53495e1 100644
--- a/Collapsible.js
+++ b/Collapsible.js
@@ -95,6 +95,11 @@ export default class Collapsible extends Component {
     );
   }
 
+  _afterMeasure = () => {
+    this._toggleCollapsed(this.props.collapsed);
+  }
+
+
   _toggleCollapsed(collapsed) {
     if (collapsed) {
       this._transitionToHeight(this.props.collapsedHeight);
@@ -104,9 +109,7 @@ export default class Collapsible extends Component {
       }
       return;
     } else {
-      this._measureContent(contentHeight => {
-        this._transitionToHeight(contentHeight);
-      });
+      this._measureContent(this._afterMeasure);
     }
   }
 

From 9391dd9e0a4d513e1a842665140548469dfa38d0 Mon Sep 17 00:00:00 2001
From: chris-divvito <chris@divvito.com>
Date: Wed, 29 Aug 2018 13:05:29 +1000
Subject: [PATCH 2/4] prettier compliance

---
 Collapsible.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/Collapsible.js b/Collapsible.js
index 53495e1..fab7bda 100644
--- a/Collapsible.js
+++ b/Collapsible.js
@@ -97,8 +97,7 @@ export default class Collapsible extends Component {
 
   _afterMeasure = () => {
     this._toggleCollapsed(this.props.collapsed);
-  }
-
+  };
 
   _toggleCollapsed(collapsed) {
     if (collapsed) {

From b4fd572693ae4515467a4358ca36e40cb310fe2a Mon Sep 17 00:00:00 2001
From: chris-divvito <chris@divvito.com>
Date: Wed, 5 Sep 2018 15:34:15 +1000
Subject: [PATCH 3/4] Fix a possible loop

---
 Collapsible.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/Collapsible.js b/Collapsible.js
index fab7bda..08ba204 100644
--- a/Collapsible.js
+++ b/Collapsible.js
@@ -96,7 +96,10 @@ export default class Collapsible extends Component {
   }
 
   _afterMeasure = () => {
-    this._toggleCollapsed(this.props.collapsed);
+    const {collapsed, collapsedHeight} = this.props;
+    const {contentHeight} = this.state;
+    
+    this._toggleCollapsed(collapsed ? collapsedHeight : contentHeight);
   };
 
   _toggleCollapsed(collapsed) {

From 7feaaa6ef69b6eed9be7579ef795f54bf7eb78d9 Mon Sep 17 00:00:00 2001
From: chris-divvito <chris@divvito.com>
Date: Wed, 5 Sep 2018 15:36:24 +1000
Subject: [PATCH 4/4] Update Collapsible.js

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

diff --git a/Collapsible.js b/Collapsible.js
index 08ba204..fa68d3e 100644
--- a/Collapsible.js
+++ b/Collapsible.js
@@ -99,7 +99,7 @@ export default class Collapsible extends Component {
     const {collapsed, collapsedHeight} = this.props;
     const {contentHeight} = this.state;
     
-    this._toggleCollapsed(collapsed ? collapsedHeight : contentHeight);
+    this._transitionToHeight(collapsed ? collapsedHeight : contentHeight);
   };
 
   _toggleCollapsed(collapsed) {