React-native: NavigatorIOS doesn't work on React Native 0.62.2

[nHiRanZ]

Description

I have created a sample React Native 0.62.2 project. The NavigatorIOS component doesn't seem to work. I'm adding the code and the package.json below.

React Native version:

0.62.2

Steps To Reproduce

1. Create new project with npx react-native init AwesomeProject
2. Add prop types dependency npm install --save prop-types
3. Build the sample code as mentioned in the code section. (NavigatorIOS code is from React Native Devs - NavigatorIOS
4. Run the app from workspace on XCode

Expected Results

NavigatorIOS should navigate to the initial scene page.

Snack, code example, screenshot, or link to a repository:

Snack Link: Demo on Expo

index.js

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

App.js

import React, {Component} from 'react';
import {NavigatorIOS} from 'react-native';
import MyScene from './MyScene';

export default class App extends Component {
  render() {
    return (
      <NavigatorIOS
        initialRoute={{
          component: MyScene,
          title: 'My Initial Scene',
        }}
        style={{flex: 1}}
      />
    );
  }
}

MyScene.js

import PropTypes from 'prop-types';
import React, {Component} from 'react';
import {Text, TouchableHighlight, View} from 'react-native';

export default class MyScene extends Component {
  static propTypes = {
    title: PropTypes.string.isRequired,
    navigator: PropTypes.object.isRequired,
  };

  _onForward = () => {
    this.props.navigator.push({
      title: 'Scene',
    });
  };

  render() {
    return (
      <View>
        <Text>Current Scene: {this.props.title}</Text>
        <TouchableHighlight onPress={this._onForward}>
          <Text>Tap me to load the next scene</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

package.json

{
  "name": "AwesomeProject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "prop-types": "^15.7.2",
    "react": "16.11.0",
    "react-native": "0.62.2"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/runtime": "^7.9.2",
    "@react-native-community/eslint-config": "^1.1.0",
    "babel-jest": "^25.4.0",
    "eslint": "^6.8.0",
    "jest": "^25.4.0",
    "metro-react-native-babel-preset": "^0.59.0",
    "react-test-renderer": "16.11.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

Error Stack

2020-04-22 10:37:55.758 [warn][tid:com.facebook.react.JavaScript] 'Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s%s', 'undefined', ' You likely forgot to export your component from the file it\'s defined in, or you might have mixed up default and named imports.\n\nCheck your code at App.js:16.', '\n in App (at renderApplication.js:45)\n in RCTView (at AppContainer.js:109)\n in RCTView (at AppContainer.js:135)\n in AppContainer (at renderApplication.js:39)' 2020-04-22 10:37:55.759 [warn][tid:com.facebook.react.JavaScript] 'Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s%s', 'undefined', ' You likely forgot to export your component from the file it\'s defined in, or you might have mixed up default and named imports.\n\nCheck your code at App.js:16.', '\n
in App (at renderApplication.js:45)\n in RCTView (at AppContainer.js:109)\n in RCTView (at AppContainer.js:135)\n in AppContainer (at renderApplication.js:39)' 2020-04-22 10:37:55.763 [error][tid:com.facebook.react.JavaScript] Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of App.

This error is located at: in App (at renderApplication.js:45) in RCTView (at AppContainer.js:109) in RCTView (at AppContainer.js:135) in AppContainer (at renderApplication.js:39) 2020-04-22 10:37:55.774 [error][tid:com.facebook.react.JavaScript] Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of App.

This error is located at: in App (at renderApplication.js:45) in RCTView (at AppContainer.js:109) in RCTView (at AppContainer.js:135) in AppContainer (at renderApplication.js:39) 2020-04-22 10:37:55.779 [fatal][tid:com.facebook.react.ExceptionsManagerQueue] Unhandled JS Exception: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of App.

This error is located at: in App (at renderApplication.js:45) in RCTView (at AppContainer.js:109) in RCTView (at AppContainer.js:135) in AppContainer (at renderApplication.js:39)

What's causing this?

[vonovak]

NavigatorIOS is removed from react native, I recommend you don't use it

see https://github.com/facebook/react-native/commit/0df92afc1caf96100013935d50bdde359b688658

https://github.com/react-native-community/releases/blob/master/CHANGELOG.md#the-slimmening-is-happening

[Cael00]

Thanks. They should update the official documentation https://reactnative.dev/docs/navigatorios.html

[nHiRanZ]

Hi @vonovak, thanks for the update. Is there a community library or something similar for NavigatorIOS?

[Cael00]

Hi @nHiRanZ, I found this https://reactnative.dev/docs/navigation#react-navigation. I haven't used it yet, but it seems to be a replacement for NavigationIOS.

[nHiRanZ]

@Cael00 yeah mate, I tried this. Works fine. We have to eventually move into this but since our timeline is kinda strict, I was trying to see if there's something close to NavigatorIOS implementation.

I forked a project and ended up fixing it for the current RN version.
react-native-navigator-ios

[MDachs]

Thanks. They should update the official documentation https://reactnative.dev/docs/navigatorios.html

Who is responsible for an documentation update? Please do it! I spend o lot of time on it 😞
Thanks

[vonovak]

Just a reminder that the docs are open source and anyone can contribute to them :)

[fabriziobertoglio1987]

https://github.com/facebook/react-native-website

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.