When calling super() in custom view, make sure to pass up the same props that your component's constructor was passed

user_2155922 0
Viewed 4981

Here is my code which produces

Warning: LoaderView(...): When calling super() in LoaderView, make sure to pass up the same props that your component's constructor was passed.

import * as React from "react";
import {ActivityIndicator, Text, View} from 'react-native'

    export class LoaderView extends React.Component {

        constructor(props) {
            super(props)
        }

        props = {
            title: "",
            loading: false
        }


        render() {
            if (this.props.loading) {
                return <View {...this.props} style={{flex: 1, justifyContent: 'center'}}>
                    <ActivityIndicator
                        size={"large"}
                        animating={true}/>

                    <Text
                        style={{textAlign: 'center', fontSize: 20, fontWeight: '500'}}>
                        {this.props.title}
                    </Text>
                </View>
            } else {
                return <View {...this.props} style={{flex: 1, justifyContent: 'center'}}>
                    <Text
                        style={{textAlign: 'center', fontSize: 20, fontWeight: '500'}}>
                        {this.props.title}
                    </Text>
                </View>
            }
        }

    }

How to resolve this warning in above code?

react-native reactjs ecmascript-6 javascript
3 Answers

use defaultProps instead of props

static defaultProps = {
    title: "",
    loading: false
}
user_38866420

I got this warning, and it turned out to be a red herring for me. Note that the code works, despite this warning. The solution is to declare an interface for your props object, and make sure that you not miss any properties. In particular, you might be missing id. In my case, a constructor was not needed, and super(props) did not help. Example:

export interface LoaderProps extends React.Props<LoaderProps> {
  id: string;
  title: string;
  loading: bool;
}

export class LoaderView extends React.Component<LoaderProps> {
  //...
}
user_31555680

I just used this.props = props, this do the trick for me!

constructor(props) {
    super(props)
    this.props = props
}
user_61373330
Related