Organizing a React Navigation App with a Visible Tab Bar

I have a clear image that demonstrates the problem

https://i.sstatic.net/M2Hl7.png

This is a simplified overview of the app structure. There is a tab bar navigator with three screens labeled A B C.

TabBar A consists of a stack navigator containing D and E

There is also a Stack navigator including F and G

My dilemma arises when calling screen F. I want the TabBar to remain visible (at the top). What is the most effective method to achieve this? As it stands, if I navigate from A to D, the tab bar remains on top, but not when going from A to F.

I wish to avoid placing F in the same stack as A since F should be accessible from both B and C, and the tab bar should always remain on top.

An excellent example would be the Instagram app where I can access the profile screen (F) from various tab screens while keeping the tab bar consistently on top.

How can I implement this functionality using React-Navigation?

I hope my explanation was thorough, and thank you in advance for your assistance.

typescriptreact-nativereact-navigationinstagram

Answer №1

There is no restriction on adding screens F and G to each of the A, B, and C stacks. It's simply a matter of configuration, not duplicating code.

NavigationContainer
  Tab.Navigator
    A (Stack.Navigator)
      A (Screen)
      D (Screen)
      E (Screen)
      F (Screen)
      G (Screen)
    B (Stack.Navigator)
      B (Screen)
      F (Screen)
      G (Screen)
    C (Stack.Navigator)
      C (Screen)
      F (Screen)
      G (Screen)

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

Encountering the "Maximum Update Depth Exceeded" error in React Typescript with hooks

I encountered this error: Uncaught Error: Maximum update depth exceeded. It seems to be related to calling setState multiple times within componentWillUpdate or componentDidUpdate. React limits nested updates to prevent infinite loops. I am unsure of what ...

reactjstypescriptreact-hooks

The intricate field name of a TypeScript class

I have a TypeScript class that looks like this - export class News { title: string; snapshot: string; headerImage: string; } In my Angular service, I have a method that retrieves a list of news in the following way - private searchNews(sor ...

angularjsjsontypescript

Is there a way to effectively sort through Firebase database entries using Angular based on checkbox selection?

I am working on an event page where all events are displayed with a category field. This is how my database structure looks: category: - categoryName events: - eventName - category.id (stores the category id) My goal is to initially display all eve ...

angulartypescriptfirebasegoogle-cloud-firestoreangularfire

Encountering a Lint No Nested Ternary Error while utilizing the ternary operator

Is there a way to prevent the occurrence of the "no nested ternary" error in TypeScript? disablePortal options={ // eslint-disable-next-line no-nested-ternary units=== "mm&quo ...

typescriptmaterial-uinestedconditional-operator

Discover the Category of Union based on Discriminator

Imagine a scenario where there is a concept of a union type called Thing, which combines types Foo, Bar, and Baz, each identified by the property tag. interface Foo { tag: 'Foo' foo: string } interface Bar { tag: 'Bar' bar: nu ...

typescripttype-inferencetypescript-typingsunion-types

Issue with Redis cache time-to-live not adhering to set expiration

I have encountered an issue while using IoRedis and DragonflyDB to implement rate limiting in my web application. Despite setting a TTL of 5 seconds for the keys in the Redis DB, sometimes they do not expire as expected. I am struggling to understand why t ...

typescriptredisioredis

What are some ways to resolve this console error: "TS2307: Could not locate module '@components/common/ButtonBlock' or its corresponding type declarations."

While the project is running smoothly, I am noticing a multitude of errors appearing in the console of VS Code. How can I eliminate these error messages? It seems to be related to TypeScript. Additionally, I am encountering an error in the browser as well ...

reactjstypescript

Leveraging non-React entities to seamlessly integrate components within a component hierarchy in React utilizing TypeScript

I am currently working on a React Typescript project where I am exploring the use of traditional polymorphism. Below is a simplified version of my project, where components are returned from vanilla Typescript objects rather than React components, allowing ...

reactjstypescriptoopdesign-patternspolymorphism

Could someone clarify for me why I am unable to view the connection status within this code?

Having trouble with the Ionic Network plugin. I've included this code snippet, but it's not functioning as expected. No console logs or error messages are showing up. import { Network } from '@ionic-native/network'; ionViewDidLoad() { ...

angulartypescriptionic-framework

Unable to attach eventName and callback to addEventListener due to the error message stating 'No overload matches this call'

I am attempting to attach an event listener to the input element stored within a class method. This method takes a props object containing eventName and callback. public setTextFieldInputListener({ eventName, callback }: TextFieldListenerProps): void { ...

javascripttypescriptevent-listener

"An error in the signature index results in the failure of the

I'm encountering a coding issue that's puzzling me. The TypeScript index signature I included in my code is as follows: const ships: { [index: string]: Ship } = {}; This snippet of code contains the problematic line: recieveAttack(e: any) { ...

typescriptjasminekarma-jasmine

Transforming FormData string key names into a Json Object that is easily accessible

Recently, I encountered an issue where my frontend (JS) was sending a request to my backend (Node Typescript) using FormData, which included images. Here is an example of how the data was being sent: https://i.stack.imgur.com/5uARo.png Upon logging the r ...

javascriptnode.jstypescript

The 'Alias[]' type does not share any properties with the 'Alias' type

I encountered an issue: The error message 'Type 'Alias[]' has no properties in common with type 'Alias'' appeared. Here is my Alias setup: alias: Alias = { id: 0, domain_id: 0, source: '', dest ...

node.jsangulartypescriptexpress

Implementing Material design using the Material-UI library in a

I have a straightforward inquiry. I am eager to delve into react native development. Uncertain about incorporating material-ui. Can it be integrated with react native? Your assistance is greatly appreciated. ...

react-nativematerial-ui

The specified format of `x-access-token` does not match the required type `AxiosRequestHeaders | undefined`

I am encountering an issue while trying to add an authHeader to the "Service". The error message displayed is: Type '{ 'x-access-token': any; } | { 'x-access-token'?: undefined; }' is not assignable to type 'AxiosRequest ...

reactjstypescriptredux

What is the most efficient way to apply multiple combinations for filtering the information within a table?

I'm facing an issue with my Angular project. I have 4 select boxes that allow users to apply different filters: office worker project name employee activities The problem I'm encountering is the difficulty in predicting all possible combination ...

angulartypescriptfilter

Circular function reference in Typescript occurs when a function calls itself

The functionality of this code snippet is rather straightforward; it either returns a function or a string based on an inner function parameter. function strBuilder(str: string) { return function next(str2?: string) { if(typeof str2 === "string& ...

typescriptrecursionfunctional-programming

Steps for setting up tsconfig.json for Chrome extension development in order to utilize modules:

While working on a Chrome plugin in VS Code using TypeScript, I encountered an issue with the size of my primary .ts file. To address this, I decided to refactor some code into a separate module called common.ts. In common.ts, I moved over certain constan ...

typescriptgoogle-chrome-extension

Saving and retrieving information from a react-native calendar to a JSON document

Considering creating a concept for a react-native app that serves as an event diary where users can add events over time. To uphold security and privacy, I prefer not to rely on databases for storage. I've come across the idea of using JSON files as a ...

jsonreact-native

Utilizing variables to set the templateUrl in Angular2

Trying to assign a variable to the templateUrl in my component, but it's not functioning as expected. @Component({ selector: 'article', templateUrl: '{{article.html}}', styleUrls: ['styles/stylesheets/article.comp ...

angulartypescript