CODEWITHSUNDEEP
react-nativereact-navigation
Furrukh Jamal
Furrukh Jamal

Reputation: 142

createNavigationContainer() has been removed error

I am trying to learn react-navigation and react-native. I have been trying to fix this code for some time now but some how it keeps giving me this error on snack.expo.io that createNavigationContainer() has been removed use createAppContainer instead

heres my simple code to get my first stacknavigator

import React from "react";
import {createStackNavigator, createAppContainer} from "react-navigation";
import {View, Text, Button} from "react-native";


class screencomponentone extends React.Component {
  render (){
    return (
      <View style=
      {{flex: 1,
        alignItems: "center" ,
        justifyContent: "center",
        borderWidth: 25,
        borderColor: "red"}}>
        <Button title= "go to screen 2" onPress = {() => {
          this.props.navigation.navigate("routetwo");
        }}/>
      </View>
    );
  }
}


class screencomponenttwo extends React.Component {
  render (){
    return (
      <View style=
      {{flex: 1,
        alignItems: "center" ,
        justifyContent: "center",
        borderWidth: 25,
        borderColor: "blue"}}>
        <Button title= "go to screen 1" onPress = {() => {
          this.props.navigation.navigate("routeone");
        }}/>
      </View>
    );
  }
}



const AppNavigator = createStackNavigator({
  "routeone" : screencomponentone,
  "routetwo" : screencomponenttwo,
})

//cause of error using old code of lecture refered from docs https://reactnavigation.org/docs/en/app-containers.html
const AppContainer = createAppContainer(AppNavigator);


export default class App extends React.Component {
  render () {
    return <AppContainer />
  }
}

but somehow it keeps giving me this error though in no place im using createNavigationContainer in the code

Upvotes: 1

Views: 6228

Answers (3)

Roy Barman
Roy Barman

Reputation: 11

@OP, I had exact same problem. I ran the following from the project root folder, and it fixed my issue.

npm i react-navigation-stack --save

Upvotes: 1

Mehran Khan
Mehran Khan

Reputation: 3636

In React Navigation 4 Version they have change the imports

Please change this 

import {createStackNavigator, createAppContainer} from "react-navigation";

To 

import { createAppContainer } from '@react-navigation/native';
import { createStackNavigator } from 'react-navigation-stack';

add in package.json

"react-navigation": "4.0.0",
"react-navigation-stack": "1.5.1",
"@react-navigation/core": "^3.5.0",
"@react-navigation/native": "^3.6.2"

Snack link : https://snack.expo.io/@mehran.khan/navigation

Upvotes: 7

hong developer
hong developer

Reputation: 13926

You can change this

const AppContainer = createAppContainer(AppNavigator);
export default AppContainer;

Upvotes: 0

Related Questions