Questions tagged [stack-navigator]

1

votes
2

answer
65

Views

Error: this.props.header is not a function when using StackNavigator

I have a screen inside my react-navigation StackNavigator that looks like this: import React from 'react'; import { FlatList, ScrollView, StyleSheet, Text, View } from 'react-native'; import { List, ListItem } from 'react-native-elements'; import Accordion from '@ercpereda/react-native-accordion'; e...
lmotl3
1

votes
2

answer
679

Views

How to pass props in StackNavigator

const MainNavigator = StackNavigator({ Home: { screen: Tabs }, Collection_Products : { screen : Collection_Products, navigationOptions : ({ navigation }) => ({ title : `${navigation.state.params.name.toUpperCase()}` }), }, MainProduct : { screen : (props) => , }, }); export default class MainNav ex...
hitarth
1

votes
1

answer
483

Views

ReactNative: Disable the Activity Indicator only after navigation to a new page is completed

I'm new to React Native. I have coded a Login page and Profile page. On Login.js page I have state: this.state = { email: '', password: '', authenticating: false, } Once you hit the Login button after entering correct details, loginUser function gets executed: loginUser = (email, password) => { this...
Aman Deep Sharma
1

votes
1

answer
225

Views

How to pass an image picker image souce from one navigation view to another navigation view?

I am new to react native and I am currently making an image/video capturing app using ImagePicker package. I have two separate buttons - one for image capturing and one for video capturing. My problem is that currently my images are being displayed at the same page where my TouchableOpacity buttons...
1

votes
2

answer
980

Views

Reset StackNavigator on Button Press React Native

I'm currently in the process of teaching myself to make an app with React Native. I'm using React Navigation to navigate between screens on button presses. I can navigate screens just fine. However, on one navigation I also want to reset the stackNavigator. I have looked at solutions for resetting t...
Jaden Zerbe
1

votes
0

answer
146

Views

How to add settings menu in toolbar react native?

I have used StackNavigator for naviagtion and toolbar, now i tried but didn't got what i expected i need menu as above image.
1

votes
0

answer
47

Views

How to navigate from a screen in stack navigator to the Tab Navigator

My project structure looks like this Tab navigator |-Tab1 |-Tab2 |-stack navigator |-login | screen1 | screen2 | screen3 |-Tab3 |-Tab4 I am new to react native. I am trying to navigate from a screen1 in stack navigator to my Tab1. I am not able to navigate. Any kind of help is appreciated.
pooja
1

votes
1

answer
76

Views

tabnavigator and stacknavigator problem-you should only render one navigator

Its My App.js I want to use stack navigator while not logged, then tabnavigator in sıgnIn Page const AppNavigator=createStackNavigator({ SıgnIn:{screen:SıgnIn}, Welcome:{screen:Welcome}, SıgnUp:{screen:SıgnUp}, ForgetPassword:{screen:ForgetPassword}, }); Its My App.js export default class App e...
user9502676
1

votes
1

answer
85

Views

Setting modal mode to specific screen

I'm using stack navigator in my react-native app, i have set the mode to modal so the screen gets pushed from the bottom, it's working fine but is there a way to specify this mode for specific screens only? const App = createStackNavigator({ Home: { screen: Home }, }, { mode: 'modal', } );
Judy M.
1

votes
2

answer
310

Views

How to navigate between screens in react native with separeate js files

I have react native project and I saved the home screen and details screens as oneScreen.js and two screen.js inside the src directory but there class names are different. So now I want call to them from App.js file and after a button press in home screen it should directed to details screen.how to...
amilab
1

votes
1

answer
67

Views

Reset a stack navigation stack from outside the stack

I want to reset my stack navigation stack when I log out a user. Currently if I log out, my user is taken to my auth screen that is using switchNavigator, and if a user logs back in they are taken to the screen that they were last on when they logged out. I would like a user to be directed to the...
Jay
1

votes
1

answer
46

Views

How to remove tabbar from the top when I am navigating to another page from one of the tab in react native

Everyone I am facing an issue in react-native as I am new to this . I am callling a tabbpage from homePage so in tabpage there is a navbar at the top,below this navbar a tabbar is showing two tabs. This is good till now but the problem starts from here In tabPage I have two tabs ->tab1 and tab2 fr...
kriti sharma
1

votes
1

answer
117

Views

Reset StackNavigator inside createBottomTabNavigator on tabBarOnPress

I have this structure: bottomTabNavigator: Screen 1 Screen 2 Screen A Screen B When the user navigates to Screen B, then goes to Screen 1 and go back to Screen 2, he goes directly in B, how can I reset the stack using the tabBarOnPress function to force the user to go back to A? I'm using react-navi...
Osvaldo Margato
1

votes
1

answer
97

Views

My splash screen won't move on to the next screen on react native

I am new at react native and I am trying to create an iOS app. My splash screen works fine and loads the initial App.js screen when creating project fine. However, when I change the return to my own .js file, it fails to build and is stuck on splash screen. Please give me some tips, I followed many...
levydevy
1

votes
1

answer
31

Views

React-navigation: header does not show up when using bottom tab navigator

I am using react-navigation with my react native app. I have created a bottom tab navigator, and want to use the built in header on my screen. But the header is not showing up. There are no errors or warnings. app.js: const TabStack = createBottomTabNavigator({ Upload: { screen: upload, navigation...
JAM
1

votes
1

answer
47

Views

React-native TabNavigator inside StackNavigator, cannot move between screens

I am using react-navigation with my react-native app. I have to put TabNavigators inside StackNavigator to use the built in header feature. See below. app.js const FeedScreenStack = createStackNavigator({ Feed: { screen: feed, navigationOptions: { headerTitle: 'Feed' } } }); const ProfileScreenStack...
JAM
1

votes
1

answer
846

Views

Handle click on back button of action bar react native

I am using stack navigator in my project , clicking on Action Bar back button takes me to previous screen, But I want to take it to some other screen on clicking of back button. If I navigate from screen 1 to screen 2 then pressing back button it will take to screen1, but I need to take it to screen...
Paras Watts
1

votes
1

answer
942

Views

React-Navigation Drawer and Static Tab-Navigation

i am switching from react navigator to react-navigation and i am actually fine with this approach, but struggeling with one issue. I want to use a drawer navigation and a bottom aligned Tab-Navigation. This part is working as expected - no issues here. I want to have the tabbed navigation fixed with...
user2262261
0

votes
0

answer
5

Views

How can I have a swipe to navigate for a stack navigator?

I want to allow users to be able to swipe to navigate to a screen similar to Instagram ( swiping left takes you to your messages, the animation follows the velocity of the swipe, if you hold touch and swipe slowly screen moves a long) in a stack navigator. I don't want to nest a bottom/top navigator...
Mohamed Yousef
1

votes
1

answer
150

Views

React native initalRouteName not working with Stack Navigation

I am new to react-native and I am trying to implement a simple application using StackNavigation and react-redux with welcome and signup screens. I have configured both the screens using StackNavigation but for some reasons , only the SignUp screen pops up when the app starts. Below are my files : I...
Akshay Barge
1

votes
1

answer
284

Views

Navigate to home screen if token is stored react-native o.w. login screen

It's been couple of days I am stuck at a point where as a beginner I am not sure how to take it ahead. In my routes/main.js, I have this stack navigator: export const createRootNavigator = (loggedIn = false) => { return StackNavigator( { LoggedIn: { screen: LoggedIn }, LoggedOut: { screen: LoggedOut...
1

votes
2

answer
279

Views

TabNavigator inside StackNavigator - React Native

I am trying to place a TabNavogator inside a StackNavigator and it is complaining that it has to be a react component. I have attached the code and the error screen shot. Once I pass login screen I want tabs, so in Login.js on click of a button I am moving to Tabs but I think the problem is in route...
BRDroid
1

votes
1

answer
648

Views

React Native - StackActions.reset does nothing

I have this function which gets executed when a area is pressed: navigateToRentable = () => { console.log('in navigateToRentable'); this.props .navigation .dispatch(StackActions.reset({ index: 0, actions: [ NavigationActions.navigate({ routeName: 'Rent', actions: [ NavigationActions.navigate({ rout...
ewizard
1

votes
4

answer
160

Views

(React-Native) undefined is not an object (evaluating _'this.props.navigation.navigate')

I'm still a novice with react. I want to make my sign In button create a new screen on the press. I've tried multiple attempts but I can't seem to get past this error: What is it I'm doing wrong? LoginForm.js: import React, { Component } from 'react'; import { TextInput, Text, View, StyleSheet, Touc...
Masterolu
0

votes
0

answer
0

Views

React Native - data is lost when switching between screens using react-navigation and react-redux

I am using react-redux and react-navigation with my react native app. I have a component called photolist that gets all the photos from a database. There are two screens that call this component. The userProfile screen passes true and userId to photolist for the user's photos; the feed screen passe...
JAM
0

votes
0

answer
6

Views

How to pass params between TabNavigator and StackNavigator using react navigation

I am using a combination of tab navigator, stack navigator, and switch nagivator in my react native app with react-navigation. Note that Home is a TabNavigator, UserProfile is a StackNavigator. App.js const UserProfileStack = createStackNavigator( { UserProfile: { screen: userProfile }, Comments...
JacobMarsellos
1

votes
1

answer
2.3k

Views

How to change screen in react native with react-navigation on click of a button?

I have defined all my routes/navigations in my root component (App.js) and am trying to access one of those screens (UserScreen) from a child component(LoginScreen) on click of a button. Here is my App.js import React from 'react'; import { StyleSheet, Text, View, TextInput, TouchableHighlight, Butt...
craftdeer
1

votes
1

answer
1.9k

Views

undefined is not an object (evaluating this.props.navigation.navigate)

I'm trying to learn react native for the first time. I tried to introduce a stacknavigator but the line const {navigate} = this.props.navigation; is causing the error: undefined is not an object (evaluating 'this.props.navigation.navigate') Here is my code: import React, { Component } from 'react';...
John
0

votes
1

answer
12

Views

I have a stack navigator using react-navigation 3.3.0 and I want to have a drawer navigation for a specific screen

I am trying to make an iOS mobile app with react native. Right now, I have a stack navigator in App.js export const Navigation = createAppContainer( createStackNavigator({ Screen1: { screen: Screen1 }, Screen2: { screen: Screen2 }, Screen3: { screen: Screen3 }, Screen4: { screen: Screen4 }, }), ) I...
squirreldev
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
2

votes
3

answer
2.3k

Views

How to hide header of createStackNavigator on React Native?

I want to hide header because I already have styled Toolbar in code: import {createStackNavigator} from 'react-navigation' const AppStackNavigator = createStackNavigator ({ Home: HomePage, Friend: AddFriend, Bill: AddBill, }) class App extends Component { render() { return ( ` ); } } export default...
Just Ahead
2

votes
5

answer
780

Views

getting undefined is not a function (evaluating '(0,_reactNavigation.stacknavigator)') in drawer navigation

In my application I need drawer navigation, for that I am using sample code from this. I have integrated everything in my application, but getting the following error undefined is not a function (evaluating '(0,_reactNavigation.stacknavigator)') And installed this one too. npm install react-navigati...
rams
2

votes
3

answer
492

Views

How to change screen and setState at the same time on first click in React Native

I have a function that changes the screen and sets the state at the same time that works given below (initial state of weapon is null): var { navigate } = this.props.navigation; clickM16 = () => { this.setState({ weapon: 'M16' }); navigate('Second', {weapon: this.state.weapon}); } And I am calling t...
user9069254
1

votes
1

answer
485

Views

Custom View as background for StackNavigator

I need use one image below stack navigator or something like this. Into StackNavigator I can set backgroundColor, opacity (view style) etc. But no possibility to set one background image or custom view component. Also if set to each screen its not good for screen translation. I was try to wrap l...
Leonid Veremchuk
3

votes
2

answer
2.1k

Views

React Native - Change background color in tabnavigator dynamically

i want to change my tab navigator background color dynamically in based on my API response so below is my code _TabNavigator.js const MyTabnav = TabNavigator({ ScreenOne: { screen: ({ navigation, screenProps }) => , navigationOptions: { tabBarLabel: 'ScreenOne', tabBarIcon: ({ tintColor }) => ( Scre...
Harshal Kalavadiya
2

votes
3

answer
3.8k

Views

How to change back button route in react navigation

i am using react-navigation (stack-navigation). i want to change my header back button icon route. Home BookTicket MyBookings these are the screens i have in my project.Now when i click header back button in MyBookings screen it should route to Home Screen.
Sathish Sundharam
2

votes
3

answer
3.9k

Views

React native clear Stack Navigator stack

I have few screens which I navigate through one by one. Screen1->screen2-screen3->screen4-Home What I want is when I go to home then the previous history of navigation should be cleared and back pressing back button should not go to last navigated screen which is screen 4. Currently When I press bac...
Paras Watts
6

votes
1

answer
547

Views

React Navigation Header change with screen

I have a StackNavigation and want a default Header (component Header) and want that 'deep pages' shows up with the default header generated for the React Navigation. In my index page **Index**, just wanted the Header component(first header)...but shows up another blank header: In my 'deep page' **Te...
Igor Martins
3

votes
3

answer
3.9k

Views

React Native - Passing Data Across Screens

I'm having some trouble with a react-native app. I can't figure out how to pass data across screens. I realize that there are other similar questions that are answered on SO, however the solutions did not work for me. I'm using the StackNavigator. Here's my setup in my App.js file. export default Si...
Lars Peterson
1

votes
1

answer
350

Views

Cannot access props from inside navigationOptions

I am using the StackNavigator library but cannot figure out how to access the props from within navigationOptions. In my calling class I have: navigate('TestView', { mdata: mdataObject }) In my TestView class I have the following: static navigationOptions = { title: this.props.navigation.state.param...
kojow7

View additional questions