React-native-collapsible: Wrong calculations & cut off text

[mxmtsk]

When using padding within the content it seems that text get's cut off so I assume something is calculated wrong. See the last word in the screenshot:

Also, a weird space is visible below the expanded content. This get's especially visible in the last item of an accordion:

This is my code:

class HelpIndex extends React.Component {
  static navigationOptions = {
    headerTitle: "Hilfe",
  };

  _renderSectionTitle(section) {
    return <View style={styles.content} />;
  }

  _renderHeader(section) {
    return (
      <View style={styles.header}>
        <Txt medium style={styles.headerText}>{section.title}</Txt>
      </View>
    );
  }

  _renderContent(section) {
    return (
      <View style={styles.content}>
        <View style={styles.contentInner}>
          <Txt style={styles.body}>{section.body}</Txt>
        </View>
      </View>
    );
  }

  render() {
    return (
      <Container>
        <ScrollContainer withPadding>
            <Accordion
              sections={faq}
              renderSectionTitle={this._renderSectionTitle}
              renderHeader={this._renderHeader}
              renderContent={this._renderContent}
              touchableProps={{
                underlayColor: 'transparent',
              }}
            />
        </ScrollContainer>
      </Container>
    );
  }
}

Applied styles:

export default StyleSheet.create({
  content: {
    backgroundColor: 'rgba(57,47,82,0.1)',
  },
  contentInner: {
    padding: 20,
  },
  container: {
    backgroundColor: '#fff',
  },
  headerText: {
    fontSize: 16,
    lineHeight: 24,
    color: '#59568B',
  },
  header: {
    padding: 20,
    borderBottomWidth: 1,
    borderBottomColor: 'rgba(57,47,82,0.1)',
  },
  body: {
    fontSize: 14,
    lineHeight: 22,
    color: '#392F52',
  },
});

[iRoachie]

Hey @mxmtsk beautiful design by the way. You think you could create a working example on https://snack.expo.io?

[mxmtsk]

Hey @iRoachie thanks, haha!

You can find the snack here:
https://snack.expo.io/@mxmtsk/collapsible-test

[Taglohner]

Hi mxmtsk, in fact I'm having the same issue with margin, I managed to arrange my view using padding instead.

[nguyenvanphuc2203]

i have same issue

[mxmtsk]

@Taglohner I haven't used any margin though...
@iRoachie Did you have a chance to take a look at this? We're close to rolling out our app and this is one of the last bugs we encounter

[iRoachie]

This is such a weird bug, seems like it's an issue with lineHeight, cause without setting it, it works as expected.

Everything seems to work after adding flex: 1 to the contentInner style. https://snack.expo.io/rJj30SMEQ

[WarHatch]

@mxmtsk are you sure this is not just a ScrollContainer issue? I had the same problem recently where I passed padding to style instead of contentContainerStyle.
Here's the link to the ScrollContainer issue

[mxmtsk]

@iRoachie I can confirm that your "workaround" does work, so the issue is resolved for me (but maybe not for this library in general) - thanks!

@WarHatch Yes I'm sure, I'm not passing any styling to ScrollView in my component

[iRoachie]

Awesome glad I could help. Not sure how we could fix in the future, but I'll look into it more closely if someone else brings it up. Beautiful app man!

[mxmtsk]

@iRoachie Thank you very much. Feel free to add it as an example for the component of how it can be styled if you like it so much.

[iRoachie]

Sure thing @mxmtsk let me know when your app goes live!

[gilshaan]

Using accordion with react-native-collapsible will not dynamically change its content height.
I used a flatlist inside accordion and faced similar problem.. I solved it by setting a flag and re-rendering the view of accordion.

This is my flatlist.
<FlatList
data={section.content}
renderItem={this.renderItem}
extraData={this.state.refresh}
ListEmptyComponent={this.ListEmptyView}
/>

I re-rendered my accordion view like this when i add new content to flatlist.
{this.state.refresh ? (
<View style={styles.flatlistMainContainer}>
<Accordion
sections={this.state.accordionArray}
activeSections={this.state.activeSections}
renderHeader={this.renderAccordionHeader}
renderContent={this.renderAccordionItem}
onChange={this._updateSections}
touchableComponent={TouchableOpacity}
/>
</View>
) : null}

When i make any change in its content dynamically i will set the flag as :
this.setState({ refresh: false }, () => {
this.setState({ refresh: true });
});

By doing like this component refresh its content height. Or instead of using accordion with react-native-collapsible use nested flatlist.

May be this issue will fix in coming updates.

[Youn-ha]

For anyone suffering with this strange bug...
I'm using Styled Components with React Native,
and giving flex: 1 styling to content container didn't work.

Instead, this one worked.

  flex: 1;
  flex-direction: row;
  flex-wrap: wrap;

Hope this can help somebody using Styled Components.