Questions tagged [stack-navigator]

1

votes
0

answer
407

Views

I want to pass props to stackNavigator inside tab navigator

I am trying to pass props from login screen to the whole app because every fetch request depend on user credentials so how can I achieve this. routeConfig file: export const sendStack = StackNavigator({ send:{ screen:Send, }, confirm:{ screen:ConfrimPay, } }); export const transactionStack = StackNa...
mohamed aldie
1

votes
0

answer
36

Views

Cycle navigation between stacks - React Native

I want to know how can I make a navigation in React Native using React navigation between three stackNavigators in a cycle (stacksNavigators call each Other). I am using React Native 0.44.3, React 16.0.0-alpha.6 export let AStack = StackNavigator({ A: { screen: ecranA, navigationOptions: { title: 'S...
Marwa
1

votes
0

answer
411

Views

Android Status bar overlapping on my screen

There are some topics that I came by discussing the same issue but they were platform specific. For example, for iOS it was suggested to add padding to the top of the screen component or add an empty view with a height equals that padding. So what happens is that we do a simple check on the platform...
Ahmed Samy
1

votes
0

answer
228

Views

React-native Undefined is not an object(this.props.navigation.navigate)

I'm attempting to navigate from the login page to the welcome page upon successful login using firebase using a method called submit (located within loginForm). Everything is working with the exception of the navigation, using StackNavigation, to the Welcome page. I've looked through every post on t...
Justin Paul
1

votes
0

answer
263

Views

How can TabNavigator child screen refer to parent StackNavigator?

The structure of the application is this. StackNavigator StackA-Screen(TabNavigator) TabChildA-Screen TabChildB-Screen ... StackB-Screen code in App.js const TabComponent = TabNavigator( { TabChildA-Screen: { screen: TabChildA, }, TabChildB-Screen: { screen: TabChildB, } }, { tabBarPosition: 'bottom...
Kaoru
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.6k

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
534

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

View additional questions