React-native: Scroll to top of a FlatList

[navid94]

Description

I want to scroll to the top of the entire list when I press a button, but I can't get the reference of the default component ScrollView of FlatList.

Reproduction Steps and Sample Code

I tried the following, but doen't work since the function getScrollResponder() it's undefined

onEndReached() {
    this.listRef.getScrollResponder().scrollTo(0)
}

render() {
        return (
            <View>
                <FlatList
                    ListHeaderComponent={() => <JobListHeader /> }
                    data={this.state.data}
                    renderItem={this.renderItem.bind(this)}
                    keyExtractor={this.keyExtractor}
                    numColumns={1}
                    onEndReached={this.onEndReached.bind(this)}
                    initialNumToRender={5}
                    maxToRenderPerBatch={4}
                    shouldItemUpdate={this.shouldItemUpdate}
                    onEndReachedThreshold={6}
                    refreshing={this.state.refreshing}
                    onRefresh={this.onRefresh.bind(this)}
                    ref={(ref) => { this.listRef = ref; }}
                />
            </View>
        );
    }

I placed the function inside onEndReached just for trying.

• React Native version: 0.43.3
• Platform: Android
• Development Operating System: Linux
• Dev tools: Android SDK 23

[ptomasroos]

Give it a try with

this.listRef.getNode().scrollToOffset({ offset: 0, animated: true });

[navid94]

@ptomasroos i get undefined is not a function (evaluating 'this.listRef.getNode()')

[ptomasroos]

Then it might not be available in 0.43

[navid94]

@ptomasroos but i see the function getScrollResponder() declared here https://github.com/facebook/react-native/blob/master/Libraries/Lists/FlatList.js#L336

[johnameinpll]

I am also trying to make the scrollable view "reset" to the top on a button press. I get the same result on iOS of "is not a function". Logging the value of ref on the console shows a React component, but no getNode method

[prigornitskiy]

try

this.refs.listRef.scrollToOffset({x: 0, y: 0, animated: true})

<FlatList
        ref="listRef"
...

[navid94]

@prigornitskiy this works, thanks a lot!

[ylac]

this.listRef.scrollToIndex(...) works for me.

[theohdv]

It will work only with small list:

Note: cannot scroll to locations outside the render window without specifying the getItemLayout prop.

scrollToIndex(params: object)