React-Native code error

Question

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

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 };

Answer 1

Friend there are some mistakes in your code.

1 - You are typing Login without the title tag on the Button

2 - This importing twice the React.

Follows the correction, checks if it works as expected:

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;

Answer 2

Bruno, your error is in the text Login button, if your project is in React-Native, you should encapsulate your texts within a text tag, for example the React Native even, then fixed would be:

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

    );
}

I believe it was just a detail that you forgot, because the Text is already up in your React-Native Imports.