search

oblador / react-native-collapsible

Animated collapsible component for React Native, good for accordions, toggles etc
MIT License
2.43k stars 453 forks source link

Regression: Content is laid out repeatedly during expand animation (#175) #362

Open brettdh opened 4 years ago

brettdh commented 4 years ago

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

mrKorg commented 4 years ago

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. image Code like this: `

Linking.openURL(href)} />

`

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

isnifer commented 3 years ago

@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>
  )
}
oblador commented 3 years ago

This should be fixed in 1.6.0. Can you verify?