How to use recompose's toClass HOC to add a ref to a functional component?

Question

I'm trying to add a ref to a functional component in React Native as to use scrollToEnd on the FlatList component.

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.

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

I'd be much obliged!

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 } }) => {
  if (loading) {
    return (
      <View>
        <Text>Loading...</Text>
      </View>
    );
  }

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

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,
};

score 0 · Answer 1 · answered Oct 05 '17 at 02:47

0

Just use a class components instead of a functional component if you need to use ref. However, if for some reasons you need to use a functional component, you can use withHandlers. Please see the answer of this SO question for how to use it.

answered Oct 05 '17 at 02:47

wuct

10,057
2
19
22

I tried that answer before I resorted to my implementation since it didn't work. But I might just use a class component then. – Rein Van Imschoot Oct 05 '17 at 06:01

score 0 · Answer 2 · answered Sep 26 '18 at 11:05

I'm going to paste some code I managed to make work with a similar problem, I know it is not exactly your code but it shows the solution:

import React from 'react'
import { compose, withState, withHandlers, lifecycle } from 'recompose'

import Left from './Left'
import Right from './Right'
import Modals from './Modals'
import { ActionBar, Container } from './styles'

let ref = null

const enhance = compose(
  withState('position', 'setPos', 'relative'),
  withHandlers({
    isTop: ({ setPos }) => () => {
      const { top } = ref && ref.getBoundingClientRect()
      top && setPos(top <= 0 ? 'fixed' : 'relative')
    },
  }),
  lifecycle({
    componentDidMount() {
      window.addEventListener('scroll', this.props.isTop)
    },
    componentWillUnmount() {
      window.removeEventListener('scroll', this.props.isTop)
    },
  })
)

export default enhance(({ position, ...props }) => (
  <Container innerRef={el => (ref = el)}>
    <ActionBar position={position}>
      <Left {...props} />
      <Right {...props} />
      <Modals {...props} />
    </ActionBar>
  </Container>
))

As you can see the key here was storing the ref in a variable and use a mix of withState + withHandlers + lifecycle to make it work, I didn't need to use the toClass HoC in the end because as long as you use any other HoC from recompose you are already using React component classes underneath :)

Hope it helps!

How to use recompose's toClass HOC to add a ref to a functional component?

2 Answers2