How to render class from different JS? ERROR: expecting a string - react-native

Question

When I run this I get an error saying: Element type is invalid: expected a string (built in components) or a class/function but got undefined, check the render method for LOGIN.
I just want to display login on main screen from other JS file
This is the LOGIN.JS <--- Where I call in the index
'use strict';
import React, { Component, Image} from 'react';
import {View, Text, StyleSheet} from 'react-native';
var Login = React.createClass({
render: function() {
return (
<View style={styles.container}>
<Image style={styles.logo}
source={require('image!lock')} />
<Text>HI</Text>
</View>
);
}
});
INDEX.IOS.JS <-- Where I am calling Login to show on page
import React, { Component, Image } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
var Login = require('./Login');
export default class AwesomeProject extends Component {
render() {
return (
<View style={styles.container} >
<Text style={styles.welcome}>
Welcome!
</Text>
<Text style={styles.logins}>
</Text>
<Login />
</View>
);
}
}

Answer 1

React render function should return a View element to render.
Change this
var Login = React.createClass({ render: function() { return ( HI ); } });
to
var Login = React.createClass({
render: function() {
return (
<View style={{flex:1}}>
<Text>HI</Text>
</View>
);
}
});

Answer 2

You can use the same syntax for the Login.js file as the index.ios.js and declare it with ES6 Class syntax, and export it.
Also FYI it appears you are importing Image from React rather than React Native in both files.
import React, { Component} from 'react';
import {View, Text, StyleSheet, Image} from 'react-native';
export default class Login extends Component {
render() {
return (
<View style={styles.container}>
<Image style={styles.logo}
source={require('image!lock')} />
<Text>HI</Text>
</View>
);
}
}