renderSectionContent is cutting text

[patrick-tresp]

Hi there,

i have following method for renderSectionContent

const AccordionDetailsText = styled.Text`
  color: #4a4a4a;
  line-height: 20px;
  font-size: 14px;
  padding-bottom: 40px;
`

const renderSectionContent = (section: any) => {
    return (
      <AccordionDetailsText>
        {section.content}
      </AccordionDetailsText>
    )
  }

now everytime i collapse and open the react-native-collapsible/Accordion Section, Text is cut off and the overflow is hidden. Usually when opening it first time, it looks as expected. Closing and Opening each element leads to text cut off.

Has this happened to anyone also?

Cheers,

Patrick

[StIch0]

@patrick-tresp

I fix this problem
renderContent={renderContent}

const renderContent = (content: MyItem): ReactElement => { return <Text style={styles.description}>{content.description}</Text>; };

description: { fontSize: 14, lineHeight: 20, paddingBottom: 8, paddingLeft: 12, paddingRight: 12, width: width - 60 - 24 // I add this line }

Check width of your content and width of accordion

[GTSConserve]

+1

[jacklj]

I've had a similar problem when modifying the content while using the Simulator + Fast Refresh. The issue is that the content container's size is only calculated on open, not when the content changes (related issue here #420). To fix it, I just collapse the accordion item and then open it again.

[jacklj]

Actually, that's probably not the same issue - in the OP's case, perhaps wrap the content component in a <View>, rather than it just being a <Text> component