NavigatorIOS initialRoute component export issue

Question

Referring to the sample code provided by the Facebook for NavigatorIOS, I created a simple app which is supposed to show a navigation bar with a root view. The NavigatorIOS has included in the file App.js and the root view has defined in the file SearchCompnent.js.

The issue happened to me is that when SearchComponent is linked to NavigatorIOS as initialRoute component, throws an error: Element type is invalid: expected a string or a class/function.... At the same time, if I simply include SearchComponent in App.js it loads the page. I got stuck in to this issue for more than a week and didn't get any solution. Following is the code:

App.js

import React, { Component, PropTypes } from 'react';
import { NavigatorIOS, Text, View, StyleSheet } from 'react-native';
import SearchComponent from './src/components/SearchComponent';

export default class App extends React.Component {
  render() {
    return (
        <NavigatorIOS style={styles.container} initialRoute = {{title: 'Search Property', component: SearchComponent }} />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#111111'
  },
});

SearchComponent.js

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

export default class SearchComponent extends Component {
  render() {
    return (
      <View style={styles.main}>
        <Text style={styles.title}>Search For Github User</Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  main: {
    flex: 1,
    padding: 30,
    marginTop: 65,
    flexDirection: 'column',
    justifyContent: 'center',
    backgroundColor: '#2a8ab7'
  },
  title: {
    marginBottom: 20,
    fontSize: 25,
    textAlign: 'center'
  }
});