React-navigate error

Hello good afternoon I have a problem with react-native in specific with the react-navigate library:

  

The component for route 'Home' must be a React component. For example:

import MyScreen from './MyScreen';
...
Home: MyScreen,
}

  

You can also use a navigator:

import MyNavigator from './MyNavigator';
...
Home: MyNavigator,
}

I do not know exactly what is due to that error but I still leave my code:

//App.js
import React from 'react';
import {Component} from 'react';
import { View, StyleSheet, Image, Text, Button } from "react-native";
import { StackNavigator }from 'react-navigation';
import HomeScreen from './App'
import LoginScreen from './login';
import { AppRegistry } from 'react-native';

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

}

const HomeStack = StackNavigator({
    Home: HomeScreen,
    Login: LoginScreen,
});

class homes extends Component {
    render() {
        const {navigate} = this.props.navigation;
        return <View style={styles.root}>
            <Image
                source={require("./files/images/fond.jpg")}
                style={styles.image1}
            />
            <Text style={styles.text1}>myapp</Text>
            <Text style={styles.text2}>myapp</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={onButtonPress} title="Entrar en la demo" color="rgba(82,113,255,1)"
                />
            </View>
        </View>;
    }
}

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

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

//login.js
    import React, { Component } from "react";
import {
    Container,
    Header,
    Title,
    Content,
    Button,
    Item,
    Label,
    Input,
    Body,
    Left,
    Right,
    Icon,
    Form,
    Text, AppRegistry
} from "react-native";
import { StackNavigator } from 'react-navigation';

class logins extends Component {
  render() {
      return (
      <Container style={styles.container}>
        <Header>
          <Body>
            <Title>myapp</Title>
          </Body>
          <Right />
        </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>
    );
  }
}

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

Thank you very much for any help.

Error response :  Instead of putting the windows in different files I put everything together (App.js and Login.js). At least what served me.

  

Thanks for your help!