Questions tagged [react-navigation]

Details on my project dependencies: "react-navigation": "^3.6.0", "expo": "^32.0.0" I'm working with a TabNavigator that contains redirections to child components, which are StackNavigators. However, I'm facing an issue where I am unable to hide ...

Working with react native and react navigation for routing in my application that supports both English and Arabic languages. When a user switches from English to Arabic, the application reloads successfully but the drawer position does not change. Here&a ...

As a newcomer to React-native and React-native-web, I find myself facing a challenge while working on an existing project. This project utilizes the React-Native-paper library and the @react-navigation/native library. Currently, I am attempting to adapt th ...

My screen includes an image and I would like to capture the full-size screen with the header displayed. However, using position: "absolute" does not properly wrap the header, and setting header: null is not an option since I still want the back button to b ...

Imagine this particular situation. Essentially, a MaterialTopTabNavigator is nested within a StackNavigator. The challenge at hand is how to effectively pass data from a function all the way to the MaterialTopTabNavigator. Keep in mind that the data has t ...

I would like to modify the calendar code so that clicking on any day of the week will open the ScanPhoto page. However, I am unsure of how to accomplish this task. My current code seems correct but there appears to be a syntax error when trying to naviga ...

When it comes to navigating between screens with React Native, how do the methods differ when using React Navigation compared to using hooks and functions for navigation? And is React Navigation the superior choice? ...

Hey everyone, I'm new to React Native and I'm trying to create a news app with posts. I'm having trouble figuring out how to pass data in a flatlist to another screen and open the screen with the post data. I'm using V6 navigation. Here ...

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 }, Main ...

Exploring the realm of React-Native as a newcomer, I am currently working on an app to showcase my skills. Everything has been going smoothly until I encountered react-navigation today. Following the guidelines provided at , here are the steps I took: ...

Just starting out with React Native. I have a common use case where I'm working with React Navigation and have 4 different Tabs. In the first Tab, I have a FlatList from which I want to select Favorites. These Favorites should then be displayed in an ...

Currently, I am in the process of mastering the art of creating stunning animations using react native. However, I am facing some difficulties while working with the react-native-fluid-transitions library. My issue arises when using shared elements with i ...

I am facing an issue with passing parameters between two screen components that belong to different navigators. First, I have the Login component inside a Stack navigator, and then I have the Home component inside a Drawer navigator. The hierarchy is as f ...

I have been following the official React Navigation documentation, and according to it: <Tab.Screen name="Home" component={HomeScreen} options={{ tabBarBadge: 3 }} /> However, when I add this code snippet to my project like so: <Tab.Scr ...

