Questions tagged [react-navigation-stack]

1

votes
0

answer
6

Views

Title not working on react-navigation createStackNavigator

I'm using createStackNavigator inside createBottomTabNavigator from react-navigation in my app. I want to have a title on my screen. Following React Navigation's tutorial I've implemented it this way: createBottomTabNavigator( { Home: createStackNavigator( {screen: HomePage, navigationOptions: () =...
Can Poyrazoğlu
0

votes
1

answer
5

Views

In React or React Native, setting a color to an SVG

Can you set a prop that normally takes a hex color to an SVG? In React Navigation, the active background (the color of the tab behind the tab icon/text) needs to be an SVG, not a hex color like this: tabBarOptions: { activeTintColor: colors.white, activeBackgroundColor: , inactiveTintColor: colors....
Perry Hoekstra
1

votes
1

answer
169

Views

React Navigation: Is it possible to navigate to the same screen from different stackNavigators?

I'm coding an app that uses react-navigation. My app has a bottom TabNavigator in which each tab consists of a stackNavigator, like so: Routes.js: const FirstStack = createStackNavigator({ First: { screen: FirstScreen, navigationOptions: { header: props => } } }); const SecondStack = createStackNav...
Dieguinho
1

votes
1

answer
434

Views

React Navigation change custom header title on componentDidMount

I'm developing an app which has a tabNavigator and for each tab it has a stackNavigator with a custom header. From one of the screen I need to be able to pass a param to the stackNavigator to change the header title. MyScreen.js: class MyScreen extends Component { state = { title: 'My Title' } stati...
Dieguinho
1

votes
0

answer
26

Views

Cannot navigate from inner stack to outer stack in react navigation

I have an application where I have to work with a lot of navigation using stacks and tabs. So I have these Stacks: Routes (StackNavigation) - Start - Login - ProtectedRoutes (TabNavigator) // Depending on which type of user is logged in // I have to change the number of tabs that are displayed - R...
Ajay Gupta
1

votes
0

answer
90

Views

Tabs on Drawer Navigation screens with React Navigation

I was given a pretty complicated app layout and I am still new to React Native so I am pretty stuck. Currently I have a router file that I am calling in my App.js. Basically the layout needs to be Tabs AND a Drawer on every page but I have some pages that are only referenced through the DrawerNaviga...
Maria Espinoza
1

votes
1

answer
470

Views

CreateDrawerNavigator inside createStackNavigator

My issue is this: I can't seem to be able to add the hamburguer button on the left (to toggle the drawer) and also I cannot add the title to the drawer depending on the screen (for example, show 'Login' on header when it's on the login screen). Brief explanation of the code: The AppNavigation.js h...
kivul
1

votes
1

answer
28

Views

incorrect navigation in react native

