CODEWITHSUNDEEP
reactjsreact-nativeecmascript-6
noa-dev
noa-dev

Reputation: 3641

React-native: Super expression must either be null or a function, not undefined

I have seen similar questions asked but I can't seem to indentify the problem. I am using react native v 0.27 I have changed all my require methods into imports.

Here's the error I receive:

enter image description here

I don't know if its relevant, but the first position of the error points to my LoginComp.js file which contains the following code:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  Image,
  TextInput,
  Button,
  TouchableHighlight
} from 'react-native';

class LoginComp extends Component {
  constructor(){
    super(props);
  }
  render() {
    return (
      <View style={{flex: 1}}>
        <View style={this.props.styles.loginLogoContainer}>
          <Image style={this.props.styles.view1logo} source={require('../imgs/Logo.png')} />
        </View>
        <View style={this.props.styles.loginContainer}>
          <Text>Użytkownik:</Text>
          <TextInput
            style={this.props.styles.defaultInput}
            placeholder="Użytkownik"
            stretch={true}
            autoComplete={false}
            autoCorrect={false}
          />
          <Text>Hasło:</Text>
          <TextInput
            style={this.props.styles.defaultInput}
            placeholder="Hasło"
            stretch={true}
            autoComplete={false}
            autoCorrect={false}
            secureTextEntry={true}
          />
        <TouchableHighlight onPress={this.props.LoginPress}>
            <Text style={this.props.styles.loginButton}>Login</Text>
          </TouchableHighlight>
        </View>
        <View style={this.props.styles.registrationWrapper}>
          <Text>- lub -</Text>
          <TouchableHighlight onPress={this.props.t_Registration}>
            <Text style={this.props.styles.registration}>Załóż nowe konto</Text>
          </TouchableHighlight>
        </View>
      </View>
    );
  }
}

module.exports = LoginComp;

Upvotes: 24

Views: 40056

Answers (6)

rubal islam
rubal islam

Reputation: 359

May be latest version of expo/react native does not support @expo/[email protected]

upgrading @expo/react-native-action-sheet works for me:

yarn add @expo/react-native-action-sheet@latest

Upvotes: 0

duhaime
duhaime

Reputation: 27594

I hit this error when attempting to use:

class Leaderboard extends React.component {

}

It should have been Component with a capital C!

Upvotes: 5

sujeetkr
sujeetkr

Reputation: 1

just add the props in App.js file

type Props = {}; export default class App extends Component

Upvotes: 0

akhil xavier
akhil xavier

Reputation: 1847

I faced the same issue. Wrongly imported 

import React, { Component } from "react-native";

instead of 

import React, { Component } from "react";

see this answer https://stackoverflow.com/a/37676646/5367816

Upvotes: 15

Yairopro
Yairopro

Reputation: 10334

Personnaly, I solved this problem in another way:

I was importing a default module like import Module from "./path/to/Module.js".
But in the Module.js file, I ommited the default keyword:
export class Module {/*...*/} -> export default class Module {/*...*/}

Hope this will help someone. =)

Upvotes: 1

Jickson
Jickson

Reputation: 5193

Change your import statement like below and try.

import React, { Component } from 'react';

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TextInput,
  Button,
  TouchableHighlight,
} from 'react-native';

Also constructor should be like below

constructor(props){
    super(props);
}

Upvotes: 65

Related Questions