I am a beginner in the world of react native and I am trying to figure out how to access the drawer open feature on my home page from stack navigation, specifically within the launch.js file. launch.js import * as React from 'react'; import {Button, Vie ...

Greetings, I'm a newcomer to the world of react native and currently facing an issue: const Tab = createMaterialTopTabNavigator(); export const CurriculumMenu = ({navigation, item}) => { const data = item.Title; console.log(data) return ( ...

Hello there, I've been experimenting with react-navigation 6 in an attempt to show a modal with presentation: "modal" as instructed on the documentation. However, I'm facing an issue where the modal is not displaying correctly and appears like a regular ...

When a specific screen is active, I want the bottom tab bar to disappear. Using react navigation for this purpose. For example, when the "Insight Detail Adjustment" screen is displayed, I need the bottom tabs to be hidden. Currently, none of the solutions ...

Currently, I am utilizing react-native-reanimated:3.4.2 react-native:0.72.3 Upon using navigation.reset or navigation.replace in my iOS react native app, the application crashes without any indication. However, when running the app through Xcode, th ...

Currently, I am working on building an app using react-native, react-navigation, and typescript. The app consists of only two screens - HomeScreen and ConfigScreen, along with one component named GoToConfigButton. Here is the code for both screens: HomeSc ...

When attempting to install the package with the following command: npm install @react-native-community/masked-view, an error is encountered: Error message: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While ...

I'm brand new to react and currently working on a project where navigation is done through a hamburger menu. I haven't encountered any errors in my code, but for some reason, the hamburger menu icon isn't displaying as expected. Interestingl ...

How can I reset the state in a functional component back to its initial state when navigating using navigation.navigate()? For example, if a user navigates to screen A, sets some state, then clicks a button and navigates to screen B, and then goes back to ...

As I embark on creating a fresh react native app with react-navigation, I encounter some concerning warnings each time I execute npm install --save react-navigation. This new app is initiated using react-native init Test, followed by the installation of re ...

I'm currently in the process of developing a react native app and I'm facing some confusion with regards to page navigation. It appears that there is a glitch in the navigation flow, causing it to skip a page. <NavigationContainer> <S ...

import React, { Component, useState } from "react"; import { Content, List, ListItem, Left, Right, Icon, Container, Header, Body, Button, Title, } from "native-base"; //Chapter One expor ...

import { StyleSheet, Text, View } from "react-native"; import { NavigationContainer } from "@react-navigation/native"; import { createNativeStackNavigator } from "@react-navigation/native-stack"; import LoginScreen from " ...

Encountering a type issue with react navigation using Stack.Navigation or Stack.Group from createNativeStackNavigator The error message indicates that the types do not match with JSX.element. Specifically, it states: Type '{}' is not assignable to type 'R ...

I am encountering Typescript errors in my code that are related to parameters I am receiving from a previous screen. This is similar to the example shown in the React Navigation documentation found at . interface PixChargeAmountProps { route?: string; } ...

I'm encountering an issue while trying to install react-navigation using the command below: npm install --save react-navigation Unfortunately, I am facing an error during the installation process. The error message is as follows: npm ERR! code ENOENT npm ...

Within the react-navigation documentation, it is explained that you can initiate navigation from the top-level component using the following method: import { NavigationActions } from 'react-navigation'; const AppNavigator = StackNavigator(SomeAppRouteCon ...

Is there a specific way to customize only the ORANGE tab's style? I am curious to learn how to address this particular scenario. I have attempted various methods to modify the style of the ORANGE tab. My application utilizes navigation 5. <Tab.Navigat ...

My app includes a bottomTab Navigation feature, but I encountered an error: Error: Text strings must be rendered within a <Text> component. This error is located at: in BottomTabBar (at SceneView.tsx:132) in StaticContainer in StaticCont ...

My current setup involves using react-navigation without redux. I have two tabs, each with its own stack navigator containing one screen. Both of these screens require an array of locations. Right now, I am initializing and updating the locations array sep ...

I'm having trouble implementing a deletePost button in my header component. Here's the issue: export class PostScreen extends Component { // Custom headerTitle component. static navigationOptions = ({ navigation }) => { const { par ...

There was a TypeError: undefined is not an object (evaluating 'RNCSafeAreaViewConfig.Constants') <global> InitialWindowSafeAreaInsets.ts:9:38 loadModuleImplementation require.js:322:6 <global>> index.tsx:6 loadModuleImplementatio ...

Consider a navigation screen stack setup like this: A -> B -> C -> A Currently, A is the active screen and I need to go back to the initial A with parameters. I attempted using navigation.popToTop(), but unfortunately it does not support passing paramete ...

Encountering the commonly known error message "undefined is not an object" when attempting to call this.refs in the navigationOptions context. Let me clarify with some code: static navigationOptions = ({ navigation, screenProps }) => ({ heade ...

I have developed a unique react native application that currently does not incorporate any form of navigation. However, I am now interested in implementing the powerful functionality offered by react-navigation. Unfortunately, I am encountering difficultie ...

When it comes to typing screens under react-navigation v5, I usually follow a simple pattern: // Params definition type RouteParamsList = { Screen1: { paramA: number } Screen2: undefined } // Screen1 type Props = StackScreenProps<R ...

After adding react-navigation and react-native-gesture-handler to my project, I encountered an error when running it with react-native run-android: What's the issue: Could not compile settings file 'C:\Users\pc\Desktop\GST ...

I discovered some solutions using outdated versions of navigation, specifically involving the "tabBarVisible" option in Tab Navigator. However, this option is no longer available, so I am seeking guidance on how to hide the Tab Bar on specific screens with ...

Is there anyone who can assist me in integrating StackNavigator and Redux? It seems straightforward, but I'm encountering issues. index.ios.js import React from 'react' import { AppRegistry } from 'react-native' import { Provider } from 'react-redux' ...

Within my ContactList component, I have utilized a map to render various items. Each item includes a thumbnail and the desired functionality is that upon clicking on the thumbnail, the user should be directed to a new screen referred to as UserDetailsScree ...

I've been working on implementing nested navigation using reactnavigation by creating a reducer as shown below: import AppNavigation from '../Navigation/AppNavigation' export const reducer = (state, action) => { const newState = AppNavigation.router ...

In my current project, I am developing a React Native app that utilizes both React Navigation and Redux. class LoginScreen extends Component { state = { email: '', password: '', errors: { email: '', password: '' } } onPr ...

Currently, I am in the process of developing a new React Native Expo project utilizing TypeScript. I have been attempting to configure navigation following the guidance provided in React Native's TypeScript documentation. However, upon running and simulati ...