ref undefined in React Native

Question

Can someone help me in figuring out wha is the best way to use setNativeProps in RN?.

In my react function component I did something like this

const AutoComplete = (props) => {
 let parentViewRef = null

  useEffect(() => {
    setTimeout(function(){ console.log(parentViewRef) }, 3000)
  },[])

  return(
    <View  
      ref={(viewRef) => { 
        parentViewRef = viewRef 
      }}
      style={styles.modelOpenViewMain}>    <View style={styles.modelOpenInputView}>

           </View>
        </View>
    )
  }
}

But unfortunately my parentViewRef is coming out to be undefined. Any idea what I could be doing wrong?

Konstantin · Accepted Answer · 2020-01-07 12:38:54Z

1

If I'm understanding correctly what you're trying to achieve, then you should be using useRef hook.

So your code would look like something like this:

import React, { useRef } from 'react';

const AutoComplete = (props) => {
 let parentViewRef = useRef(null);

  return(
    <View  
      ref={parentViewRef}
      style={styles.modelOpenViewMain}>    <View style={styles.modelOpenInputView}>

           </View>
        </View>
    )
  }
}

You will then be able to do whatever you want with your ref via its current property, e.g. parentViewRef.current. ...

Hope this helps!

answered Jan 7, 2020 at 12:38

Konstantin

1,4688 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chogainz · Accepted Answer · 2021-11-29 12:43:08Z

0

Try Passing the parentViewRef as an argument to the useEffect method.

    const AutoComplete = (props) => {
    
    let parentViewRef = null

    useEffect(() => { 

           console.log(parentViewRef);

    }, [parentViewRef]);

    return (
        <View
            ref={(viewRef) => parentViewRef = viewRef}>
            <View >
                <Text>CONTENT TEXT</Text>
            </View>
        </View>
      )
    }

edited Nov 29, 2021 at 12:43

answered Jan 7, 2020 at 12:48

Chogainz

371 silver badge3 bronze badges

Collectives™ on Stack Overflow

ref undefined in React Native

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related