[Solved]-Invariant Violation: The navigation prop is missing for this navigator-Reactjs

i been struggling from past few days .well might be you too been struggling to solve if and if you have deleted the react-navigation from package.json and installed using npm please check your backup project and see the navigation version and try to add the same and remove node-modules and do npm install. hope its works.

good luck breaking your head with react-native :-)

import react, { component } from 'react';
import { createstacknavigator, createappcontainer } from 'react-navigation';
import home from './home';
import details from './details';

const root = createstacknavigator({

    home: { 

        screen: home,
    },

    details: { 

        screen: details,
    },

});

const container = createappcontainer(root);
export default container;   

in your app.js file reference it with </container>

i had the code at the bottom

export default class app extends react.component {
  render() {
    return (
      <view >
        <simpleapp style={{ width: dimensions.get("window").width }} />
      </view>
    );
  }
}

i simply replaced it with and it worked like a charm. definitely, it's because updates in react-navigation library:

const app = createappcontainer(simpleapp);
export default app;

also, i included createappcontainer library into react-navigation at the top as well.

this one is to create a bottom navigator with two tabs:

import {createbottomtabnavigator, createappcontainer} from 'react-navigation';

export class home extends component{
   //...
}

export class settings extends component{
   //...
}     

const navig = createbottomtabnavigator({
  home: home,
  settings: settings
});

const app = createappcontainer(navig);

export default app;

const appnavigator = createstacknavigator({
  home: { screen: home },
  friends: { screen: friends },
});

simple i did

const app = createappcontainer(appnavigator);
export default app;

instead of

export default appnavigator;

here's another way

import react, {component} from 'react';
import { stylesheet, text, view } from 'react-native';
import { createstacknavigator,createappcontainer } from 'react-navigation';

import login from './view/login.js'
import signup from './view/signup.js'

const rootstack = createstacknavigator(
  {
    home: {
      screen: login
    },
    signup: {
      screen: signup
    }
  },
  {
    initialroutename: 'home'
  }

);

class app extends react.component {
  render() {
    return <rootstack />;
  }
}

export default createappcontainer(rootstack);

i wasted my 2.5 hours to got this solution after many google searches...hope this will work.

just import this two:

import { createstacknavigator } from "react-navigation-stack";
import { createappcontainer } from "react-navigation";

and make a little change to your code like this:

create const above the class

const appnavigator = createappcontainer(rootstack);

and finally call that const in the class instead of <rootstack/>

<appnavigator />

thankx!

create a new file screencontainer.js (you can choose the name). then in the screencontainer file add:

import react, { component } from 'react';
import { createstacknavigator, createappcontainer } from 'react-navigation';
import mainscreen from './mainscreen'; 
import aboutscreen from './aboutscreen';

const navigationstack = createstacknavigator({
    main: { 
        screen: mainscreen,
    },
    about: { 
        screen: aboutscreen,
    },
});

const container = createappcontainer(navigationstack);

export default container; 

then at your app.js file:

import container from './screencontainer';

class app extends component {
  render() {
    return (
      <container />
    );
  }
}

@tom dickson something like this:

import react, { component } from 'react';
import { createstacknavigator, createappcontainer } from 'react-navigation';

import screenone from './screenone';
import screentwo from './screentwo';

const navstack = createstacknavigator({
    screenone: { 
        screen: screenone,
    },
    screentwo: { 
        screen: screentwo,
    },
});

const app = createappcontainer(navstack);

export default app;

then reference it with

<app />