0

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

Screenshot of error

sree_iphonedev
  • 3,514
  • 6
  • 31
  • 50
  • hey there, I am trying to find the solution of this problem but I can't resolved it, I am try RnD of `NavigatorIOS` and I saw this is only for `IOS` . you can use the `react-navigation` and it works both platform(android and IOS). – shammi Dec 27 '19 at 18:36
  • So are you also getting the same error for NavigatorIOS? Okay I ll try with the react navigation. – sree_iphonedev Dec 28 '19 at 18:06
  • sure! if you have any issue by using `react-navigation` then I will help you freely and friendly :) – shammi Dec 28 '19 at 18:33
  • Thanks Shammi. I will try it and let you know. – sree_iphonedev Dec 29 '19 at 05:01
  • @shammi I have tried react-navigation library and it worked successfully. Thanks for you suggestion. – sree_iphonedev Dec 31 '19 at 08:40

0 Answers0