React-Native Reference to FlatList doesn't work

Question

I try to scroll always to the bottom of my flatlist in my react native app but unfortunately I don't get a reference to the flatlist.

            <View style={styles.viewPointOverview}>
                <Text > Point overview: </Text>
                <FlatList
                    ref={(ref) => this.flatList = ref}
                    data={pointRecord}
                    renderItem={({ item }) => <Text>{item}</Text>}
                />
            </View>

And in the render function I try to call the method scrollToEnd()

this.flatList.scrollToEnd();

I tried it in the flatlist with

ref = {"flatlist"}

or

ref = "flatlist"

But none of them have worked I always get the error: TypeError: Cannot read property 'scrollToEnd' of undefined.

You can find the complete code here: https://github.com/AlessandroVol23/Counter10000/blob/master/app/screens/PlayScreen.js

Of course it isn't working you are using the `this.refs.flatlist.scrollToEnd({animated: true });` in the render method, the first time the reference doesn't exist so it gives you the error. You have to place this in a method to make it works after it has been initialiazed — Clad Clad, Mar 13 '18 at 14:12

Clad Clad · Accepted Answer · 2018-03-13T14:17:30.447

3

You have to use the ref so it will be this.refs.flatlist.scrollToEnd()

you can also add the animated optional param :

  this.refs.flatlist.scrollToEnd({animated: true });

For the declaration, I personally do it like this :

ref='flatlist'

Then you have to call the method with this function (not in the render which won't have the ref as it will be first declared after the first complete render) using this trick :

React Native ListView scrollToEnd it doesn't work

edited Mar 13 '18 at 14:17

answered Mar 13 '18 at 10:21

Clad Clad

2,653
1
20
32

Still doesn't work. Tried it in flatlist like this `ref={(ref) => this.flatList = ref}` and like this `ref='flatlist'` Then I called the method in the render method: `this.refs.flatlist.scrollToEnd({animated: true });` – Sandro_V Mar 13 '18 at 13:35
can you show the complete method where you use this ? – Clad Clad Mar 13 '18 at 13:36
`render() { const { players, playerAmount } = this.props; const pointRecord = players[this.state.currentPlayerNumber].pointRecord; this.refs.flatlist.scrollToEnd({animated: true }); ` This is the complete method. https://github.com/AlessandroVol23/Counter10000/blob/master/app/screens/PlayScreen.js There is the complete code – Sandro_V Mar 13 '18 at 13:47
1

You can't do that in the render like this as at the first render the ref won't exist and will cause the error – Clad Clad Mar 13 '18 at 14:18

score 2 · Answer 2 · answered Mar 13 '18 at 10:22

2

You need to access your FlatList from reference to call the method scrollToEnd()

this.refs.flatlist.scrollToEnd({animated: true });

Change your code this.flatList.scrollToEnd(); to this.refs.flatlist.scrollToEnd();

it will work for you.

answered Mar 13 '18 at 10:22

Sachin Rajput

4,326
2
18
29

score 0 · Answer 3 · answered Mar 13 '18 at 14:19

0

Like Clad Clad told me I had it in the render method and of course the flatlist element doesn't exist at this time. Thanks! :-)

answered Mar 13 '18 at 14:19

Sandro_V

477
1
7
21

score 0 · Answer 4 · answered Jul 04 '19 at 07:35

0

You should give ref={(ref) => { this.listRef = ref; }} prop to Flat List.

answered Jul 04 '19 at 07:35

Dogu Deniz Ugur

199
12

React-Native Reference to FlatList doesn't work

4 Answers4