0

I am trying to build my first react native app but i keep getting this error:

"Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined"

I have searched for an anwser but only saw people who got: "...but got: object"

Below is my code:

import React, { Component } from 'react';
import {
      ScrollView,
      Container,
      StyleSheet,
      Button,
      View,
      Label,
      TextInput
    } from 'react-native';

export default class Login extends Component {
  render() {
    return (
        <ScrollView style={styles.scroll}>
            <Container>
                <Button 
                    label="Forgot Login/Pass"
                    styles={{button: styles.alignRight, label: styles.label}} 
                    />
            </Container>
            <Container>
                <Label text="Username or Email" />
                <TextInput
                    style={styles.textInput}
                />
            </Container>
            <Container>
                <Label text="Password" />
                <TextInput
                    secureTextEntry={true}
                    style={styles.textInput}
                />
            </Container>
            <View style={styles.footer}>
                <Container>
                    <Button 
                        label="Sign In"
                        styles={{button: styles.primaryButton, label: styles.buttonWhiteText}} 
                        />
                </Container>
                <Container>
                    <Button 
                        label="CANCEL"
                        styles={{label: styles.buttonBlackText}} 
                        />
                </Container>
            </View>
        </ScrollView>
    );
  }
}
const styles = StyleSheet.create({
    scroll: {
        backgroundColor: '#E1D7D8',
        padding: 30,
        flexDirection: 'column'
    },
    label: {
        color: '#0d8898',
        fontSize: 20
    },
    alignRight: {
        alignSelf: 'flex-end'
    },
    textInput: {
        height: 80,
        fontSize: 30,
        backgroundColor: '#FFF'
    },
    buttonWhiteText: {
        fontSize: 20,
        color: '#FFF',
    },
    buttonBlackText: {
        fontSize: 20,
        color: '#595856'
    },
    primaryButton: {
        backgroundColor: '#34A853'
    },
    footer: {
       marginTop: 100
    }
});

Does somebody know where the problems is?

1 Answer 1

5

The problem is you're importing two components named Container and Label from react-native, which don't exist.

Sign up to request clarification or add additional context in comments.

1 Comment

My bad. You're right, i imported them from react but had to use custom imports

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.