React native: Component not defined? Can't import?

Ok, very new to react native here and Im trying to very simply import another .js file and have that be run in the main render() func in index.ios.js

I have looked everywhere and tried both import and require to do this, however I am stuck with error:

Here is what I have, the error is thrown at just the addition of the import line:

import React, { Component } from 'react';
import { Button, Card } from 'react-native-material-design';
import {
  StyleSheet,
  Text,
  View,
  Animated,
  Easing,
  ScrollView,
  RefreshControl,
  AppRegistry
} from 'react-native';
//import { Container, Content } from 'native-base';

import TestClass from "./TestClass";
//var animation = require('./TestClass');

//BODY
export default class SkysReact extends Component {


  render() {
    return (<View style={styles.container}>
    <TestClass/>
    </View>);

    // return (<View style={styles.container}>
    // {this.test()}
    // </View>);
  }
  test() {
  console.log("Hello World")
}

animate()
{
  console.log("animate");
}
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#404040',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color: '#333333'
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

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

And my other class:

import React from 'react';
import Animation from 'lottie-react-native';
import {
  StyleSheet,
  Text,
  View,
  Animated,
  Easing,
  ScrollView,
  RefreshControl,
  AppRegistry
} from 'react-native';

export default class TestClass extends Component { // not defined error here

    render() {
      return (<View style={styles.container}>
      {this.test()}
      </View>);
    }
    test() {
    console.log("Hello World 2222")
  }
}
module.exports = TestClass;

How can I just display TestClass in my index.ios.js? What is wrong?