React-native-collapsible: _mesaureContent called infinite times when collapsed default value is false

[ChildishDanbino]

Our current implementation is using the Collapsible component in a SectionList. I've noticed that specifically on the Iphone 6s Plus that when collapsed is defaulted to false (open state) and the component mounts the _mesasureContent is called in an infinite loop. I've traced the bug specifically the following line.

``` requestAnimationFrame(() => {
if (!this.contentHandle) {
this.setState(
{
measuring: false,
},
() => callback(this.props.collapsedHeight)
);
}

It seems that the ref of the component is not set yet and thus causing the infinite loop as measuring keeps toggling from true to false in reach render I've logged out. 

Below is a GIF of the error happening (sorry for the poor FPS - is is very fast flickering locally):

![loop](https://user-images.githubusercontent.com/10039096/38898363-c334ce78-4262-11e8-92c8-2fa47b7672b3.gif)

My temporary fix is to set set the viewHeight one time in state and then use that to prevent onLayout from being fired. I am willing to open a PR but wanted to get thoughts prior to doing so.

this._measureContent(contentHeight => {
this.setState(({ viewHeight }) => {
return {
viewHeight: viewHeight || contentHeight,
contentHeight,
height: new Animated.Value(contentHeight)
}
});
});
};

return (
ref={this._handleRef}
style={[this.props.style, contentStyle]}
onLayout={this.state.animating || viewHeight ? undefined : this._handleLayoutChange}
>
{this.props.children}


);

[iRoachie]

Will check this over the weekend.

[ggepenyan]

Same here for me
It toggles collapse infinite times. untill collapsed is true

[ggepenyan]

can it be because of container is scrollView?

[ChildishDanbino]

@ggepenyan it could be. @iRoachie - I ended up taking some of your source code and built my own custom component for the time being. I am going to post if below in case it helps you identify the source of the bug. I confirmed on our project atleast this was able to fix the issue.

```import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Animated } from 'react-native';

class Collapsible extends Component {
constructor(props) {
super(props);
this.state = {
height: new Animated.Value(0),
measuredHeight: 0,
contentHeight: 0,
animating: false
};

this.handleLayoutChange = this.handleLayoutChange.bind(this);

}

componentWillReceiveProps({ collapsed }) {
const expandedOrCollapsed = this.props.collapsed !== collapsed;
if (expandedOrCollapsed && !this.state.animating) {
this.toggleCollapsed(collapsed);
}
}

handleLayoutChange({ nativeEvent }) {
this.setState({ measuredHeight: nativeEvent.layout.height }, () => {
if (nativeEvent.layout.height && !this.state.animating) {
this.toggleCollapsed(false);
}
});
}

toggleCollapsed(collapsed) {
if (collapsed) {
this.transitionToHeight(this.props.collapsedHeight);
} else if (this.state.measuredHeight) {
this.transitionToHeight(this.state.measuredHeight);
}
}

transitionToHeight(height) {
const { duration } = this.props;
if (this.animation) {
this.animation.stop();
}

this.setState({ animating: true });
this.animation = Animated.timing(this.state.height, {
  toValue: height,
  duration
}).start(() => this.setState({ animating: false }));

}

render() {
const { collapsed } = this.props;
const { height, measuredHeight } = this.state;
const hasKnownHeight = measuredHeight || collapsed;
const style = hasKnownHeight && { overflow: 'hidden', height };
return (
{this.props.children}


);
}
}

Collapsible.propTypes = {
children: PropTypes.node.isRequired,
collapsed: PropTypes.bool,
collapsedHeight: PropTypes.number,
duration: PropTypes.number
};

Collapsible.defaultProps = {
align: 'top',
collapsed: true,
collapsedHeight: 0,
duration: 300
};

export default Collapsible;
```

[iRoachie]

Hey guys I'm wondering if this was a side effect when https://github.com/oblador/react-native-?collapsible/pull/147 was merged. Can you try using 0.10.0 and let me know if the issue still occurs?

[ggepenyan]

Hi everyone )
I tried 0.10.0 and it worked for me. Hope bug will be fixed in future. Thank you very much for fast and detailed response @iRoachie

[iRoachie]

Alright will revert that change, do a patch fix. Look out for 0.11.2 today

[iRoachie]

Fixed in 0.11.2, thanks for pointing out guys