Strange behavior of SectionList in React Native?

C

Coder3212018-06-01 14:33:50

Android

Coder321, 2018-06-01 14:33:50

I'm trying to make a standard sheet with users, though the sheet can be very large > 5000. Faced such a problem, if you add a ListHeaderComponent, then several items are initially rendered and there is a big delay, plus the scroll works terribly, an example with a header , an example without a header . Who has experienced this? What advice can you give? Maybe there are more productive solutions for large sheets?

<AnimatedSectionList
            initialNumToRender={10}
            renderSectionHeader={({ section }) => <SectionHeaderComponent title={section.key} />}
            sections={sections}
            style={styles.list}
        />

Section array example

[{
            title: '',
            data: [],
            renderItem: () => <ListItemComponent />
}]

class ListItemComponent extends PureComponent {
    render() {
        return <ListItem avatar>
            <Left>
                <Thumbnail source={require('../img/img1.png')} />
            </Left>
            <Body>
                <UiText style={{ fontSize: 16, color: '#000' }}>Test</UiText>
                <Text note>Test</Text>
            </Body>
        </ListItem>
    }
}

class SectionHeaderComponent extends PureComponent {
    render() {
        const { title } = this.props;
        return <Text>
            <UiText>{title}</UiText>
        </Text>
    }
}

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

D

Dmitry Alekseev, 2018-10-28
@Zatmil

In fact, everything is simple. I described this behavior in the RN channel in the telegram. Using require blocks the thread, hence the delay. You need to either load images over the network if it is an API, using, for example, the FastImage library, or add images to the assets of the platforms and connect them via links:
<Thumbnail source={{ uri: 'img1' }} />