Navigator is deprecated in RN 0.44.0 and not working

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

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

@grabbou

@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 .

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.

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!

@muxiaodeng

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

@ashish-algorythma

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

I have the same problem

@amirrezamahyari

@amirrezamahyari Do you have resolve?

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

Use with:
<NavigationExperimental.Navigator

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

Why was React Navigator deprecated?

@rexjrs

@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.

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

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?

@roysG

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

There are a lot breaking changes!

i have the same error

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

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

@rh389

@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.

@roysG

Hi @roysG did you solved that error?

@saeedtabrizi

@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)

@VarunDcoder I'm going through the same situation. Did you solve the problem?

@andreia-sl

Hi @andreia-sl By downgrading react native versions and resetting the cache with the following line script :
rm -rf node_modules/ && npm cache clean && npm install && npm start -- --reset-cache My code is working fine now but got some warnings.

I gave up using the Navigator and am using RouterFlux. But thx @VarunDcoder

if depresiate and pakage is remove ---error
naivigatorExperimental import and < NaivigatorExperimental.Navigator /> used this two statement perfect run your programme

you show use this now :
import {Navigator} from 'react-native-deprecated-custom-components'

if you already upgrade react-navigation and you still see this error probably its not about the react-navigation. So you should upgrade which is using BackAndroid packages. I found a way;

Just search BackAndroid in your node_modules So thats for the understand which is using deprecated thing.

Then just upgrade them to latest version or fixed version for BackAndroid.
NO NEED INSTALL ANYTHING!

These are my dependency. I got same issue after upgrade to 0.58.3 And I solved this as above solution.

    npmPackages:
      react: ^16.7.0 => 16.7.0 
      react-native: ^0.58.3 => 0.58.3 
    npmGlobalPackages:
      react-native-cli: 2.0.1

Migrate 'Stack Actions' examples to static API in v7 (react-navigatio…

Navigation Menu

Repository navigation

Navigator is deprecated in RN 0.44.0 and not working #1328

28 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Navigator is deprecated in RN 0.44.0 and not working #1328

Description

Activity

grabbou commented on May 1, 2017

amirrezamahyari commented on May 1, 2017

grabbou commented on May 1, 2017

muxiaodeng commented on May 4, 2017

ashish-algorythma commented on May 4, 2017

muxiaodeng commented on May 5, 2017

Juxtlie commented on May 5, 2017

Juxtlie commented on May 5, 2017

davidck commented on May 5, 2017

nvs2394 commented on May 6, 2017

rexjrs commented on May 7, 2017

nvs2394 commented on May 8, 2017

rexjrs commented on May 8, 2017

peterheard01 commented on May 8, 2017

28 remaining items

anniewey commented on Nov 1, 2017

astw commented on Nov 1, 2017

sven0726 commented on Nov 19, 2017

robhogan commented on Nov 28, 2017

unmec commented on Dec 2, 2017

adrianolsk commented on Dec 3, 2017

Dev-SaiVarunPadala commented on Jan 10, 2018

Dev-SaiVarunPadala commented on Jan 10, 2018

andreia-sl commented on Jan 30, 2018

Dev-SaiVarunPadala commented on Feb 5, 2018

andreia-sl commented on Feb 5, 2018

JAYANTdEV commented on Apr 23, 2018

ilpanda commented on Aug 23, 2018

ue commented on Jan 30, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions