CODEWITHSUNDEEP
javascriptreactjsreact-native
Pankaj Chaturvedi
Pankaj Chaturvedi

Reputation: 208

Passing reference in react native functional components

I am new to react-native and I am using reanimated-bottom sheet in my project and I want to control this from other functional component called as Comment.

in my main component I am passing the reference of the sheet as

<Comment ref={ref} />

but when I receive it in my comment component it says cant find variable ref

     const Comment =({ref}) => {
....
      <TouchableOpacity
                style={styles.panelButton}
               onPress={() => ref.current.snapTo(1)}>
                <Text>Cancel</Text>
      </TouchableOpacity>
        </View>
...
}

all I want is to close the sheet from my comment component without changing it to class component.

Upvotes: 0

Views: 670

Answers (1)

michael
michael

Reputation: 4173

ref is predefined property so it won't be passed to the component.

You'd better use callback instead of passing ref.

<Component ref={ref} onPressButton={() => { ref.current.snapTo(1) }} />

const Comment =({ onPressButton }) => {
....
  <TouchableOpacity
    style={styles.panelButton}
    onPress={onPressButton}>
      <Text>Cancel</Text>
  </TouchableOpacity>
....
}

Upvotes: 1

Related Questions