How to call function in React Native

Question

Cannot use a function from a child by reference.

export class Home extends React.Component {
constructor() {
    this.imageReference = React.createRef();
}

state = {
    fadeAnim: new Animated.Value(0),
}

componentDidMount() {
    Animated.timing(
        this.state.fadeAnim,
        {
            toValue: 1,
            duration: 2400,
            useNativeDriver: true
        }
    ).start(() => this.imageReference.current.initImageAnimation());
}

render() {
    let { fadeAnim } = this.state;

    return (
        <View style={{ flex: 1 }}>
            <Animated.View style={{
                opacity: fadeAnim,
                flex: 1,
                backgroundColor: '#7eb3e0',
                justifyContent: 'center',
                alignItems: 'center'
            }}>
                <Logo ref={this.imageReference} />
            </Animated.View>
        </View>
    )
}

Error occures: TypeError: undefined is not an object (evaluating '_this.imageReference = _react.default.createRef()')

Hello! Welcome to Stackoverflow! Please read this about a [MCVE], and edit your question to fit that mold. Thanks! — Cullub, Jun 04 '19 at 17:19

score 3 · Answer 1 · answered Jun 04 '19 at 23:01

I believe you're missing super() within the constructor for your instance properties to work:

constructor() {
    super()
    this.imageReference = React.createRef();
}

This SO answer explains why in detail: How to extend a class without having to using super in ES6?

How to call function in React Native

1 Answers1