Is it a good idea to nest Stack Navigators within React Native Navigation?

Is it better to keep navigators flat or nest them where it makes logical/UI sense?

For example:

App1: {
    Login,
    Register,
    Profile,
    Chats,
    Friends
}

compared to

App2: {
    LoginStack: {
        Login,
        Register
    },
    MainStack: {
        Profile,
        Chats,
        Friends
    }
}

In App1, there is a single stack for the app, allowing screens to be moved around based on sign-in status. Meanwhile, in App2, nested stack navigators are used, one for signed-in users and another for those who aren't.

Does the answer change if Redux is being utilized?

reactjsreact-nativereact-navigation

Answer №1

In the latest version of `react-navigation` (v5), it is now possible to nest multiple levels together as shown below:

@react-navigation/drawer
@react-navigation/native
@react-navigation/stack

However, attempting to nest multiple levels of Stack navigation alone is currently not working.

If you are using v4, you may find this blog post helpful: Complex Navigation Example with React Navigation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the combination of React Hooks (specifically useState) and Mobx without the use of mobx-react

In my React app (built with TypeScript), I am trying to utilize React hooks, specifically useState, to handle the form state and also use it as an observable component for MobX store. However, I am encountering an error message that says, Hooks can only ...

reactjsmobxmobx-reactreact-hooksreact-tsx

What are some ways we can enhance Map.get for react-router using ES6 Maps?

I recently implemented a map using new Map() to store my RR4 configuration within my application. My goal is to retrieve the values associated with /countries/:id when accessing /countries/1. routesMap.get('/countries/1') // should provide the ...

javascriptreactjsecmascript-6mapsreact-router-dom

Using React Native and Node.js to send pictures to an S3 bucket

One of the features in my application allows users to choose a profile image, which I want to upload to an s3 bucket when they save their profile information I send the image data along with JSON (containing name, email, telephone, for instance) from my a ...

node.jsreact-nativeexpressamazon-s3

Tips for real-time editing a class or functional component in Storybook

Hey there, I am currently utilizing the storybook/react library to generate stories of my components. Everything has been going smoothly so far. I have followed the guide on https://www.learnstorybook.com/react/en/get-started and added stories on the left ...

javascriptreactjsreduxsassstorybook

React - 'classProperties' is not currently activated in this setting

Recently, I incorporated Truncate-react into my project. Subsequently, React prompted me to install @babel/plugin-proposal-class-properties, which I promptly added to the package.json file as follows: "babel": { "presets": ...

javascriptreactjsbabeljs

The issue with React Material UI MUI's 'MuiDialog-container' is that it persists on the screen even after the dialog has been closed, causing a blockage in the interface when the dialog is used

I have a dialog for employee search in my React app that I want to use in multiple places. For example, here is the component: import React, { useState, useEffect } from 'react'; import Button from '@mui/material/Button'; import Dialog ...

reactjsmaterial-uimodal-dialog

Having trouble with getting React native init to work in a new project?

Having some issues while attempting to start a new project with react-native 0.59.8. After experimenting with various versions of react-native, I suspect that the problem lies within the versions of yarn, node, or npm that I am currently using. { Error: ...

node.jsreact-nativenpmyarnpkg

The value remains constant until the second button is pressed

I have a button that increments the value of an item. <Button bsStyle="info" bsSize="lg" onClick={this.addItem}> addItem: addItem: function() { this.setState({ towelCount: this.state.towelCount - 2, koalaCount: this.state.koalaCount + 2 ...

javascriptreactjsfirebasereactfire

When attempting to include the <header/> element in the layout.tsx file to showcase the header on all pages, encountering errors while utilizing the app router within the Next.js framework located in the app directory

Some modifications were made to the layout.tsx file recently. Due to certain restrictions, the next router cannot be used in server components which led to commenting out the metadata section temporarily to avoid the server component error. 'use clien ...

reactjsnext.js

React Native component that enables users to both input their own text and select options from a dropdown menu as they type

Looking to develop a component that combines Text Input and FlatList to capture user input from both manual entry and a dropdown list. Has anyone successfully created a similar setup? I'm facing challenges in making it happen. Here's the scenari ...

typescriptreact-nativeuse-statereact-native-flatlistreact-native-textinput

obtain the content of a TextField element

In my React component that utilizes MaterialUI, I have created a simple form with a text field and a button: export default function AddToDo() { const classes = useStyles(); return ( <div style={{ display: "flex" }} ...

javascriptreactjsmaterial-ui

Looking for a navbar with a transparent design, I want the navbar to maintain its transparency while the menu that pops up after clicking the hamburger icon to have a colored

As a new Junior developer, I am currently working on a website project using ReactJS. The site includes a Bootstrap Navbar that starts off transparent at the top of the page and changes to a colored background upon scrolling. However, I would like the menu ...

reactjsnavbarreact-bootstraptransparent

Setting a default color for MUI components within a theme's color palette

Is it feasible to establish a default color for MUI components such as Checkbox and TextField? Currently, they default to the primary color, but I am interested in setting the Checkbox to secondary and the TextField to tertiary (a custom color). So my quer ...

reactjsmaterial-uithemescolor-palette

Hey there, I'm looking to use different CSS fonts on Windows and Mac for the same page on a web application. Can someone please guide me on how to accomplish this?

In order to tailor the font based on the operating system, the following criteria should be followed: For Windows: "Segoe UI" For Mac: "SF Pro" Attempts have been made using the code provided below, but it seems to load before the DOM and lacks persisten ...

javascripthtmlcssreactjswebkit

The issue with the NextJS Layout component is that it is failing to display the page content, with an error message indicating that objects cannot be used

I am embarking on my first project using Next JS and after watching several tutorial videos, I find the Layout component to be a perfect fit for my project! However, I am encountering an issue where the page content does not display. The Menu and Footer a ...

javascriptreactjsnext.js

How to add an OnClick listener to a cell element in a table built with the Tan

I am currently working on a project using React and trying to implement a table. I want to show an alert when a header cell in the table is clicked, displaying some information. However, I have been struggling to find assistance on adding a click listener ...

javascriptreactjsnext.jstanstackreact-query

The <Link> component in Next.js redirects to a 404 error page

I recently developed a next.js application and encountered an issue when attempting to link to another page. Whenever I try linking, I receive a 404 error. I have read that this is a known bug, but I am unsure of how to resolve it. Upon creating the app, I ...

reactjsnext.js

Reorganizing MongoDB arrays with Prisma and NextJS

I'm dealing with data stored in MongoDB that looks like this: { items: [ { id: '6614005475802af9ae05b6b2', title: 'title', createdAt: '2024-04-08T14:33:56.734Z', }, { id: '6613f ...

reactjsmongodbnext.jsprisma

Why am I receiving NAN as the output when trying to add two numbers in React?

When I attempt to add two numbers together, I keep getting NaN as the result. Any suggestions or advice on how to fix this issue would be greatly appreciated. This is the code I have been using: var sum = parseInt(label.labellength, 10) + parseInt(label.l ...

reactjsnanparseintparsefloat

Issue with react-hook-form and Material-UI in React applications

I have been working on creating a form that includes a dynamic field with the option to show or hide it using a switch. My goal is to leverage both react-hook-forms, which offers features like automatically structuring data without manual input and the abi ...

reactjsmaterial-uireact-hook-form