How to use recompose's toClass HOC to add a ref to a functional component? : <p>I'm trying to add a ref to a functional component in React Native as to use scrollToEnd on the FlatList component.</p>

<p>I would like to use recompose for this and as their docs state, toClass() should be able to handle this. However, no examples are given.</p>

<p>Currently, this is my failing implementation. Could someone tell me what I'm doing wrong? </p>

<p>I'd be much obliged!</p>

<pre><code>import React from 'react';
import PropTypes from 'prop-types';
import { FlatList, View, Text } from 'react-native';
import { graphql } from 'react-apollo';
import { compose, toClass, lifecycle } from 'recompose';

import CommentItem from './CommentItem';
import { commentsQuery } from '../../queries/comments';

const CommentScreen = ({ onRef, currentUser, data: { comments, loading } }) =&gt; {
  if (loading) {
    return (
      &lt;View&gt;
        &lt;Text&gt;Loading...&lt;/Text&gt;
      &lt;/View&gt;
    );
  }

  return (
    &lt;FlatList
      ref={ref =&gt; {
        this.refs.commentList = ref;
      }}
      data={comments}
      keyExtractor={item =&gt; item.id}
      renderItem={({ item }) =&gt; &lt;CommentItem {...item} currentUser={currentUser} /&gt;}
    /&gt;
  );
};

export default compose(
  toClass,
  graphql(commentsQuery),
  lifecycle({
    componentDidMount() {
      console.log('PROPZZZ', this.commentList);
    },
  }),
)(CommentScreen);

CommentScreen.propTypes = {
  fetchComments: PropTypes.func.isRequired,
  updateId: PropTypes.number.isRequired,
  comments: PropTypes.arrayOf(Object),
  text: PropTypes.string.isRequired,
};
</code></pre>
