CODEWITHSUNDEEP
javascriptreactjsreact-nativecomponents
GoreDefex
GoreDefex

Reputation: 1531

React Native SectionList scrollToLocation is not a function

What I have tried (skip if you don't care or need the info)

I am using the RN SectionList and I am running RN V-0.44.0. I am trying to make a simple chat window in my app using this section list and I need the ability to scroll to the bottom whenever anything new comes in. Recently I was using the react-native-reversed-flat-list component found here, which worked really well, but then I decided that I needed to show date section headers instead of just spilling out all messages.

I tried using the "flip" transform scaleY implementation (found here) which causes the list to render from the bottom up (which would have been sooo sweet). However, when you add in the flip style to the section list, the section headers and the conversation rows like you're supposed to do, it causes all of the titles to be rendered at the bottom of a section instead of the top. This is obviously undesirable as far as UI/UX goes.

E.g: if it "should" render like this... [section-title | message | message | message], it would end up rendering on the screen like this instead... [message | message | message | section-title]

Problem

I have since decided to do the leg work and just control the scroll to bottom myself and here's where things became strange. For whatever reason the function scrollToLocation is not working and gives me the red screen of death saying that "scrollToLocation is not a function". I have used this function in the past with the RN FlatList component and it worked just fine. It is in-fact supposed to be an accepted method on this component.

Also, since these both extend the VirtualizedList component I should be able to use the scrollToEnd function, but I get the same thing.

I really don't want to have to save the height of the outer container and inner container onLayout and then use the difference to scroll to the bottom of the ScrollView... this way is so much more elegant.

Heres my code...

renderConversation() {
    if(this.state.dataSource.length > 0) {
        return (
            <View style={{ height: (this.props.display.height - headerBarHeight - 35) }}>
                <SectionList
                    ref={ref => { this.messagesSectionListRef = ref; }}
                    sections={this.state.dataSource}
                    stickySectionHeadersEnabled={false}
                    showsVerticalScrollIndicator={false}
                    showsHorizontalScrollIndicator={false}
                    renderItem={this.renderMessageRow.bind(this)}
                    keyExtractor={(item, index) => `message_${index}`}
                    renderScrollComponent={this.renderScrollComponent.bind(this)}
                    renderSectionHeader={this.renderMessageSectionHeader.bind(this)}
                    onContentSizeChange={(newWidth, newHeight) => {
                        let sectionIndex = (this.state.dataSource.length - 1);
                        let itemIndex = this.state.dataSource[sectionIndex].data.length - 1;

                        this.messagesSectionListRef.scrollToLocation({ 
                            itemIndex,
                            sectionIndex,
                            animated: false,
                        });
                    }}
                    style={[
                        styles.conversationBox,
                        { width: this.props.display.width - mainContainerSideMargins }
                    ]} />
            </View>
        );

    } else {
        return null;
    }
}


//Flip style implementation
flip: {
    transform: [{ scaleY: -1 }]
}

Upvotes: 2

Views: 6062

Answers (1)

dhorelik
dhorelik

Reputation: 1507

scrollToLocation wasn't available for SectionList in the RN version you are using. Check the 0.44 docs

I suggest you run the RN update, the feature is there in 0.45. If for any reason that's not an option in your case, you can create a custom RN build with the changes required to make scrollToLocation work. I wouldn't recommend that approach, though.

Upvotes: 1

Related Questions