React-native-collapsible: Broken with latest react-native (0.36)

[tume]

Upgraded from 0.34 to 0.36 and all my collapsible elements stay collapsed all the time. Tested also with example from this projects and saw the same behaviour or lack of it.

Didn't have too much time to investigate yet but with limited testing it seems that height is always zero in onLayout callback.

[oblador]

Yes, i'm aware. Unfortunately this is because of a breaking change (not sure if intended or not) in the native implementation of measure() which will no longer report sizes outside of the parent view. I can't find any issues about it, so you're welcome to report it. If it's not fixed in core this would require a substantial refactor.

[kidqueb]

The quick fix is to use LayoutAnimation instead of Animated and storing the content's original height. Then you just set { overflow: 'hidden' } when collapsed: false and { overflow: 'hidden' , height: 0 } when collapsed: true

I wrote a custom component around that idea. I'll try tinkering with a PR if I can find some time next week.

[SuperDuperMartin]

a temporary fix for this is to set {overflow: 'scroll'} on line 99 in Collapsible.js

[satya164]

Hey @oblador , can you link me to the commit which introduced this change?

[zoharlevin]

following

[oblador]

@satya164: I did try to find the offending commit at the time, but didn't find it immediately and don't have a ton of time at hand currently. I know that the css-layout have gotten pretty substantial (and breaking) changes in the flexbox implementation lately that I suspect is the culprit.

[satya164]

@oblador Hmm. Okies.

[zoharlevin]

@satya164
not 100% sure, but i think this is the commit 0a9b6be
it's mentioned in the breaking changes for 0.36

[oblador]

@tume In 0.37 there's quite a few CSSLayout associated bugfixes, are you still experiencing it with that version?

[tume]

Haven't have time to investigate yet. Can probably try later this week if no one beats me to it.

[tume]

Yeah still broken with 0.37 and also with 0.38-rc.0

[oblador]

A fix is landed internally at Facebook, but no ETA on when it's released in OSS just yet.

[yezongyang]

any solution for the latest rn

[oblador]

The fix was reverted https://github.com/facebook/css-layout/commit/204aba80b9818db0e9b6f6f74d9a2fd2580ede1c, no idea why.

[JonathanUsername]

We're having this issue with a similar component. Here's our quick and dirty workaround, using ScrollView:

<Animated.View style={{height: this.state.heightValue, overflow: 'hidden'}}>
    <ScrollView
        onContentSizeChange={this.setMaxHeight}
        scrollEnabled={false}
        showVerticalScrollIndicator={false}
        bounces={false}
        scrollsToTop={false}
        style={{flex: 1}}
    >
        <View style={{flex: 1}}>
            {this.props.children}
        </View>
    </ScrollView>
</Animated.View>

[simonsmith]

The fix is listed as going in 0.39 here - https://github.com/facebook/react-native/wiki/Breaking-Changes#039

[nicholeuf]

Thank you for the suggestion @SuperDuperMartin. If anyone runs into this issue and has already updated past RN 0.36, we have forked the repo and made the change. You can reference our fixed branch by declaring the following in your package.json.

"react-native-collapsible": "git://github.com/relayfoods/react-native-collapsible.git#collapsible-not-expanding-temp-fix"

Just be sure to switch back to the original library once RN releases the fix (0.39, based on https://github.com/facebook/react-native/issues/10603). We will not be actively maintaining that branch.

[SudoPlz]

React-native 0.39 is out, but I still have problems with the Collapsible. Any ideas?

[jgkim]

@SudoPlz That's because the fix has not landed in 0.39. Maybe 0.40? Currently don't know ETA.

[RemeJuan]

I just ran into this, should not of updated, I was on 0.34.1 and trying to go back is a bit of a pain, will have to rework my layout until FB fixes this, have tried @SuperDuperMartin's with no luck, while it does technically work, it kinda stuffs it up more.

[wootwoot1234]

I had the same issue. Ended up downgrading react native and waiting for a better fix.

On Dec 25, 2016, at 9:42 AM, Reme Le Hane [e-mail] wrote:

I just ran into this, should not of updated, I was on 0.34.1 and trying to go back is a bit of a pain, will have to rework my layout until FB fixes this, have tried @SuperDuperMartin's with no luck, while it does technically work, it kinda stuffs it up more.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or mute the thread.

[RemeJuan]

@wootwoot1234, how did you get it working again, I am unable to get past the 'cannot find variable process' error.

Installed 34.1, ran the upgrade again, dumped my node_modules folder, the whole shebang and still stuck. On leave now so I actually want to work on the thing, but this issue and other keeps me back down at 34.1.

[SudoPlz]

0.40 is here, was the issue resolved?

[RemeJuan]

@SudoPlz, nope and no update yet, you going to have to stick it at 0.35 until it gets fixed or rework your UI to no longer need the accordion

[oblador]

This got some attention a while back because of my fb post, once that passed it hasn't been worked on since AFAIK. I think the only way for it getting fixed is if we make it know that it's affecting a large chunk of users in the RN core issue or perhaps on product pains. I'm not comfortable with patching yoga myself as I don't know what broke internally (and am new to the code base).

[SudoPlz]

@oblador would you be kind enough to open an issue in react-native describing the problem the best you can? If anyone you're the one amongst us that knows most about react-native-collapsible so you can describe the problem much better than I can.
Also, if you open a product pain for this, I'll definitely upvote it...!
We've waited a long time for this fix.

[oblador]

I linked to the issue in my last comment, no use in creating a duplicate.

[iRoachie]

Hey, this issue has been inactive for long time and will be closed. If the issue still persists feel free to tag me to reopen.

[elie222]

I believe I'm still using a different branch of this package to get it
working. Does main npm package now work again?

On 21 Jul 2017 19:57, "Kyle Roach" [e-mail] wrote:

Closed #51 https://github.com/oblador/react-native-collapsible/issues/51.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/oblador/react-native-collapsible/issues/51#event-1174217982,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AC8oX3_Qya5fS4TbFURDl3mE-8YhiqsWks5sQNhmgaJpZM4KgW7Y
.