Home » Javascript » react-Native: Access child component function inside parent component

react-Native: Access child component function inside parent component

Posted by: admin August 19, 2018 Leave a comment

Questions:

Goal: Create a reusable OptionFan component that allows children as ChildButton components.
Issue: unable to access ChildButton’s method “flyOut()” inside OptionFan(parent) component method “showOptions()”

in Option Fan component:

 showOptions = () => {
        let animations = this.props.children.map((child, i) => {
            this.refs.child.flyOut();
        });
        Animated.stagger(this.props.staggerDelay, animations).start();
    }
    renderOptions = () => {
       return this.props.children.map((child, i) => {
           return <ChildButton ref={child} siblings={this.props.children.length} key={i} icon={} number={i} size={} />

       })
    }

in ChildButton component:

componentDidMount() {
        this.props.ref(this);
    }

flyOut = () => {
        const {number, size} = this.state;
        let offset = this.findChildCoordinates(number);
        Animated.timing(
            this.state.move,
            {toValue: offset}
        ).start();
    }

the desired method is unaccessible in code-suggestions,
what is incorrect in my approach?

Answers: