Questions tagged [react-navigation]

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
0

answer
10

Views

React-Navigation - Header interaction with its screen component, Failed prop type

I am following the React-Navigation tutorial, and got stuck on the section titled Header interaction with its screen component. The code in the tutorial work fine in the emulator provided at snack, but I discovered that when running locally I encountered the following error: Warning: Failed prop ty...
Inda Vidjool
9

votes
2

answer
166

Views

React Navigation weird back button behavior in nested navigators

I'm using React Navigation in my app and I have a Tab Navigator nested in a Stack Navigator. Sometimes in the app, the navigation stack is: Screen A => Tab Navigator => Screen B. So when users are in Screen B and press the back button it triggers first the back action in the Tab Navigator and only i...
Thiago Nascimento
2

votes
0

answer
24

Views

I can't navigating without the navigation prop with react-i18next container

I apply the navigation example without the navigation prop of the react-navigations docs (NavigationService), but I can't make it work with react-i18next. I applied the example of the documentation https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html in my code: // App.js impo...
Àlex
1

votes
1

answer
59

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.
1

votes
2

answer
78

Views

Hide and Show createBottomTabNavigator tabbar with Animation in react-native

I am using createBottomTabNavigator for tab bar. I can hide and show tabbar using tabBarVisible prop by setting it true or false. Problem I have is ,I want it to hide with animation. any links will be helpful.
Jaydeep Galani
1

votes
0

answer
6

Views

React Native navigating between Nested StackNavigator

I have the three navigators below, I am navigating to the DashBoard Screen after the login is completed but I have an issue when I want to logout from the DashBoard Screen, this.props.navigation.navigate('Login') is working fine but I want to clear the stack when signout button is pressed. const Da...
basil satti
1

votes
2

answer
1.9k

Views

Dynamic navigation items in Drawer Navigator

I want to populate DrawerNavigator from response from an api. How can the drawer items be loaded dynamically? Eg 'someName1': { screen: (props) => }, 'someName2': { screen: (props) => },
Mysha
1

votes
2

answer
51

Views

React-Navigation: Navigation onPress doesn't work

I am a bit confused about this navigation system. I have root which I contain navigations in it. And I have two different screens. No problem till here. I put initialRoute and displaying SignInScreen. Also put a button for Sign Up screen but that button isn't working. Root.js const ScreenNavigator =...
Barbie
1

votes
1

answer
26

Views

Is there a way to make an onpress navigation inside a result of a array map in react-native?

I have a simple array of names in this.state.members. I used the map function to iterate the members. I want to add a button for each member so, when i click to them, i go to a screen dedicated to each member. I test the button outise the loop, it is working. But for those inside the map function,...
Tax Raoul
1

votes
3

answer
36

Views

Blank Screen with react-native navigation with no error code

