Why ref does not work in the FlatList component?

Question

import React, { Component } from 'react';
import { AppRegistry, Alert, FlatList, StyleSheet, Text, View } from 'react-native';

export default class FlatListBasics extends Component {
  _onscroll() {
    this.flatList.scrollToEnd( { animated: false } )
  }

  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={[
            {key: 'Devin'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'Jimmy'},
            {key: 'Julie'},
            {key: 'Devin'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'Jimmy'},
            {key: 'Julie'},
            {key: 'Devin'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'Jimmy'},
            {key: 'Julie'},
            {key: 'Devin'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'Jimmy'},
            {key: 'Julie'},
            {key: 'Devin'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'Jimmy'},
            {key: 'Julie'},
            {key: 'Devin'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'Jimmy'},
            {key: 'Julie'},
            {key: 'Devin'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'Jimmy'},
            {key: 'Julie'},
            {key: 'Devin'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'Jimmy'},
            {key: 'Julie'},
          ]}
          ref={ (ref) => this.flatList = ref}
          onScrollBeginDrag={this._onscroll}
          renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 22
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
})

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => FlatListBasics);

Why does it give an error undifined is not an object? When scrolling, the onscroll method starts. This method starts scrollToEnd. ScrollToEnd method is here. https://facebook.github.io/react-native/docs/scrollview.html#scrolltoend How to write the code correctly?Why does it give an error undifined is not an object? When scrolling, the onscroll method starts. This method starts scrollToEnd. ScrollToEnd method is here. https://facebook.github.io/react-native/docs/scrollview.html#scrolltoend How to write the code correctly?

Possible duplicate of [UnClickAble TouchableHighlight](https://stackoverflow.com/questions/48852987/unclickable-touchablehighlight) — Michael Cheng, Mar 18 '18 at 21:45

score 3 · Accepted Answer · answered Mar 18 '18 at 21:45

You _onscroll method is not bound so this is in the wrong context. That's why the ref is undefined. Either bind it in your constructor with:

constructor(props) {
    super(props);

    this._onscroll = this._onscroll.bind(this);
}

or convert it to an arrow function that will auto bind it to the class's context:

_onscroll = () => {
    this.flatList.scrollToEnd( { animated: false } )
}

This is a very common mistake. You should brush up on ES6 syntax and this if you find yourself making this mistake a lot. I'm going to flag this as a duplicate, but answered to address your question directly.

Why ref does not work in the FlatList component?

1 Answers1

Linked