Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"you should only render one navigator" error when there is only one navigator #4196

Closed
ashrafmajdee opened this issue May 10, 2018 · 27 comments

Comments

Projects
None yet
@ashrafmajdee
Copy link

commented May 10, 2018

Current Behavior

I keep getting the following error, after i open the app a second time, without closing the first instance in android.

You should only render one navigator explicitly in your app, and other navigators should by rendered by including them in that navigator.

How to reproduce

App.js

import React, { Component } from 'react'
import { View, StatusBar } from 'react-native'
import RootNavigator from '../Navigation/RootNavigator'

export default class App extends Component {
  render () {
    return (
      <View style={{flex: 1}}>
        <StatusBar barStyle='light-content' />
        <RootNavigator />
      </View>
    );
  }
}

RootNavigator.js

import { createStackNavigator } from 'react-navigation'
import { View } from 'react-native';

export default createStackNavigator({
  Home: View,
  Auth: View
}, {
  mode: 'modal',
  headerMode: 'none',
  initialRouteName: 'Home'
})

Your Environment

software version
react-navigation 2.0.1
react-native 0.55.3
node 8.9.4
npm or yarn yarn 1.3.2
@ptupi

This comment has been minimized.

Copy link

commented May 11, 2018

Same here

@vpfaulkner

This comment has been minimized.

Copy link

commented May 11, 2018

+1

@jzrchilel

This comment has been minimized.

Copy link

commented May 12, 2018

Same error with me

@1280103995

This comment has been minimized.

Copy link

commented May 13, 2018

+1

1 similar comment
@msajadi832

This comment has been minimized.

Copy link

commented May 13, 2018

+1

@indocomsoft

This comment has been minimized.

Copy link

commented May 13, 2018

Same issue

@alek5ey

This comment has been minimized.

Copy link

commented May 13, 2018

+1

1 similar comment
@souzamarcos

This comment has been minimized.

Copy link

commented May 14, 2018

+1

@Arjun-sna

This comment has been minimized.

Copy link

commented May 14, 2018

The same issue with me but in a different scenario as
Below is my root navigator

export default createSwitchNavigator({
      auth: ...,
      Menu: View
}, {
      initialRouteName: 'auth'
})

And for Menu route I if set some StackNaviagtor with only React components as screens it works fine.
But if nest some other navigator like TabNavigator inside that, it throws that error you should only render one navigator

The belew route will fail:

const Menu = createStackNavigator({
    mainTabs: {
        screen: createMaterialBottomTabNavigator({
          ....all tabs
        }),
    }
});
@TwilightOwl

This comment has been minimized.

Copy link

commented May 14, 2018

same error. a tabnavigator inside a stacknavigator

@vineethgeorge03

This comment has been minimized.

Copy link

commented May 15, 2018

same here .. same error when i use a tab navigator inside a stack navigator

@tiann

This comment has been minimized.

Copy link

commented May 15, 2018

+1

@vksgautam1

This comment has been minimized.

Copy link

commented May 15, 2018

same issue here

@himegaminyaa

This comment has been minimized.

Copy link

commented May 16, 2018

+1

4 similar comments
@jibopoly

This comment has been minimized.

Copy link

commented May 16, 2018

+1

@zzimbler

This comment has been minimized.

Copy link

commented May 16, 2018

+1

@OroszD

This comment has been minimized.

Copy link

commented May 16, 2018

+1

@luanpatrickbo

This comment has been minimized.

Copy link

commented May 17, 2018

+1

@jeffreydelooff

This comment has been minimized.

Copy link

commented May 17, 2018

Please stop with the annoying +1's. Just thumb up the original post, that's what they are for.

@shivendra-myob

This comment has been minimized.

Copy link

commented May 20, 2018

I'm quite new to react-navigation, and apologies in advance if this does not help.
However I had the same error, but resolved it after reading the following -
https://reactnavigation.org/docs/en/common-mistakes.html

In your code example, you are attempting to render , but I think the navigators should be used as screens inside the navigator (e.g in createStackNavigator) or must be the parent component returned in your App.js.

