Can't call child component method from parent component in React Native

Question

I have a React Native component <Parent> that contains a component <Child>, and I want to be able to call one of Child's methods in Parent. After reading a bunch of other posts, this is what I have:

Child.js

export default class Child extends Component {
  method1() {
    console.log("success");
  }
  render() {
    return(
      <View/>
    )
  }
}

Parent

export default class Parent extends Component {
  render() {
    return(
      <View>
        <TouchableOpacity
          onPress={() => this.child.method1()}
        />
        <Child
          onRef={ref => (this.child = ref)}
        />
      </View>
    )
  }
}

I'm getting the error "_this2.child.method1 is not a function."

Other things I've tried are using refInput instead of onRef, and doing ref => {this.child = ref} instead of ref => (this.child = ref).

Any ideas?

Thanks!

Answer 1

You can create a ref using React.createRef in the constructor and assign it to the Child component instance using ref prop

Post that you can access the child using this.child.current

Sample code:

class Child extends React.Component {
  myMethod() {
    console.log("myMethod called");
  }

  render() {
    return <Text>This is child</Text>;
  }
}

class App extends Component {
  constructor() {
    super();
    this.child = React.createRef();
  }
  render() {
    return (
      <View style={styles.app}>
        <View style={styles.header}>
          <Image
            accessibilityLabel="React logo"
            source={{ uri: logoUri }}
            resizeMode="contain"
            style={styles.logo}
          />
          <Text style={styles.title}>React Native for Web</Text>
        </View>
        <Child ref={this.child} />
        <Button
          onPress={() => {
            this.child.current.myMethod();
          }}
          title="Example button(Click to trigger Child)"
        />
      </View>
    );
  }
}

Working demo

IF your child component is connected with connect from redux, you can still access the childRef by setting the withRef option to true in connect

connect(mapStateToProps, mapDispatchToProps, null, { withRef: true })(Child);

If you are using v6 or above of redux, set the forwardRef property instead of withRef

connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true })(Child);

Once you do that in the parent you will be able to access the cchild ref with

this.child.current.getWrappedInstance()