Question: How to use react native ref in vue native

[os-kingsley]

Trying to use ref in vue native but getting undefined is not an object(evaluating this.$refs.pinView...

this is my template
<pin-view 
     :onButtonPress="deletePin"
       pinLength=4 
       :ref="'pinView'"
      :inputViewEmptyStyle="{backgroundColor:'transparent', borderWidth:1, borderColor:'rgb(7, 18, 49)'}" 
      :inputViewFilledStyle="{backgroundColor:'rgb(7, 18, 49)'}" 
      :buttonViewStyle="{borderColor:'rgb(7, 18, 49)', borderWidth:1}" 
      :buttonTextStyle="{color:'rgb(7, 18, 49)'}" 
      :inputSize=23 
      :customLeftButton=" getIconLock()"
       :customRightButton=" getIconDelete()"

        :onValueChange='setPin'/> `

 deletePin(key){
       if (key === "custom_right") {
        this.$refs.pinView.current.clear()
        }

    },

The react native component has this example

import Icon from "react-native-vector-icons/Ionicons"
import React, { useEffect, useRef, useState } from "react"
import { ImageBackground, SafeAreaView, StatusBar, Text } from "react-native"
import ReactNativePinView from "react-native-pin-view"
const App = () => {
  const pinView = useRef(null)
  const [showRemoveButton, setShowRemoveButton] = useState(false)
  const [enteredPin, setEnteredPin] = useState("")
  const [showCompletedButton, setShowCompletedButton] = useState(false)
  useEffect(() => {
    if (enteredPin.length > 0) {
      setShowRemoveButton(true)
    } else {
      setShowRemoveButton(false)
    }
    if (enteredPin.length === 8) {
      setShowCompletedButton(true)
    } else {
      setShowCompletedButton(false)
    }
  }, [enteredPin])
  return (
    <>
   <ReactNativePinView
            inputSize={23}
            ref={pinView}
            pinLength={4}
            buttonSize={60}
            onValueChange={value => setEnteredPin(value)}
            buttonAreaStyle={{
              marginTop: 10,
            }}
           onButtonPress={key => {
              if (key === "custom_left") {
                pinView.current.clear()
              }
              if (key === "custom_right") {
                alert("Entered Pin: " + enteredPin)
              }

            }}
            customLeftButton={showRemoveButton ? <Icon name={"ios-backspace"} size={36} color={"rgb(7, 18, 49)"} /> : 
       undefined}
            customRightButton={showCompletedButton ? <Icon name={"ios-unlock"} size={36} color={"#rgb(7, 18, 49)"} /> : 
       undefined}
          />

    </>
  )
}
export default App

How can i do this correctly using vue native?

[RishabhKarnad]

Use the :ref prop. It will allow you to use the React ref on the component. $refs will give you a Vue ref. In Vue Native it is possible to use both, but they will work differently.

The React ref can be managed in the same way as in React Native (using a function)

In the template:

:ref="(ref) => {
    compRef = ref
}"

compRef needs to be declared in your script

data() {
    return {
        // ...
        compRef: null,
    }
},

It might make more sense to manage the ref using $options instead of data, since data is reactive, but you'll need to experiment with that a bit, since I'm not sure if it would work as intended.

[RishabhKarnad]

Please close this issue if this solves it for you.

[RishabhKarnad]

Closing due to inactivity. Please reopen if anyone faces issues with the provided solution