Please, look at the debugger and the screen for what could be a problem. However, the code is highly displayed below for your perusal. More also, I aimed at navigating to another page based on the id of the selected content. App.js The App.js is where I defined my stackNavigator import React, {C...
Payne
0

votes
0

answer
6

Views

How can I make a react-navigation tab component to be displayed in different languages?

I am developing a program with 2 language interface. The problem is what I want the tab headers of react-navigation tab component to be displayed in 2 languages. I'm using react-native-i18n for language support. The code below is making errors and can't be built. const TabNavigator = createBottomTab...
vhurryharry
0

votes
0

answer
6

Views

Logging out to a specific view in react native

I'm a beginner to react native development. At the moment I'm trying to set my navigation for the login logout process. This is my app flow right now Home -> SignIn -> Dashboard. Now when the user clicks the logout button in the dashboard it should go back to Home screen. This works well for the fir...
Gamerlegend
1

votes
2

answer
9.4k

Views

StackNavigator in react native app

I have created and new react native app by using create-react-native-app. I ended up with an app that works well on expo. Then I want to add a stack StackNavigator from react-navigation I have flowed the guide from reactnavigation.org and I did npm install --save react-navigation in the app direct...
Alex Terente
1

votes
2

answer
5.6k

Views

React-native : Dynamically update header title in stack navigator

I have made a custom component for header title(stack navigator)which shows user name along with some image. On this page I have to edit the username and on success Update it in header as well So my question is How to change/update title dynamically?
shwetap
1

votes
1

answer
103

Views

react-navigation - display 'are you sure' dialog before navigating back

I am building an app in react native with the use of react-navigation. On one screen I need to display a simple dialog to make sure user really wants to exit that screen. I've tried to add BackHandler listener but that does not apply when the user clicks on the back arrow in the header. Is there an...
David Novák
1

votes
1

answer
821

Views

React Navigation: How to go back to root Tab Navigator with specific tab from child stack

I'm using react-navigation v2 in React Native and get stuck whenever want to go back to a specific tab in the root navigator. I've the following route stack: const HomeStack = createStackNavigator( { Home: Home, CreateInvoice: CreateInvoiceScreen, InvoiceSummary: InvoiceSummaryScreen, PinEntry: PinE...
1

votes
1

answer
71

Views

Set no header for all components React-Native

I have 4 components which all have static navigationOptions = {header: null} defined. But that it's very time-consuming when you define that in each component. So I define {header: null} in createStackNavigator but the header still appears at the top of the component. Can you guys help ? import { cr...
STEPHEN bui
1

votes
1

answer
340

Views

React Native (React Navigation) Passing data from one screen to another using

I have a react native application that I created using Ignite CLI. I am trying to use TabNavigator with React Navigation, but I can't seem to figure out how to pass data from one screen to another. All the examples I've seen generally show how to pass the data when tapping on a button and using the...
pdad04
1

votes
1

answer
51

Views

React native navigation.state.params always undefined

I am fairly new to React native, and I have bought a template called sketch elements to get me started which is using Flow for it's type checking. https://react-native.shop/elements I would like to pass a parameter while navigating, however the param is always undefined. This is my code in my first...
user3284707
1

votes
2

answer
57

Views

React-Native: Cant find component variable.

I am trying to setup navigation system. Using react navigation api but having this, "Cant find component variable. " problem. What I did is... App.js import React, {Component} from 'react'; import {createSwitchNavigator, createAppContainer} from 'react-navigation'; import WelcomeScreen from './src/...
Barbie
1

votes
1

answer
65

Views

React Native Navigating Between Two Screens

In React Native, I need to navigate from a screen to another screen. But I didn't understand the concept for that.So, I have done as following, In App.js import React, {Component} from 'react'; import LinearGradient from 'react-native-linear-gradient'; import {StyleSheet, Text, Alert, View} from 'r...
Jaise P Jose
1

votes
1

answer
29

Views

recieving an error 'undefined is not an object evaluating this.props.navigation' while trying to navigate to another screen

returning this error while tying to navigate using switchnavigation. i have tried removing this. props then returns undefined 'navigation'. import React from 'react'; import { Text, View, Image, TouchableOpacity } from 'react-native'; import Icon from 'react-native-vector-icons/Ionicons'; import { c...
vishnu
0

votes
0

answer
5

Views

Screen navigate from stacknavigator not showing bottomtabnavigator

i've got a bottomtabnavigator and a stacknavigator. When i navigate to a screen in stacknavigator, bottomtabnavigator is not showing in the screen. is there a way to show the bottomtabnavigator in screens from stacknavigator? Below is my navigator codes: const TabNavigator = createBottomTabNavigator...
Kimberlee Ho
1

votes
0

answer
13

Views

Reactnavigation - Do not go back to login screen by pressing the back button

The application returns to the login screen when you click the back button. I need it to simply close the application. The user opens the login screen to login. Once logged in, he can no longer return to the login screen. When you click the back button, it must exit the application. I already search...
0

votes
1

answer
18

Views

How to create an Action-Sheet/Bottom-Sheet style drawer in React-Native?

I would like some guidance on how to create an action-sheet/bottom-sheet style drawer in React-Native so that I could use a single code base for both iOS and Android. I've attempted to use the Animated Spring API. However, I'm not able to change to location of the Spring from the original location...
George S
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
1

answer
279

Views

React + Redux + React Navigation 2.0: connect() or withNavigation() first?

Couldn't find it in the docs: What is the best practice when using React Navigation together with Redux? Should you do 1.: export default withNavigation(connect( mapStateToProps, { someFunction } )(SomeComponent)) Or 2.: export default connect( mapStateToProps, { someFunction } )(withNavigation(So...
J. Hesters
0

votes
0

answer
4

Views

react native rerender camera after tab switch

I have 2 tabs one for main screen and one for qr code. First time when i press on the tab with the qr code it renders the camera but after i switch to home tab and then press on QR Code tab again it doesn't render the camera anymore. Can you help me with this? here is my code: If you have any ideea...
9

votes
1

answer
110

Views

react-navigation How to set tabBar margin corresponding to Animated Value

I am using react-navigation Tab Navigation. I have a header above my tab navigation and it can collapse and expand corresponding to the scrollView. This is my problem: When I scroll all the way up, the header will collapse and thats what I want but the tabBar will stay static(Please see the photo)....
kirimi
2

votes
1

answer
186

Views

Setting an Expo LinearGradient as background of the whole react native app

I am using react-navigation and I have a drawerNavigator with a stackNavigator nested in it, how can I set a gradient background to the whole application using Expo LinearGradient without having to wrap each screen component with in its render method? P.S: I've tried to wrap component with compon...
MistaOS
1

votes
3

answer
5.5k

Views

Margin Top for Header Bar in React Native Navigation

I'm new in React Native. I'm using React-Navigation. But, on my device has problem with header navigation. This overlay by status bar like this. This issue occur both on my code and from React Navigation showcase example. How to fix it? Thanks
Pham Minh Tan
3

votes
1

answer
94

Views

React native drawer navigation with stack navigator

I'm trying to develop an app to understand the react native basics. I'm usin react navigation and I would like to see menu in every page of my app. I've developed someting like; -StackNavigtor -Login Screen -DrawerNagivation -Screen1 -Screen2 However, inner drawer's components can not benefit from...
deorez
1

votes
2

answer
967

Views

Invariant Violation with only some Navigators (React-Navigation)

I'm running into some weird behaviors when trying to implement the Navigators from React-Navigation. When trying out the simple "hello world" from https://reactnavigation.org/docs/en/hello-react-navigation.html... import React from 'react'; import { View, Text } from 'react-native'; import { create...
Groots
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
17

votes
4

answer
1k

Views

React Navigation - navigating to another tab and reset stack

I'm trying to route from one StackNavigator to another, both of which are inside a TabNavigator. I'm currently able to get there by simply doing: this.props.navigation.navigate('Screen3') But I also want to reset that tab when I go to it. Here is how my app navigators are generally set up: - Main (S...
AHinson
17

votes
1

answer
24.6k

Views

How to Pass Parameters to screen in StackNavigator?

My React Native code: import React, { Component } from 'react'; import { AppRegistry, ActivityIndicator, StyleSheet, ListView, Text, Button, TouchableHighlight, View } from 'react-native'; import { StackNavigator } from 'react-navigation'; import DetailsPage from './src/screens/DetailsPage'; class...
Somename
3

votes
1

answer
188

Views

Navigation icons are disappearing when accessing stack pages in react native

I am using react navigation (https://reactnavigation.org/) to display icons for the bottom navigation tabs. Icons are displaying fine, however, when I enter into pages in the stack, the icons disappear. I can get the icons to show by referring to the icon image on each page individually, but I am wo...
Colin Sygiel
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

View additional questions