@Friendly-Robot

This comment has been minimized.

Copy link

commented May 20, 2018

This doesn't solve the issue but because I know I am only rendering one DrawerNavigator and nothing else, this error screen is only bugging the boogers out of me. So after trying to use YellowBox.ignoreWarnings[...] for the longest time to no avail, I just decided to mute the darn message in react-navigation/src/createNavigationContainer:

      if (__DEV__ && !this.props.detached) {
        // if (_statefulContainerCount > 0) {
        //   console.error(
        //     `You should only render one navigator explicitly in your app, and other navigators should by rendered by including them in that navigator. Full details at: ${docsUrl(
        //       'common-mistakes.html#explicitly-rendering-more-than-one-navigator'
        //     )}`
        //   );
        // }
      }

By the way, this error just strangely started appearing out of nowhere last night without me changing anything in the DrawerNavigator which was very weird.. Muting this error is maybe the only solution to this strange occurrence?

@brentvatne

This comment has been minimized.

Copy link
Member

commented May 20, 2018

Hi everyone, I was away for the last week and a bit so I didn't see this issue until now.

Here's what I just did:

  • I copied the code from the original example, ran it on iOS, couldn't repro, good.
  • I then tried running it on Android in emulator (as the issue says it happens on Android), I did not receive a warning. I closed and reopened it and didn't receive a warning. I went into multi-tasker, switched to another app, and switched back. I didn't receive a warning.

So, what I need from one of you is a link to a Github repository that I can clone and run, along with exact steps that I can follow to reproduce this. Thanks!

@marcpechaitis

This comment has been minimized.

Copy link

commented May 21, 2018

@brentvatne
Can you try?:
https://github.com/marcpechaitis/RNNavAndroidWTF.git

Basically I followed steps for Getting Started > Hello React Navigation > Moving Between Screens via the docs. I get the error after 1) Open app on Android (simulator) 2) click Home button 3) Swipe up and click app icon. The error does not occur on iOS.

Like many others reported in this thread, I originally encountered this issue with a TabNavigator within StackNavigator...but this much simpler setup does the same thing.

Thanks!

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

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </View>
    );
  }
}

class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
      </View>
    );
  }
}

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
  }
);

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

screen shot 2018-05-21 at 4 18 20 pm

@brentvatne

This comment has been minimized.

Copy link
Member

commented May 22, 2018

@marcpechaitis - to add to this, when I run react-native run-android I am able to reproduce. If I close the app and reopen it, without running react-native run-android, then it works as expected the next time.

I believe this is due to a bug in react-native Android. I was able to verify this by adding a log to componentWillMount on the App component in App.js. You will notice that when you open the app again, componentWillMount on the App component fires again, but componentWillUnmount is never called.

I can patch react-navigation to not show this warning temporarily, but ultimately this isn't react-navigation's fault, and this bug should be resolved upstream on react-native. This is not an issue if you use Expo it seems.

@brentvatne

This comment has been minimized.

Copy link
Member

commented May 22, 2018

I published react-navigation@2.0.2 which hides this warning and opened an issue on react-native facebook/react-native#19377

@brentvatne brentvatne closed this May 22, 2018

@vineethgeorge03

This comment has been minimized.

Copy link

commented May 22, 2018

if i create the tabNavigator which is inside a stackNavigator like below it works fine:
export default createBottomTabNavigator({
Home: HomeScreen, // some screen
Settings: SettingsScreen, // some screen
});

But if i create my tabNavigator which is inside a stackNavigator like as , it throw me this error "you should only render one navigator" error when there is only one navigator"
const TabNavigator = TabNavigator({
Home: HomeScreen, // some screen
Settings: SettingsScreen, // some screen
});

export default class TabNav extends React.Component{
constructor(props){super(props)}
render(){
return(

)
}
}

@react-navigation react-navigation locked and limited conversation to collaborators May 22, 2018

@brentvatne

This comment has been minimized.

Copy link
Member

commented May 22, 2018

@vineethgeorge03 - see my two comments directly above yours

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.