I use react navigation to handle my app navigate. I have one problem. I have 5 navigation file. I have createMaterialTopTabNavigator that use it on StackNavigator. but I cant navigation between them. my createMaterialTopTabNavigator import React, { Component } from 'react'; import { StyleSheet, View...
k.k.m.
1

votes
1

answer
67

Views

Dynamically change header title in react native navigation

For a school assignment we're creating an app in react native with react navigation and redux. Because all of us are new to react we have an issue we are unable to resolve. We want to change the title of the header when a certain button is clicked. The first time we click a button it changes the hea...
Paggito
1

votes
1

answer
211

Views

navigation.navigate is not a function

I'm using navigation to navigate my react native app and I couldn't Paypass this issue. I did as the docs but nothing works for me. The problem is I'm trying to use the navigation option to add a header and right button to navigate me to another screen, but it keeps giving me this error: 'navigatio...
Ahmed Alsehaim
1

votes
2

answer
55

Views

How to make screen from tabBarNavigator invisible on TabBar?

I use react-navigation version 3.x. How to make screen from tabBarNavigator invisible on TabBar? I need to remove main screen from tabBar(it should be invisible) but TabBar must be on main screen. My screen structure is next: const AppStackNavigator = createStackNavigator({ loginFlow: { screen: cre...
Hannibal
1

votes
1

answer
0

Views

React Navigation: Switch to different stack and be able to come back to the previous stack

Example, I have a BottomTabNavigator stack having the tabs A and B. The two tabs are themselves navigation stack comprising of the following routes. A: - A1 - A2 B: - B1 - B2 At any point, my app should be able to navigate the user from any route(say B1 or B2) to a route of another stack (say A1 or...
Aman Pandey
1

votes
1

answer
0

Views

The component of route “WelcomeScreen” must be react component

I am having a problem with this little piece of code. I have almost searched about this error everywhere but it did not solved my problem. I have used all the methods given by experts regarding tenter image description herehat problem. Please If anyone can help. ///app.js import { createStackNaviga...
moniovic
1

votes
1

answer
0

Views

BackHandler in React Native isn't working

const RootNav = createStackNavigator( { Splash: { screen:Splash }, BeforeLogin: { screen:BeforeLogin }, Signin: { screen:Signin, }, Signup: { screen:Signup }, Tabs: { screen:TabHolder, }, ForgotPassword: { screen:ForgotPassword }, } ); Below is the BackHandler I used in my BeforeLogin screen. co...
Shubham Bisht
1

votes
2

answer
0

Views

How to use StackNavigator with DrawerNavigator and SwitchNavigator on React Native?

TL;DR: I need this result (with DrawerNavigator and StackNavigator navigation listed below): Structure: I have this structure of screens: In the root pages (represented by ' • '), I need the navigation to be done with the DrawerNavigator, and the subpages (represented by ' |_ ') I need to be navig...
rafaelfndev
1

votes
1

answer
0

Views

How to pass navigation props to “createStackNavigator” to use default header with animation

I have been working over the last few days to add an animated header to my screens. I have succeeded in this however I would now like to apply this as my header by default rather then copying and pasting the code into all screens I wish to use it. At the moment the animated header is implemented in...
Jamie Shepherd
0

votes
1

answer
23

Views

React native this.props.navigation.navigate undefined

navigation.js import React,{ Component} from 'react' import { createStackNavigator,createAppContainer } from 'react-navigation' import Login from './screens/login' export const Nav = createStackNavigator({ loginScreen:{ screen:Login } }) splashscreen.js import React, { Component } from 'react'; im...
Md. Parvez Alam
0

votes
0

answer
3

Views

How to reset an already reset nested StackNavigator

I have a TabNavigator and one tab is a nested StackNavigator. As the user navigates to the final screen of the StackNavigator the stack is reset since the final screen is a confirmation screen and users should not be able to swipe back and resubmit their action. This is achieved via the straightforw...
Robin Southgate
1

votes
1

answer
103

Views

React native navigation cross screens notification “snackbar”

Trying to implement a 'No internet' notification across alot of screens in react native using react-navigation. I'm trying to avoid adding the component to all screen views render function since it feels like boilerplate. Is there a simple way to add a component in one place using react native navi...
Cisum inas
2

votes
0

answer
82

Views

Touch events are not working with react navigation

According to the steps of React Navigation 3.x documentation, I have added react-native-gesture-handler for android. I have added the additional lines in MainActivity.java too. Here is the link for reference: https://reactnavigation.org/docs/en/getting-started.html I can swipe the drawer. Unfortunat...
K.Raj.
0

votes
2

answer
11

Views

React Native createStackNavigator error…(0, _reactnavigation.createStackNavigator) is not a function

I am getting the error '(0, _reactnavigation.createStackNavigator)' when trying to run a simple stackNavigator.....could someone please help? the error is occurring at the line const AppStackNavigator = createStackNavigator(....its showing a value of zero 1. simple login screen import { View, Text,...
james murphy
1

votes
2

answer
350

Views

withNavigation can only be used on a view hierarchy of a navigator

I'm getting the error: Invariant Violation: withNavigation can only be used on a view hierarchy of a navigator. The wrapped component is unable to get access to navigation from props or context I don't know why, because I'm using withNavigation in other components in my app and it works. I don't see...
BeniaminoBaggins
2

votes
3

answer
36

Views

Is there a way to Add new Route into React native Stack navigation dynamically

We are building an app in which are using React native stack Navigation, Depends in the web api call based on the output we want to add the redirect to the same type of screen with different data and that new screen can create another screen.. We are using stack navigation with a single route at th...
Gowthaman
0

votes
0

answer
5

Views

do i need stackNavigator just to navigate from one screen to another

I have following screens: A, B, C and, i have registered them as { 'A': {screen: A}, 'B': {screen: B}, 'C': {screen: C}, } I have written a navigation to go from Screen A to Screen C, now when i press back button it goes to screen B instead of A, how do i send Screen C to A ?
anjebhandari
1

votes
1

answer
177

Views

React Navigation (V2 / V3): How to access navigation.state.index in navigationOptions on screen

I'm building a React Native app and for my navigation I use React Navigation (V3). For my UI elements I use React Native Elements. I have a screen which I reuse in multiple navigators. Sometimes it is at the root of a stack, and sometimes it's pushed on with a stack. I want to programmatically add a...
J. Hesters