Error in React Native: super expression must either be null or a function not undefined

Question

Error in React Native: super expression must either be null or a function not undefined

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

I have a problem with React Native , I am getting the following error:

super expression must either be null or a function not undefined

I have looked for documentation and it has not solved my problem, if it is more comfortable to solve the problem I pass my code:

import { View, StyleSheet, Image, Text, Button } from "react-native";
import { StackNavigator }from 'react-navigation';
import React, { Component } from 'react';
import { Container, Header, Title, Content, Item, Label, Input, Body, Form } from "react-native";
import { AppRegistry } from 'react-native';

/*const onButtonPress = () => {
   Alert.alert('Lo sentimos actualmente estamos en la version OMICRON');
   this.props.navigation.navigate('Login');
};*/

class HomeScreen extends React.App {
    render() {
        return (
            <View style={styles.root}>
            <Image
                source={require("./files/images/fond.jpg")}
                style={styles.image1}
            />
            <Text style={styles.text1}>Hoker</Text>
            <Text style={styles.text2}>Dejate llevar</Text>
            <Image
                source={require("./files/images/linkedin.png")}
                style={styles.image4}
            />
            <Image
                style={styles.image5}
                source={require("./files/images/facebook.png")}
            />
            <Image
                style={styles.image6}
                source={require("./files/images/google.png")}
            />
            <View style={styles.rect1}>
                <Button
                    onPress={() => this.props.navigation.navigate('Login')} title="Entrar en la demo" color="rgba(82,113,255,1)"
                />
            </View>
        </View>
        );
    }
}

class LoginScreen extends React.App {
    render() {
        return <Container style={styles.container}>
            <Header>
                <Body>
                <Title>Hoker</Title>
                </Body>
            </Header>

            <Content>
                <Form>
                    <Item stackedLabel>
                        <Label>Nombre de usuario</Label>
                        <Input/>
                    </Item>
                    <Item stackedLabel last>
                        <Label>Contraseña</Label>
                        <Input secureTextEntry/>
                    </Item>
                </Form>
                <Button block style={{margin: 15, marginTop: 50}}>
                    <Text>Iniciar sesion</Text>
                </Button>
            </Content>
        </Container>;
    }
}

const styles = StyleSheet.create({
    root: { backgroundColor: "white", flex: 1 },
    image1: {
        position: "absolute",
        width: 515.4,
        height: 868.18,
        top: -14.55,
        left: -18.5
    },
    text1: {
        backgroundColor: "transparent",
        top: 57.95,
        left: 124.52,
        position: "absolute",
        height: 44.71,
        width: 110.94,
        fontSize: 38,
        color: "rgba(82,113,255,1)",
        textAlign: "center"
    },
    text2: {
        backgroundColor: "transparent",
        top: 101.97,
        left: 73.02,
        position: "absolute",
        height: 19.54,
        width: 213.94,
        fontSize: 15,
        color: "rgba(0,0,0,1)",
        textAlign: "center"
    },
    image3: {
        position: "absolute",
        width: 81.94,
        height: 73.21,
        top: 307.68,
        left: 139.03,
        margin: "auto"
    },
    rect1: {
        backgroundColor: "transparent",
        height: 40.79,
        width: 165.34,
        top: 550.81,
        left: 104.83,
        position: "absolute",
        borderWidth: 0,
        borderColor: "#000000",
        borderRadius: 100,
        opacity: 1,
        margin: "auto",
    },
    image4: {
        position: "absolute",
        width: 22.36,
        height: 22.53,
        top: 696.97,
        left: 336.72,
        margin: "auto"
    },
    image5: {
        top: 696.68,
        left: 313.01,
        width: 22.36,
        height: 22.53,
        position: "absolute",
        margin: "auto"
    },
    image6: {
        top: 696.4,
        left: 289.01,
        width: 22.36,
        height: 22.53,
        position: "absolute",
        margin: "auto"
    }
});

const RootStack = StackNavigator(
    {
        Home: {
            screen: HomeScreen,
        },
        Login: {
            screen: LoginScreen,
        },
    },
    {
        initialRouteName: 'Home',
    }
);

export default class App extends React.Component {
    render() {
        return <RootStack/>;
    }
}

AppRegistry.registerComponent('Hoker', () => Hoker);

Thank you very much for any response.

react-native

asked by Hoker Inc 07.05.2018 в 21:18

source

2 answers

Solidity with error TypeError: Member not found or not visible Break the chain in Css, It leaves the Col-md

score 0 · Answer 1

0

You are missing the constructor just above render ()

class HomeScreen extends React.App{
  constructor () {
    super();
  }

  render()
  {
   ...

Try and tell us

answered by 08.05.2018 в 11:56

score 0 · Answer 2

The problem is that you want to inherit from React.App but you must inherit from React.Component

class HomeScreen extends React.Component {
    ...
}
class LoginScreen extends React.Component {
    ...
}

Or since you're importing Component you can use it directly

class HomeScreen extends Component {
    ...
}
class LoginScreen extends Component {
    ...
}