0

invariant violation: element type is invalid: expected a string (for built-in components) or a class/function (for composite components)but got: undefined you likely forgot to export your component from the file its defined in, or you might have mixed up default and name imports check the render method

inserir a descrição da imagem aqui

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';

import Button from './components/Button';

 class Home extends Component {

   constructor() {
       super();
       this.state = {
           title: 'Title from state'
       };
   }

   _onLoginPressed() {
       this.props.navigation.navigate('Login');
   }


    render() {
        return (
            <View>
                <Button 
                onPress={this._onLoginPressed.bind(this)}>
                   Login
                </Button>
            </View>

        );
    }

}

const styles  = StyleSheet.create({
    header: {
        backgroundColor : '#efefef',
        height: 50,
        alignItems: 'center',
        justifyContent: 'center',
    },
    text: {
        fontSize: 15,
        fontWeight: 'bold'
    }
}

);


export default  Home;



import React from 'react';

import { TouchableOpacity, Text, StyleSheet } from 'react-native';

const Button = (props) => { return ( { props.children } ); }

const styles = StyleSheet.create({ button: { height: 45, borderRadius: 5, marginHorizontal: 25, marginVertical: 10, backgroundColor: 'rgb(42, 55, 68)', justifyContent: 'center', flex: 1 }, buttonText: { color: '#fff', textAlign: 'center', fontWeight: 'bold', fontSize: 15, } });

export { Button };

2
  • 1
    Aparentemente o erro está no componente Button (que foi você que criou?). Ficaria mais claro se você mostrasse o código dele também. Commented 11/03/2019 às 16:43
  • @BrunoBorges assim como o Junior falou, facilitaria no auxilio do seu problema se você editar a pergunta e adicionar o código componente Button que você criou.
    – sant0will
    Commented 12/03/2019 às 15:37

2 Respostas 2

1

Amigo há alguns erros no seu código.

1 - Esta escrevendo Login sem a tag title no Button

2 - Esta importando 2 vezes o React.

Segue a correção, verifica se funciona como o esperado:

import React, { Component } from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';

class Home extends Component {

  constructor() {
    super();
    this.state = {
      title: 'Title from state'
    };

    this._onLoginPressed.bind(this);
  }

  _onLoginPressed() {
    this.props.navigation.navigate('Login');
  }


  render() {
    return (
      <View>
        <Button
          title="Login"
          onPress={this._onLoginPressed()}>
        </Button>
      </View>
    );
  }
}

const styles  = StyleSheet.create({
  header: {
    backgroundColor : '#efefef',
    height: 50,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 15,
    fontWeight: 'bold',
  }
});

export default Home;
0

Bruno, seu erro está no texto Login do botão, se seu projeto é em react-native, você deve encapsular seus textos dentro de uma tag de texto, por ex a do react native mesmo, então corrigido ficaria:

render() {
    return (
        <View>
            <Button 
            onPress={this._onLoginPressed.bind(this)}>
               <Text>Login</Text>
            </Button>
        </View>

    );
}

Acredito que foi apenas um detalhe que você esqueceu, pois o component Text já está ate em seus imports do react-native.

1
  • Oi Gabriel, fiz de acordo com o que você disse mas o erro continua o mesmo. Commented 12/03/2019 às 3:30

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .