Navigator is deprecated in RN 0.44.0 and not working

[amirrezamahyari]

after upgrade react native to 0.44.0 i get this error :

i use react-navigation 1.0.0-beta.9 package and i got BackAndroid deprecated too .

Navigator is deprecated and has been removed from this package. It can now be installed and imported from react-native-deprecated-custom-components instead of react-native. Learn about alternative navigation solutions at http://facebook.github.io/react-native/docs/navigation.html

how can i fix this ?

software	version
react-navigation	1.0.0-beta.9
react-native	0.44.0
node	7.9.0
npm or yarn	4.2.0

[grabbou]

As error message indicates, you should install react-native-deprecated-custom-components and import NavigationExperimental from there.

[amirrezamahyari]

@grabbou but i think you closed immediatly without any define a correct solution . as i see in the relative module codes there is a dependency in react-navigation for Navigate component yet . so i think this issue must be reopened till solve this problem .

[grabbou]

There's no issue to be solved. Navigation experimental has been removed from React Native and moved to a separate package that I've listed above. You should slowly upgrade your code to use a new navigation library, like this one. Before that happens, you can keep on using Navigation Experimental from the above package.

[muxiaodeng]

hi，grabbou，i read your tips and installed react-native-deprecated-custom-components，and import Navigator from 'react-native-deprecated-custom-components' ，but an error occured，it said that Element type is invild：excepted a string or a class/function but got: object; and i just has an Navigator in there ,so can you help me with that? Thanks!

[ashish-algorythma]

@muxiaodeng I think you should import NavigationExperimental and not Navigator: import {NavigationExperimental} from 'react-native-deprecated-custom-components';

[muxiaodeng]

@ashish-algorythma thanks,but it didn't work,still say Element type is invalid;

[Juxtlie]

I have the same problem

[Juxtlie]

@amirrezamahyari Do you have resolve?

[davidck]

Fixed with: import NavigationExperimental from 'react-native-deprecated-custom-components';

Use with: <NavigationExperimental.Navigator

[nvs2394]

I fixed it with code

import {
} from 'react-native';
import Movies from './Movies';

import NavigationExperimental from 'react-native-deprecated-custom-components';

const RouteMapper = (route, navigator) => {
  if (route.name === 'movies') {
    return <Movies navigator={navigator} />;
  }
};

export default class App extends Component {
  render() {
    return (
      <NavigationExperimental.Navigator
        // Default to movies route
        initialRoute={{ name: 'movies' }}
        // Use FloatFromBottom transition between screens
        configureScene={(route, routeStack) => NavigationExperimental.Navigator.SceneConfigs.FloatFromBottom}
        // Pass a route mapper functions
        renderScene={RouteMapper}
      />
    );
  }
}

[rexjrs]

Why was React Navigator deprecated?

[nvs2394]

@rexjrs Because in last version it don't use Navigator in react-native . It switch to use react-native-deprecated-custom-components. You can see notied when running app.

[rexjrs]

No. My question is, what was the reason behind deprecating the Navigator component? Was it bad, were there much better alternatives? etc.

[peterheard01]

Hey Chaps I am using import { StackNavigator } from 'react-navigation'; and I am getting the same error. The solution on here will not work since it is the newest version of react-navigation which needs to be fixed in order for react-native to work. Does anyone know when react-navigation be upgraded to use non deprecated modules?

[amirrezamahyari]

@saeedtabrizi see this issue

[saeedtabrizi]

@amirrezamahyari HAZA MEN FAZLE RABBI, thanks a lot .

@peterheard01 , @rexjrs for the solve this problem we commented Navigation component in react native folder in node_modules :) only deprecated message is root of this problem so when we remove Navigation component from react , that working as well as my car :)

[rexjrs]

@saeedtabrizi can you clearly explain what you mean by comment in react native folder in node modules? How can I do this.

[amirrezamahyari]

@saeedtabrizi thanks MOHANDES @rexjrs ok , i comment this lines and its already ok: node_modules/react-native/Libraries/react-native/react-native-implementation.js line 129

[rexjrs]

Thank you very much!

[prateekvarma]

@davidck Did you need to pull in something from NPM too? I get a 500 error when i use react-native-deprecated-custom-components. Thanks.

[davidck]

@prateekvarma npm install react-native-deprecated-custom-components --save

[Juxtlie]

@amirrezamahyari Your comment helped me. Thank you very much.

[flyandi]

so what was the reason to kick it out? just because react-navigation is more powerful?

[nontachaiwebdev]

I have a problem when i use NavigationBar. Who you know way to solve this problem with react-native-deprecated-custom-components ?

Thank you

[nhoxbypass]

