Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

'onRef' inyecting null ref on event handler

See original GitHub issue


Hi there! The onRef event’s handler is inyecting null ref ({ current: null }) when mounting the <DraggableFlatList /> component. Any ideas why could this be?

Here’s my code:

    onRef={ref => {
    }} ... />

Platform & Dependencies

  • Platform: Android
  • React Native: 0.61.5
  • Reanimated version: 1.8.0
  • React Native Gesture Handler version: 1.6.1

Thanks in advance for your help.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:7 (2 by maintainers)

github_iconTop GitHub Comments

computerjazzcommented, Jun 5, 2020

@mcama are you sure about that?

I just did a quick hacky check by logging the ref in a setTimeout and I see the populated ref:

          onRef={ref => { 
            console.log("initial ref", ref)
            setTimeout(() => console.log("timeout ref", ref))

Remember that refs are mutable, meaning, the reference that current is pointing to may change. But if you try to pull the off current on first render, assign that to a variable, and expect that to change, it won’t work, because you’ll just be assigning that variable to null:

onRef={ref => {
  // Won't work! You'll end up assigning null to a class property
  this.myRefCurrent = ref.current

  // Will work, and myRef's 'current' property will be updated to reflect the current ref
  this.myRef = ref
eric-omcommented, Sep 17, 2020

@terrorpixel Thanks for the example! This helped a lot. Could you explain why you don’t have to declare exampleRef before onRef?

Read more comments on GitHub >

github_iconTop Results From Across the Web

ref doesn't have a value inside event handlers - Stack Overflow
Problem: When I examined the scope of hideList function, found that ref gets the proper reference to button every where but inside the...
Read more >
Everything You Need to Know About Refs in React
New and experienced developers alike seem to have trouble with the Refs API. Learn why, how, and when to use Refs in your...
Read more >
Using custom React hooks to handle components external ...
Creating a custom React hook for handling events outside of components like dismissing a modal.
Read more >
Accessing React State in Event Listeners with useState and ...
If you're using React hooks in a component with an event listener, your event listener callback cannot access the latest state.
Read more >
EventTarget.dispatchEvent() - Web APIs | MDN
The event handlers run on a nested callstack; they block the caller until they complete, but exceptions do not propagate to the caller....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found