React-native-collapsible: Regression: Content is laid out repeatedly during expand animation (#175)

Created on 27 Jul 2020 · 3Comments · Source: oblador/react-native-collapsible

Original bug described in #175; I'm opening this one because I intend to submit a PR that fixes it without causing the issue described in #197.

Copying content of original bug below for convenience.

I am trying to use <Collapsible /> with <Text />. Everything works fine except one thing: text layout changes while animation is in progress.

The result looks pretty janky:
current

The expand animation looks much better if the content is laid out just once:
improved

Source

brettdh

Most helpful comment

@brettdh @mrKorg guys, got the same issues today. Fixed both with just a parent container with flex: 1 and that's it.

const renderContent = section => {
  return (
    <View style={styles.contentContainer}> // <=== flex: 1
      <Text style={styles.content}>{section.text}</Text>  // <=== text styles
    </View>
  )
}

isnifer on 6 Oct 2020

👍3

All 3 comments

Hi @brettdh
I have the same problem, so I updated "react-native-collapsible" from "1.5.2" to "1.5.3",
And it works with Text tag. Thanks.
But this issue have some other bug (iOs only).

I need render HTML at collapsible component. I use react-native-render-html. All HTML blocks are cropped.

Code like this:
<Collapsible collapsed={isCollapsed}> <View style={style.itemContent}> <HTML html={content} baseFontStyle={{...style.itemFont, ...typography[FONT_SIZES.SMALL_TEXT]}} onLinkPress={(evt, href) => Linking.openURL(href)} /> </View> </Collapsible>

And when I just add <Text /> inside Collapsible, it works fine, without cropping.

mrKorg on 29 Jul 2020

👍1

@brettdh @mrKorg guys, got the same issues today. Fixed both with just a parent container with flex: 1 and that's it.

const renderContent = section => {
  return (
    <View style={styles.contentContainer}> // <=== flex: 1
      <Text style={styles.content}>{section.text}</Text>  // <=== text styles
    </View>
  )
}

isnifer on 6 Oct 2020

👍3

This should be fixed in 1.6.0. Can you verify?