So what is the officially replacement for Navigator. (i'm using NavigationExperimental.Navigator instead, for it much likely Navigator)

[AsutoshPadhi]

@nvs2394 Thanks man...your code helped me. btw does anyone know the difference between StackNavigator and NavigationExperimental.Navigator ?

[zos]

I also would like to know what's the best replacement for Navigator?

[bdavid68]

I don't use Navigator in my codes. But I am getting this error.

Anybody can help me?

[nontachaiwebdev]

In RN0.44 Not support old Navigator.

You should installed and imported from react-native-deprecated-custom-components instead of react-native

[hiteshsahu]

What to use instead of Navigator? using deprecated components in my project make me feel uncomfortable.

[rexjrs]

Use react-navigation. It is the most used one and very powerful.

[thangpq]

@davidck 👍 Many thanks for all your helps. Its really better anything

[vivekkumarmaru]

I think A possible plan is to move Navigator out into a separate repo and publish it to npm, and till then they have provided a temporary solution react-native-deprecated-custom-components.

[wanhaojun118]

@muxiaodeng I guess you are importing like this : import Navigator from 'react-native-deprecated-custom-components';

Try change it to: import {Navigator} from 'react-native-deprecated-custom-components';

[roysG]

I get error, someone know why?

React-native:0.49.3 Thanks.

[worldlee78]

The react-native-deprecated-custom-components is using deprecated methods that are no longer available in React 16.0. Until someone updates the component, it is broken.

[roysG]

Yee.. tell me about that, after i struggle for 1 hour without success, i moved to the new navigator. Thanks anyway :)

[kayson]

Use GitHub version instead of NPM:

npm install https://github.com/facebookarchive/react-native-custom-components.git --save

[saeedtabrizi]

Hi @roysG After the installing react-native-deprecated-custom-components You must clean the cache and build your package again .
reset the cache with the following line script : rm -rf node_modules/ && npm cache clean && npm install && npm start -- --reset-cache I hope this script resolve your problem .

[roysG]

Hi guys, Thanks for your responses, but now i am getting another error when i run the command to clean the cache

Error:

npm ERR! As of npm@5, the npm cache self-heals from corruption issues and data extracted from the cache is guaranteed to be valid. If you want to make sure everything is consistent, use 'npm cache verify' instead. npm ERR! npm ERR! If you're sure you want to delete the entire cache, rerun this command with --force.

npm ERR! A complete log of this run can be found in: npm ERR! /Users/rsabah/.npm/_logs/2017-10-26T14_02_28_966Z-debug.log

[roysG]

ok , i added --force , i succeed to clean and now i get another error:

[saeedtabrizi]

@roysG it's good news from you , but i guess you must review your navigation configuration again .

[anniewey]

@roysG use PropTypes.func instead of React.PropTypes.func if you haven't implement the changes

[astw]

There are a lot breaking changes!

[sven0726]

i have the same error

[robhogan]

I had the error even though I wasn't trying to use Navigator. It turns out the error was thrown because I accidentally had this line (my IDE had auto-inserted it):

import * as Platform from 'react-native'

Changing that to

import { Platform } from 'react-native'

Fixed the issue. It turns out if you do import * as Foo from 'react-native' it triggers RN's warnings about deprecated/removed exports, which completely threw me off. HTH

[unmec]

They are often too many breaking changes. Update the codebase of your existing project is a nightmare.

[adrianolsk]

@rh389 Thank you, you saved my life, was getting this error even not using the Navigator. I trusted the IDE to do an import and it imported like this: import * as Messages from "react-native"; That was causing the problem.

[VarunDcoder]

Hi @roysG did you solved that error?

[VarunDcoder]

@saeedtabrizi Hi, I have commented the code(Navigator) in the node_modules but it's throwing a new error

@peterheard01 how to update this below code to use StackNavigator

import React, { Component } from 'react'
import {
  Navigator,
  View
} from 'react-native'
import { connect } from 'react-redux'

// import the login screen view and
// add it as the first component to render
// added HomeScreen to debug
import LoginScreen from './views/login_screen'
import HomeScreen from './views/home_screen'

// import firebase to determine which view to display
import { firebaseApp } from './firebase'

class App extends Component {
  constructor(props) {
    super(props)

    this.routes = [
      { view: LoginScreen },
      { view: HomeScreen }
    ]
  }

  render() {
    // base route stack to render
    // based on signed status of the user
    let navigator
    if (this.props.currentUser.signInStatus) {
      navigator =
        <Navigator
          style={{ flex: 1 }}
          initialRoute={this.routes[1]}
          initialRouteStack={this.routes}
          renderScene={this.renderScene}
          configureScene={this.configureScene}
        />
    } else {
      navigator =
        <Navigator
          style={{ flex: 1 }}
          initialRoute={this.routes[0]}
          initialRouteStack={this.routes}
          renderScene={this.renderScene}
          configureScene={this.configureScene}
        />
    }

    return (
      <View style={{flex: 1}}>
        {navigator}
      </View>
    )
  }

  renderScene(route, navigator) {
    return <route.view navigator={navigator} {...route}/>
  }

  configureScene(route, routeStack) {
    return Navigator.SceneConfigs.FloatFromRight
  }
}

function mapStateToProps(state) {
  return {
    currentUser: state.currentUser
  }
}

export default connect(mapStateToProps)(App)