React 16.13.1 - Warning: function components cannot be given refs. Use forwardRef

[florinvasilevilsan]

Your issue may already be reported! Please search on the issue tracker before creating one.

Describe the bug On React 16.13.1 getting 'Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()'.

This is due to React changes where we have been asked to rename ref to 'forwardRef'

To Reproduce Use library with the indicated react version

Environment (please complete the following information):

• OS: IOS and Android
• React 16.13.1
• RN Version: v0.63.3

[jspizziri]

@florinvasilevilsan , not sure how you've implemented this, but I'm guessing that you're returning a functional component in your renderItem callback. If that's the case you need to make sure you wrap the component returned from renderItem in a forwardRef like below:

const List = () => {
  return (
    <SwipeListView
      renderItem={({ index, item }, rowMap) => (
        <Foo key={index} item={item} />
      )}
    />
  );
}

const Foo = React.forwardRef(({ item }, ref) => {
  return (
    <Text>{item.name}</Text>
  );
});

[florinvasilevilsan]

@florinvasilevilsan , not sure how you've implemented this, but I'm guessing that you're returning a functional component in your renderItem callback. If that's the case you need to make sure you wrap the component returned from renderItem in a forwardRef like below:

const List = () => {
  return (
    <SwipeListView
      renderItem={({ index, item }, rowMap) => (
        <Foo key={index} item={item} />
      )}
    />
  );
}

const Foo = React.forwardRef(({ item }, ref) => {
  return (
    <Text>{item.name}</Text>
  );
});

Thanks, that sorted it for me.

[roy-rayyone]

Just wrap your <Foo key={index} item={item} /> in a View tag is good enough