React-native-draggable-flatlist: How to get ref to FlatList?

[mik-rom]

I need to get a ref to the FlatList so I can call scrollToEnd. Is this possible currently?

[bomei]

react-native-draggable-flatlist sends all props to the FlatList it based on, so you can just put this prop in react-native-draggable-flatlist and it will work.

[sachinB94]

@bomei But, it doesn't passes the ref.

@rom1k After reading the code, you can use ref._flatList to get FlatList's ref. It is not document, so I don't know what all it can break.

...
this.list._flatList.scrollToEnd({ animated: true });
...
...
<DraggableFlatList
    ref={element => (this.list = element)}
    ...
/>

[computerjazz]

onRef prop is in latest

[kylepickering]

@computerjazz Would you be able to provide an example on how to use onRef?

[bvodola]

I'm using version react-native-draggable-list version 2.3.1. This is how I accomplished it:

// Inside your render function
<DraggableFlatList
  onRef={ref => { this.draggableList = ref; }}
/>

// Somewhere Inside a function, where you want to actually
// do something with the ref (scrollToEnd in my case)
this.draggableList.current._component.scrollToEnd();

[terrorpixel]

I'm using version react-native-draggable-list version 2.3.1. This is how I accomplished it:

// Inside your render function
<DraggableFlatList
  onRef={ref => { this.draggableList = ref; }}
/>

// Somewhere Inside a function, where you want to actually
// do something with the ref (scrollToEnd in my case)
this.draggableList.current._component.scrollToEnd();

I'm getting an {"current":null} object by doing it that way. Any suggestions what I'm doing wrong?
This issue page doesn't help :/

[terrorpixel]

Now it's working! 🎉

<DraggableFlatList
   onRef={ ref => { exampleRef = ref }} 
   />

// somewhere else
exampleRef.current._component.scrollToOffset({offset: 100, animated: true});

(Functional component)

My fault was to define exampleRef as a ref in addition by this line:

let exampleRef = React.useRef(); // don't use that

In that case exampleRef just persists "null". Sorry, I'm a rookie :neckbeard:

[ChrisRArendt]

Hello, I am trying to figure this out. I have a functional component but I don't think that should cause a problem.. however..

I tried

const [flatListRef, setFlatListRef] = React.useState(null);
onRef={ref=>{ setFlatListRef(ref); }}

Which said "Warning: Cannot update a component from inside the function body of a different component."

I tried

let flatListRef;
onRef={ref=>{ flatListRef = ref; }}

Which resulted in flatListRef always being undefined (scope is stale).

I tried

const flatListRef =React.useRef(null);
flatListRef = ref;

But flatListRef is a constant so now I can't set it...

I tried

const flatListRef =React.useRef(null);
onRef={flatListRef}

But it says "TypeError: onRef is not a function. (In 'onRef(_this.flatlistRef)', 'onRef' is an instance of Object)"

I tried

const flatListRef =React.useRef(null);
onRef={ref=>flatListRef}
const myFunc= () => {
    flatListRef.scrollToEnd({animated: true});
}

But when I call myFunc, it says "TypeError: flatListRef.scrollToEnd is not a function" because flatListRef is just an object that has the property current set to null.

I tried

const flatListRef =React.useRef(null);
ref={flatListRef}
const myFunc= () => {
    console.log(flatList);
}

But when I call myFunc it just freezes my app... MMmmkk....

I tried

let flatListRef;
ref={ref=>{ flatListRef = ref; }}
const myFunc= () => {
    console.log(flatList);
}

This also froze/crashed my app.

Can someone provide an example of how the variable is defined? Or a whole example on Snack would be great too.. <3