React Native Navigator screen rendered when it's not supposed to

Active3 hr before
Viewed126 times

8 Answers


app.js will render either authentication screen or home screen based on user auth state called userProfile.,Can anyone kindly help me understand why App component tries to render profileScreen when userProfile state is null? And why does the profileScreen re-render twice? ,It looks like both your conditional Stack.Screens and the ProfileScreen rely on the userProfile state. Because that state is being updated asynchronously (like all things in React), it leads me to believe a race condition is causing your problem.

 Pretag team - issue, fix, solve, resolve

Navigation does not render the start page. But the component is rendered if don't wrap it in createBottomTabNavigator,Components in navigation are render, Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "server": "nodemon src/server/index.js",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.6",
    "bcrypt": "^4.0.1",
    "expo": "~37.0.8",
    "express": "^4.17.1",
    "jsonwebtoken": "^8.5.1",
    "mongodb": "^3.5.7",
    "mongoose": "^5.9.11",
    "react": "~16.9.0",
    "react-native": "",
    "react-native-elements": "^2.0.0",
    "react-native-gesture-handler": "~1.6.0",
    "react-native-reanimated": "~1.7.0",
    "react-native-safe-area-context": "0.7.3",
    "react-native-screens": "^2.2.0",
    "react-native-web": "~0.11.7",
    "react-navigation": "^4.3.9",
    "react-navigation-stack": "^2.4.0",
    "react-navigation-tabs": "^2.8.13",
    "react-redux": "^7.2.0",
    "redux": "^4.0.5",
    "redux-saga": "^1.1.3"
  "devDependencies": {
    "@babel/core": "^7.8.6",
    "babel-preset-expo": "~8.1.0"
  "private": true

const switchNavigator = createBottomTabNavigator({
    login: {
      screen: AuthForm,
      path: "login",
    main: createStackNavigator({
      AddBook: { screen: AddBookContainer, path: "addbook" },
      ListBook: { screen: ListBookContainer, path: "listbook" },
    initialRouteName: "login",

const Navigator = createAppContainer(switchNavigator);

const App = () => {
  return (
      <Navbar />
        <Navigator />

export default App;

 Pretag team - issue, fix, solve, resolve

This project aims to expose native navigation container components to React Native. It is not designed to be used as a standalone library but rather as a dependency of a full-featured navigation library.,If you are adding a new native component to be used from the React Native app, you may want it to respond to navigation lifecycle events.,Along with this component's properties that can be used to customize header behavior, one can also use one of the below component containers to render custom react-native content in different areas of the native header:

import android.os.Bundle;

protected void onCreate(Bundle savedInstanceState) {
load more v

How many items to render in the initial batch. This should be enough to fill the screen but not much more. Note these items will never be unmounted as part of the windowed rendering in order to improve perceived performance of scroll-to-top actions.,The actual data to render, akin to the data prop in FlatList.,Heterogeneous data and item rendering support.

load more v

Error situations need to be understood by all users. The following link shows us how to expose error texts to screen readers as well:,While this is a very important accessibility feature, it is also a technique that should be used judiciously. Use it to repair the keyboard focus flow when it is disturbed, not to try and anticipate how users want to use applications.,The following resources show us how to do this:

  aria-label={labelText}  aria-required="true"  onChange={onchangeHandler}
load more v

This guide covers how routing works in an app built with Ionic and React.,A common routing use case is to provide a "fallback" route to be rendered in the event the location navigated to does not match any of the routes defined.,You can alternatively supply a component to render instead of providing a redirect.

const App: React.FC = () => (
        <Route path="/dashboard" component={DashboardPage} />
        <Redirect exact from="/" to="/dashboard" />
load more v

Native stack navigator that uses native navigation primitives for navigation using react-native-screens,Using drawer navigation in React Navigation,Using tab navigation in React Navigation

this.props.navigation.navigate('RouteName', {
   /* params go here */ })
load more v

Other "native-react" queries related to "React Native Navigator screen rendered when it's not supposed to"