Function components cannot be given refs

Question

I have the following problem:

I have ActionWeekModal which contains my own custom component called MList. Within this MList is a SwipeListView. I wanna use the reference of SwipeListView in ActionWeekModal to trigger the function scrollToEnd(). This should be possible due to the fact that SwipeListView inherited this function from FlatList. However the error I am getting is the following:

warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

But I am using React.forwardRef() in MList.js. What am I doing wrong?

ActionweekModal.js

import React, { useState, useRef } from 'react'
{ ... }

export default function ActionWeekModal({ navigation, route }) {
  const mlist = React.createRef()

  { ... }

  const scroll = () => {
    mlist.current.scrollToEnd()
  }

  return (
    <MModal
      isVisible={true}
      onBackdropPress={() => NavigationService.goBack()}
      onCancel={() => NavigationService.goBack()}
      title="Actieweek"
    >
      <Button title={'button'} onPress={() => scroll()} />
      <ScrollView>
        <MList
          keyExtractor={keyExtractor}
          data={actionWeeks}
          refreshing={isFetching}
          renderItem={renderItem}
          ref={mlist}
          initialNumToRender={15}
          onEndReached={() => {
            if (hasNextPage) {
              fetchNextPage()
            }
          }}
          onEndReachedThreshold={0.2}
        />
      </ScrollView>
    </MModal>
  )
}

MList.js

import React from 'react'
{ ... }

const MList = React.forwardRef((props, ref) => (
  <View style={ApplicationStyles.screen}>
    <SwipeListView
      style={ApplicationStyles.flatListContainer}
      data={props.data}
      ref={ref}
      initialNumToRender={props.initialNumToRender}
      keyExtractor={props.keyExtractor}
      renderItem={props.renderItem}
      onEndReached={props.onEndReached}
      onEndReachedThreshold={props.onEndReachedThreshold ?? 1}
      closeOnRowOpen
      closeOnRowPress={true}
      closeOnRowBeginSwipe
      disableRightSwipe
      {...props}
    />
  </View>
))

export default MList

Answer 1

As a documentation says you need to change ref to listViewRef in order to retrieve reference of the SwipeListView.