How can I access child functions?

[Andy D. Nguyen]

I'm facing an issue when trying to access function in the child component
This is my code:

import React, { Component, PureComponent } from 'react';
import { Easing } from 'react-native';
import PropTypes from 'prop-types';
import Drawer from 'react-native-drawer-menu';
import { withStyles } from 'react-with-styles';

class FilterSideMenu extends PureComponent {
  openSlideMenu = () => {
    this.menuComponent.openRightDrawer();
  };

  closeSlideMenu = () => {
    this.menuComponent.closeRightDrawer();
  };

  render() {
    const { content, menuPosition, children, styles } = this.props;
    /* eslint-disable no-return-assign */
    return (
      <Drawer
        ref={menuComponent => (this.menuComponent = menuComponent)}
        drawerWidth={styles.drawerWidth}
        type={Drawer.types.Overlay}
        rightDrawerContent={React.createElement(content)}
        drawerPosition={menuPosition}
        easingFunc={Easing.ease}
      >
        {children}
      </Drawer>
    );
  }
}

FilterSideMenu.propTypes = {
  isOpen: PropTypes.bool,
  menuPosition: PropTypes.string,
  children: PropTypes.any,
  styles: PropTypes.object,
  content: PropTypes.oneOfType([Component, PureComponent])
};

const styles = theme => {
  const { Metrics } = theme;
  return {
    drawerWidth: Metrics.takeParts(3)
  };
};

export default withStyles(styles, { pureComponent: true, })(FilterSideMenu);

<FilterSideMenu
        ref={f => (this.filterSideMenu = f)}
        content={FilterContent}
        menuPosition={Drawer.positions.Right}
      >

I'm getting error when calling these functions:

this.filterSideMenu.openSlideMenu();
this.filterSideMenu.closeSlideMenu();

[Jordan Harband]

The ref you're getting is for the HOC - the wrapper.

When using an HOC, you can't use ref - your inner component would have to expose an explicit fooRef callback prop, for you to get access to it.