Changing height if the content is dynamically loaded 1.6.2

[map32]

People have already mentioned 1.6.2 not working if collapsed is default to false, which is fixable but I also had to show a dynamically loaded content while collapsed is default false, which does not work because the component is loaded when the data isn't loaded yet and the height is calculated right then. I made the component accept an optional key prop which if changed recalculates the height if the component is open.

index.d.ts file:

   * Render children in collapsible even if not visible
   *
   * @default true
   */
  renderChildrenCollapsed?: boolean;

  /**
   * Check the height of children again and change height if key is changed
   *
   * @default undefined
   */
  _key?: string | number | boolean | undefined;

  /**
   * Optional styling for the container
   */
  style?: StyleProp<ViewStyle>;

Collapsible.js file:

  _componentDidUpdate(prevProps) {
    if (prevProps.collapsed !== this.props.collapsed) {
      this._toggleCollapsed(this.props.collapsed);
    } else if (
      this.props.collapsed &&
      prevProps.collapsedHeight !== this.props.collapsedHeight
    ) {
      this.state.height.setValue(this.props.collapsedHeight);
+    } else if (prevProps._key !== undefined && this.props._key !== undefined && prevProps._key !== this.props._key) {
+      if (!this.props.collapsed) {
+        this._measureContent((height) => height != null && this.state.height.setValue(height));
+      }
+    }
  }

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

now if the collapsible is open it will automatically change height if the content of the children changes

[dgreasi]

Same issue for me. The above worked fine.

Dependencies:

"react": "19.0.0",
"react-native": "^0.78.2",
"react-native-collapsible": "1.6.2",