React Native - using ref in functional component

Question

In my React Native app, I'm using the library, react-native-card-flip.

In the class component, I use it as follows:

<CardFlip style={styles.cardContainer} ref={(card) => this.card = card} >
  <TouchableOpacity style={styles.card} onPress={() => this.card.jiggle({ count: 2, duration: 100, progress: 0.05 })} ><Text>AB</Text></TouchableOpacity>
  <TouchableOpacity style={styles.card} onPress={() => this.card.flip()} ><Text>CD</Text></TouchableOpacity>
</CardFlip>

However, if I put the same thing in a functional component, I get an error about the 'ref'.

Undefined is not an object. Evaluating _this.card = card.

Something wrong with ref in the functional component. How can I correct this? Can you please help?

you have to use useRef reactjs.org/docs/hooks-reference.html#useref — Konstantin
– Konstantin, Commented Mar 30, 2021 at 10:55
I tried this. The error goes away, but the CardFlip component just doesn't render. — asanas
– asanas, Commented Mar 30, 2021 at 11:11

Konstantin · Accepted Answer · 2021-03-30 11:31:35Z

2

In order to use the ref in the functional component, you have to:

Create a ref using useRef;

const card = useRef(null);

Assign this ref to the cardFlip

CardFlip ref={card}

Do actions on it using the current property of the ref.

card.current.jiggle(...).

Depending on how you've configured your CardFlip, (if the jiggle and flip are functions and CardFlip is a functional component) you may need to use forwardRef and useImperativeHandle. Try out this answer as is, if it doesn't work then I'll modify the answer.

answered Mar 30, 2021 at 11:31

Konstantin

1,4689 silver badges20 bronze badges

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

2 Comments

asanas Over a year ago

I've tried it in exactly the same way. It doesn't work. The component CardFlip is coming from this library - npmjs.com/package/react-native-card-flip

Konstantin Over a year ago

Can you log card.current? Which methods does it provide?

Collectives™ on Stack Overflow

React Native - using ref in functional component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related