Questions tagged [react-navigation]

1

votes
1

answer
280

Views

DrawerLayoutAndroid in react native

I'm trying 'DrawerLayoutAndroid' in react native with inside the drawer I added the react-navigation 'stackNavigator' to navigate between screen.What I'm trying to do but the problem is when I navigate it opens in the drawer How do I open it full screen as a normal page Is there a better method to...
DEELAKA
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
1

answer
805

Views

react-native headerTitleStyle

I am using the StackNavigator and was trying to align the word 'topic' to center vertically. However, adjusting padding and margin does not seem to help. I believe the space above the word is to cater to the status bar. Is there a way around this? The StackNavigator code is below. See image export...
jayque
1

votes
1

answer
439

Views

Reload AsyncStorage data every time tabbar screen is displayed using React Navigation

I am using React Navigation in a React Native app I'm building and I have a set of screens that are in a TabNavigator. One of the screens may change something in AsyncStorage which will need to reflected in another screen. I tried various different things including setting the tabBarOnPress property...
Youssef Moawad
1

votes
0

answer
70

Views

Clear state.route remove page transition with react-navigation

For performance reasons, i want clear my state.routes and keep only currentRoute and prevRoutes. I put the index alway on 1. But my problem is that slide animation is removed :( My code : const navReducer = (state, action) => { const nextState = AppNavigator.router.getStateForAction(action, state);...
s-leg3ndz
1

votes
0

answer
507

Views

Navigate in React-Native + Redux using React-Navigation between Nested Navigators

I figured out how react-navigation works in general from the official docs. However, I get really confused when I have to deal with Nested Navigators especially in Big Apps. This is the Navigation Structure I have implemented in my app. RootNavigation (Stack Navigator) Splash Screen -> Default Scree...
Kamil Kamili
1

votes
2

answer
462

Views

React native activeBackgroundColor/activeTintColor for custom sidebar

I'm calling custom sidebar inside DrawerNavigator. I'm trying to set active tint color and active background color for selected menu. const DrawerStack = DrawerNavigator( { ProfileScreen: { screen: ProfileScreen }, Home: { screen: DashboardScreen }, }, { contentOptions: { activeTintColor: '#e91e63'...
Gourav Kumar
1

votes
0

answer
327

Views

Close drawer when navigating to top StackNavigator

In most of the app from google as for example (contact, gmail, ...) whenever you click on an menu entry like 'settings' / 'profile' / 'logout' it close the drawer and then (once animation finished) open on top the 'settings' / whatever view. I have the same need as I have a StackNavigator with [Side...
max54
1

votes
1

answer
1.1k

Views

Clear stack being navigated to React-Navigation

My react-native application consists of a DrawerNavigator that contains several StackNavigators. A simplified example of my structure looks like this - Drawer - Stack 1 - Screen 1 - Screen 2 - Stack 2 - Screen 1 - Screen 2 My problem is the following: I am on Screen 1 of Stack 1. I navigate to scre...
wizloc
1

votes
2

answer
151

Views

[RN][IOS]Is it possible to use react native RCTLinking in conjonction with RNFirebase dynamic links?

I am currently handling ios universal links through the RCTLinking API. For some reasons, I need to work with Firebase dynamic links and I am wondering if it is possible to use both in my app. My issue is that the implementation in : - (BOOL)application:(UIApplication *)application openURL:(NSURL *)...
user3193920
1

votes
1

answer
500

Views

How to load custom fonts using CRNA and Expo

This is my File Structure in App.js import React, { Component } from 'react'; import { Font } from 'expo'; import Index from './src/index'; export default class App extends Component { //checking state for if font is loaded or not. state = { fontLoaded: false, }; async componentDidMount() { await Fo...
William Navarrete
1

votes
1

answer
124

Views

How to scale down the screen view using react-navigation with DrawerNavigator?

I want to scale down the screen view when the Drawer Content is open using react-navigation with DrawerNavigator. You can see the expected behavior here. I'm not sure if is it possible, so suggestions using react-navigation are welcome.
Beto Muniz
1

votes
0

answer
232

Views

How to connect a tab navigator to redux?

I am new to redux and I need to call for an action inside the onPress method as shown here const HomeTabNavigation = TabNavigator( { Profile: { screen: Profile }, PhotoCard: { screen: PhotoCard }, Chat: { screen: Chat } }, { tabBarComponent: props => { return ( { if (props.navigation.state.index !==...
Ahmed Samy
1

votes
0

answer
237

Views

SearchBar in StackNavigator header

I am using TabNavigator inside StackNavigator. The first screen contains the tab, I want inputbox on header with search button on searching it should go to next screen. how should i solve this problem. any help would be appreciated.
Simranjit Singh
1

votes
0

answer
324

Views

Inconsistent focus by TextInput in React Native

I have a TextInput that looks like this. { this.textUser = input }} value={this.state.user} onChangeText={(user) => this.setState({user})} /> Now, this is inside a component that is called by a TabNavigator which happens also to be buried inside a StackNavigator. You can see the raw visual represent...
Edper
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
34

Views

React navigation TabNavigator resets to default route

I've a strange thing happening in my navigation. I've a tab navigator with home as a default tab and Profile as another tab. When I try to upload an image from profile tab using fetch and formData it automatically redirects back to home tab. I tried to call a simple api w/o formData and it did not r...
Pavan
1

votes
2

answer
351

Views

How to use StackNavigator with Redux?

Could please somebody help me to manage with StackNavigator and Redux integration? Everything looks pretty simple, but doesn't work. index.ios.js import React from 'react' import { AppRegistry } from 'react-native' import { Provider } from 'react-redux' import configureStore from './configureStore'...
Seva
1

votes
0

answer
163

Views

Not able to access parent stack routes from nested stack navigator

This is my Parent navigator. AppNavigator.js const AppNavigator = StackNavigator( { SplashScreen: { screen:SplashScreen }, Login: { screen:Login }, ForgotPassword: { screen:ForgotPassword }, RoleOneApp: { screen: RoleOneApp }, RoleTwoApp: { screen: RoleTwoApp }, }, { headerMode: 'none', }, ); This h...
Harish_N
1

votes
1

answer
1.2k

Views

react-navigation Cannot read property 'routes' of undefined

My application to use to react-navigation the router, in accordance with the API method, the following problems: react-navigation : why 'routes' of undefined ? https://reactnavigation.org/docs/routers const SimpleApp = TabNavigator({}) const Simple = StackNavigator({ Home: { screen: SimpleApp }, Lo...
张东生
1

votes
1

answer
23

Views

Open Page inside TabBar Page

I have these structure in my project: react-native-router-flux #APP - TabBar -- Page 1 --- Page 2 -- Page 3 -- Page 4 How do I open Page 2, INSIDE Page 1? (without modifying the selected tabview icon) I try: Actions.Page2({}) from Page 1, but its wrong; My code: Tks!
Marcus Sombra
1

votes
1

answer
184

Views

How to call navigate from a component rendered at top level

According to the docs on react-navigation you can call navigate from the top level component using the following: import { NavigationActions } from 'react-navigation'; const AppNavigator = StackNavigator(SomeAppRouteConfigs); class App extends React.Component { someEvent() { // call navigate for App...
rt_
1

votes
0

answer
395

Views

Passing Props from Stack Navigator to Drawer Navigator in React - Native

I want to navigate to a screen which is given in Stack Navigator from Drawer Navigation on the basis of a response from the API. Also, I need help with the passing of props from Drawer to Stack Navigator and vice versa. Below is my code ** App.js ** import { DrawerNavigator, StackNavigator } fro...
Advait
1

votes
1

answer
107

Views

DrawerNavigator - Route 'Page3' should declare a screen

I have a DrawerNavigator router with 3 routes. It didn't have any error when I only put Page1 and Page2 on the routes, but when I add Page3 route, It has an error ' Route 'Page3' should declare a screen. '. I believe that Page2 and Page3 have the same code structure and only different in rendering a...
Gery Gry
1

votes
2

answer
94

Views

React-Navigation Reset while Passing Props to Children

I'm using React-Navigation with React-Native. I get different results for identical code executed at different points of the stack. My Router uses a mix of Stack Navigators and Tab Navigators. Here's the structure: StackNav: Login Register Home TabsNav: Tab One Tab Two Login is the first screen the...
wvicioso
1

votes
0

answer
287

Views

React Navigation - TabNavigation - one tab to have different width

In React Native's React Navigation package, I'd like to use TabNavigation where one of the tabs has different width than the others. Is there a prop for this in navigationOptions? Can't find it in the docs. Or is there some kind of hack?
Ziarno
1

votes
0

answer
279

Views

Right navigation drawer in react-native

I have implemented left navigation drawer using this library. I need the navigation drawer in both (left and right) side. How can I create navigation drawer in both side? I have achieved this, here is the gif for it. .
Krunal Kapadiya
1

votes
0

answer
124

Views

React Native StackNavigator Title Change Causes Recursion

I've split out the navigationOptions to the top of each screen to make things easy to understand, rather than keeping it in the TabNavigator. Here's an example of one screen: static navigationOptions = ({navigation}) => { const {params = {}} = navigation.state; return { title: params.title != undef...
Ben Coffin
1

votes
1

answer
1k

Views

React Native refresh screen / component / change state

I am using react-native, nested react-navigation, SectionLists, ActionSheet, etc and I am having hard times setting up a decent way of refreshing components / screens. As I have a few different cases, I have also tried different approaches with no luck. Examples: - Sending a callback function as a...
gesf
1

votes
0

answer
1.3k

Views

How to use both a drawer and a tab navigator in react-navigation

I am new to react-navigation and am attempting to include both footer tab-navigation and a drawer. The app successfully loads the 'Landing' page, which is the default screen of the Drawer Navigator. However, When I am on the Deals, Favorites and Dashboard Pages, the footer navigator does not appea...
FDRH
1

votes
1

answer
239

Views

React Navigation - Pass Data on Router with navigation.navigate

I just cant seem to pass data to the selected screen using navigation.navigate. It works everywhere else but here in the Header // Router.js const ResultStack = StackNavigator({ Result: { screen: Result, navigationOptions: ({ navigation }) => ({ headerTintColor: '#FFF', headerLeft: ( navigation.goBa...
Dihan
1

votes
0

answer
56

Views

Can only update a mounted or mounting component. When using NavigationActions.Reset

I'm currently working on an edit screen. The flow is as follows: There is TabNavigator where one of the tabs has a MapView with a variety of markers on. The user can then choose a marker to view the information about the marker. After pressing the marker, the user can then change the location of the...
SwimmingG
1

votes
1

answer
1.3k

Views

React navigation: stack navigator with tab navigator is not working

We checked other issues and documentation as well but couldn't find any solution that will solve this issue. Here is the code: It shows error message : react children only expected to receive a single react element child. const MainTabBar = TabNavigator( { Home: {screen: HomeScreen}, Profile: {scre...
Artur
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
0

answer
423

Views

React Navigation check when this.props.navigation.state.params change

I'm having a problem with this.props.navigation.state.params. I have a Drawer Navigator that have some menus, and some menus have submenus, when I tap a submenu the app loads a 'Category', for example. All submenus from 'Category' menu will be redirected to the same screen, but everyone has its own...
1

votes
1

answer
259

Views

React Native StackNavigator disappearing on re-entry

We are encountering a very bizarre scenario with react-navigation in our React Native application that is only observed on Android (both in the emulator and on physical devices AND for debug builds as well as release builds), but it works fine on iOS. Context We have an existing native application,...
Jason K
1

votes
1

answer
195

Views

React Native - Platform-Independent Tab Navigation Method

I have come to a Tutorial to apply an interesting Tabs Navigation, basically it install and use the react-native-tabs npm and allow the React Native Application use a Tab Component that can be run in Both Android and IOS Platform. The application of the Tutorial Link is simple, the Tab just simple l...
I am a Student
1

votes
0

answer
64

Views

No methods of component getting called when coming back to it (react-native) [duplicate]

This question already has an answer here: Pass props from child to parent react navigation 1 answer React navigation goback() and update parent state 6 answers I'm using react-native (version: 0.52.2) along with redux and react-navigation(version: 1.5.6). I've 2 screens as A and B. When I navigate...
Shubham
1

votes
0

answer
224

Views

issues in open new screen using stack navigator in react native

I am new in react native.In my application I define DrawerNavigator and StackNavigator in App.js,where DrawerNavigator is working fine. But stackNavigator caused issue in open new Screen. I have search about this issues for more hours but not find solution,Can any buddy help me to fix this issues? A...
VANDANA NAKUM
1

votes
1

answer
80

Views

Filtering intermediate screens in StackNavigator state

I use react-navigation with react-navigation-redux-helpers. And let's say i have a stackNavigator with such a state: { index: 2, routes: [route1, route2, route3] } In some moment I need to filter out route2: { index: 1, routes: [route1, route3] } If I do this with NavigationActions.reset, it will be...

View additional questions