Version 1.6.2 stops working on react-native 0.74.5

[outaTiME]

Hello there,
a while ago I updated to the new version and it stopped working on react-native 0.74.5, I do not know if it is something expected but at the moment I left forced to the previous version that still works perfectly.

v1.6.1	v1.6.2

See how in the new version (1.6.2) as soon as the screen loads nothing is displayed and should do as seen on version 1.6.1.

Note: ignoring the warning below is a behavior of my application.

[oblador]

Hmm, probably caused by #475

Do you have a small reproduction of this issue?

[18jad]

Same for me I had to downgrade to 1.6.1 for it to work again

[nlarif]

Same issue for me 1.6.2 is no longer working with Expo 51

[thehellmaker]

Same Issue for me

[Abdulazeez-98]

Same issue for me. It occurred after I updated to Expo 51 SDK (react native 0.74).
The issue is exactly the same as the OP. The view is not rendered initially (when 'collapsed' is set to false), you must set it to true then to false for it to show the content.

[oliviercperrier]

Same issue with 1.6.1. if collapsed is default to true, content is not expanded. This was working before upgrading to react-native 0.74.5

[nijatkazimliPG]

Had to rollback to 1.5.2. (You might lose some features).
NOTE:
Expanding and collapsing very quickly will throw an error: this.contentHandle.getNode() is not a function.
The ref is basically is the reference to Animated.View, for which getNode() does not work anymore. Instead you can call .measure(...) directly on the ref. So, you should patch the package.
From:

To:

[ElicaInc]

Same issue for me on react-native 0.73.9 with 1.6.2. 1.6.1 works well.

[truph01]

RCA:

In

react-native-collapsible/Collapsible.js

Line 191 in 038f436

height: hasKnownHeight ? height : 0,

Height will be 0 if hasKnownHeight is false. But hasKnownHeight is true only when users expand options (collapsed change from true to false)

react-native-collapsible/Collapsible.js

Line 45 in 038f436

this._toggleCollapsed(this.props.collapsed);

In case the collapse is false initially, we should show the content, but we don’t have the logic to measure content -> hasKnownHeight is false -> height is 0

Solution:

We should trigger _toggleCollapsed in componentDidMount or _handleLayoutChange if this.props.collapsed is false

  componentDidMount(){
    if(!this.props.collapsed){
      this._toggleCollapsed(this.props.collapsed)
    }
  }

[truph01]

@oblador What do you think about my solution above?

[Kreshnik]

Same issue.

[Pujan92]

In case the collapse is false initially, we should show the content, but we don’t have the logic to measure content

@truph01 I agree with the RCA, initially we don't have a logic to measure the content height and due to that height will remain 0 initially.

componentDidMount(){
 if(!this.props.collapsed){
   this._toggleCollapsed(this.props.collapsed)
 }
}

As proposed I think either we need to call function _toggleCollapsed or we can call _measureContent to avoid animation.

@truph01 can you plz raise a PR, @oblador will review it there.

[truph01]

@oblador @Pujan92 PR is ready to review

[hvq1919]

RCA:

In

react-native-collapsible/Collapsible.js

Line 191 in 038f436

height: hasKnownHeight ? height : 0,

Height will be 0 if hasKnownHeight is false. But hasKnownHeight is true only when users expand options (collapsed change from true to false)

react-native-collapsible/Collapsible.js

Line 45 in 038f436

this._toggleCollapsed(this.props.collapsed);

In case the collapse is false initially, we should show the content, but we don’t have the logic to measure content -> hasKnownHeight is false -> height is 0

Solution:

We should trigger _toggleCollapsed in componentDidMount or _handleLayoutChange if this.props.collapsed is false

  componentDidMount(){
    if(!this.props.collapsed){
      this._toggleCollapsed(this.props.collapsed)
    }
  }

Thank you so much.

[sentry0]

Here is a diff based on the PR @Pujan92 was kind enough to file.

index dc4d3b8..d69d1e7 100644
--- a/node_modules/react-native-collapsible/Collapsible.js
+++ b/node_modules/react-native-collapsible/Collapsible.js
@@ -53,6 +53,12 @@ export default class Collapsible extends Component {
 
   contentHandle = null;
 
+  componentDidMount() {
+    if (!this.props.collapsed) {
+      this._measureContent((height) => this.state.height.setValue(height));
+    }
+  }
+
   _handleRef = (ref) => {
     this.contentHandle = ref;
   };```

[acidealista]

In my case, I encountered a crash when rotating the device to landscape mode under specific circumstances. The crash occurred if I opened a modal from the page where the accordion component is used, and the modal supports landscape orientation. To prevent this, I had to add an additional check to the patch. Without this fix, rotating the device while the modal is open causes the app to crash.

+  componentDidMount() {
+    if (!this.props.collapsed) {
+      this._measureContent((height) => height != null && this.state.height.setValue(height));
+    }
+  }
+